refactor: simplify error handling

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

.devcontainer/Dockerfile

@@ -4,5 +4,15 @@ FROM ghcr.io/chatwoot/chatwoot_codespace:latest
 
 # Do the set up required for chatwoot app
 WORKDIR /workspace
+
+# Copy dependency files first for better caching
+COPY package.json pnpm-lock.yaml ./
+COPY Gemfile Gemfile.lock ./
+
+# Install dependencies (will be cached if files don't change)
+RUN pnpm install --frozen-lockfile && \
+    gem install bundler && \
+    bundle install --jobs=$(nproc)
+
+# Copy source code after dependencies are installed
 COPY . /workspace
-RUN yarn && gem install bundler && bundle install

.devcontainer/Dockerfile.base

@@ -1,12 +1,16 @@
-
-ARG VARIANT
+ARG VARIANT="ubuntu-22.04"
 
 FROM mcr.microsoft.com/vscode/devcontainers/base:0-${VARIANT}
 
+ENV DEBIAN_FRONTEND=noninteractive
+
 ARG NODE_VERSION
 ARG RUBY_VERSION
 ARG USER_UID
 ARG USER_GID
+ARG PNPM_VERSION="10.2.0"
+ENV PNPM_VERSION ${PNPM_VERSION}
+ENV RUBY_CONFIGURE_OPTS=--disable-install-doc
 
 # Update args in docker-compose.yaml to set the UID/GID of the "vscode" user.
 RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
@@ -15,61 +19,80 @@ RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
         && chmod -R $USER_UID:$USER_GID /home/vscode; \
     fi
 
-RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-  && apt-get -y install --no-install-recommends \
-    build-essential \
-    libssl-dev \
-    zlib1g-dev \
-    gnupg2 \
-    tar \
-    tzdata \
-    postgresql-client \
-    libpq-dev \
-    yarn \
-    git \
-    imagemagick \
-    tmux \
-    zsh \
-    git-flow \
-    npm \
-    libyaml-dev
+RUN NODE_MAJOR=$(echo $NODE_VERSION | cut -d. -f1) \
+    && curl -fsSL https://deb.nodesource.com/setup_${NODE_MAJOR}.x | bash - \
+    && apt-get update \
+    && apt-get -y install --no-install-recommends \
+        build-essential \
+        libssl-dev \
+        zlib1g-dev \
+        gnupg \
+        tar \
+        tzdata \
+        postgresql-client \
+        libpq-dev \
+        git \
+        imagemagick \
+        libyaml-dev \
+        curl \
+        ca-certificates \
+        tmux \
+        nodejs \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
-# Install rbenv and ruby
-RUN git clone https://github.com/rbenv/rbenv.git ~/.rbenv \
+# Install rbenv and ruby for root user first
+RUN git clone --depth 1 https://github.com/rbenv/rbenv.git ~/.rbenv \
     &&  echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc \
     &&  echo 'eval "$(rbenv init -)"' >> ~/.bashrc
 ENV PATH "/root/.rbenv/bin/:/root/.rbenv/shims/:$PATH"
-RUN git clone https://github.com/rbenv/ruby-build.git && \
+RUN git clone --depth 1 https://github.com/rbenv/ruby-build.git && \
     PREFIX=/usr/local ./ruby-build/install.sh
 
 RUN rbenv install $RUBY_VERSION && \
     rbenv global $RUBY_VERSION && \
     rbenv versions
 
-# Install overmind
+# Set up rbenv for vscode user
+RUN su - vscode -c "git clone --depth 1 https://github.com/rbenv/rbenv.git ~/.rbenv" \
+    && su - vscode -c "echo 'export PATH=\"\$HOME/.rbenv/bin:\$PATH\"' >> ~/.bashrc" \
+    && su - vscode -c "echo 'eval \"\$(rbenv init -)\"' >> ~/.bashrc" \
+    && su - vscode -c "PATH=\"/home/vscode/.rbenv/bin:\$PATH\" rbenv install $RUBY_VERSION" \
+    && su - vscode -c "PATH=\"/home/vscode/.rbenv/bin:\$PATH\" rbenv global $RUBY_VERSION"
+
+# Install overmind and gh in single layer
 RUN curl -L https://github.com/DarthSim/overmind/releases/download/v2.1.0/overmind-v2.1.0-linux-amd64.gz > overmind.gz \
   && gunzip overmind.gz \
-  && sudo mv overmind /usr/local/bin \
-  && chmod +x /usr/local/bin/overmind
-
-
-# Install gh
-RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \
-   && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
-   && sudo apt update \
-   && sudo apt install gh
+  && mv overmind /usr/local/bin \
+  && chmod +x /usr/local/bin/overmind \
+  && curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \
+  && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
+  && apt-get update \
+  && apt-get install -y --no-install-recommends gh \
+  && apt-get clean \
+  && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
 
 # Do the set up required for chatwoot app
 WORKDIR /workspace
-COPY . /workspace
+RUN chown vscode:vscode /workspace
 
-# set up ruby
-COPY Gemfile Gemfile.lock ./
-RUN gem install bundler && bundle install
+# set up node js, pnpm and claude code in single layer
+RUN npm install -g pnpm@${PNPM_VERSION} @anthropic-ai/claude-code \
+    && npm cache clean --force
 
-# set up node js
-RUN npm install n -g && \
-    n $NODE_VERSION
-RUN npm install --global yarn
-RUN yarn
+# Switch to vscode user
+USER vscode
+ENV PATH="/home/vscode/.rbenv/bin:/home/vscode/.rbenv/shims:$PATH"
+
+# Copy dependency files first for better caching
+COPY --chown=vscode:vscode Gemfile Gemfile.lock package.json pnpm-lock.yaml ./
+
+# Install dependencies as vscode user
+RUN eval "$(rbenv init -)" \
+    && gem install bundler -N \
+    && bundle install --jobs=$(nproc) \
+    && pnpm install --frozen-lockfile
+
+# Copy source code after dependencies are installed
+COPY --chown=vscode:vscode . /workspace

.devcontainer/devcontainer.json

@@ -4,17 +4,26 @@
   "dockerComposeFile": "docker-compose.yml",
 
   "settings": {
-    "terminal.integrated.shell.linux": "/bin/zsh"
+    "terminal.integrated.shell.linux": "/bin/zsh",
+    "extensions.showRecommendationsOnlyOnDemand": true,
+    "editor.formatOnSave": true,
+    "files.trimTrailingWhitespace": true,
+    "files.insertFinalNewline": true,
+    "search.exclude": {
+      "**/node_modules": true,
+      "**/tmp": true,
+      "**/log": true,
+      "**/coverage": true,
+      "**/public/packs": true
+    }
   },
 
 
   // Add the IDs of extensions you want installed when the container is created.
   "extensions": [
-    "rebornix.Ruby",
+    "Shopify.ruby-lsp",
     "misogi.ruby-rubocop",
-    "wingrunr21.vscode-ruby",
     "davidpallinder.rails-test-runner",
-    "eamodio.gitlens",
     "github.copilot",
     "mrmlnc.vscode-duplicate"
   ],
@@ -23,15 +32,15 @@
   // 5432 postgres
   // 6379 redis
   // 1025,8025 mailhog
-  "forwardPorts": [8025, 3000, 3035],
+  "forwardPorts": [8025, 3000, 3036],
 
-  "postCreateCommand": ".devcontainer/scripts/setup.sh && POSTGRES_STATEMENT_TIMEOUT=600s bundle exec rake db:chatwoot_prepare && yarn",
+  "postCreateCommand": ".devcontainer/scripts/setup.sh && POSTGRES_STATEMENT_TIMEOUT=600s bundle exec rake db:chatwoot_prepare && pnpm install",
   "portsAttributes": {
     "3000": {
       "label": "Rails Server"
     },
-    "3035": {
-      "label": "Webpack Dev Server"
+    "3036": {
+      "label": "Vite Dev Server"
     },
     "8025": {
       "label": "Mailhog UI"

.devcontainer/docker-compose.base.yml

@@ -0,0 +1,18 @@
+# Docker Compose file for building the base image in GitHub Actions
+# Usage: docker-compose -f .devcontainer/docker-compose.base.yml build base
+
+version: '3'
+
+services:
+  base:
+    build:
+      context: ..
+      dockerfile: .devcontainer/Dockerfile.base
+      args:
+        VARIANT: 'ubuntu-22.04'
+        NODE_VERSION: '23.7.0'
+        RUBY_VERSION: '3.4.4'
+        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
+        USER_UID: '1000'
+        USER_GID: '1000'
+    image: ghcr.io/chatwoot/chatwoot_codespace:latest

.devcontainer/docker-compose.yml

@@ -5,19 +5,6 @@
 version: '3'
 
 services:
-  base:
-    build:
-      context: ..
-      dockerfile: .devcontainer/Dockerfile.base
-      args:
-        VARIANT: 'ubuntu-22.04'
-        NODE_VERSION: '23.7.0'
-        RUBY_VERSION: '3.4.4'
-        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
-        USER_UID: '1000'
-        USER_GID: '1000'
-    image: base:latest
-
   app:
     build:
       context: ..

.devcontainer/scripts/setup.sh

@@ -2,12 +2,15 @@ cp .env.example .env
 sed -i -e '/REDIS_URL/ s/=.*/=redis:\/\/localhost:6379/' .env
 sed -i -e '/POSTGRES_HOST/ s/=.*/=localhost/' .env
 sed -i -e '/SMTP_ADDRESS/ s/=.*/=localhost/' .env
-sed -i -e "/FRONTEND_URL/ s/=.*/=https:\/\/$CODESPACE_NAME-3000.githubpreview.dev/" .env
-sed -i -e "/WEBPACKER_DEV_SERVER_PUBLIC/ s/=.*/=https:\/\/$CODESPACE_NAME-3035.githubpreview.dev/" .env
-# uncomment the webpacker env variable
-sed -i -e '/WEBPACKER_DEV_SERVER_PUBLIC/s/^# //' .env
-# fix the error with webpacker
-echo 'export NODE_OPTIONS=--openssl-legacy-provider' >> ~/.zshrc
+sed -i -e "/FRONTEND_URL/ s/=.*/=https:\/\/$CODESPACE_NAME-3000.app.github.dev/" .env
+
+# Setup Claude Code API key if available
+if [ -n "$CLAUDE_CODE_API_KEY" ]; then
+  mkdir -p ~/.claude
+  echo '{"apiKeyHelper": "~/.claude/anthropic_key.sh"}' > ~/.claude/settings.json
+  echo "echo \"$CLAUDE_CODE_API_KEY\"" > ~/.claude/anthropic_key.sh
+  chmod +x ~/.claude/anthropic_key.sh
+fi
 
 # codespaces make the ports public
-gh codespace ports visibility 3000:public 3035:public 8025:public -c $CODESPACE_NAME
+gh codespace ports visibility 3000:public 3036:public 8025:public -c $CODESPACE_NAME

.github/workflows/publish_codespace_image.yml

@@ -19,6 +19,5 @@ jobs:
 
     - name: Build the Codespace Base Image
       run: |
-        docker-compose -f .devcontainer/docker-compose.yml build base
-        docker tag base:latest ghcr.io/chatwoot/chatwoot_codespace:latest
+        docker compose -f .devcontainer/docker-compose.base.yml build base
         docker push ghcr.io/chatwoot/chatwoot_codespace:latest

Makefile

@@ -41,6 +41,7 @@ run:
 
 force_run:
 	rm -f ./.overmind.sock
+	rm -f tmp/pids/*.pid
 	overmind start -f Procfile.dev
 
 debug:

app/controllers/api/v1/accounts/agent_bots_controller.rb

@@ -29,6 +29,11 @@ class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
     head :ok
   end
 
+  def reset_access_token
+    @agent_bot.access_token.regenerate_token
+    @agent_bot.reload
+  end
+
   private
 
   def agent_bot

app/controllers/api/v1/accounts/google/authorizations_controller.rb

@@ -1,32 +1,23 @@
-class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
   include GoogleConcern
-  before_action :check_authorization
 
   def create
-    email = params[:authorization][:email]
     redirect_url = google_client.auth_code.authorize_url(
       {
         redirect_uri: "#{base_url}/google/callback",
-        scope: 'email profile https://mail.google.com/',
+        scope: scope,
         response_type: 'code',
         prompt: 'consent', # the oauth flow does not return a refresh token, this is supposed to fix it
         access_type: 'offline', # the default is 'online'
+        state: state,
         client_id: GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
       }
     )
 
     if redirect_url
-      cache_key = "google::#{email.downcase}"
-      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
       render json: { success: true, url: redirect_url }
     else
       render json: { success: false }, status: :unprocessable_entity
     end
   end
-
-  private
-
-  def check_authorization
-    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
-  end
 end

app/controllers/api/v1/accounts/instagram/authorizations_controller.rb

@@ -1,7 +1,6 @@
-class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
   include InstagramConcern
   include Instagram::IntegrationHelper
-  before_action :check_authorization
 
   def create
     # https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/business-login#step-1--get-authorization
@@ -21,10 +20,4 @@ class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts
       render json: { success: false }, status: :unprocessable_entity
     end
   end
-
-  private
-
-  def check_authorization
-    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
-  end
 end

app/controllers/api/v1/accounts/microsoft/authorizations_controller.rb

@@ -1,28 +1,19 @@
-class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
   include MicrosoftConcern
-  before_action :check_authorization
 
   def create
-    email = params[:authorization][:email]
     redirect_url = microsoft_client.auth_code.authorize_url(
       {
         redirect_uri: "#{base_url}/microsoft/callback",
-        scope: 'offline_access https://outlook.office.com/IMAP.AccessAsUser.All https://outlook.office.com/SMTP.Send openid profile',
+        scope: scope,
+        state: state,
         prompt: 'consent'
       }
     )
     if redirect_url
-      cache_key = "microsoft::#{email.downcase}"
-      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
       render json: { success: true, url: redirect_url }
     else
       render json: { success: false }, status: :unprocessable_entity
     end
   end
-
-  private
-
-  def check_authorization
-    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
-  end
 end

app/controllers/api/v1/accounts/oauth_authorization_controller.rb

@@ -0,0 +1,23 @@
+class Api::V1::Accounts::OauthAuthorizationController < Api::V1::Accounts::BaseController
+  before_action :check_authorization
+
+  protected
+
+  def scope
+    ''
+  end
+
+  def state
+    Current.account.to_sgid(expires_in: 15.minutes).to_s
+  end
+
+  def base_url
+    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  end
+
+  private
+
+  def check_authorization
+    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
+  end
+end

app/controllers/api/v1/profiles_controller.rb

@@ -38,6 +38,11 @@ class Api::V1::ProfilesController < Api::BaseController
     head :ok
   end
 
+  def reset_access_token
+    @user.access_token.regenerate_token
+    @user.reload
+  end
+
   private
 
   def set_user

app/controllers/concerns/google_concern.rb

@@ -14,7 +14,7 @@ module GoogleConcern
 
   private
 
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  def scope
+    'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://mail.google.com/'
   end
 end

app/controllers/concerns/microsoft_concern.rb

@@ -15,7 +15,7 @@ module MicrosoftConcern
 
   private
 
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  def scope
+    'offline_access https://outlook.office.com/IMAP.AccessAsUser.All https://outlook.office.com/SMTP.Send openid profile'
   end
 end

app/controllers/google/callbacks_controller.rb

@@ -12,6 +12,16 @@ class Google::CallbacksController < OauthCallbackController
 
   private
 
+  def verify_scopes
+    granted_scopes = parsed_body['scope']&.split || []
+    required_scopes = scope.split
+
+    missing_scopes = required_scopes - granted_scopes
+    return if missing_scopes.empty?
+
+    raise StandardError, I18n.t('errors.oauth.insufficient_scopes', scopes: missing_scopes.join(', '))
+  end
+
   def provider_name
     'google'
   end
@@ -24,4 +34,13 @@ class Google::CallbacksController < OauthCallbackController
     # from GoogleConcern
     google_client
   end
+
+  def handle_error(exception)
+    ChatwootExceptionTracker.new(exception).capture_exception
+
+    error_message = exception.message || I18n.t('errors.oauth.authorization_failed')
+    redirect_url = "#{ENV.fetch('FRONTEND_URL', 'http://localhost:3000')}/app/accounts/#{account.id}/settings/inboxes/new/email"
+
+    redirect_to "#{redirect_url}?error=#{CGI.escape(error_message)}"
+  end
 end

app/controllers/oauth_callback_controller.rb

@@ -5,11 +5,10 @@ class OauthCallbackController < ApplicationController
       redirect_uri: "#{base_url}/#{provider_name}/callback"
     )
 
+    verify_scopes
     handle_response
-    ::Redis::Alfred.delete(cache_key)
   rescue StandardError => e
-    ChatwootExceptionTracker.new(e).capture_exception
-    redirect_to '/'
+    handle_error(e)
   end
 
   private
@@ -64,8 +63,17 @@ class OauthCallbackController < ApplicationController
     raise NotImplementedError
   end
 
-  def cache_key
-    "#{provider_name}::#{users_data['email'].downcase}"
+  def verify_scopes
+    true
+  end
+
+  def failure_redirect_url
+    '/'
+  end
+
+  def handle_error(exception)
+    ChatwootExceptionTracker.new(exception).capture_exception
+    redirect_to failure_redirect_url
   end
 
   def create_channel_with_inbox
@@ -85,12 +93,14 @@ class OauthCallbackController < ApplicationController
     decoded_token[0]
   end
 
-  def account_id
-    ::Redis::Alfred.get(cache_key)
+  def account_from_signed_id
+    raise 'Missing state variable' if params[:state].blank?
+
+    GlobalID::Locator.locate_signed(params[:state])
   end
 
   def account
-    @account ||= Account.find(account_id)
+    @account ||= account_from_signed_id
   end
 
   # Fallback name, for when name field is missing from users_data

app/controllers/public/api/v1/portals/articles_controller.rb

@@ -1,7 +1,7 @@
 class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::BaseController
   before_action :ensure_custom_domain_request, only: [:show, :index]
   before_action :portal
-  before_action :set_category, except: [:index, :show]
+  before_action :set_category, except: [:index, :show, :tracking_pixel]
   before_action :set_article, only: [:show]
   layout 'portal'
 
@@ -15,6 +15,21 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def show; end
 
+  def tracking_pixel
+    @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
+    return head :not_found unless @article
+
+    @article.increment_view_count if @article.published?
+
+    # Serve the 1x1 tracking pixel with 24-hour private cache
+    # Private cache bypasses CDN but allows browser caching to prevent duplicate views from same user
+    expires_in 24.hours, public: false
+    response.headers['Content-Type'] = 'image/png'
+
+    pixel_path = Rails.public_path.join('assets/images/tracking-pixel.png')
+    send_file pixel_path, type: 'image/png', disposition: 'inline'
+  end
+
   private
 
   def limit_results
@@ -39,7 +54,6 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @article.increment_view_count if @article.published?
     @parsed_content = render_article_content(@article.content)
   end
 

app/javascript/dashboard/api/agentBots.js

@@ -21,6 +21,10 @@ class AgentBotsAPI extends ApiClient {
   deleteAgentBotAvatar(botId) {
     return axios.delete(`${this.url}/${botId}/avatar`);
   }
+
+  resetAccessToken(botId) {
+    return axios.post(`${this.url}/${botId}/reset_access_token`);
+  }
 }
 
 export default new AgentBotsAPI();

app/javascript/dashboard/api/auth.js

@@ -102,4 +102,8 @@ export default {
     const urlData = endPoints('resendConfirmation');
     return axios.post(urlData.url);
   },
+  resetAccessToken() {
+    const urlData = endPoints('resetAccessToken');
+    return axios.post(urlData.url);
+  },
 };

app/javascript/dashboard/api/endPoints.js

@@ -51,6 +51,9 @@ const endPoints = {
   resendConfirmation: {
     url: '/api/v1/profile/resend_confirmation',
   },
+  resetAccessToken: {
+    url: '/api/v1/profile/reset_access_token',
+  },
 };
 
 export default page => {

app/javascript/dashboard/api/specs/agentBots.spec.js

@@ -9,5 +9,6 @@ describe('#AgentBotsAPI', () => {
     expect(AgentBotsAPI).toHaveProperty('create');
     expect(AgentBotsAPI).toHaveProperty('update');
     expect(AgentBotsAPI).toHaveProperty('delete');
+    expect(AgentBotsAPI).toHaveProperty('resetAccessToken');
   });
 });

app/javascript/dashboard/assets/scss/widgets/_base.scss

@@ -101,7 +101,7 @@ select {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
   background-size: 9px 6px;
 
-  @apply field-base h-10 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
+  @apply field-base h-10 bg-origin-content bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
 
   &[disabled] {
     @apply field-disabled;

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -3,7 +3,7 @@
 }
 
 .tabs--container--with-border {
-  @apply border-b border-n-weak;
+  @apply border-b border-b-n-weak;
 }
 
 .tabs--container--compact.tab--chat-type {

app/javascript/dashboard/components-next/Conversation/SidepanelSwitch.vue

@@ -0,0 +1,87 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { computed } from 'vue';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+const { updateUISettings } = useUISettings();
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const showCopilotTab = computed(() =>
+  isFeatureEnabledonAccount.value(currentAccountId.value, FEATURE_FLAGS.CAPTAIN)
+);
+
+const { uiSettings } = useUISettings();
+const isContactSidebarOpen = computed(
+  () => uiSettings.value.is_contact_sidebar_open
+);
+const isCopilotPanelOpen = computed(
+  () => uiSettings.value.is_copilot_panel_open
+);
+
+const toggleConversationSidebarToggle = () => {
+  updateUISettings({
+    is_contact_sidebar_open: !isContactSidebarOpen.value,
+    is_copilot_panel_open: false,
+  });
+};
+
+const handleConversationSidebarToggle = () => {
+  updateUISettings({
+    is_contact_sidebar_open: true,
+    is_copilot_panel_open: false,
+  });
+};
+
+const handleCopilotSidebarToggle = () => {
+  updateUISettings({
+    is_contact_sidebar_open: false,
+    is_copilot_panel_open: true,
+  });
+};
+
+const keyboardEvents = {
+  'Alt+KeyO': {
+    action: toggleConversationSidebarToggle,
+  },
+};
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-center items-center absolute top-24 ltr:right-2 rtl:left-2 bg-n-solid-2 border border-n-weak rounded-full gap-2 p-1"
+  >
+    <Button
+      v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"
+      ghost
+      slate
+      sm
+      class="!rounded-full"
+      :class="{
+        'bg-n-alpha-2': isContactSidebarOpen,
+      }"
+      icon="i-ph-user-bold"
+      @click="handleConversationSidebarToggle"
+    />
+    <Button
+      v-if="showCopilotTab"
+      v-tooltip.bottom="$t('CONVERSATION.SIDEBAR.COPILOT')"
+      ghost
+      slate
+      class="!rounded-full"
+      :class="{
+        'bg-n-alpha-2 !text-n-iris-9': isCopilotPanelOpen,
+      }"
+      sm
+      icon="i-woot-captain"
+      @click="handleCopilotSidebarToggle"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/SidebarActionsHeader.story.vue

@@ -1,21 +1,29 @@
 <script setup>
-import CopilotHeader from './CopilotHeader.vue';
+import SidebarActionsHeader from './SidebarActionsHeader.vue';
 </script>
 
 <template>
   <Story
-    title="Captain/Copilot/CopilotHeader"
+    title="Components/SidebarActionsHeader"
     :layout="{ type: 'grid', width: '800px' }"
   >
     <!-- Default State -->
     <Variant title="Default State">
-      <CopilotHeader />
+      <SidebarActionsHeader title="Default State" />
     </Variant>
 
     <!-- With New Conversation Button -->
     <Variant title="With New Conversation Button">
       <!-- eslint-disable-next-line vue/prefer-true-attribute-shorthand -->
-      <CopilotHeader :has-messages="true" />
+      <SidebarActionsHeader
+        title="With New Conversation Button"
+        :buttons="[
+          {
+            key: 'new_conversation',
+            icon: 'i-lucide-plus',
+          },
+        ]"
+      />
     </Variant>
   </Story>
 </template>

app/javascript/dashboard/components-next/SidebarActionsHeader.vue

@@ -0,0 +1,47 @@
+<script setup>
+import Button from './button/Button.vue';
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  buttons: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['click', 'close']);
+
+const handleButtonClick = button => {
+  emit('click', button.key);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between px-4 py-2 border-b border-n-weak h-12"
+  >
+    <div class="flex items-center justify-between gap-2 flex-1">
+      <span class="font-medium text-sm text-n-slate-12">{{ title }}</span>
+      <div class="flex items-center">
+        <Button
+          v-for="button in buttons"
+          :key="button.key"
+          v-tooltip="button.tooltip"
+          :icon="button.icon"
+          ghost
+          sm
+          @click="handleButtonClick(button)"
+        />
+        <Button
+          v-tooltip="$t('GENERAL.CLOSE')"
+          icon="i-lucide-x"
+          ghost
+          sm
+          @click="$emit('close')"
+        />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/button/ConfirmButton.story.vue

@@ -0,0 +1,41 @@
+<script setup>
+import ConfirmButton from './ConfirmButton.vue';
+import { ref } from 'vue';
+
+const count = ref(0);
+
+const incrementCount = () => {
+  count.value += 1;
+};
+</script>
+
+<template>
+  <Story
+    title="Components/ConfirmButton"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="Basic">
+      <div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
+        <p>{{ count }}</p>
+        <ConfirmButton
+          label="Delete"
+          confirm-label="Confirm?"
+          @click="incrementCount"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Color Change">
+      <div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
+        <p>{{ count }}</p>
+        <ConfirmButton
+          label="Archive"
+          confirm-label="Confirm?"
+          color="slate"
+          confirm-color="amber"
+          @click="incrementCount"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/button/ConfirmButton.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { ref, computed } from 'vue';
+import Button from './Button.vue';
+
+const props = defineProps({
+  label: { type: [String, Number], default: '' },
+  confirmLabel: { type: [String, Number], default: '' },
+  color: { type: String, default: 'blue' },
+  confirmColor: { type: String, default: 'ruby' },
+  confirmHint: { type: String, default: '' },
+  variant: { type: String, default: null },
+  size: { type: String, default: null },
+  justify: { type: String, default: null },
+  icon: { type: [String, Object, Function], default: '' },
+  trailingIcon: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['click']);
+
+const isConfirmMode = ref(false);
+const isClicked = ref(false);
+
+const currentLabel = computed(() => {
+  return isConfirmMode.value ? props.confirmLabel : props.label;
+});
+
+const currentColor = computed(() => {
+  return isConfirmMode.value ? props.confirmColor : props.color;
+});
+const resetConfirmMode = () => {
+  isConfirmMode.value = false;
+  isClicked.value = false;
+};
+
+const handleClick = () => {
+  if (!isConfirmMode.value) {
+    isConfirmMode.value = true;
+  } else {
+    isClicked.value = true;
+    emit('click');
+    setTimeout(resetConfirmMode, 400);
+  }
+};
+</script>
+
+<template>
+  <div
+    class="relative"
+    :class="{
+      'animate-bounce-complete': isClicked,
+    }"
+  >
+    <Button
+      type="button"
+      :label="currentLabel"
+      :color="currentColor"
+      :variant="variant"
+      :size="size"
+      :justify="justify"
+      :icon="icon"
+      :trailing-icon="trailingIcon"
+      :is-loading="isLoading"
+      @click="handleClick"
+      @blur="resetConfirmMode"
+    >
+      <template v-if="$slots.default" #default>
+        <slot />
+      </template>
+      <template v-if="$slots.icon" #icon>
+        <slot name="icon" />
+      </template>
+    </Button>
+    <div
+      v-if="isConfirmMode && confirmHint"
+      class="absolute mt-1 w-full text-[10px] text-center text-n-slate-10"
+    >
+      {{ confirmHint }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes bounce-complete {
+  0% {
+    transform: scale(0.95);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.animate-bounce-complete {
+  animation: bounce-complete 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+</style>

app/javascript/dashboard/components-next/copilot/Copilot.vue

@@ -3,13 +3,15 @@ import { nextTick, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useTrack } from 'dashboard/composables';
 import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 import CopilotInput from './CopilotInput.vue';
 import CopilotLoader from './CopilotLoader.vue';
 import CopilotAgentMessage from './CopilotAgentMessage.vue';
 import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
 import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
-import Icon from '../icon/Icon.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
 
 const props = defineProps({
   supportAgent: {
@@ -54,10 +56,6 @@ const useSuggestion = opt => {
   useTrack(COPILOT_EVENTS.SEND_SUGGESTED);
 };
 
-const handleReset = () => {
-  emit('reset');
-};
-
 const chatContainer = ref(null);
 
 const scrollToBottom = async () => {
@@ -82,6 +80,21 @@ const promptOptions = [
   },
 ];
 
+const { updateUISettings } = useUISettings();
+
+const closeCopilotPanel = () => {
+  updateUISettings({
+    is_copilot_panel_open: false,
+    is_contact_sidebar_open: false,
+  });
+};
+
+const handleSidebarAction = action => {
+  if (action === 'reset') {
+    emit('reset');
+  }
+};
+
 watch(
   [() => props.messages, () => props.isCaptainTyping],
   () => {
@@ -93,6 +106,18 @@ watch(
 
 <template>
   <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
+    <SidebarActionsHeader
+      :title="$t('CAPTAIN.COPILOT.TITLE')"
+      :buttons="[
+        {
+          key: 'reset',
+          icon: 'i-lucide-refresh-ccw',
+          tooltip: $t('CAPTAIN.COPILOT.RESET'),
+        },
+      ]"
+      @click="handleSidebarAction"
+      @close="closeCopilotPanel"
+    />
     <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
       <template v-for="message in messages" :key="message.id">
         <CopilotAgentMessage
@@ -139,14 +164,6 @@ watch(
           @set-assistant="$event => emit('setAssistant', $event)"
         />
         <div v-else />
-        <button
-          v-if="messages.length"
-          class="text-xs flex items-center gap-1 hover:underline"
-          @click="handleReset"
-        >
-          <i class="i-lucide-refresh-ccw" />
-          <span>{{ $t('CAPTAIN.COPILOT.RESET') }}</span>
-        </button>
       </div>
       <CopilotInput class="mb-1 w-full" @send="sendMessage" />
     </div>

app/javascript/dashboard/components-next/copilot/CopilotHeader.vue

@@ -1,32 +0,0 @@
-<script setup>
-import Button from '../button/Button.vue';
-defineProps({
-  hasMessages: {
-    type: Boolean,
-    default: false,
-  },
-});
-defineEmits(['reset', 'close']);
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-between px-5 py-2 border-b border-n-weak h-12"
-  >
-    <div class="flex items-center justify-between gap-2 flex-1">
-      <span class="font-medium text-sm text-n-slate-12">
-        {{ $t('CAPTAIN.COPILOT.TITLE') }}
-      </span>
-      <div class="flex items-center">
-        <Button
-          v-if="hasMessages"
-          icon="i-lucide-plus"
-          ghost
-          sm
-          @click="$emit('reset')"
-        />
-        <Button icon="i-lucide-x" ghost sm @click="$emit('close')" />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -477,7 +477,7 @@ const menuItems = computed(() => {
 
 <template>
   <aside
-    class="w-[12.5rem] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
+    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
   >
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">
@@ -519,7 +519,7 @@ const menuItems = computed(() => {
       </div>
     </section>
     <nav class="grid flex-grow gap-2 px-2 pb-5 overflow-y-scroll no-scrollbar">
-      <ul class="flex flex-col gap-2 m-0 list-none">
+      <ul class="flex flex-col gap-1.5 m-0 list-none">
         <SidebarGroup
           v-for="item in menuItems"
           :key="item.name"

app/javascript/dashboard/components/ChatList.vue

@@ -814,7 +814,7 @@ watch(conversationFilters, (newVal, oldVal) => {
     class="flex flex-col flex-shrink-0 bg-n-solid-1 conversations-list-wrap"
     :class="[
       { hidden: !showConversationList },
-      isOnExpandedLayout ? 'basis-full' : 'w-[360px] 2xl:w-[420px]',
+      isOnExpandedLayout ? 'basis-full' : 'w-[340px] 2xl:w-[412px]',
     ]"
   >
     <slot />

app/javascript/dashboard/components/ChatListHeader.vue

@@ -80,16 +80,14 @@ const toggleConversationLayout = () => {
 
 <template>
   <div
-    class="flex items-center justify-between gap-2 px-4"
+    class="flex items-center justify-between gap-2 px-3 h-12"
     :class="{
-      'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
-      'pt-3 pb-2': showV4View,
-      'mb-2 pb-0': !showV4View,
+      'border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
     }"
   >
     <div class="flex items-center justify-center min-w-0">
       <h1
-        class="text-lg font-medium truncate text-n-slate-12"
+        class="text-base font-medium truncate text-n-slate-12"
         :title="pageTitle"
       >
         {{ pageTitle }}

app/javascript/dashboard/components/Snackbar.vue

@@ -20,7 +20,7 @@ export default {
 <template>
   <div>
     <div
-      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
+      class="shadow-sm bg-n-slate-12 dark:bg-n-slate-7 rounded-lg items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
     >
       <div class="text-sm font-medium text-white dark:text-white">
         {{ message }}
@@ -29,7 +29,7 @@ export default {
         <router-link
           v-if="action.type == 'link'"
           :to="action.to"
-          class="font-medium cursor-pointer select-none text-woot-500 dark:text-woot-500 hover:text-woot-600 dark:hover:text-woot-600"
+          class="font-medium cursor-pointer select-none text-n-blue-10 hover:text-n-brand"
         >
           {{ action.message }}
         </router-link>

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -1,62 +1,72 @@
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
 import WootSnackbar from './Snackbar.vue';
 import { emitter } from 'shared/helpers/mitt';
+import { useI18n } from 'vue-i18n';
 
-export default {
-  components: {
-    WootSnackbar,
-  },
-  props: {
-    duration: {
-      type: Number,
-      default: 2500,
-    },
+const props = defineProps({
+  duration: {
+    type: Number,
+    default: 2500,
   },
+});
 
-  data() {
-    return {
-      snackMessages: [],
-    };
-  },
+const { t } = useI18n();
 
-  mounted() {
-    emitter.on('newToastMessage', this.onNewToastMessage);
-  },
-  unmounted() {
-    emitter.off('newToastMessage', this.onNewToastMessage);
-  },
-  methods: {
-    onNewToastMessage({ message: originalMessage, action }) {
-      // FIX ME: This is a temporary workaround to pass string from functions
-      // that doesn't have the context of the VueApp.
-      const usei18n = action?.usei18n;
-      const duration = action?.duration || this.duration;
-      const message = usei18n ? this.$t(originalMessage) : originalMessage;
+const snackMessages = ref([]);
+const snackbarContainer = ref(null);
 
-      this.snackMessages.push({
-        key: new Date().getTime(),
-        message,
-        action,
-      });
-      window.setTimeout(() => {
-        this.snackMessages.splice(0, 1);
-      }, duration);
-    },
-  },
+const showPopover = () => {
+  try {
+    const el = snackbarContainer.value;
+    if (el?.matches(':popover-open')) {
+      el.hidePopover();
+    }
+    el?.showPopover();
+  } catch (e) {
+    // ignore
+  }
 };
+
+const onNewToastMessage = ({ message: originalMessage, action }) => {
+  const message = action?.usei18n ? t(originalMessage) : originalMessage;
+  const duration = action?.duration || props.duration;
+
+  snackMessages.value.push({
+    key: Date.now(),
+    message,
+    action,
+  });
+
+  nextTick(showPopover);
+
+  setTimeout(() => {
+    snackMessages.value.shift();
+  }, duration);
+};
+
+onMounted(() => {
+  emitter.on('newToastMessage', onNewToastMessage);
+});
+
+onUnmounted(() => {
+  emitter.off('newToastMessage', onNewToastMessage);
+});
 </script>
 
 <template>
-  <transition-group
-    name="toast-fade"
-    tag="div"
-    class="left-0 my-0 mx-auto max-w-[25rem] overflow-hidden absolute right-0 text-center top-4 z-[9999]"
+  <div
+    ref="snackbarContainer"
+    popover="manual"
+    class="fixed top-4 left-1/2 -translate-x-1/2 max-w-[25rem] w-[calc(100%-2rem)] text-center bg-transparent border-0 p-0 m-0 outline-none overflow-visible"
   >
-    <WootSnackbar
-      v-for="snackMessage in snackMessages"
-      :key="snackMessage.key"
-      :message="snackMessage.message"
-      :action="snackMessage.action"
-    />
-  </transition-group>
+    <transition-group name="toast-fade" tag="div">
+      <WootSnackbar
+        v-for="snackMessage in snackMessages"
+        :key="snackMessage.key"
+        :message="snackMessage.message"
+        :action="snackMessage.action"
+      />
+    </transition-group>
+  </div>
 </template>

app/javascript/dashboard/components/widgets/ChatTypeTabs.vue

@@ -48,12 +48,13 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <woot-tabs
     :index="activeTabIndex"
-    class="w-full px-4 py-0 tab--chat-type"
+    class="w-full px-3 -mt-1 py-0 tab--chat-type"
     @change="onTabChange"
   >
     <woot-tabs-item
       v-for="(item, index) in items"
       :key="item.key"
+      class="text-sm"
       :index="index"
       :name="item.name"
       :count="item.count"

app/javascript/dashboard/components/widgets/UserAvatarWithName.vue

@@ -25,10 +25,7 @@ defineProps({
       :username="user.name"
       :status="user.availability_status"
     />
-    <span
-      class="my-0 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
-      :class="textClass"
-    >
+    <span class="my-0 truncate text-capitalize" :class="textClass">
       {{ user.name }}
     </span>
   </div>

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -4,17 +4,14 @@ import ConversationHeader from './ConversationHeader.vue';
 import DashboardAppFrame from '../DashboardApp/Frame.vue';
 import EmptyState from './EmptyState/EmptyState.vue';
 import MessagesView from './MessagesView.vue';
-import ConversationSidebar from './ConversationSidebar.vue';
 
 export default {
   components: {
-    ConversationSidebar,
     ConversationHeader,
     DashboardAppFrame,
     EmptyState,
     MessagesView,
   },
-
   props: {
     inboxId: {
       type: [Number, String],
@@ -34,7 +31,6 @@ export default {
       default: true,
     },
   },
-  emits: ['contactPanelToggle'],
   data() {
     return { activeIndex: 0 };
   },
@@ -86,9 +82,6 @@ export default {
       }
       this.$store.dispatch('conversationLabels/get', this.currentChat.id);
     },
-    onToggleContactPanel() {
-      this.$emit('contactPanelToggle');
-    },
     onDashboardAppTabChange(index) {
       this.activeIndex = index;
     },
@@ -98,7 +91,7 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap bg-n-background"
+    class="conversation-details-wrap bg-n-background relative"
     :class="{
       'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
     }"
@@ -106,15 +99,12 @@ export default {
     <ConversationHeader
       v-if="currentChat.id"
       :chat="currentChat"
-      :is-inbox-view="isInboxView"
-      :is-contact-panel-open="isContactPanelOpen"
       :show-back-button="isOnExpandedLayout && !isInboxView"
-      @contact-panel-toggle="onToggleContactPanel"
     />
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="-mt-px bg-white dashboard-app--tabs dark:bg-slate-900"
+      class="-mt-px dashboard-app--tabs border-t border-t-n-background"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -130,18 +120,12 @@ export default {
         v-if="currentChat.id"
         :inbox-id="inboxId"
         :is-inbox-view="isInboxView"
-        :is-contact-panel-open="isContactPanelOpen"
-        @contact-panel-toggle="onToggleContactPanel"
       />
       <EmptyState
         v-if="!currentChat.id && !isInboxView"
         :is-on-expanded-layout="isOnExpandedLayout"
       />
-      <ConversationSidebar
-        v-if="showContactPanel"
-        :current-chat="currentChat"
-        @toggle-contact-panel="onToggleContactPanel"
-      />
+      <slot />
     </div>
     <DashboardAppFrame
       v-for="(dashboardApp, index) in dashboardApps"

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -243,7 +243,7 @@ export default {
 
 <template>
   <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-3 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
     :class="{
       'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 border-n-weak':
         isActiveChat,
@@ -278,7 +278,7 @@ export default {
         :badge="inboxBadge"
         :username="currentContact.name"
         :status="currentContact.availability_status"
-        size="40px"
+        size="32px"
       />
     </div>
     <div

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -1,8 +1,9 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import { useElementSize } from '@vueuse/core';
 import BackButton from '../BackButton.vue';
-import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Thumbnail from '../Thumbnail.vue';
@@ -12,203 +13,161 @@ import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Linear from './linear/index.vue';
+import { useInbox } from 'dashboard/composables/useInbox';
+import { useI18n } from 'vue-i18n';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
+const props = defineProps({
+  chat: {
+    type: Object,
+    default: () => ({}),
+  },
+  showBackButton: {
+    type: Boolean,
+    default: false,
+  },
+});
 
-export default {
-  components: {
-    BackButton,
-    InboxName,
-    MoreActions,
-    Thumbnail,
-    SLACardLabel,
-    Linear,
-    NextButton,
-  },
-  mixins: [inboxMixin],
-  props: {
-    chat: {
-      type: Object,
-      default: () => {},
-    },
-    isContactPanelOpen: {
-      type: Boolean,
-      default: false,
-    },
-    showBackButton: {
-      type: Boolean,
-      default: false,
-    },
-    isInboxView: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['contactPanelToggle'],
-  setup(props, { emit }) {
-    const keyboardEvents = {
-      'Alt+KeyO': {
-        action: () => emit('contactPanelToggle'),
-      },
-    };
-    useKeyboardEvents(keyboardEvents);
-  },
-  computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-      appIntegrations: 'integrations/getAppIntegrations',
-    }),
-    chatMetadata() {
-      return this.chat.meta;
-    },
-    backButtonUrl() {
-      const {
-        params: { accountId, inbox_id: inboxId, label, teamId },
-        name,
-      } = this.$route;
-      return conversationListPageURL({
-        accountId,
-        inboxId,
-        label,
-        teamId,
-        conversationType: name === 'conversation_mentions' ? 'mention' : '',
-      });
-    },
-    isHMACVerified() {
-      if (!this.isAWebWidgetInbox) {
-        return true;
-      }
-      return this.chatMetadata.hmac_verified;
-    },
-    currentContact() {
-      return this.$store.getters['contacts/getContact'](
-        this.chat.meta.sender.id
-      );
-    },
-    isSnoozed() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.SNOOZED;
-    },
-    snoozedDisplayText() {
-      const { snoozed_until: snoozedUntil } = this.currentChat;
-      if (snoozedUntil) {
-        return `${this.$t(
-          'CONVERSATION.HEADER.SNOOZED_UNTIL'
-        )} ${snoozedReopenTime(snoozedUntil)}`;
-      }
-      return this.$t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
-    },
-    contactPanelToggleText() {
-      return `${
-        this.isContactPanelOpen
-          ? this.$t('CONVERSATION.HEADER.CLOSE')
-          : this.$t('CONVERSATION.HEADER.OPEN')
-      } ${this.$t('CONVERSATION.HEADER.DETAILS')}`;
-    },
-    inbox() {
-      const { inbox_id: inboxId } = this.chat;
-      return this.$store.getters['inboxes/getInbox'](inboxId);
-    },
-    hasMultipleInboxes() {
-      return this.$store.getters['inboxes/getInboxes'].length > 1;
-    },
-    hasSlaPolicyId() {
-      return this.chat?.sla_policy_id;
-    },
-    isLinearIntegrationEnabled() {
-      return this.appIntegrations.find(
-        integration => integration.id === 'linear' && !!integration.hooks.length
-      );
-    },
-    isLinearFeatureEnabled() {
-      return this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.LINEAR
-      );
-    },
-  },
-};
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+const conversationHeader = ref(null);
+const { width } = useElementSize(conversationHeader);
+const { isAWebWidgetInbox } = useInbox();
+
+const currentChat = computed(() => store.getters.getSelectedChat);
+const accountId = computed(() => store.getters.getCurrentAccountId);
+const isFeatureEnabledonAccount = computed(
+  () => store.getters['accounts/isFeatureEnabledonAccount']
+);
+const appIntegrations = computed(
+  () => store.getters['integrations/getAppIntegrations']
+);
+
+const chatMetadata = computed(() => props.chat.meta);
+
+const backButtonUrl = computed(() => {
+  const {
+    params: { inbox_id: inboxId, label, teamId },
+    name,
+  } = route;
+  return conversationListPageURL({
+    accountId,
+    inboxId,
+    label,
+    teamId,
+    conversationType: name === 'conversation_mentions' ? 'mention' : '',
+  });
+});
+
+const isHMACVerified = computed(() => {
+  if (!isAWebWidgetInbox.value) {
+    return true;
+  }
+  return chatMetadata.value.hmac_verified;
+});
+
+const currentContact = computed(() =>
+  store.getters['contacts/getContact'](props.chat.meta.sender.id)
+);
+
+const isSnoozed = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
+);
+
+const snoozedDisplayText = computed(() => {
+  const { snoozed_until: snoozedUntil } = currentChat.value;
+  if (snoozedUntil) {
+    return `${t('CONVERSATION.HEADER.SNOOZED_UNTIL')} ${snoozedReopenTime(snoozedUntil)}`;
+  }
+  return t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
+});
+
+const inbox = computed(() => {
+  const { inbox_id: inboxId } = props.chat;
+  return store.getters['inboxes/getInbox'](inboxId);
+});
+
+const hasMultipleInboxes = computed(
+  () => store.getters['inboxes/getInboxes'].length > 1
+);
+
+const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
+
+const isLinearIntegrationEnabled = computed(() =>
+  appIntegrations.value.find(
+    integration => integration.id === 'linear' && !!integration.hooks.length
+  )
+);
+
+const isLinearFeatureEnabled = computed(() =>
+  isFeatureEnabledonAccount.value(accountId.value, FEATURE_FLAGS.LINEAR)
+);
 </script>
 
 <template>
   <div
-    class="flex flex-col items-center justify-between px-4 py-2 border-b bg-n-background border-n-weak md:flex-row"
+    ref="conversationHeader"
+    class="flex flex-col items-center justify-center flex-1 w-full min-w-0 xl:flex-row px-3 py-2 border-b bg-n-background border-n-weak h-24 xl:h-12"
   >
     <div
-      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
-      :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
+      class="flex items-center justify-start w-full xl:w-auto max-w-full min-w-0"
     >
-      <div class="flex items-center justify-start max-w-full min-w-0 w-fit">
-        <BackButton
-          v-if="showBackButton"
-          :back-url="backButtonUrl"
-          class="ltr:mr-2 rtl:ml-2"
-        />
-        <Thumbnail
-          :src="currentContact.thumbnail"
-          :badge="inboxBadge"
-          :username="currentContact.name"
-          :status="currentContact.availability_status"
-        />
-        <div
-          class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
-        >
-          <div
-            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
+      <BackButton
+        v-if="showBackButton"
+        :back-url="backButtonUrl"
+        class="ltr:mr-2 rtl:ml-2"
+      />
+      <Thumbnail
+        :src="currentContact.thumbnail"
+        :username="currentContact.name"
+        :status="currentContact.availability_status"
+        size="32px"
+      />
+      <div
+        class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
+      >
+        <div class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit">
+          <span
+            class="text-sm font-medium truncate leading-tight text-n-slate-12"
           >
-            <NextButton link slate @click.prevent="$emit('contactPanelToggle')">
-              <span
-                class="text-base font-medium truncate leading-tight text-n-slate-12"
-              >
-                {{ currentContact.name }}
-              </span>
-            </NextButton>
-            <fluent-icon
-              v-if="!isHMACVerified"
-              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-              size="14"
-              class="text-n-amber-10 my-0 mx-0 min-w-[14px]"
-              icon="warning"
-            />
-          </div>
+            {{ currentContact.name }}
+          </span>
+          <fluent-icon
+            v-if="!isHMACVerified"
+            v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
+            size="14"
+            class="text-n-amber-10 my-0 mx-0 min-w-[14px]"
+            icon="warning"
+          />
+        </div>
 
-          <div
-            class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
-          >
-            <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />
-            <span v-if="isSnoozed" class="font-medium text-n-amber-10">
-              {{ snoozedDisplayText }}
-            </span>
-            <NextButton
-              link
-              xs
-              blue
-              :label="contactPanelToggleText"
-              @click="$emit('contactPanelToggle')"
-            />
-          </div>
+        <div
+          class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
+        >
+          <InboxName v-if="hasMultipleInboxes" :inbox="inbox" class="!mx-0" />
+          <span v-if="isSnoozed" class="font-medium text-n-amber-10">
+            {{ snoozedDisplayText }}
+          </span>
         </div>
       </div>
-      <div
-        class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
-        :class="{ 'justify-end': isContactPanelOpen }"
-      >
-        <SLACardLabel v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
-        <Linear
-          v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
-          :conversation-id="currentChat.id"
-        />
-        <MoreActions :conversation-id="currentChat.id" />
-      </div>
+    </div>
+    <div
+      class="flex flex-row items-center justify-start xl:justify-end flex-grow gap-2 w-full xl:w-auto mt-3 header-actions-wrap xl:mt-0"
+    >
+      <SLACardLabel
+        v-if="hasSlaPolicyId"
+        :chat="chat"
+        show-extended-info
+        :parent-width="width"
+        class="hidden lg:flex"
+      />
+      <Linear
+        v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
+        :conversation-id="currentChat.id"
+        :parent-width="width"
+        class="hidden lg:flex"
+      />
+      <MoreActions :conversation-id="currentChat.id" />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.conversation--header--actions {
-  ::v-deep .inbox--name {
-    @apply m-0;
-  }
-}
-</style>

app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import CopilotContainer from '../../copilot/CopilotContainer.vue';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
-import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
-import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store';
 import { FEATURE_FLAGS } from '../../../featureFlags';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 const props = defineProps({
   currentChat: {
@@ -14,33 +13,8 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['toggleContactPanel']);
-
-const { t } = useI18n();
-
 const channelType = computed(() => props.currentChat?.meta?.channel || '');
 
-const CONTACT_TABS_OPTIONS = [
-  { key: 'CONTACT', value: 'contact' },
-  { key: 'COPILOT', value: 'copilot' },
-];
-
-const tabs = computed(() => {
-  return CONTACT_TABS_OPTIONS.map(tab => ({
-    label: t(`CONVERSATION.SIDEBAR.${tab.key}`),
-    value: tab.value,
-  }));
-});
-const activeTab = ref(0);
-const toggleContactPanel = () => {
-  emit('toggleContactPanel');
-};
-
-const handleTabChange = selectedTab => {
-  activeTab.value = tabs.value.findIndex(
-    tabItem => tabItem.value === selectedTab.value
-  );
-};
 const currentAccountId = useMapGetter('getCurrentAccountId');
 const isFeatureEnabledonAccount = useMapGetter(
   'accounts/isFeatureEnabledonAccount'
@@ -49,29 +23,37 @@ const isFeatureEnabledonAccount = useMapGetter(
 const showCopilotTab = computed(() =>
   isFeatureEnabledonAccount.value(currentAccountId.value, FEATURE_FLAGS.CAPTAIN)
 );
+
+const { uiSettings } = useUISettings();
+
+const activeTab = computed(() => {
+  const {
+    is_contact_sidebar_open: isContactSidebarOpen,
+    is_copilot_panel_open: isCopilotPanelOpen,
+  } = uiSettings.value;
+
+  if (isContactSidebarOpen) {
+    return 0;
+  }
+  if (isCopilotPanelOpen) {
+    return 1;
+  }
+  return null;
+});
 </script>
 
 <template>
   <div
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-80 min-w-80 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[320px] min-w-[320px] 2xl:min-w-[360px] 2xl:w-[360px] flex flex-col bg-n-background"
   >
-    <div v-if="showCopilotTab" class="p-2">
-      <TabBar
-        :tabs="tabs"
-        :initial-active-tab="activeTab"
-        class="w-full [&>button]:w-full"
-        @tab-changed="handleTabChange"
-      />
-    </div>
     <div class="flex flex-1 overflow-auto">
       <ContactPanel
-        v-if="!activeTab"
+        v-show="activeTab === 0"
         :conversation-id="currentChat.id"
         :inbox-id="currentChat.inbox_id"
-        :on-toggle="toggleContactPanel"
       />
       <CopilotContainer
-        v-else-if="activeTab === 1 && showCopilotTab"
+        v-show="activeTab === 1 && showCopilotTab"
         :key="currentChat.id"
         :conversation-inbox-type="channelType"
         :conversation-id="currentChat.id"

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -38,8 +38,6 @@ import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { FEATURE_FLAGS } from '../../../featureFlags';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
   components: {
     Message,
@@ -47,20 +45,8 @@ export default {
     ReplyBox,
     Banner,
     ConversationLabelSuggestion,
-    NextButton,
   },
   mixins: [inboxMixin],
-  props: {
-    isContactPanelOpen: {
-      type: Boolean,
-      default: false,
-    },
-    isInboxView: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['contactPanelToggle'],
   setup() {
     const isPopOutReplyBox = ref(false);
     const conversationPanelRef = ref(null);
@@ -203,12 +189,6 @@ export default {
     isATweet() {
       return this.conversationType === 'tweet';
     },
-    isRightOrLeftIcon() {
-      if (this.isContactPanelOpen) {
-        return 'arrow-chevron-right';
-      }
-      return 'arrow-chevron-left';
-    },
     getLastSeenAt() {
       const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
       return contactLastSeenAt;
@@ -444,9 +424,6 @@ export default {
         relevantMessages
       );
     },
-    onToggleContactPanel() {
-      this.$emit('contactPanelToggle');
-    },
     setScrollParams() {
       this.heightBeforeLoad = this.conversationPanel.scrollHeight;
       this.scrollTopBeforeLoad = this.conversationPanel.scrollTop;
@@ -530,19 +507,6 @@ export default {
       class="mx-2 mt-2 overflow-hidden rounded-lg"
       :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
     />
-    <div class="flex justify-end">
-      <NextButton
-        faded
-        xs
-        slate
-        class="!rounded-r-none rtl:rotate-180 !rounded-2xl !fixed z-10"
-        :icon="
-          isContactPanelOpen ? 'i-ph-caret-right-fill' : 'i-ph-caret-left-fill'
-        "
-        :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
-        @click="onToggleContactPanel"
-      />
-    </div>
     <NextMessageList
       v-if="showNextBubbles"
       ref="conversationPanelRef"

app/javascript/dashboard/components/widgets/conversation/MoreActions.vue

@@ -1,10 +1,14 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { computed, onUnmounted } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useStore } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
 import { emitter } from 'shared/helpers/mitt';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
 import ButtonV4 from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 
 import {
   CMD_MUTE_CONVERSATION,
@@ -12,97 +16,111 @@ import {
   CMD_UNMUTE_CONVERSATION,
 } from 'dashboard/helper/commandbar/events';
 
-export default {
-  components: {
-    EmailTranscriptModal,
-    ResolveAction,
-    ButtonV4,
-  },
-  data() {
-    return {
-      showEmailActionsModal: false,
-    };
-  },
-  computed: {
-    ...mapGetters({ currentChat: 'getSelectedChat' }),
-  },
-  mounted() {
-    emitter.on(CMD_MUTE_CONVERSATION, this.mute);
-    emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
-    emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
-  },
-  unmounted() {
-    emitter.off(CMD_MUTE_CONVERSATION, this.mute);
-    emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
-    emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
-  },
-  methods: {
-    mute() {
-      this.$store.dispatch('muteConversation', this.currentChat.id);
-      useAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
-    },
-    unmute() {
-      this.$store.dispatch('unmuteConversation', this.currentChat.id);
-      useAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
-    },
-    toggleEmailActionsModal() {
-      this.showEmailActionsModal = !this.showEmailActionsModal;
-    },
-  },
+// No props needed as we're getting currentChat from the store directly
+const store = useStore();
+const { t } = useI18n();
+
+const [showEmailActionsModal, toggleEmailModal] = useToggle(false);
+const [showActionsDropdown, toggleDropdown] = useToggle(false);
+
+const currentChat = computed(() => store.getters.getSelectedChat);
+
+const actionMenuItems = computed(() => {
+  const items = [];
+
+  if (!currentChat.value.muted) {
+    items.push({
+      icon: 'i-lucide-volume-off',
+      label: t('CONTACT_PANEL.MUTE_CONTACT'),
+      action: 'mute',
+      value: 'mute',
+    });
+  } else {
+    items.push({
+      icon: 'i-lucide-volume-1',
+      label: t('CONTACT_PANEL.UNMUTE_CONTACT'),
+      action: 'unmute',
+      value: 'unmute',
+    });
+  }
+
+  items.push({
+    icon: 'i-lucide-share',
+    label: t('CONTACT_PANEL.SEND_TRANSCRIPT'),
+    action: 'send_transcript',
+    value: 'send_transcript',
+  });
+
+  return items;
+});
+
+const handleActionClick = ({ action }) => {
+  toggleDropdown(false);
+
+  if (action === 'mute') {
+    store.dispatch('muteConversation', currentChat.value.id);
+    useAlert(t('CONTACT_PANEL.MUTED_SUCCESS'));
+  } else if (action === 'unmute') {
+    store.dispatch('unmuteConversation', currentChat.value.id);
+    useAlert(t('CONTACT_PANEL.UNMUTED_SUCCESS'));
+  } else if (action === 'send_transcript') {
+    toggleEmailModal();
+  }
 };
+
+// These functions are needed for the event listeners
+const mute = () => {
+  store.dispatch('muteConversation', currentChat.value.id);
+  useAlert(t('CONTACT_PANEL.MUTED_SUCCESS'));
+};
+
+const unmute = () => {
+  store.dispatch('unmuteConversation', currentChat.value.id);
+  useAlert(t('CONTACT_PANEL.UNMUTED_SUCCESS'));
+};
+
+emitter.on(CMD_MUTE_CONVERSATION, mute);
+emitter.on(CMD_UNMUTE_CONVERSATION, unmute);
+emitter.on(CMD_SEND_TRANSCRIPT, toggleEmailModal);
+
+onUnmounted(() => {
+  emitter.off(CMD_MUTE_CONVERSATION, mute);
+  emitter.off(CMD_UNMUTE_CONVERSATION, unmute);
+  emitter.off(CMD_SEND_TRANSCRIPT, toggleEmailModal);
+});
 </script>
 
 <template>
   <div class="relative flex items-center gap-2 actions--container">
-    <ButtonV4
-      v-if="!currentChat.muted"
-      v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
-      size="sm"
-      variant="ghost"
-      color="slate"
-      icon="i-lucide-volume-off"
-      @click="mute"
-    />
-    <ButtonV4
-      v-else
-      v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
-      size="sm"
-      variant="ghost"
-      color="slate"
-      icon="i-lucide-volume-1"
-      @click="unmute"
-    />
-    <ButtonV4
-      v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      size="sm"
-      variant="ghost"
-      color="slate"
-      icon="i-lucide-share"
-      @click="toggleEmailActionsModal"
-    />
     <ResolveAction
       :conversation-id="currentChat.id"
       :status="currentChat.status"
     />
+    <div
+      v-on-clickaway="() => toggleDropdown(false)"
+      class="relative flex items-center group"
+    >
+      <ButtonV4
+        v-tooltip="$t('CONVERSATION.HEADER.MORE_ACTIONS')"
+        size="sm"
+        variant="ghost"
+        color="slate"
+        icon="i-lucide-more-vertical"
+        class="rounded-md group-hover:bg-n-alpha-2"
+        @click="toggleDropdown()"
+      />
+      <DropdownMenu
+        v-if="showActionsDropdown"
+        :menu-items="actionMenuItems"
+        class="mt-1 ltr:right-0 rtl:left-0 top-full"
+        @action="handleActionClick"
+      />
+    </div>
     <EmailTranscriptModal
       v-if="showEmailActionsModal"
       :show="showEmailActionsModal"
       :current-chat="currentChat"
-      @cancel="toggleEmailActionsModal"
+      @cancel="toggleEmailModal"
     />
   </div>
 </template>
-
-<style scoped lang="scss">
-.more--button {
-  @apply items-center flex ml-2 rtl:ml-0 rtl:mr-2;
-}
-
-.dropdown-pane {
-  @apply -right-2 top-12;
-}
-
-.icon {
-  @apply mr-1 rtl:mr-0 rtl:ml-1 min-w-[1rem];
-}
-</style>

app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue

@@ -1,132 +1,115 @@
-<script>
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { evaluateSLAStatus } from '@chatwoot/utils';
 import SLAPopoverCard from './SLAPopoverCard.vue';
 
+const props = defineProps({
+  chat: {
+    type: Object,
+    default: () => ({}),
+  },
+  showExtendedInfo: {
+    type: Boolean,
+    default: false,
+  },
+  parentWidth: {
+    type: Number,
+    default: 1000,
+  },
+});
+
 const REFRESH_INTERVAL = 60000;
+const { t } = useI18n();
 
-export default {
-  components: {
-    SLAPopoverCard,
-  },
-  props: {
-    chat: {
-      type: Object,
-      default: () => ({}),
-    },
-    showExtendedInfo: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      timer: null,
-      showSlaPopover: false,
-      slaStatus: {
-        threshold: null,
-        isSlaMissed: false,
-        type: null,
-        icon: null,
-      },
-    };
-  },
-  computed: {
-    slaPolicyId() {
-      return this.chat?.sla_policy_id;
-    },
-    appliedSLA() {
-      return this.chat?.applied_sla;
-    },
-    slaEvents() {
-      return this.chat?.sla_events;
-    },
-    hasSlaThreshold() {
-      return this.slaStatus?.threshold;
-    },
-    isSlaMissed() {
-      return this.slaStatus?.isSlaMissed;
-    },
-    slaTextStyles() {
-      return this.isSlaMissed ? 'text-n-ruby-11' : 'text-n-amber-11';
-    },
-    slaStatusText() {
-      const upperCaseType = this.slaStatus?.type?.toUpperCase(); // FRT, NRT, or RT
-      const statusKey = this.isSlaMissed ? 'MISSED' : 'DUE';
+const timer = ref(null);
+const slaStatus = ref({
+  threshold: null,
+  isSlaMissed: false,
+  type: null,
+  icon: null,
+});
 
-      return this.$t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
-        status: this.$t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
-      });
-    },
-    showSlaPopoverCard() {
-      return (
-        this.showExtendedInfo && this.showSlaPopover && this.slaEvents.length
-      );
-    },
-  },
-  watch: {
-    chat() {
-      this.updateSlaStatus();
-    },
-  },
-  mounted() {
-    this.updateSlaStatus();
-    this.createTimer();
-  },
-  unmounted() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-  },
-  methods: {
-    createTimer() {
-      this.timer = setTimeout(() => {
-        this.updateSlaStatus();
-        this.createTimer();
-      }, REFRESH_INTERVAL);
-    },
-    updateSlaStatus() {
-      this.slaStatus = evaluateSLAStatus({
-        appliedSla: this.appliedSLA,
-        chat: this.chat,
-      });
-    },
-    openSlaPopover() {
-      if (!this.showExtendedInfo) return;
-      this.showSlaPopover = true;
-    },
-    closeSlaPopover() {
-      this.showSlaPopover = false;
-    },
-  },
+const appliedSLA = computed(() => props.chat?.applied_sla);
+const slaEvents = computed(() => props.chat?.sla_events);
+const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
+const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
+const slaTextStyles = computed(() =>
+  isSlaMissed.value ? 'text-n-ruby-11' : 'text-n-amber-11'
+);
+
+const slaStatusText = computed(() => {
+  const upperCaseType = slaStatus.value?.type?.toUpperCase(); // FRT, NRT, or RT
+  const statusKey = isSlaMissed.value ? 'MISSED' : 'DUE';
+
+  return t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
+    status: t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
+  });
+});
+
+const showSlaPopoverCard = computed(
+  () => props.showExtendedInfo && slaEvents.value?.length > 0
+);
+
+const groupClass = computed(() => {
+  return props.showExtendedInfo
+    ? 'h-[26px] rounded-lg bg-n-alpha-1'
+    : 'rounded h-5  border border-n-strong';
+});
+
+const updateSlaStatus = () => {
+  slaStatus.value = evaluateSLAStatus({
+    appliedSla: appliedSLA.value,
+    chat: props.chat,
+  });
 };
+
+const createTimer = () => {
+  timer.value = setTimeout(() => {
+    updateSlaStatus();
+    createTimer();
+  }, REFRESH_INTERVAL);
+};
+
+watch(
+  () => props.chat,
+  () => {
+    updateSlaStatus();
+  }
+);
+
+const slaPopoverClass = computed(() => {
+  return props.showExtendedInfo
+    ? 'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-n-strong'
+    : '';
+});
+
+onMounted(() => {
+  updateSlaStatus();
+  createTimer();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
 </script>
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div
     v-if="hasSlaThreshold"
-    class="relative flex items-center cursor-pointer min-w-fit"
-    :class="
-      showExtendedInfo
-        ? 'h-[26px] rounded-lg bg-n-alpha-1'
-        : 'rounded h-5  border border-n-strong'
-    "
+    class="relative flex items-center cursor-pointer min-w-fit group"
+    :class="groupClass"
   >
     <div
-      v-on-clickaway="closeSlaPopover"
-      class="flex items-center w-full truncate"
-      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
-      @mouseover="openSlaPopover()"
+      class="flex items-center w-full truncate px-1.5"
+      :class="showExtendedInfo ? '' : 'gap-1'"
     >
-      <div
-        class="flex items-center gap-1"
-        :class="
-          showExtendedInfo &&
-          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-n-strong'
-        "
-      >
+      <div class="flex items-center gap-1" :class="slaPopoverClass">
         <fluent-icon
-          size="14"
+          size="12"
           :icon="slaStatus.icon"
           type="outline"
           :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
@@ -134,7 +117,7 @@ export default {
           :class="slaTextStyles"
         />
         <span
-          v-if="showExtendedInfo"
+          v-if="showExtendedInfo && parentWidth > 650"
           class="text-xs font-medium"
           :class="slaTextStyles"
         >
@@ -151,7 +134,7 @@ export default {
     <SLAPopoverCard
       v-if="showSlaPopoverCard"
       :sla-missed-events="slaEvents"
-      class="right-0 top-7"
+      class="rtl:left-0 ltr:right-0 top-7 hidden group-hover:flex"
     />
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -16,6 +16,10 @@ const props = defineProps({
     type: [Number, String],
     required: true,
   },
+  parentWidth: {
+    type: Number,
+    default: 10000,
+  },
 });
 
 defineOptions({
@@ -73,6 +77,14 @@ const unlinkIssue = async linkId => {
   }
 };
 
+const shouldShowIssueIdentifier = computed(() => {
+  if (!linkedIssue.value) {
+    return false;
+  }
+
+  return props.parentWidth > 600;
+});
+
 const openIssue = () => {
   if (!linkedIssue.value) shouldShowPopup.value = true;
   shouldShow.value = true;
@@ -119,7 +131,10 @@ onMounted(() => {
         class="text-[#5E6AD2] flex-shrink-0"
         view-box="0 0 19 19"
       />
-      <span v-if="linkedIssue" class="text-xs font-medium text-n-slate-11">
+      <span
+        v-if="shouldShowIssueIdentifier"
+        class="text-xs font-medium text-n-slate-11"
+      >
         {{ linkedIssue.issue.identifier }}
       </span>
     </Button>
@@ -127,7 +142,7 @@ onMounted(() => {
       v-if="linkedIssue"
       :issue="linkedIssue.issue"
       :link-id="linkedIssue.id"
-      class="absolute right-0 top-[36px] invisible group-hover:visible"
+      class="absolute rtl:left-0 ltr:right-0 top-9 invisible group-hover:visible"
       @unlink-issue="unlinkIssue"
     />
     <woot-modal

app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js

@@ -1,110 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import MoreActions from '../MoreActions.vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-
-vi.mock('shared/helpers/mitt', () => ({
-  emitter: {
-    emit: vi.fn(),
-    on: vi.fn(),
-    off: vi.fn(),
-  },
-}));
-
-const mockDirective = {
-  mounted: () => {},
-};
-
-import { emitter } from 'shared/helpers/mitt';
-
-describe('MoveActions', () => {
-  let currentChat = { id: 8, muted: false };
-  let store = null;
-  let muteConversation = null;
-  let unmuteConversation = null;
-
-  beforeEach(() => {
-    muteConversation = vi.fn(() => Promise.resolve());
-    unmuteConversation = vi.fn(() => Promise.resolve());
-
-    store = createStore({
-      state: {
-        authenticated: true,
-        currentChat,
-      },
-      getters: {
-        getSelectedChat: () => currentChat,
-      },
-      modules: {
-        conversations: {
-          namespaced: false,
-          actions: { muteConversation, unmuteConversation },
-        },
-      },
-    });
-  });
-
-  const createWrapper = () =>
-    mount(MoreActions, {
-      global: {
-        plugins: [store],
-        components: {
-          'fluent-icon': FluentIcon,
-        },
-        directives: {
-          'on-clickaway': mockDirective,
-        },
-      },
-    });
-
-  describe('muting discussion', () => {
-    it('triggers "muteConversation"', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(muteConversation).toHaveBeenCalledTimes(1);
-      expect(muteConversation).toHaveBeenCalledWith(
-        expect.any(Object), // First argument is the Vuex context object
-        currentChat.id // Second argument is the ID of the conversation
-      );
-    });
-
-    it('shows alert', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(emitter.emit).toBeCalledWith('newToastMessage', {
-        message:
-          'This contact is blocked successfully. You will not be notified of any future conversations.',
-        action: null,
-      });
-    });
-  });
-
-  describe('unmuting discussion', () => {
-    beforeEach(() => {
-      currentChat.muted = true;
-    });
-
-    it('triggers "unmuteConversation"', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(unmuteConversation).toHaveBeenCalledTimes(1);
-      expect(unmuteConversation).toHaveBeenCalledWith(
-        expect.any(Object), // First argument is the Vuex context object
-        currentChat.id // Second argument is the ID of the conversation
-      );
-    });
-
-    it('shows alert', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(emitter.emit).toBeCalledWith('newToastMessage', {
-        message: 'This contact is unblocked successfully.',
-        action: null,
-      });
-    });
-  });
-});

app/javascript/dashboard/composables/spec/useFontSize.spec.js

@@ -43,7 +43,7 @@ describe('useFontSize', () => {
 
   it('returns fontSizeOptions with correct structure', () => {
     const { fontSizeOptions } = useFontSize();
-    expect(fontSizeOptions).toHaveLength(6);
+    expect(fontSizeOptions).toHaveLength(5);
     expect(fontSizeOptions[0]).toHaveProperty('value');
     expect(fontSizeOptions[0]).toHaveProperty('label');
 
@@ -59,12 +59,6 @@ describe('useFontSize', () => {
       label:
         'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER',
     });
-
-    expect(fontSizeOptions.find(option => option.value === '22px')).toEqual({
-      value: '22px',
-      label:
-        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.EXTRA_LARGE',
-    });
   });
 
   it('returns currentFontSize from UI settings', () => {
@@ -84,9 +78,6 @@ describe('useFontSize', () => {
     applyFontSize('14px');
     expect(document.documentElement.style.fontSize).toBe('14px');
 
-    applyFontSize('22px');
-    expect(document.documentElement.style.fontSize).toBe('22px');
-
     applyFontSize('16px');
     expect(document.documentElement.style.fontSize).toBe('16px');
   });
@@ -145,8 +136,6 @@ describe('useFontSize', () => {
           'Smaller',
         'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT':
           'Default',
-        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.EXTRA_LARGE':
-          'Extra Large',
       };
       return translations[key] || key;
     });
@@ -160,9 +149,6 @@ describe('useFontSize', () => {
     expect(fontSizeOptions.find(option => option.value === '16px').label).toBe(
       'Default'
     );
-    expect(fontSizeOptions.find(option => option.value === '22px').label).toBe(
-      'Extra Large'
-    );
 
     // Verify translation function was called with correct keys
     expect(mockTranslate).toHaveBeenCalledWith(

app/javascript/dashboard/composables/useFontSize.js

@@ -19,7 +19,6 @@ const FONT_SIZE_OPTIONS = {
   DEFAULT: '16px',
   LARGE: '18px',
   LARGER: '20px',
-  EXTRA_LARGE: '22px',
 };
 
 /**

app/javascript/dashboard/composables/usePolicy.js

@@ -129,6 +129,7 @@ export function usePolicy() {
   return {
     checkPermissions,
     shouldShowPaywall,
+    isFeatureFlagEnabled,
     shouldShow,
   };
 }

app/javascript/dashboard/i18n/locale/en/agentBots.json

@@ -62,7 +62,9 @@
     "ACCESS_TOKEN": {
       "TITLE": "Access Token",
       "DESCRIPTION": "Copy the access token and save it securely",
-      "COPY_SUCCESSFUL": "Access token copied to clipboard"
+      "COPY_SUCCESSFUL": "Access token copied to clipboard",
+      "RESET_SUCCESS": "Access token regenerated successfully",
+      "RESET_ERROR": "Unable to regenerate access token. Please try again"
     },
     "FORM": {
       "AVATAR": {

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -70,6 +70,7 @@
       "RESOLVE_ACTION": "Resolve",
       "REOPEN_ACTION": "Reopen",
       "OPEN_ACTION": "Open",
+      "MORE_ACTIONS": "More actions",
       "OPEN": "More",
       "CLOSE": "Close",
       "DETAILS": "details",

app/javascript/dashboard/i18n/locale/en/general.json

@@ -4,6 +4,7 @@
     "PHONE_INPUT": {
       "PLACEHOLDER": "Search",
       "EMPTY_STATE": "No results found"
-    }
+    },
+    "CLOSE": "Close"
   }
 }

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -76,7 +76,12 @@
       "ACCESS_TOKEN": {
         "TITLE": "Access Token",
         "NOTE": "This token can be used if you are building an API based integration",
-        "COPY": "Copy"
+        "COPY": "Copy",
+        "RESET": "Reset",
+        "CONFIRM_RESET": "Are you sure?",
+        "CONFIRM_HINT": "Click again to confirm",
+        "RESET_SUCCESS": "Access token regenerated successfully",
+        "RESET_ERROR": "Unable to regenerate access token. Please try again"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
         "TITLE": "Audio Alerts",

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -10,10 +10,8 @@ import {
   CONTACT_PERMISSIONS,
   PORTAL_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-import {
-  getUserPermissions,
-  filterItemsByPermission,
-} from 'dashboard/helper/permissionsHelper.js';
+import { usePolicy } from 'dashboard/composables/usePolicy';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
 import Policy from 'dashboard/components/policy.vue';
@@ -39,8 +37,6 @@ const pages = ref({
   articles: 1,
 });
 
-const currentUser = useMapGetter('getCurrentUser');
-const currentAccountId = useMapGetter('getCurrentAccountId');
 const contactRecords = useMapGetter('conversationSearch/getContactRecords');
 const conversationRecords = useMapGetter(
   'conversationSearch/getConversationRecords'
@@ -83,9 +79,7 @@ const filterConversations = filterByTab('conversations');
 const filterMessages = filterByTab('messages');
 const filterArticles = filterByTab('articles');
 
-const userPermissions = computed(() =>
-  getUserPermissions(currentUser.value, currentAccountId.value)
-);
+const { shouldShow, isFeatureFlagEnabled } = usePolicy();
 
 const TABS_CONFIG = {
   all: {
@@ -111,47 +105,67 @@ const TABS_CONFIG = {
   },
   articles: {
     permissions: [...ROLES, PORTAL_PERMISSIONS],
+    featureFlag: FEATURE_FLAGS.HELP_CENTER,
     count: () => mappedArticles.value.length,
   },
 };
 
 const tabs = computed(() => {
-  const configs = Object.entries(TABS_CONFIG).map(([key, config]) => ({
-    key,
-    name: t(`SEARCH.TABS.${key.toUpperCase()}`),
-    count: config.count(),
-    showBadge: key !== 'all',
-    permissions: config.permissions,
-  }));
-
-  return filterItemsByPermission(
-    configs,
-    userPermissions.value,
-    item => item.permissions
-  );
+  return Object.entries(TABS_CONFIG)
+    .map(([key, config]) => ({
+      key,
+      name: t(`SEARCH.TABS.${key.toUpperCase()}`),
+      count: config.count(),
+      showBadge: key !== 'all',
+      permissions: config.permissions,
+      featureFlag: config.featureFlag,
+    }))
+    .filter(config => {
+      // why the double check, glad you asked.
+      // Some features are marked as premium features, that means
+      // the feature will be visible, but a Paywall will be shown instead
+      // this works for pages and routes, but fails for UI elements like search here
+      // so we explicitly check if the feature is enabled
+      return (
+        shouldShow(config.featureFlag, config.permissions, null) &&
+        isFeatureFlagEnabled(config.featureFlag)
+      );
+    });
 });
 
 const totalSearchResultsCount = computed(() => {
-  const permissionCounts = {
-    contacts: {
+  const permissionCounts = [
+    {
       permissions: [...ROLES, CONTACT_PERMISSIONS],
       count: () => contacts.value.length,
     },
-    conversations: {
+    {
       permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
       count: () => conversations.value.length + messages.value.length,
     },
-    articles: {
+    {
       permissions: [...ROLES, PORTAL_PERMISSIONS],
+      featureFlag: FEATURE_FLAGS.HELP_CENTER,
       count: () => articles.value.length,
     },
-  };
-  return filterItemsByPermission(
-    permissionCounts,
-    userPermissions.value,
-    item => item.permissions,
-    (_, item) => item.count
-  ).reduce((total, count) => total + count(), 0);
+  ];
+
+  return permissionCounts
+    .filter(config => {
+      // why the double check, glad you asked.
+      // Some features are marked as premium features, that means
+      // the feature will be visible, but a Paywall will be shown instead
+      // this works for pages and routes, but fails for UI elements like search here
+      // so we explicitly check if the feature is enabled
+      return (
+        shouldShow(config.featureFlag, config.permissions, null) &&
+        isFeatureFlagEnabled(config.featureFlag)
+      );
+    })
+    .map(config => {
+      return config.count();
+    })
+    .reduce((sum, count) => sum + count, 0);
 });
 
 const activeTabIndex = computed(() => {
@@ -355,7 +369,9 @@ onUnmounted(() => {
             </Policy>
 
             <Policy
+              v-if="isFeatureFlagEnabled(FEATURE_FLAGS.HELP_CENTER)"
               :permissions="[...ROLES, PORTAL_PERMISSIONS]"
+              :feature-flag="FEATURE_FLAGS.HELP_CENTER"
               class="flex flex-col justify-center"
             >
               <SearchResultArticlesList

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -11,14 +11,14 @@ import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
 import ContactConversations from './ContactConversations.vue';
 import ConversationAction from './ConversationAction.vue';
 import ConversationParticipant from './ConversationParticipant.vue';
-
 import ContactInfo from './contact/ContactInfo.vue';
 import ContactNotes from './contact/ContactNotes.vue';
 import ConversationInfo from './ConversationInfo.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import Draggable from 'vuedraggable';
 import MacrosList from './Macros/List.vue';
-import ShopifyOrdersList from '../../../components/widgets/conversation/ShopifyOrdersList.vue';
+import ShopifyOrdersList from 'dashboard/components/widgets/conversation/ShopifyOrdersList.vue';
+import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
 
 const props = defineProps({
   conversationId: {
@@ -29,10 +29,6 @@ const props = defineProps({
     type: Number,
     default: undefined,
   },
-  onToggle: {
-    type: Function,
-    default: () => {},
-  },
 });
 
 const {
@@ -89,8 +85,6 @@ watch(conversationId, (newConversationId, prevConversationId) => {
 
 watch(contactId, getContactDetails);
 
-const onPanelToggle = props.onToggle;
-
 const onDragEnd = () => {
   dragging.value = false;
   updateUISettings({
@@ -98,6 +92,13 @@ const onDragEnd = () => {
   });
 };
 
+const closeContactPanel = () => {
+  updateUISettings({
+    is_contact_sidebar_open: false,
+    is_copilot_panel_open: false,
+  });
+};
+
 onMounted(() => {
   conversationSidebarItems.value = conversationSidebarItemsOrder.value;
   getContactDetails();
@@ -107,11 +108,11 @@ onMounted(() => {
 
 <template>
   <div class="w-full">
-    <ContactInfo
-      :contact="contact"
-      :channel-type="channelType"
-      @toggle-panel="onPanelToggle"
+    <SidebarActionsHeader
+      :title="$t('CONVERSATION.SIDEBAR.CONTACT')"
+      @close="closeContactPanel"
     />
+    <ContactInfo :contact="contact" :channel-type="channelType" />
     <div class="list-group pb-8">
       <Draggable
         :list="conversationSidebarItems"

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -10,6 +10,8 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 import { emitter } from 'shared/helpers/mitt';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import SidepanelSwitch from 'dashboard/components-next/Conversation/SidepanelSwitch.vue';
+import ConversationSidebar from 'dashboard/components/widgets/conversation/ConversationSidebar.vue';
 
 export default {
   components: {
@@ -17,6 +19,8 @@ export default {
     ConversationBox,
     PopOverSearch,
     CmdBarConversationSnooze,
+    SidepanelSwitch,
+    ConversationSidebar,
   },
   beforeRouteLeave(to, from, next) {
     // Clear selected state if navigating away from a conversation to a route without a conversationId to prevent stale data issues
@@ -87,13 +91,17 @@ export default {
         this.uiSettings;
       return conversationDisplayType !== CONDENSED;
     },
-    isContactPanelOpen() {
-      if (this.currentChat.id) {
-        const { is_contact_sidebar_open: isContactSidebarOpen } =
-          this.uiSettings;
-        return isContactSidebarOpen;
+
+    shouldShowSidebar() {
+      if (!this.currentChat.id) {
+        return false;
       }
-      return false;
+
+      const {
+        is_contact_sidebar_open: isContactSidebarOpen,
+        is_copilot_panel_open: isCopilotPanelOpen,
+      } = this.uiSettings;
+      return isContactSidebarOpen || isCopilotPanelOpen;
     },
     showPopOverSearch() {
       return !this.isFeatureEnabledonAccount(
@@ -189,11 +197,6 @@ export default {
         this.$store.dispatch('clearSelectedState');
       }
     },
-    onToggleContactPanel() {
-      this.updateUISettings({
-        is_contact_sidebar_open: !this.isContactPanelOpen,
-      });
-    },
     onSearch() {
       this.showSearchModal = true;
     },
@@ -225,10 +228,11 @@ export default {
     <ConversationBox
       v-if="showMessageView"
       :inbox-id="inboxId"
-      :is-contact-panel-open="isContactPanelOpen"
       :is-on-expanded-layout="isOnExpandedLayout"
-      @contact-panel-toggle="onToggleContactPanel"
-    />
+    >
+      <SidepanelSwitch v-if="currentChat.id" />
+    </ConversationBox>
+    <ConversationSidebar v-if="shouldShowSidebar" :current-chat="currentChat" />
     <CmdBarConversationSnooze />
   </section>
 </template>

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue

@@ -228,7 +228,20 @@ const initializeForm = () => {
 
 const onCopyToken = async value => {
   await copyTextToClipboard(value);
-  useAlert(t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+  useAlert(t('AGENT_BOTS.ACCESS_TOKEN.COPY_SUCCESSFUL'));
+};
+
+const onResetToken = async () => {
+  const response = await store.dispatch(
+    'agentBots/resetAccessToken',
+    props.selectedBot.id
+  );
+  if (response) {
+    accessToken.value = response.access_token;
+    useAlert(t('AGENT_BOTS.ACCESS_TOKEN.RESET_SUCCESS'));
+  } else {
+    useAlert(t('AGENT_BOTS.ACCESS_TOKEN.RESET_ERROR'));
+  }
 };
 
 const closeModal = () => {
@@ -312,7 +325,18 @@ defineExpose({ dialogRef });
         >
           {{ $t('AGENT_BOTS.ACCESS_TOKEN.TITLE') }}
         </label>
-        <AccessToken :value="accessToken" @on-copy="onCopyToken" />
+        <AccessToken
+          v-if="type === MODAL_TYPES.EDIT"
+          :value="accessToken"
+          @on-copy="onCopyToken"
+          @on-reset="onResetToken"
+        />
+        <AccessToken
+          v-else
+          :value="accessToken"
+          :show-reset-button="false"
+          @on-copy="onCopyToken"
+        />
       </div>
 
       <div class="flex items-center justify-end w-full gap-2 px-0 py-2">

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue

@@ -1,17 +1,21 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import ForwardToOption from './emailChannels/ForwardToOption.vue';
 import Microsoft from './emailChannels/Microsoft.vue';
 import Google from './emailChannels/Google.vue';
 import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 
+import { useAlert } from 'dashboard/composables';
 import { useStoreGetters } from 'dashboard/composables/store';
+
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 const provider = ref('');
 
 const getters = useStoreGetters();
+const route = useRoute();
 const { t } = useI18n();
 
 const globalConfig = getters['globalConfig/get'];
@@ -45,6 +49,15 @@ const emailProviderList = computed(() => {
   });
 });
 
+const checkForOAuthError = () => {
+  const { error } = route.query;
+  if (error) {
+    useAlert(decodeURIComponent(error));
+  }
+};
+
+onMounted(checkForOAuthError);
+
 function onClick(emailProvider) {
   if (emailProvider.isEnabled) {
     provider.value = emailProvider.key;

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue

@@ -12,7 +12,6 @@ defineOptions({
     provider="google"
     :title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
     :description="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
-    :input-placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
     :submit-button-text="$t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN')"
     :error-message="$t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE')"
   />

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue

@@ -12,7 +12,6 @@ defineOptions({
     provider="microsoft"
     :title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
     :description="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
-    :input-placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
     :submit-button-text="$t('INBOX_MGMT.ADD.MICROSOFT.SIGN_IN')"
     :error-message="$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE')"
   />

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue

@@ -30,14 +30,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  inputPlaceholder: {
-    type: String,
-    required: true,
-  },
 });
 
 const isRequestingAuthorization = ref(false);
-const email = ref('');
 
 const client = computed(() => {
   if (props.provider === 'microsoft') {
@@ -50,9 +45,7 @@ const client = computed(() => {
 async function requestAuthorization() {
   try {
     isRequestingAuthorization.value = true;
-    const response = await client.value.generateAuthorization({
-      email: email.value,
-    });
+    const response = await client.value.generateAuthorization();
     const {
       data: { url },
     } = response;
@@ -75,11 +68,6 @@ async function requestAuthorization() {
       :header-content="description"
     />
     <form class="mt-6" @submit.prevent="requestAuthorization">
-      <woot-input
-        v-model="email"
-        type="email"
-        :placeholder="inputPlaceholder"
-      />
       <NextButton
         :is-loading="isRequestingAuthorization"
         type="submit"

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/google/Reauthorize.vue

@@ -1,35 +1,19 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import InboxReconnectionRequired from '../../components/InboxReconnectionRequired.vue';
 import googleClient from 'dashboard/api/channel/googleClient';
 
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 
-const props = defineProps({
-  inbox: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
 const { t } = useI18n();
 
 const isRequestingAuthorization = ref(false);
 
-const inboxEmail = computed(() => {
-  if (props.inbox.imap_login && props.inbox.imap_enabled) {
-    return props.inbox.imap_login;
-  }
-  return props.inbox.email;
-});
-
 async function requestAuthorization() {
   try {
     isRequestingAuthorization.value = true;
-    const response = await googleClient.generateAuthorization({
-      email: inboxEmail.value,
-    });
+    const response = await googleClient.generateAuthorization();
 
     const {
       data: { url },

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue

@@ -6,13 +6,6 @@ import microsoftClient from 'dashboard/api/channel/microsoftClient';
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 
-const props = defineProps({
-  inbox: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
 const { t } = useI18n();
 
 const isRequestingAuthorization = ref(false);
@@ -20,9 +13,7 @@ const isRequestingAuthorization = ref(false);
 async function requestAuthorization() {
   try {
     isRequestingAuthorization.value = true;
-    const response = await microsoftClient.generateAuthorization({
-      email: props.inbox.email,
-    });
+    const response = await microsoftClient.generateAuthorization();
 
     const {
       data: { url },

app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue

@@ -1,14 +1,17 @@
 <script setup>
 import { ref, computed } from 'vue';
-import FormButton from 'v3/components/Form/Button.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import ConfirmButton from 'dashboard/components-next/button/ConfirmButton.vue';
+
 const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
+  value: { type: String, default: '' },
+  showResetButton: { type: Boolean, default: true },
 });
-const emit = defineEmits(['onCopy']);
+
+const emit = defineEmits(['onCopy', 'onReset']);
+
 const inputType = ref('password');
+
 const toggleMasked = () => {
   inputType.value = inputType.value === 'password' ? 'text' : 'password';
 };
@@ -20,6 +23,10 @@ const maskIcon = computed(() => {
 const onClick = () => {
   emit('onCopy', props.value);
 };
+
+const onReset = () => {
+  emit('onReset');
+};
 </script>
 
 <template>
@@ -38,7 +45,7 @@ const onClick = () => {
     >
       <template #masked>
         <button
-          class="absolute top-1.5 ltr:right-0.5 rtl:left-0.5"
+          class="absolute top-0 bottom-0 ltr:right-0.5 rtl:left-0.5"
           type="button"
           @click="toggleMasked"
         >
@@ -46,15 +53,28 @@ const onClick = () => {
         </button>
       </template>
     </woot-input>
-    <FormButton
-      type="button"
-      size="large"
-      icon="text-copy"
-      variant="outline"
-      color-scheme="secondary"
-      @click="onClick"
-    >
-      {{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY') }}
-    </FormButton>
+    <div class="flex flex-row gap-2">
+      <NextButton
+        :label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY')"
+        slate
+        outline
+        type="button"
+        icon="i-lucide-copy"
+        class="rounded-xl"
+        @click="onClick"
+      />
+      <ConfirmButton
+        v-if="showResetButton"
+        :label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET')"
+        :confirm-label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_RESET')"
+        :confirm-hint="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_HINT')"
+        color="slate"
+        confirm-color="ruby"
+        variant="outline"
+        icon="i-lucide-key-round"
+        class="rounded-xl"
+        @click="onReset"
+      />
+    </div>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue

@@ -181,6 +181,14 @@ export default {
       await copyTextToClipboard(value);
       useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
+    async resetAccessToken() {
+      const success = await this.$store.dispatch('resetAccessToken');
+      if (success) {
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET_SUCCESS'));
+      } else {
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET_ERROR'));
+      }
+    },
   },
 };
 </script>
@@ -237,7 +245,12 @@ export default {
         <button
           v-for="hotKey in hotKeys"
           :key="hotKey.key"
-          class="px-0 reset-base w-full sm:flex-1"
+          class="px-0 reset-base w-full sm:flex-1 rounded-xl outline-1 outline"
+          :class="
+            isEditorHotKeyEnabled(hotKey.key)
+              ? 'outline-n-brand/30'
+              : 'outline-n-weak'
+          "
         >
           <HotKeyCard
             :key="hotKey.title"
@@ -281,7 +294,11 @@ export default {
         )
       "
     >
-      <AccessToken :value="currentUser.access_token" @on-copy="onCopyToken" />
+      <AccessToken
+        :value="currentUser.access_token"
+        @on-copy="onCopyToken"
+        @on-reset="resetAccessToken"
+      />
     </FormSection>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { computed } from 'vue';
+
 const { row } = defineProps({
   row: {
     type: Object,
@@ -6,10 +8,10 @@ const { row } = defineProps({
   },
 });
 
-const routerParams = {
+const routerParams = computed(() => ({
   name: 'inbox_conversation',
   params: { conversation_id: row.original.conversationId },
-};
+}));
 </script>
 
 <template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue

@@ -47,14 +47,17 @@ const tableData = computed(() => {
   }));
 });
 
-const defaulSpanRender = cellProps =>
-  h(
+const defaultSpanRender = cellProps => {
+  const value = cellProps.getValue() || '---';
+  return h(
     'span',
     {
-      class: cellProps.getValue() ? '' : 'text-slate-300 dark:text-slate-700',
+      class: 'line-clamp-5 break-words max-w-full text-n-slate-12',
+      title: value,
     },
-    cellProps.getValue() ? cellProps.getValue() : '---'
+    value
   );
+};
 
 const columnHelper = createColumnHelper();
 
@@ -65,7 +68,10 @@ const columns = [
     cell: cellProps => {
       const { contact } = cellProps.row.original;
       if (contact) {
-        return h(UserAvatarWithName, { user: contact });
+        return h(UserAvatarWithName, {
+          user: contact,
+          class: 'max-w-[200px] overflow-hidden',
+        });
       }
       return '--';
     },
@@ -76,7 +82,10 @@ const columns = [
     cell: cellProps => {
       const { assignedAgent } = cellProps.row.original;
       if (assignedAgent) {
-        return h(UserAvatarWithName, { user: assignedAgent });
+        return h(UserAvatarWithName, {
+          user: assignedAgent,
+          class: 'max-w-[200px] overflow-hidden',
+        });
       }
       return '--';
     },
@@ -105,7 +114,7 @@ const columns = [
   columnHelper.accessor('feedbackText', {
     header: t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'),
     width: 400,
-    cell: defaulSpanRender,
+    cell: defaultSpanRender,
   }),
   columnHelper.accessor('conversationId', {
     header: '',

app/javascript/dashboard/store/modules/agentBots.js

@@ -172,6 +172,17 @@ export const actions = {
       commit(types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: false });
     }
   },
+
+  resetAccessToken: async ({ commit }, botId) => {
+    try {
+      const response = await AgentBotsAPI.resetAccessToken(botId);
+      commit(types.EDIT_AGENT_BOT, response.data);
+      return response.data;
+    } catch (error) {
+      throwErrorMessage(error);
+      return null;
+    }
+  },
 };
 
 export const mutations = {

app/javascript/dashboard/store/modules/auth.js

@@ -213,6 +213,16 @@ export const actions = {
     }
   },
 
+  resetAccessToken: async ({ commit }) => {
+    try {
+      const response = await authAPI.resetAccessToken();
+      commit(types.SET_CURRENT_USER, response.data);
+      return true;
+    } catch (error) {
+      return false;
+    }
+  },
+
   resendConfirmation: async () => {
     try {
       await authAPI.resendConfirmation();

app/javascript/dashboard/store/modules/conversations/getters.js

@@ -18,13 +18,34 @@ const getters = {
   getAllConversations: ({ allConversations, chatSortFilter: sortKey }) => {
     return allConversations.sort((a, b) => sortComparator(a, b, sortKey));
   },
-  getFilteredConversations: ({
-    allConversations,
-    chatSortFilter,
-    appliedFilters,
-  }) => {
+  getFilteredConversations: (
+    { allConversations, chatSortFilter, appliedFilters },
+    _,
+    __,
+    rootGetters
+  ) => {
+    const currentUser = rootGetters.getCurrentUser;
+    const currentUserId = rootGetters.getCurrentUser.id;
+    const currentAccountId = rootGetters.getCurrentAccountId;
+
+    const permissions = getUserPermissions(currentUser, currentAccountId);
+    const userRole = getUserRole(currentUser, currentAccountId);
+
     return allConversations
-      .filter(conversation => matchesFilters(conversation, appliedFilters))
+      .filter(conversation => {
+        const matchesFilterResult = matchesFilters(
+          conversation,
+          appliedFilters
+        );
+        const allowedForRole = applyRoleFilter(
+          conversation,
+          userRole,
+          permissions,
+          currentUserId
+        );
+
+        return matchesFilterResult && allowedForRole;
+      })
       .sort((a, b) => sortComparator(a, b, chatSortFilter));
   },
   getSelectedChat: ({ selectedChatId, allConversations }) => {

app/javascript/dashboard/store/modules/specs/agentBots/agentBots.spec.js

@@ -170,4 +170,21 @@ describe('#actions', () => {
       ]);
     });
   });
+  describe('#resetAccessToken', () => {
+    it('sends correct actions if API is success', async () => {
+      const mockResponse = {
+        data: { ...agentBotRecords[0], access_token: 'new_token_123' },
+      };
+      axios.post.mockResolvedValue(mockResponse);
+      const result = await actions.resetAccessToken(
+        { commit },
+        agentBotRecords[0].id
+      );
+
+      expect(commit.mock.calls).toEqual([
+        [types.EDIT_AGENT_BOT, mockResponse.data],
+      ]);
+      expect(result).toBe(mockResponse.data);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/auth/actions.spec.js

@@ -228,4 +228,20 @@ describe('#actions', () => {
       );
     });
   });
+
+  describe('#resetAccessToken', () => {
+    it('sends correct actions if API is success', async () => {
+      const mockResponse = {
+        data: { id: 1, name: 'John', access_token: 'new_token_123' },
+        headers: { expiry: 581842904 },
+      };
+      axios.post.mockResolvedValue(mockResponse);
+      const result = await actions.resetAccessToken({ commit });
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CURRENT_USER, mockResponse.data],
+      ]);
+      expect(result).toBe(true);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js

@@ -325,4 +325,308 @@ describe('#getters', () => {
       });
     });
   });
+
+  describe('#getFilteredConversations', () => {
+    const mockConversations = [
+      {
+        id: 1,
+        status: 'open',
+        meta: { assignee: { id: 1 } },
+        last_activity_at: 1000,
+      },
+      {
+        id: 2,
+        status: 'open',
+        meta: {},
+        last_activity_at: 2000,
+      },
+      {
+        id: 3,
+        status: 'resolved',
+        meta: { assignee: { id: 2 } },
+        last_activity_at: 3000,
+      },
+    ];
+
+    const mockRootGetters = {
+      getCurrentUser: {
+        id: 1,
+        accounts: [{ id: 1, role: 'agent', permissions: [] }],
+      },
+      getCurrentAccountId: 1,
+    };
+
+    it('filters conversations based on role permissions for administrator', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [{ id: 1, role: 'administrator', permissions: [] }],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[2],
+        mockConversations[1],
+        mockConversations[0],
+      ]);
+    });
+
+    it('filters conversations based on role permissions for agent', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [{ id: 1, role: 'agent', permissions: [] }],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[2],
+        mockConversations[1],
+        mockConversations[0],
+      ]);
+    });
+
+    it('filters conversations for custom role with conversation_manage permission', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[2],
+        mockConversations[1],
+        mockConversations[0],
+      ]);
+    });
+
+    it('filters conversations for custom role with conversation_unassigned_manage permission', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_unassigned_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should include conversation assigned to user (id: 1) and unassigned conversation
+      expect(result).toEqual([mockConversations[1], mockConversations[0]]);
+    });
+
+    it('filters conversations for custom role with conversation_participating_manage permission', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_participating_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should only include conversation assigned to user (id: 1)
+      expect(result).toEqual([mockConversations[0]]);
+    });
+
+    it('filters conversations for custom role with no permissions', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: [],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should return empty array as user has no permissions
+      expect(result).toEqual([]);
+    });
+
+    it('applies filters and role permissions together', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [
+          {
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: ['open'],
+            query_operator: 'and',
+          },
+        ],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_participating_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should only include open conversation assigned to user (id: 1)
+      expect(result).toEqual([mockConversations[0]]);
+    });
+
+    it('returns empty array when no conversations match filters', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [
+          {
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: ['pending'],
+            query_operator: 'and',
+          },
+        ],
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        mockRootGetters
+      );
+
+      expect(result).toEqual([]);
+    });
+
+    it('sorts filtered conversations according to chatSortFilter', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_asc',
+        appliedFilters: [],
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        mockRootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[0],
+        mockConversations[1],
+        mockConversations[2],
+      ]);
+    });
+  });
 });

app/javascript/portal/portalHelpers.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 import { directive as onClickaway } from 'vue3-click-away';
+import { isSameHost } from '@chatwoot/utils';
 
 import slugifyWithCounter from '@sindresorhus/slugify';
 import PublicArticleSearch from './components/PublicArticleSearch.vue';
@@ -25,52 +26,6 @@ export const getHeadingsfromTheArticle = () => {
   return rows;
 };
 
-/**
- * Converts various input formats to URL objects.
- * Handles URL objects, domain strings, relative paths, and full URLs.
- * @param {string|URL} input - Input to convert to URL object
- * @returns {URL|null} URL object or null if input is invalid
- */
-const toURL = input => {
-  if (!input) return null;
-  if (input instanceof URL) return input;
-
-  if (
-    typeof input === 'string' &&
-    !input.includes('://') &&
-    !input.startsWith('/')
-  ) {
-    return new URL(`https://${input}`);
-  }
-
-  if (typeof input === 'string' && input.startsWith('/')) {
-    return new URL(input, window.location.origin);
-  }
-
-  return new URL(input);
-};
-
-/**
- * Determines if two URLs belong to the same host by comparing their normalized URL objects.
- * Handles various input formats including URL objects, domain strings, relative paths, and full URLs.
- * Returns false if either URL cannot be parsed or normalized.
- * @param {string|URL} url1 - First URL to compare
- * @param {string|URL} url2 - Second URL to compare
- * @returns {boolean} True if both URLs have the same host, false otherwise
- */
-const isSameHost = (url1, url2) => {
-  try {
-    const urlObj1 = toURL(url1);
-    const urlObj2 = toURL(url2);
-
-    if (!urlObj1 || !urlObj2) return false;
-
-    return urlObj1.hostname === urlObj2.hostname;
-  } catch (error) {
-    return false;
-  }
-};
-
 export const openExternalLinksInNewTab = () => {
   const { customDomain, hostURL } = window.portalConfig;
   const isOnArticlePage =

app/javascript/v3/components/Form/Select.vue

@@ -64,11 +64,11 @@ export default {
       :selected="modelValue"
       :name="name"
       :class="{
-        'text-ash-400': !modelValue,
-        'text-ash-900': modelValue,
+        'text-n-slate-9': !modelValue,
+        'text-n-slate-12': modelValue,
         'pl-9': icon,
       }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 text-sm leading-6"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm appearance-none rounded-xl select-caret leading-6"
       @input="onInput"
     >
       <option value="" disabled selected class="hidden">

app/models/concerns/activity_message_handler.rb

@@ -5,7 +5,6 @@ module ActivityMessageHandler
   include LabelActivityMessageHandler
   include SlaActivityMessageHandler
   include TeamActivityMessageHandler
-  include CsatActivityMessageHandler
 
   private
 

app/models/concerns/csat_activity_message_handler.rb

@@ -1,8 +0,0 @@
-module CsatActivityMessageHandler
-  extend ActiveSupport::Concern
-
-  def create_csat_not_sent_activity_message
-    content = I18n.t('conversations.activity.csat.not_sent_due_to_messaging_window')
-    ::Conversations::ActivityMessageJob.perform_later(self, activity_message_params(content)) if content
-  end
-end

app/policies/agent_bot_policy.rb

@@ -22,4 +22,8 @@ class AgentBotPolicy < ApplicationPolicy
   def avatar?
     @account_user.administrator?
   end
+
+  def reset_access_token?
+    @account_user.administrator?
+  end
 end

app/policies/csat_survey_response_policy.rb

@@ -11,3 +11,5 @@ class CsatSurveyResponsePolicy < ApplicationPolicy
     @account_user.administrator?
   end
 end
+
+CsatSurveyResponsePolicy.prepend_mod_with('CsatSurveyResponsePolicy')

app/services/message_templates/hook_execution_service.rb

@@ -17,7 +17,7 @@ class MessageTemplates::HookExecutionService
     ::MessageTemplates::Template::OutOfOffice.new(conversation: conversation).perform if should_send_out_of_office_message?
     ::MessageTemplates::Template::Greeting.new(conversation: conversation).perform if should_send_greeting?
     ::MessageTemplates::Template::EmailCollect.new(conversation: conversation).perform if inbox.enable_email_collect && should_send_email_collect?
-    handle_csat_survey
+    ::MessageTemplates::Template::CsatSurvey.new(conversation: conversation).perform if should_send_csat_survey?
   end
 
   def should_send_out_of_office_message?
@@ -65,26 +65,13 @@ class MessageTemplates::HookExecutionService
     true
   end
 
-  def handle_csat_survey
+  def should_send_csat_survey?
     return unless csat_enabled_conversation?
+
     # only send CSAT once in a conversation
-    return if csat_already_sent?
+    return if conversation.messages.where(content_type: :input_csat).present?
 
-    # Only send CSAT if agent can still reply by checking the messaging window restriction
-    # https://www.chatwoot.com/docs/self-hosted/supported-features#outgoing-message-restriction
-    if within_messaging_window?
-      ::MessageTemplates::Template::CsatSurvey.new(conversation: conversation).perform
-    else
-      conversation.create_csat_not_sent_activity_message
-    end
-  end
-
-  def csat_already_sent?
-    conversation.messages.where(content_type: :input_csat).present?
-  end
-
-  def within_messaging_window?
-    conversation.can_reply?
+    true
   end
 end
 MessageTemplates::HookExecutionService.prepend_mod_with('MessageTemplates::HookExecutionService')

app/views/api/v1/accounts/agent_bots/reset_access_token.json.jbuilder

@@ -0,0 +1 @@
+json.partial! 'api/v1/models/agent_bot', formats: [:json], resource: AgentBotPresenter.new(@agent_bot)

app/views/api/v1/profiles/reset_access_token.json.jbuilder

@@ -0,0 +1 @@
+json.partial! 'api/v1/models/user', formats: [:json], resource: @user

app/views/layouts/portal.html.erb

@@ -73,6 +73,30 @@ By default, it renders:
         <% end %>
       </main>
     </div>
+    <% if @article.present? %>
+    <script>
+      (function() {
+        let viewTracked = false;
+        const trackView = function() {
+          if (!viewTracked) {
+            viewTracked = true;
+            const img = new Image();
+            img.src = '<%= request.base_url %>/hc/<%= @portal.slug %>/articles/<%= @article.slug %>.png';
+          }
+        };
+        
+        const addTrackingListeners = function() {
+          const events = ['mouseenter', 'touchstart', 'focus'];
+          events.forEach(event => {
+            document.body.addEventListener(event, function() {
+              setTimeout(trackView, 5000);
+            }, { once: true });
+          });
+        };
+        addTrackingListeners();
+      })();
+    </script>
+    <% end %>
   </body>
   <style>
   html.dark {

chatwoot/developer-docs/self-hosted/runbook/environment-variables.mdx

@@ -1,264 +0,0 @@
----
-title: Environment Variables
-description: Complete reference for Chatwoot environment variables and configuration options
-sidebarTitle: Environment Variables
----
-
-## The .env File
-
-We use the `dotenv-rails` gem to manage the environment variables. There is a file called `env.example` in the root directory of this project with all the environment variables set to empty values. You can set the correct values as per the following options. Once you set the values, you should rename the file to `.env` before you start the server.
-
-## Configure frontend URL (domain)
-
-Provide your chatwoot domain as frontend URL.
-
-```bash
-FRONTEND_URL='https://your-chatwoot-domain.tld'
-```
-
-## Rails production variables
-
-For production deployment, you have to set the following variables
-
-```bash
-RAILS_ENV=production
-SECRET_KEY_BASE=replace_with_your_own_secret_string
-```
-
-You can generate `SECRET_KEY_BASE` using `rake secret` command from the project root folder. If you dont have rails installed, use `head /dev/urandom | tr -dc A-Za-z0-9 | head -c 63 ; echo ''`.
-
-<Note>
-SECRET_KEY_BASE should be alphanumeric. Avoid special characters or symbols.
-</Note>
-
-## Database configuration
-
-Postgres can be configured in two ways: via `DATABASE_URL` or setting up independent Postgres variables.
-
-### Configure Postgres
-
-Set the `DATABASE_URL` variable with value as Postgres connection URI to connect to the database.
-
-The URI is of the format
-
-```bash
-postgresql://[user[:password]@][netloc][:port][,...][/dbname][?param1=value1&...]
-```
-
-Or you can set the following environment variables to configure Postgres. Replace the values here with yours. Skip this
-if you have configured `DATABASE_URL`.
-
-```bash
-POSTGRES_HOST=localhost
-POSTGRES_PORT=5432
-POSTGRES_DATABASE=chatwoot_production
-POSTGRES_USERNAME=admin
-POSTGRES_PASSWORD=password
-```
-
-### Configure Redis
-
-For development, you can use the following URL to connect to Redis. For production, configure your Redis URL.
-
-```bash
-REDIS_URL='redis://127.0.0.1:6379'
-```
-
-To authenticate Redis connections made by the app server and sidekick, if it's protected by a password, use the following environment variable to set the password.
-
-```bash
-REDIS_PASSWORD=
-```
-
-## Configure emails
-
-For development, you don't need an email provider. Chatwoot uses the [letter-opener](https://github.com/ryanb/letter_opener) gem to test emails locally
-
-For production use, please configure the following variables.
-
-```bash
-# could user either `email@yourdomain.com` or `BrandName <email@yourdomain.com>`
-MAILER_SENDER_EMAIL=
-```
-
-and based on your SMTP server the following variables
-
-```bash
-SMTP_ADDRESS=
-SMTP_USERNAME=
-SMTP_PASSWORD=
-SMTP_TLS=
-SMTP_SSL=
-```
-
-### Postfix
-
-Follow these steps if you want to use a selfhosted mail server with Chatwoot. This is the default behavior starting from `v2.12.0` and relies on `SMTP_ADDRESS` environment variable not being set.
-
-```
-sudo apt install -y postfix
-```
-
-Choose internet-site when prompted and enter the domain name you used with Chatwoot setup for `System mail name`.
-
-<Note>
-By default, all major cloud provider have blocked port 25 used for sending emails as part of their spam combat effects. Please raise a support ticket with your cloud provider to enable outbound access on port 25 for this to work. Refer [AWS](https://aws.amazon.com/premiumsupport/knowledge-center/ec2-port-25-throttle), [GCP](https://cloud.google.com/compute/docs/tutorials/sending-mail), [Azure](https://learn.microsoft.com/en-us/azure/virtual-network/troubleshoot-outbound-smtp-connectivity) and [DigitalOcean](https://www.digitalocean.com/blog/smtp-restricted-by-default) for more details.
-</Note>
-
-Also please add MX and PTR records for your domain. If your emails are being flagged by `Gmail` and `Outlook`, setup [SPF and DKIM records](https://www.linuxbabe.com/mail-server/setting-up-dkim-and-spf) for your domain as well. This should improve your email reputation.
-
-### Amazon SES
-
-```bash
-SMTP_ADDRESS=email-smtp.<region>.amazonaws.com
-SMTP_AUTHENTICATION=plain
-SMTP_ENABLE_STARTTLS_AUTO=true
-SMTP_USERNAME=<Your SMTP username>
-SMTP_PASSWORD=<Your SMTP password>
-```
-
-### SendGrid
-
-<Info>
-For clarification, the `SMTP_USERNAME` should be set to the literal text apikey—this is not the actual API key. SendGrid uses 'apikey' as the standard username for its services.
-</Info>
-
-```bash
-SMTP_ADDRESS=smtp.sendgrid.net
-SMTP_AUTHENTICATION=plain
-SMTP_DOMAIN=<your verified domain>
-SMTP_ENABLE_STARTTLS_AUTO=true
-SMTP_PORT=587
-SMTP_USERNAME=apikey
-SMTP_PASSWORD=<your Sendgrid API key>
-```
-
-### MailGun
-
-```bash
-SMTP_ADDRESS=smtp.mailgun.org
-SMTP_AUTHENTICATION=plain
-SMTP_DOMAIN=<Your domain, this has to be verified in Mailgun>
-SMTP_ENABLE_STARTTLS_AUTO=true
-SMTP_PORT=587
-SMTP_USERNAME=<Your SMTP username, view under Domains tab>
-SMTP_PASSWORD=<Your SMTP password, view under Domains tab>
-```
-
-### Mandrill
-
-If you would like to use Mailchimp to send your emails, use the following environment variables:
-
-<Note>
-Mandrill is the transactional email service for Mailchimp. You need to enable transactional email and login to mandrillapp.com.
-</Note>
-
-```bash
-SMTP_ADDRESS=smtp.mandrillapp.com
-SMTP_AUTHENTICATION=plain
-SMTP_DOMAIN=<Your verified domain in Mailchimp>
-SMTP_ENABLE_STARTTLS_AUTO=true
-SMTP_PORT=587
-SMTP_USERNAME=<Your SMTP username displayed under Settings -> SMTP & API info>
-SMTP_PASSWORD=<Any valid API key, create an API key under Settings -> SMTP & API Info>
-```
-
-## Configure default language
-
-```bash
-DEFAULT_LOCALE='en'
-```
-
-## Configure storage
-
-Chatwoot uses [active storage](https://edgeguides.rubyonrails.org/active_storage_overview.html) for storing attachments. The default storage option is the local storage on your server.
-
-But you can change it to use any of the cloud providers like amazon s3, microsoft azure, google gcs etc. Refer [configuring cloud storage](/docs/self-hosted/deployment/storage/supported-providers) for additional environment variables required.
-
-```bash
-ACTIVE_STORAGE_SERVICE=local
-```
-
-When `local` storage is used the files are stored under `/storage` directory in the chatwoot root folder.
-
-<Warning>
-It is recommended to use a cloud provider for your chatwoot storage to ensure proper backup of the stored attachments and prevent data loss.
-</Warning>
-
-## Rails Logging Variables
-
-By default, Chatwoot will capture `info` level logs in production. Ref [rails docs](https://guides.rubyonrails.org/debugging_rails_applications.html#log-levels) for the additional log-level options.
-We will also retain 1 GB of your recent logs and your last shifted log file.
-You can fine-tune these settings using the following environment variables
-
-```bash
-# possible values: 'debug', 'info', 'warn', 'error', 'fatal' and 'unknown'
-LOG_LEVEL=
-# value in megabytes
-LOG_SIZE= 1024
-```
-
-## Configure FB Channel
-
-To use FB Channel, you have to create a Facebook app in the developer portal. You can find more details about creating FB channels [here](https://developers.facebook.com/docs/apps/#register)
-
-```bash
-FB_VERIFY_TOKEN=
-FB_APP_SECRET=
-FB_APP_ID=
-```
-
-## Using CDN for asset delivery
-
-With the release v1.8.0, we are enabling CDN support for Chatwoot. If you have a high traffic website, we recommend to setup a CDN for your asset delivery. Read setting up [CloudFront as your CDN](/docs/self-hosted/deployment/performance/cloudfront-cdn) guide.
-
-## Enable new account signup
-
-By default, Chatwoot will not allow users to create an account[multi-tenancy] from the login page. However, if you are setting up a public server, you can enable signup using:
-
-```bash
-ENABLE_ACCOUNT_SIGNUP=true
-```
-
-## Enable direct upload to storage cloud
-
-By default, Chatwoot will upload the files to the application server and then it will push them to the cloud storage. We have introduced the direct upload functionality so that we can upload the file directly to the cloud storage. This has been built according to rails new direct upload functionality documented [here](https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-uploads). Set below environment variable to true to use the direct upload feature.
-
-Make sure to follow [this guide](https://edgeguides.rubyonrails.org/active_storage_overview.html#cross-origin-resource-sharing-cors-configuration) and set the appropriate CORS configuration on your cloud storage after setting `DIRECT_UPLOADS_ENABLED` to true.
-
-```bash
-DIRECT_UPLOADS_ENABLED=true
-```
-
-## Google OAuth
-
-To enable Google OAuth in Chatwoot, you need to provide the client ID, client secret, and callback URL. You can find the instructions to generate the details [here](https://support.google.com/cloud/answer/6158849).
-
-Set the `GOOGLE_OAUTH_CLIENT_ID` and `GOOGLE_OAUTH_CLIENT_SECRET` environment variables in your Chatwoot installation using the values you copied from the Google API Console. Set the `GOOGLE_OAUTH_CALLBACK_URL` environment variable to the callback URL you used in the Google API Console. Here's an example of the same
-
-```bash
-GOOGLE_OAUTH_CLIENT_ID=369777777777-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
-GOOGLE_OAUTH_CLIENT_SECRET=ABCDEF-GHijklmnoPqrstuvwX-yz1234567
-GOOGLE_OAUTH_CALLBACK_URL=https://<your-server-domain>/omniauth/google_oauth2/callback
-```
-
-<Warning>
-The callback URL should comply with the format in the example above. This endpoint cannot be changed at the moment.
-</Warning>
-
-After setting these environment variables, restart your Chatwoot server to apply the changes. Now, users will be able to sign in using their Google accounts.
-
-## LogRocket
-
-To enable LogRocket in Chatwoot, you need to provide the project ID from LogRocket. Here are the steps to follow:
-
-1. Open the LogRocket [website](https://logrocket.com/) and create an account or sign in to your existing account. 
-2. After signing in, create a new project in LogRocket by clicking on "Create new project". 
-3. Enter a name for your project, and save the project ID.
-4. Set the `LOG_ROCKET_PROJECT_ID` environment variable in your `.env` file with the project ID you copied from LogRocket. 
-
-```bash
-LOG_ROCKET_PROJECT_ID=abcd12/pineapple-on-pizza
-```
-
-After setting this environment variable, restart your Chatwoot server to apply the changes. Now, LogRocket will start capturing user sessions on your Chatwoot installation. 

chatwoot/developer-docs/self-hosted/runbook/help-center.mdx

@@ -1,52 +0,0 @@
----
-title: Help Center
-description: Set up a public-facing help center portal with custom domain and SSL certificate
-sidebarTitle: Help Center
----
-
-Help center allows you to create a portal and add articles from the chatwoot app dashboard. You can point to these help center portal articles from your main site and display them as your public-facing help center.
-
-## How to get SSL certificate for your custom domain
-
-### Create a Portal in Chatwoot's dashboard
-
-Follow these step to create your Portal. Refer to [this guide.](https://www.chatwoot.com/hc/user-guide/articles/1677861202-how-to-setup-a-help-center)
-
-### Point your custom domain to your Chatwoot domain
-
-1. Go to your DNS provider and add a new CNAME record.
-   - For the above example, add docs as a CNAME record and point it to the your selfhosted chatwoot domain(FRONTEND_URL).
-
-2. This will ensure that your CNAME record points to the selfhosted Chatwoot installation. For your custom domain, we have your portal information. In this case, `docs.example.com`
-
-### Setting up SSL
-
-1. Use certbot to generate SSL certificates for your custom domain.
-
-```bash
-certbot certonly --agree-tos --nginx -d "docs.example.com"
-```
-
-2. Create a new nginx config to route requests to this domain to Chatwoot. Make a copy of `/etc/nginx/sites-available/nginx_chatwoot.conf` and make necessary changes for the new domain.
-
-3. Restart nginx server.
-
-```bash
-sudo systemctl restart nginx
-```
-
-Voila!
-
-`docs.yourdomain.com` is live with a secure connection, and your portal data is visible.
-
-### How does this work?
-
-These are the engineering details to understand `How does docs.yourdomain.com` gets the portal data with SSL certificate.
-
-1. `docs.yourdomain.com` resolves by customers nameserver and redirects to your Chatwoot domain.
-2. Chatwoot check for the portal record with custom-domain `docs.yourdomain.com`
-3. Redirects to the portal records for the domain `docs.yourdomain.com`
-
-Yaay!!
-
-Now you can have your own help-center, product-documentation related portal saved at Chatwoot dashboard and served at your domain with SSL certificate. 

config/environments/development.rb

@@ -62,6 +62,15 @@ Rails.application.configure do
 
   # Disable host check during development
   config.hosts = nil
+  
+  # GitHub Codespaces configuration
+  if ENV['CODESPACES']
+    # Allow web console access from any IP
+    config.web_console.allowed_ips = %w(0.0.0.0/0 ::/0)
+    # Allow CSRF from codespace URLs
+    config.force_ssl = false
+    config.action_controller.forgery_protection_origin_check = false
+  end
 
   # customize using the environment variables
   config.log_level = ENV.fetch('LOG_LEVEL', 'debug').to_sym

config/features.yml

@@ -146,7 +146,7 @@
   premium: true
 - name: chatwoot_v4
   display_name: Chatwoot V4
-  enabled: false
+  enabled: true
 - name: report_v4
   display_name: Report V4
   enabled: true

config/locales/en.yml

@@ -48,6 +48,9 @@ en:
       email_already_exists: 'You have already signed up for an account with %{email}'
       invalid_params: 'Invalid, please check the signup paramters and try again'
       failed: Signup failed
+    oauth:
+      insufficient_scopes: 'Insufficient permissions granted. Missing scopes: %{scopes}'
+      authorization_failed: 'Authorization failed'
     data_import:
       data_type:
         invalid: Invalid data type
@@ -185,8 +188,6 @@ en:
         removed: '%{user_name} removed %{labels}'
       sla:
         added: '%{user_name} added SLA policy %{sla_name}'
-      csat:
-        not_sent_due_to_messaging_window: 'CSAT survey not sent due to outgoing message restrictions'
         removed: '%{user_name} removed SLA policy %{sla_name}'
       muted: '%{user_name} has muted the conversation'
       unmuted: '%{user_name} has unmuted the conversation'

config/markdown_embeds.yml

@@ -0,0 +1,132 @@
+# Markdown Embed Configuration
+#
+# This file defines patterns and templates for converting URLs into embedded content
+# in markdown rendering. Each embed type has:
+#   - regex: Pattern with named capture groups (?<name>...)
+#   - template: HTML template with %{capture_group_name} placeholders
+#
+# To add a new embed type:
+# 1. Add a new top-level key
+# 2. Define the regex pattern with named capture groups: (?<name>pattern)
+# 3. Create an HTML template using %{name} placeholders matching the capture groups
+
+youtube:
+  regex: 'https?://(?:www\.)?(?:youtube\.com/watch\?v=|youtu\.be/)(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+     <iframe
+      src="https://www.youtube-nocookie.com/embed/%{video_id}"
+      frameborder="0"
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen></iframe>
+    </div>
+
+loom:
+  regex: 'https?://(?:www\.)?loom\.com/share/(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+      <iframe
+       src="https://www.loom.com/embed/%{video_id}"
+       frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
+       style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+    </div>
+
+vimeo:
+  regex: 'https?://(?:www\.)?vimeo\.com/(?<video_id>\d+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+     <iframe
+      src="https://player.vimeo.com/video/%{video_id}?dnt=true"
+      frameborder="0"
+      allow="autoplay; fullscreen; picture-in-picture"
+      allowfullscreen
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+     </div>
+
+mp4:
+  regex: '(?<link_url>https?://(?:www\.)?.+\.mp4)'
+  template: |
+    <video width="640" height="360" controls>
+      <source src="%{link_url}" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+
+arcade:
+  regex: 'https?://(?:www\.)?app\.arcade\.software/share/(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+      <iframe
+        src="https://app.arcade.software/embed/%{video_id}"
+        frameborder="0"
+        webkitallowfullscreen
+        mozallowfullscreen
+        allowfullscreen
+        allow="fullscreen"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+      </iframe>
+    </div>
+
+wistia:
+  regex: 'https?://(?:www\.)?[^/]+\.wistia\.com/medias/(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 56.25%; height: 0;">
+      <script src="https://fast.wistia.com/player.js" async></script>
+      <script src="https://fast.wistia.com/embed/%{video_id}.js" async type="module"></script>
+      <style>
+        wistia-player[media-id='%{video_id}']:not(:defined) {
+          background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/%{video_id}/swatch');
+          display: block;
+          filter: blur(5px);
+          padding-top:56.25%;
+        }
+      </style>
+      <wistia-player
+        media-id="%{video_id}"
+        aspect="1.7777777777777777"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+      </wistia-player>
+    </div>
+
+bunny:
+  regex: 'https?://iframe\.mediadelivery\.net/play/(?<library_id>\d+)/(?<video_id>[^&/?]+)'
+  template: |
+    <div style="position: relative; padding-top: 56.25%;">
+      <iframe
+        src="https://iframe.mediadelivery.net/embed/%{library_id}/%{video_id}?autoplay=false&loop=false&muted=false&preload=true&responsive=true"
+        title="Bunny video player"
+        loading="lazy"
+        style="border: 0; position: absolute; top: 0; height: 100%; width: 100%;"
+        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+        allowfullscreen>
+      </iframe>
+    </div>
+
+codepen:
+  regex: 'https?://(?:www\.)?codepen\.io/(?<user>[^/]+)/pen/(?<pen_id>[^/?]+)'
+  template: |
+    <div style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;">
+      <iframe
+        height="400"
+        style="width: 100%;"
+        scrolling="no"
+        title="CodePen Embed"
+        src="https://codepen.io/%{user}/embed/%{pen_id}?default-tab=result"
+        frameborder="no"
+        loading="lazy"
+        allowtransparency="true"
+        allowfullscreen="true">
+      </iframe>
+    </div>
+
+github_gist:
+  regex: 'https?://gist\.github\.com/(?<username>[^/]+)/(?<gist_id>[a-f0-9]+)'
+  template: |
+    <script src="https://gist.github.com/%{username}/%{gist_id}.js"></script>
+    <noscript>
+      <div style="border: 1px solid #d1d9e0; border-radius: 6px; padding: 16px; margin: 16px 0; background: #f6f8fa;">
+        <a href="https://gist.github.com/%{username}/%{gist_id}" target="_blank" style="color: #0969da; text-decoration: none;">
+          View this gist on GitHub
+        </a>
+      </div>
+    </noscript>

config/routes.rb

@@ -67,6 +67,7 @@ Rails.application.routes.draw do
           end
           resources :agent_bots, only: [:index, :create, :show, :update, :destroy] do
             delete :avatar, on: :member
+            post :reset_access_token, on: :member
           end
           resources :contact_inboxes, only: [] do
             collection do
@@ -296,6 +297,7 @@ Rails.application.routes.draw do
           post :auto_offline
           put :set_active_account
           post :resend_confirmation
+          post :reset_access_token
         end
       end
 
@@ -447,6 +449,7 @@ Rails.application.routes.draw do
   get 'hc/:slug/:locale/categories', to: 'public/api/v1/portals/categories#index'
   get 'hc/:slug/:locale/categories/:category_slug', to: 'public/api/v1/portals/categories#show'
   get 'hc/:slug/:locale/categories/:category_slug/articles', to: 'public/api/v1/portals/articles#index'
+  get 'hc/:slug/articles/:article_slug.png', to: 'public/api/v1/portals/articles#tracking_pixel'
   get 'hc/:slug/articles/:article_slug', to: 'public/api/v1/portals/articles#show'
 
   # ----------------------------------------------------------------------

developer-docs/api-reference/introduction.mdx

@@ -1,49 +0,0 @@
----
-title: Introduction to Chatwoot APIs
-description: Learn how to use Chatwoot APIs to build integrations, customize chat experiences, and manage your installation.
-sidebarTitle: Introduction
----
-
-Welcome to the Chatwoot API documentation. Whether you're building custom workflows for your support team, integrating Chatwoot into your product, or managing users across installations, our APIs provide the flexibility and power to help you do more with Chatwoot.
-
-Chatwoot provides three categories of APIs, each designed with a specific use case in mind:
-
-- **Application APIs** – For account-level automation and agent-facing integrations.
-- **Client APIs** – For building custom chat interfaces for end-users
-- **Platform APIs** – For managing and administering installations at scale
-
----
-
-## Application APIs
-
-Application APIs are designed for interacting with a Chatwoot account from an agent/admin perspective. Use them to build internal tools, automate workflows, or perform bulk operations like data import/export.
-
-- **Authentication**: Requires a user `access_token`, which can be generated from **Profile Settings** after logging into your Chatwoot account.
-- **Availability**: Supported on both **Cloud** and **Self-hosted** Chatwoot installations.
-- **Example**: [Google Cloud Functions Demo](https://github.com/chatwoot/google-cloud-functions-demo)
-
----
-
-## Client APIs
-
-Client APIs are intended for building custom messaging experiences over Chatwoot. If you're not using the native website widget or want to embed chat in your mobile app, these APIs are the way to go.
-
-- **Authentication**: Uses `inbox_identifier` (from **Settings → Configuration** in API inboxes) and `contact_identifier` (returned when creating a contact).
-- **Availability**: Supported on both **Cloud** and **Self-hosted** Chatwoot installations.
-- **Examples**:
-
-  - [Client API Demo](https://github.com/chatwoot/client-api-demo)
-  - [Flutter SDK](https://github.com/chatwoot/chatwoot-flutter-sdk)
-
----
-
-## Platform APIs
-
-Platform APIs are used to manage Chatwoot installations at the admin level. These APIs allow you to control users, roles, and accounts, or sync data from external authentication systems.
-
-- **Authentication**: Requires an `access_token` generated by a **Platform App**, which can be created in the **Super Admin Console**.
-- **Availability**: Available on **Self-hosted** / **Managed Hosting** Chatwoot installations only.
-
----
-
-Use the right API for your use case, and you'll be able to extend, customize, and integrate Chatwoot into your stack with ease.

developer-docs/contributing/code-of-conduct.mdx

@@ -1,89 +0,0 @@
----
-title: Contributor Covenant Code of Conduct
-description: Code of conduct for Chatwoot community members and contributors
-sidebarTitle: Code of Conduct
----
-
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our community include:
-
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall community
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at **hello@chatwoot.com**.
-
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series of actions.
-
-**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within the community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available at [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html).
-
-Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
-
-For answers to common questions about this code of conduct, see the FAQ at [https://www.contributor-covenant.org/faq](https://www.contributor-covenant.org/faq). Translations are available at [https://www.contributor-covenant.org/translations](https://www.contributor-covenant.org/translations).
-
----
-
-By participating in the Chatwoot community, you agree to abide by this Code of Conduct. Thank you for helping us create a welcoming and inclusive environment for everyone. 

developer-docs/contributing/community-guidelines.mdx

@@ -1,205 +0,0 @@
----
-title: Chatwoot Community Guidelines
-description: Guidelines for participating in the Chatwoot community across all platforms
-sidebarTitle: Community Guidelines
----
-
-# Chatwoot Community Guidelines
-
-Welcome to the Chatwoot community! These guidelines help ensure our community remains welcoming, productive, and inclusive for everyone.
-
-## General Principles
-
-### 1. Respect and Inclusivity
-Everyone is welcome here. Treat all members with respect, regardless of their background, identity, or level of experience.
-
-### 2. Collaboration Over Conflict
-Always approach discussions and feedback with a constructive attitude. We're all here to learn and grow together.
-
-### 3. No Spam or Self-Promotion
-Unsolicited advertisements, promotions, or spammy links are not allowed. Share valuable content that benefits the community.
-
-## Platform-Specific Guidelines
-
-### Discord-Specific Guidelines
-
-Our Discord server is where the community gathers for real-time discussions, support, and collaboration.
-
-#### Channel Etiquette
-
-1. **Stay On Topic**: Each channel has its purpose. Ensure your discussions are relevant to the channel topic.
-2. **Use Thread Responses**: For lengthy discussions, use thread replies to keep channels organized.
-3. **Search Before Asking**: Check pinned messages and recent discussions before asking questions.
-
-#### Content Guidelines
-
-1. **No NSFW Content**: This is a professional community. Do not share or promote any NSFW content.
-2. **Quality Over Quantity**: Focus on helpful, meaningful contributions rather than frequent low-value messages.
-3. **Appropriate Language**: Keep language professional and appropriate for a business environment.
-
-#### Voice Channels
-
-1. **Microphone Etiquette**: Ensure your microphone is muted when not speaking.
-2. **Respect Speaking Time**: Avoid interrupting others and allow everyone to participate.
-3. **Background Noise**: Use push-to-talk if you're in a noisy environment.
-
-#### Reporting and Support
-
-1. **Report Violations**: If you see someone violating these guidelines, don't engage. Instead, report it to the moderators.
-2. **Use Private Messages**: For sensitive issues, reach out to moderators via private message.
-
-### GitHub-Specific Guidelines
-
-GitHub is our primary platform for code collaboration, issue tracking, and project management.
-
-#### Issue Reporting
-
-1. **Search First**: Before reporting a bug or requesting a feature, search the issues to ensure it hasn't been addressed already.
-2. **Use Templates**: Follow the provided issue templates for bug reports and feature requests.
-3. **Provide Details**: Include clear steps to reproduce, expected behavior, and actual behavior.
-4. **Stay Updated**: Monitor your issues for questions from maintainers and respond promptly.
-
-#### Pull Requests
-
-1. **Clear Descriptions**: Ensure your PRs are concise, have a clear title, and are linked to relevant issues.
-2. **Follow Style Guide**: Adhere to the existing coding style and conventions.
-3. **Test Thoroughly**: Test your changes in multiple scenarios before submitting.
-4. **Respond to Reviews**: Address feedback constructively and make requested changes promptly.
-
-#### Code Review Guidelines
-
-1. **Be Constructive**: Provide specific, actionable feedback rather than general criticism.
-2. **Explain Reasoning**: When suggesting changes, explain why the change would improve the code.
-3. **Appreciate Good Work**: Acknowledge good code and clever solutions.
-4. **Stay Professional**: Keep discussions focused on the code, not the person.
-
-#### Documentation
-
-1. **Update Documentation**: If your PR introduces a new feature, ensure that it's documented.
-2. **Fix What You See**: If you spot outdated or missing documentation, consider updating it or raising an issue.
-3. **Clear Examples**: Provide clear, working examples in documentation.
-
-## Community Support
-
-### Helping Others
-
-#### In Discord
-
-- **Be Patient**: Remember that people have different experience levels
-- **Provide Context**: When helping, explain not just what to do, but why
-- **Share Resources**: Link to relevant documentation or previous discussions
-- **Follow Up**: Check if your help resolved the issue
-
-#### In GitHub
-
-- **Helpful Comments**: Provide constructive feedback on issues and PRs
-- **Share Knowledge**: Contribute to discussions with your expertise
-- **Test Solutions**: Help test proposed fixes when possible
-
-### Getting Help
-
-#### Before Asking
-
-1. **Check Documentation**: Review the official docs first
-2. **Search History**: Look through previous discussions and issues
-3. **Try Solutions**: Attempt basic troubleshooting steps
-
-#### When Asking
-
-1. **Be Specific**: Provide clear details about your issue
-2. **Include Context**: Share relevant environment information
-3. **Show Effort**: Explain what you've already tried
-4. **Be Patient**: Allow time for community members to respond
-
-## Consequences for Violating Guidelines
-
-We enforce these guidelines to maintain a positive community environment.
-
-### Warning System
-
-1. **First Violation**: For most violations, you will receive a warning from the moderators.
-2. **Repeated Minor Violations**: Additional warnings may lead to temporary restrictions.
-
-### Immediate Actions
-
-For serious violations, immediate actions may be taken:
-
-- **Spam or Self-Promotion**: Immediate ban or removal
-- **Harassment or Abuse**: Immediate removal from the community
-- **Sharing Inappropriate Content**: Content removal and potential ban
-
-### Appeal Process
-
-If you believe you've been unfairly moderated:
-
-1. **Contact Moderators**: Reach out via private message
-2. **Provide Context**: Explain your perspective respectfully
-3. **Accept Decisions**: Respect final moderation decisions
-
-Refer to [enforcement guidelines](/contributing/code-of-conduct#enforcement-guidelines) for more details.
-
-## Moderator and Admin Privileges
-
-### Selection Process
-
-Active contributors to the Chatwoot community, those who consistently offer valuable insights, help, and engagement, may be handpicked as moderators or granted specific privileges.
-
-### Criteria for Moderators
-
-- **Consistent Contribution**: Regular, helpful participation in the community
-- **Good Judgment**: Demonstrated ability to handle conflicts constructively
-- **Technical Knowledge**: Understanding of Chatwoot and related technologies
-- **Time Commitment**: Ability to dedicate time to moderation duties
-
-### Responsibilities
-
-Moderators are expected to:
-
-- **Enforce Guidelines**: Apply community guidelines fairly and consistently
-- **Facilitate Discussions**: Help keep conversations productive and on-topic
-- **Support Users**: Provide assistance and guidance to community members
-- **Report Issues**: Escalate serious violations to administrators
-
-### Discretionary Decisions
-
-- **Appointment Process**: The appointment of moderators and the granting of additional privileges are at the sole discretion of the Chatwoot team.
-- **Review Process**: Moderator performance is reviewed regularly to ensure community standards are maintained.
-
-### Admin Privileges
-
-For compliance and security reasons, admin privileges in all Chatwoot communities are reserved exclusively for Chatwoot employees.
-
-## Building a Positive Community
-
-### Encouraging Participation
-
-- **Welcome Newcomers**: Help new members feel included and valued
-- **Celebrate Contributions**: Acknowledge helpful contributions and achievements
-- **Share Knowledge**: Contribute your expertise to help others learn
-- **Provide Feedback**: Offer constructive feedback on ideas and solutions
-
-### Creating Inclusive Environment
-
-- **Use Inclusive Language**: Choose words that welcome all community members
-- **Respect Differences**: Value diverse perspectives and experiences
-- **Avoid Assumptions**: Don't assume others' backgrounds or knowledge levels
-- **Learn Together**: Approach discussions as learning opportunities
-
-## Resources for Community Members
-
-### Getting Started
-
-- **Community Onboarding**: [Discord community](https://discord.com/invite/cJXdrwS)
-- **Contributor Guide**: [Contributing documentation](/contributing/introduction)
-- **Code of Conduct**: [Detailed guidelines](/contributing/code-of-conduct)
-
-### Stay Connected
-
-- **Discord Server**: Real-time community discussions
-- **GitHub Discussions**: Long-form technical discussions
-- **Twitter**: [@chatwootapp](https://twitter.com/chatwootapp) for updates
-- **Blog**: [Chatwoot Blog](https://www.chatwoot.com/blog) for articles and insights
-
----
-
-Together, we can build an amazing community that supports Chatwoot users and contributors worldwide. Thank you for being part of our journey! 🚀 

developer-docs/contributing/contributors.mdx

@@ -1,37 +0,0 @@
----
-title: Contributors
-description: Meet the amazing people who contribute to Chatwoot
-sidebarTitle: Contributors
----
-
-# Contributors
-
-Chatwoot is made possible by the amazing community of developers, designers, translators, and supporters who contribute their time and expertise to make it better every day.
-
-## Our Contributors
-
-You can find the full list of contributors at [https://contributors.chatwoot.com](https://contributors.chatwoot.com)
-
-<a href="https://github.com/chatwoot/chatwoot/graphs/contributors"><img src="https://contributors.chatwoot.com/api/graph.svg?columns=30&size=32" /></a>
-
-## Join Our Contributors
-
-Ready to make your mark on Chatwoot? Here's how to get started:
-
-### Quick Start
-
-1. **Star the Repository**: [Star Chatwoot on GitHub](https://github.com/chatwoot/chatwoot)
-2. **Join Discord**: [Join our Discord community](https://discord.com/invite/cJXdrwS)
-3. **Pick an Issue**: Find a [good first issue](https://github.com/chatwoot/chatwoot/labels/good%20first%20issue)
-4. **Make Your First Contribution**: Follow our [contribution guide](/contributing/introduction)
-
-### Stay Connected
-
-- **GitHub**: [github.com/chatwoot/chatwoot](https://github.com/chatwoot/chatwoot)
-- **Discord**: [discord.com/invite/cJXdrwS](https://discord.com/invite/cJXdrwS)
-- **Twitter**: [@chatwootapp](https://twitter.com/chatwootapp)
-- **LinkedIn**: [Chatwoot Company Page](https://www.linkedin.com/company/chatwoot)
-
----
-
-Every contribution, no matter how small, makes Chatwoot better for thousands of users worldwide. Thank you for considering joining our contributor community! 🙏 

developer-docs/contributing/cypress.mdx

@@ -1,127 +0,0 @@
----
-title: End-to-end testing with Cypress
-description: Guide to running Cypress end-to-end tests for Chatwoot
-sidebarTitle: Cypress Testing
----
-
-# End-to-end testing with Cypress
-
-Chatwoot uses [Cypress](https://www.cypress.io/) for end-to-end testing. Use the following steps to run the tests on your local machine.
-
-## Prepare the Test Server
-
-Choose any of the given methods to run your Chatwoot test server.
-
-<Tabs>
-<Tab title="Local Installation">
-
-### Using Local Chatwoot Installation
-
-<Note>
-You have to install the necessary dependencies as described in [setup guide](/contributing/project-setup/setup-guide) for this method to work.
-</Note>
-
-Navigate to Chatwoot codebase in your local machine and execute the following steps:
-
-#### Create a fresh test database
-
-```bash
-RAILS_ENV=test bin/rake db:drop
-RAILS_ENV=test bin/rake db:create
-RAILS_ENV=test bin/rake db:schema:load
-```
-
-#### Start Chatwoot in the test environment
-
-```bash
-RAILS_ENV=test foreman start -f Procfile.test
-```
-
-Load the URL in the browser and wait for it to start up:
-```
-http://localhost:5050/app/login
-```
-
-</Tab>
-<Tab title="Docker Setup">
-
-### Using Docker
-
-Follow the [docker setup guide](/contributing/project-setup/docker-setup) until you build the images.
-
-#### Change the Rails Environment
-
-Open `docker-compose.yaml` and update all the `RAILS_ENV` values from `development` to `test`:
-
-```yaml
-# In docker-compose.yaml
-environment:
-  - RAILS_ENV=test  # Change from development to test
-```
-
-#### Update the Port
-
-Under rails section in your `docker-compose.yaml` update the port value as given below:
-
-```yaml
-# In docker-compose.yaml
-ports:
-  - 5050:3000  # Change from 3000:3000 to 5050:3000
-```
-
-#### Reset the Database
-
-```bash
-docker-compose run --rm rails bundle exec rails db:reset
-```
-
-#### Start Chatwoot Docker in the test environment
-
-```bash
-docker-compose up
-```
-
-Load the URL in the browser and wait for it to start up:
-```
-http://localhost:5050/app/login
-```
-
-</Tab>
-</Tabs>
-
-## Run Cypress
-
-Load `localhost:5050` on your browser and ensure that the Chatwoot server is running.
-
-Navigate to your Chatwoot local directory and execute the following command to run the Cypress tests:
-
-```bash
-pnpm cypress open --project ./spec
-```
-
-This will open the Cypress Test Runner where you can:
-
-1. **Choose a browser** for running tests
-2. **Select test files** to run individual or all tests
-3. **Watch tests run** in real-time with step-by-step execution
-4. **Debug failed tests** with detailed error information
-
-
-## Getting Help
-
-If you encounter issues with Cypress testing:
-
-- **Cypress Documentation**: [Official Cypress Docs](https://docs.cypress.io/)
-- **Cypress Best Practices**: [Testing Guide](https://docs.cypress.io/guides/references/best-practices)
-- **Common Errors**: See [Common Errors](/contributing/project-setup/common-errors)
-- **Community Support**: [Discord](https://discord.com/invite/cJXdrwS)
-
-## Useful Resources
-
-- **Cypress API Reference**: [https://docs.cypress.io/api/table-of-contents](https://docs.cypress.io/api/table-of-contents)
-- **Testing Library**: [Testing utilities for better element selection](https://testing-library.com/)
-- **Cypress Examples**: [Real-world examples](https://github.com/cypress-io/cypress-example-recipes)
-
----
-
-Your Cypress testing environment is now ready for comprehensive end-to-end testing! 🧪 

developer-docs/contributing/environment-setup/local-development.mdx

@@ -1,588 +0,0 @@
----
-title: Local Development Setup
-description: Set up Chatwoot for local development on your machine
-sidebarTitle: Local Development
----
-
-# Local Development Setup
-
-This guide will help you set up Chatwoot for local development on your machine. Follow these steps to get a complete development environment running.
-
-## Prerequisites
-
-Before setting up Chatwoot locally, ensure you have the following installed:
-
-### Required Software
-
-<CardGroup cols={2}>
-  <Card title="Ruby" icon="gem">
-    Ruby 3.3.3 (managed with rbenv or RVM)
-  </Card>
-  <Card title="Node.js" icon="node-js">
-    Node.js 20+ with pnpm package manager
-  </Card>
-  <Card title="PostgreSQL" icon="database">
-    PostgreSQL 13+ for the database
-  </Card>
-  <Card title="Redis" icon="redis">
-    Redis 6+ for caching and background jobs
-  </Card>
-</CardGroup>
-
-### System Dependencies
-
-<Tabs>
-  <Tab title="macOS">
-    ```bash
-    # Install Homebrew if not already installed
-    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-    
-    # Install dependencies
-    brew install postgresql@15 redis imagemagick git
-    
-    # Install rbenv for Ruby version management
-    brew install rbenv ruby-build
-    
-    # Install Node.js and pnpm
-    brew install node
-    npm install -g pnpm
-    
-    # Start services
-    brew services start postgresql@15
-    brew services start redis
-    ```
-  </Tab>
-  
-  <Tab title="Ubuntu/Debian">
-    ```bash
-    # Update package list
-    sudo apt update
-    
-    # Install dependencies
-    sudo apt install -y curl git build-essential libssl-dev libreadline-dev \
-      zlib1g-dev libpq-dev imagemagick libmagickwand-dev libffi-dev \
-      postgresql postgresql-contrib redis-server
-    
-    # Install rbenv
-    curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash
-    
-    # Install Node.js (using NodeSource)
-    curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
-    sudo apt install -y nodejs
-    
-    # Install pnpm
-    npm install -g pnpm
-    
-    # Start services
-    sudo systemctl start postgresql
-    sudo systemctl start redis-server
-    sudo systemctl enable postgresql
-    sudo systemctl enable redis-server
-    ```
-  </Tab>
-  
-  <Tab title="CentOS/RHEL">
-    ```bash
-    # Install EPEL repository
-    sudo yum install -y epel-release
-    
-    # Install dependencies
-    sudo yum groupinstall -y "Development Tools"
-    sudo yum install -y curl git openssl-devel readline-devel zlib-devel \
-      postgresql-devel ImageMagick-devel libffi-devel postgresql-server \
-      postgresql-contrib redis
-    
-    # Initialize PostgreSQL
-    sudo postgresql-setup initdb
-    
-    # Install rbenv
-    curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash
-    
-    # Install Node.js
-    curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
-    sudo yum install -y nodejs
-    
-    # Install pnpm
-    npm install -g pnpm
-    
-    # Start services
-    sudo systemctl start postgresql
-    sudo systemctl start redis
-    sudo systemctl enable postgresql
-    sudo systemctl enable redis
-    ```
-  </Tab>
-</Tabs>
-
-## Ruby Setup
-
-### Install Ruby with rbenv
-
-```bash
-# Add rbenv to your shell profile
-echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
-echo 'eval "$(rbenv init -)"' >> ~/.bashrc
-source ~/.bashrc
-
-# Install Ruby 3.3.3
-rbenv install 3.3.3
-rbenv global 3.3.3
-
-# Verify installation
-ruby --version
-# Should output: ruby 3.3.3
-
-# Install bundler
-gem install bundler
-```
-
-### Alternative: Using RVM
-
-```bash
-# Install RVM
-curl -sSL https://get.rvm.io | bash -s stable
-source ~/.rvm/scripts/rvm
-
-# Install Ruby 3.3.3
-rvm install 3.3.3
-rvm use 3.3.3 --default
-
-# Verify installation
-ruby --version
-gem install bundler
-```
-
-## Database Setup
-
-### PostgreSQL Configuration
-
-```bash
-# Create PostgreSQL user (macOS with Homebrew)
-createuser -s chatwoot
-
-# Create PostgreSQL user (Linux)
-sudo -u postgres createuser -s chatwoot
-
-# Set password for the user
-sudo -u postgres psql
-postgres=# ALTER USER chatwoot PASSWORD 'password';
-postgres=# \q
-
-# Create databases
-createdb chatwoot_development
-createdb chatwoot_test
-```
-
-### PostgreSQL Authentication Setup
-
-Edit PostgreSQL configuration to allow local connections:
-
-```bash
-# Find pg_hba.conf location
-sudo -u postgres psql -c "SHOW hba_file;"
-
-# Edit the file (example path)
-sudo nano /etc/postgresql/15/main/pg_hba.conf
-
-# Add or modify these lines:
-local   all             chatwoot                                md5
-host    all             chatwoot        127.0.0.1/32            md5
-host    all             chatwoot        ::1/128                 md5
-
-# Restart PostgreSQL
-sudo systemctl restart postgresql
-```
-
-## Project Setup
-
-### Clone the Repository
-
-```bash
-# Fork the repository on GitHub first, then clone your fork
-git clone https://github.com/YOUR_USERNAME/chatwoot.git
-cd chatwoot
-
-# Add upstream remote
-git remote add upstream https://github.com/chatwoot/chatwoot.git
-
-# Verify remotes
-git remote -v
-```
-
-### Install Dependencies
-
-```bash
-# Install Ruby dependencies
-bundle install
-
-# Install Node.js dependencies
-pnpm install
-
-# Install Playwright for E2E tests (optional)
-pnpm exec playwright install
-```
-
-### Environment Configuration
-
-```bash
-# Copy environment file
-cp .env.example .env
-
-# Edit the environment file
-nano .env
-```
-
-Update the `.env` file with your local configuration:
-
-```bash
-# Database configuration
-DATABASE_URL=postgresql://chatwoot:password@localhost:5432/chatwoot_development
-REDIS_URL=redis://localhost:6379/0
-
-# Application settings
-FRONTEND_URL=http://localhost:3000
-FORCE_SSL=false
-RAILS_ENV=development
-NODE_ENV=development
-
-# Email configuration (for development)
-MAILER_SENDER_EMAIL=dev@chatwoot.local
-SMTP_ADDRESS=localhost
-SMTP_PORT=1025
-
-# File storage (local)
-ACTIVE_STORAGE_SERVICE=local
-
-# Development features
-ENABLE_DEVELOPMENT_FEATURES=true
-LOG_LEVEL=debug
-```
-
-### Database Initialization
-
-```bash
-# Create and migrate the database
-bundle exec rails db:create
-bundle exec rails db:migrate
-
-# Seed the database with sample data
-bundle exec rails db:seed
-
-# Prepare the test database
-RAILS_ENV=test bundle exec rails db:create
-RAILS_ENV=test bundle exec rails db:migrate
-```
-
-## Running the Application
-
-### Start Development Servers
-
-You'll need to run multiple processes for full development:
-
-#### Option 1: Using Foreman (Recommended)
-
-```bash
-# Install foreman
-gem install foreman
-
-# Start all services
-foreman start -f Procfile.dev
-```
-
-#### Option 2: Manual Process Management
-
-Open multiple terminal windows/tabs:
-
-```bash
-# Terminal 1: Rails server
-bundle exec rails server -p 3000
-
-# Terminal 2: Webpack dev server
-pnpm run dev
-
-# Terminal 3: Sidekiq worker
-bundle exec sidekiq
-
-# Terminal 4: MailHog (for email testing)
-mailhog
-```
-
-### Access the Application
-
-Once all services are running:
-
-- **Web Application**: http://localhost:3000
-- **API Documentation**: http://localhost:3000/swagger
-- **Sidekiq Web UI**: http://localhost:3000/sidekiq
-- **MailHog (Email)**: http://localhost:8025
-
-### Default Login Credentials
-
-After seeding the database, you can log in with:
-
-- **Email**: john@acme.inc
-- **Password**: Password1!
-
-## Development Tools
-
-### Code Quality Tools
-
-```bash
-# Install development gems
-bundle install --with development test
-
-# Run RuboCop (Ruby linter)
-bundle exec rubocop
-
-# Run RuboCop with auto-fix
-bundle exec rubocop -a
-
-# Run ESLint (JavaScript linter)
-pnpm run lint
-
-# Run ESLint with auto-fix
-pnpm run lint:fix
-
-# Run Prettier (code formatter)
-pnpm run format
-```
-
-### Testing
-
-```bash
-# Run Ruby tests
-bundle exec rspec
-
-# Run specific test file
-bundle exec rspec spec/models/user_spec.rb
-
-# Run JavaScript tests
-pnpm run test
-
-# Run E2E tests
-pnpm run test:e2e
-
-# Run tests with coverage
-COVERAGE=true bundle exec rspec
-```
-
-### Database Operations
-
-```bash
-# Reset database
-bundle exec rails db:drop db:create db:migrate db:seed
-
-# Generate migration
-bundle exec rails generate migration AddColumnToTable column:type
-
-# Run migrations
-bundle exec rails db:migrate
-
-# Rollback migration
-bundle exec rails db:rollback
-
-# Check migration status
-bundle exec rails db:migrate:status
-```
-
-## IDE and Editor Setup
-
-### VS Code Configuration
-
-Create `.vscode/settings.json`:
-
-```json
-{
-  "ruby.intellisense": "rubyLocate",
-  "ruby.codeCompletion": "rcodetools",
-  "ruby.format": "rubocop",
-  "editor.formatOnSave": true,
-  "editor.rulers": [120],
-  "files.trimTrailingWhitespace": true,
-  "files.insertFinalNewline": true,
-  "eslint.autoFixOnSave": true,
-  "prettier.requireConfig": true
-}
-```
-
-### Recommended VS Code Extensions
-
-```json
-{
-  "recommendations": [
-    "rebornix.ruby",
-    "wingrunr21.vscode-ruby",
-    "bradlc.vscode-tailwindcss",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint",
-    "ms-vscode.vscode-typescript-next",
-    "bradlc.vscode-tailwindcss"
-  ]
-}
-```
-
-### RubyMine Configuration
-
-1. Open the project in RubyMine
-2. Configure Ruby SDK: File → Project Structure → SDKs
-3. Set up database connection in Database tool window
-4. Configure code style: File → Settings → Editor → Code Style
-
-## Debugging
-
-### Rails Debugging
-
-```ruby
-# Add to your code for debugging
-binding.pry
-
-# Or use the built-in debugger
-debugger
-```
-
-### JavaScript Debugging
-
-```javascript
-// Add to your code
-console.log('Debug info:', variable);
-debugger;
-```
-
-### Database Debugging
-
-```bash
-# Rails console
-bundle exec rails console
-
-# Database console
-bundle exec rails dbconsole
-
-# Check database queries in logs
-tail -f log/development.log | grep SQL
-```
-
-## Common Issues and Solutions
-
-### Bundle Install Issues
-
-<Accordion title="pg gem installation fails">
-```bash
-# macOS
-brew install postgresql
-bundle config build.pg --with-pg-config=/usr/local/bin/pg_config
-
-# Ubuntu/Debian
-sudo apt-get install libpq-dev
-bundle install
-```
-</Accordion>
-
-<Accordion title="ImageMagick issues">
-```bash
-# macOS
-brew install imagemagick pkg-config
-
-# Ubuntu/Debian
-sudo apt-get install libmagickwand-dev
-
-# Then reinstall the gem
-bundle pristine rmagick
-```
-</Accordion>
-
-### Node.js Issues
-
-<Accordion title="pnpm install fails">
-```bash
-# Clear cache and reinstall
-pnpm store prune
-rm -rf node_modules
-pnpm install
-```
-</Accordion>
-
-<Accordion title="Webpack compilation errors">
-```bash
-# Clear webpack cache
-rm -rf tmp/cache/webpacker
-pnpm run dev
-```
-</Accordion>
-
-### Database Issues
-
-<Accordion title="Database connection refused">
-```bash
-# Check if PostgreSQL is running
-sudo systemctl status postgresql
-
-# Start PostgreSQL if not running
-sudo systemctl start postgresql
-
-# Check connection
-psql -U chatwoot -d chatwoot_development -h localhost
-```
-</Accordion>
-
-<Accordion title="Permission denied for database">
-```bash
-# Reset PostgreSQL user password
-sudo -u postgres psql
-postgres=# ALTER USER chatwoot PASSWORD 'password';
-postgres=# \q
-```
-</Accordion>
-
-## Performance Optimization
-
-### Development Performance Tips
-
-```bash
-# Use spring for faster Rails commands
-bundle exec spring binstub --all
-
-# Use bootsnap for faster boot times (already included)
-# Ensure tmp/cache directory exists
-mkdir -p tmp/cache
-
-# Use parallel testing
-bundle exec rspec --parallel
-
-# Optimize database queries
-# Add to config/environments/development.rb
-config.active_record.verbose_query_logs = true
-```
-
-### Memory Usage Optimization
-
-```bash
-# Monitor memory usage
-ps aux | grep ruby
-ps aux | grep node
-
-# Use jemalloc for better memory management
-export MALLOC_ARENA_MAX=2
-bundle exec rails server
-```
-
-## Next Steps
-
-Once you have your development environment set up:
-
-1. **Read the Contributing Guidelines**: Check out the [contributing guide](../introduction) for code standards and workflow
-2. **Explore the Codebase**: Familiarize yourself with the project structure
-3. **Pick an Issue**: Look for "good first issue" labels on GitHub
-4. **Join the Community**: Connect with other contributors on Discord or GitHub Discussions
-
-## Getting Help
-
-If you encounter issues during setup:
-
-- **GitHub Issues**: Search existing issues or create a new one
-- **Discord Community**: Join the Chatwoot Discord server
-- **Documentation**: Check the official documentation
-- **Stack Overflow**: Search for Chatwoot-related questions
-
----
-
-You're now ready to start contributing to Chatwoot! The development environment should be fully functional and ready for coding. 

developer-docs/contributing/introduction.mdx

@@ -1,196 +0,0 @@
----
-title: Contributing to Chatwoot
-description: Complete guide to contributing to Chatwoot - from setting up your development environment to submitting pull requests.
-sidebarTitle: Introduction
----
-
-# Contributing Guide
-
-Thank you for taking an interest in contributing to Chatwoot! This guide will help you get started with contributing to our open-source customer support platform. Before submitting your contribution, please make sure to take a moment and read through the following guidelines.
-
-## Getting Started
-
-<Warning>
-Before starting your work, ensure an issue exists for it. If not, feel free to create one. You can also take a look into the issues tagged [Good first issues](https://github.com/chatwoot/chatwoot/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22).
-</Warning>
-
-### Initial Steps
-
-1. **Check for Existing Issues**: Browse the [GitHub issues](https://github.com/chatwoot/chatwoot/issues) to see if someone is already working on what you want to contribute.
-
-2. **Comment on the Issue**: Add a comment on the issue and wait for the issue to be assigned before you start working on it.
-   - This helps to avoid multiple people working on similar issues.
-
-3. **Propose Complex Solutions**: If the solution is complex, propose the solution on the issue and wait for one of the core contributors to approve before going into the implementation.
-   - This helps in shorter turn around times in merging PRs.
-
-4. **Justify New Features**: For new feature requests, provide a convincing reason to add this feature. Real-life business use-cases will be super helpful.
-
-5. **Join the Community**: Feel free to join our [Discord community](https://discord.com/invite/cJXdrwS) if you need further discussions with the core team.
-
-## Pull Request Guidelines
-
-<Info>
-We use git-flow branching model. The base branch is `develop`. Please raise your PRs against the `develop` branch.
-</Info>
-
-### Before Submitting
-
-- Please make sure that you have read the [issue triage guidelines](https://www.chatwoot.com/hc/handbook/articles/issue-triage-29) before you make a contribution.
-- It's okay and encouraged to have multiple small commits as you work on the PR - we will squash the commits before merging.
-- For other guidelines, see [PR Guidelines](https://www.chatwoot.com/hc/handbook/articles/pull-request-guidelines-32)
-- Ensure that all the text copies that you add into the product are i18n translatable. You are only required to add the `English` version of the strings. We pull in other language translations from our contributors on crowdin. See [Translation guidelines](https://www.chatwoot.com/docs/contributing-guide/translation-guidelines) to learn more.
-
-## Development Workflow
-
-### Developing a New Feature
-
-```bash
-# Create a branch in the following format:
-feature/<issue-id>-<issue-name>
-
-# Example:
-feature/235-contact-panel
-```
-
-**Requirements:**
-- Add accompanying test cases
-- Follow our coding standards
-- Include proper documentation
-
-### Bug Fixes or Chores
-
-```bash
-# Branch naming for bug fixes:
-fix/<issue-id>-<issue-name>
-
-# Branch naming for chores:
-chore/<description>
-```
-
-**Requirements:**
-- If you are resolving a particular issue, add `fix: Fixes xxxx` (#xxxx is the issue) in your PR title
-- Provide a detailed description of the bug in the PR
-- Add appropriate test coverage if applicable
-
-## Environment Setup
-
-Choose the guide that matches your operating system:
-
-<CardGroup cols={2}>
-  <Card
-    title="macOS Setup"
-    icon="apple"
-    href="/contributing/project-setup/macos-setup"
-  >
-    Complete setup guide for macOS developers
-  </Card>
-  <Card
-    title="Ubuntu Setup"
-    icon="ubuntu"
-    href="/contributing/project-setup/ubuntu-setup"
-  >
-    Step-by-step Ubuntu installation guide
-  </Card>
-  <Card
-    title="Windows Setup"
-    icon="windows"
-    href="/contributing/project-setup/windows-setup"
-  >
-    Windows 10/11 development environment setup
-  </Card>
-  <Card
-    title="Docker Setup"
-    icon="docker"
-    href="/contributing/project-setup/docker-setup"
-  >
-    Quick setup using Docker containers
-  </Card>
-</CardGroup>
-
-### Speed Up Development
-
-Use our [Make commands](/contributing/project-setup/make-setup) to speed up your local development workflow.
-
-## Project Setup
-
-Once you have set up the environment, follow these guides to get Chatwoot running locally:
-
-1. **[Quick Setup Guide](/contributing/project-setup/setup-guide)** - Step-by-step setup instructions
-2. **[Environment Variables](/contributing/project-setup/environment-variables)** - Configuration options
-3. **[Common Errors](/contributing/project-setup/common-errors)** - Troubleshooting guide
-
-### Special App Integrations
-
-If you're working on specific integrations:
-- **[Telegram App Setup](/contributing/project-setup/telegram-app)** 
-- **[Line App Setup](/contributing/project-setup/line-app)**
-- **[Mobile App Development](/contributing/project-setup/mobile-app)**
-
-## Testing Your Contributions
-
-We use comprehensive testing to ensure code quality:
-
-### Test Types
-- **Unit Tests**: Test individual components and functions
-- **Integration Tests**: Test component interactions
-- **End-to-End Tests**: Test complete user workflows with [Cypress](/contributing/testing)
-
-### Running Tests
-
-```bash
-# Run all tests
-bundle exec rspec
-
-# Run specific test file
-bundle exec rspec spec/models/user_spec.rb
-
-# Run Cypress tests
-npm run cypress:open
-```
-
-## Documentation and Translation
-
-### Documentation Guidelines
-- Keep documentation clear and concise
-- Include code examples where helpful
-- Update documentation when changing functionality
-- Follow our [translation guidelines](https://www.chatwoot.com/docs/contributing-guide/other/translation-guidelines)
-
-### Internationalization
-- All user-facing text must be translatable
-- Only add English strings - other languages are handled via [Crowdin](https://translate.chatwoot.com/)
-- Use proper i18n keys and formatting
-
-## Community Guidelines
-
-We strive to maintain a welcoming and inclusive community:
-
-- **[Code of Conduct](https://www.chatwoot.com/docs/contributing-guide/other/code-of-conduct)** - Our community standards
-- **[Community Guidelines](https://www.chatwoot.com/docs/contributing-guide/other/community-guidelines)** - How we interact
-- **[Security Reports](https://www.chatwoot.com/docs/contributing-guide/other/security-reports)** - Reporting security issues
-
-## API Development
-
-If you're working on API-related features:
-
-- **[Chatwoot APIs](https://www.chatwoot.com/docs/contributing-guide/other/chatwoot-apis)** - API development guide
-- **[API Documentation](https://www.chatwoot.com/docs/contributing-guide/other/api-documentation)** - Documenting APIs
-- **[Platform APIs](https://www.chatwoot.com/docs/contributing-guide/other/chatwoot-platform-apis)** - Platform-level APIs
-
-## Recognition
-
-We value all contributions to Chatwoot. Check out our [Contributors page](https://www.chatwoot.com/docs/contributing-guide/other/contributors) to see the amazing people who have helped make Chatwoot better.
-
-## Getting Help
-
-Need assistance? Here are your options:
-
-- **GitHub Issues**: For bug reports and feature requests
-- **Discord Community**: For real-time discussions with the core team
-- **Documentation**: Comprehensive guides and API references
-- **Community Forums**: Connect with other contributors
-
----
-
-Ready to start contributing? Pick an issue that interests you and follow our guidelines above. Every contribution, no matter how small, helps make Chatwoot better for everyone! 🚀