Merge pull request #58 from fazer-ai/chore/merge-upstream

Chore/merge upstream
2025-05-31 15:50:25 -03:00 · 2025-05-31 15:50:25 -03:00 · 9269a5e165
commit 9269a5e165
parent 76deea996d ed89858d45
521 changed files with 47790 additions and 8071 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -73,15 +73,15 @@ jobs:
              libvips

      - run:
-          name: Install RVM and Ruby 3.3.3
+          name: Install RVM and Ruby 3.4.4
          command: |
            sudo apt-get install -y gpg
            gpg --keyserver hkp://keyserver.ubuntu.com --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
            \curl -sSL https://get.rvm.io | bash -s stable
            echo 'source ~/.rvm/scripts/rvm' >> $BASH_ENV
            source ~/.rvm/scripts/rvm
-            rvm install "3.3.3"
-            rvm use 3.3.3 --default
+            rvm install "3.4.4"
+            rvm use 3.4.4 --default
            gem install bundler -v 2.5.16

      - run:
--- a/.devcontainer/Dockerfile
+++ b/.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
--- a/.devcontainer/Dockerfile.base
+++ b/.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
--- a/.devcontainer/devcontainer.json
+++ b/.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"
--- a/.devcontainer/docker-compose.base.yml
+++ b/.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
--- a/.devcontainer/docker-compose.yml
+++ b/.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.3.3'
-        # 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: ..
@ -25,7 +12,7 @@ services:
      args:
        VARIANT: 'ubuntu-22.04'
        NODE_VERSION: '23.7.0'
-        RUBY_VERSION: '3.3.3'
+        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'
--- a/.devcontainer/scripts/setup.sh
+++ b/.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
--- a/.github/workflows/publish_codespace_image.yml
+++ b/.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
--- a/.rubocop.yml
+++ b/.rubocop.yml
@ -1,7 +1,10 @@
-require:
+plugins:
  - rubocop-performance
  - rubocop-rails
  - rubocop-rspec
+  - rubocop-factory_bot
+
+require:
  - ./rubocop/use_from_email.rb
  - ./rubocop/custom_cop_location.rb

@ -13,44 +16,61 @@ Metrics/ClassLength:
  Exclude:
    - 'app/models/message.rb'
    - 'app/models/conversation.rb'
+
 Metrics/MethodLength:
  Max: 19
+  Exclude:
+    - 'enterprise/lib/captain/agent.rb'
+
 RSpec/ExampleLength:
  Max: 25
+
 Style/Documentation:
  Enabled: false
+
 Style/ExponentialNotation:
  Enabled: false
+
 Style/FrozenStringLiteralComment:
  Enabled: false
+
 Style/SymbolArray:
  Enabled: false
+
 Style/OpenStructUse:
  Enabled: false
+
 Style/OptionalBooleanParameter:
  Exclude:
    - 'app/services/email_templates/db_resolver_service.rb'
    - 'app/dispatchers/dispatcher.rb'
+
 Style/GlobalVars:
  Exclude:
    - 'config/initializers/01_redis.rb'
    - 'config/initializers/rack_attack.rb'
    - 'lib/redis/alfred.rb'
    - 'lib/global_config.rb'
+
 Style/ClassVars:
  Exclude:
    - 'app/services/email_templates/db_resolver_service.rb'
+
 Lint/MissingSuper:
  Exclude:
    - 'app/drops/base_drop.rb'
+
 Lint/SymbolConversion:
  Enabled: false
+
 Lint/EmptyBlock:
  Exclude:
    - 'app/views/api/v1/accounts/conversations/toggle_status.json.jbuilder'
+
 Lint/OrAssignmentToConstant:
  Exclude:
    - 'lib/redis/config.rb'
+
 Metrics/BlockLength:
  Max: 30
  Exclude:
@ -58,10 +78,16 @@ Metrics/BlockLength:
    - '**/routes.rb'
    - 'config/environments/*'
    - db/schema.rb
+
 Metrics/ModuleLength:
  Exclude:
    - lib/seeders/message_seeder.rb
    - spec/support/slack_stubs.rb
+
+Rails/HelperInstanceVariable:
+  Exclude:
+    - enterprise/app/helpers/captain/chat_helper.rb
+
 Rails/ApplicationController:
  Exclude:
    - 'app/controllers/api/v1/widget/messages_controller.rb'
@ -71,74 +97,101 @@ Rails/ApplicationController:
    - 'app/controllers/platform_controller.rb'
    - 'app/controllers/public_controller.rb'
    - 'app/controllers/survey/responses_controller.rb'
+
 Rails/FindEach:
  Enabled: true
  Include:
    - 'app/**/*.rb'
+
 Rails/CompactBlank:
  Enabled: false
+
 Rails/EnvironmentVariableAccess:
  Enabled: false
+
 Rails/TimeZoneAssignment:
  Enabled: false
+
 Rails/RedundantPresenceValidationOnBelongsTo:
  Enabled: false
+
+Rails/InverseOf:
+  Exclude:
+    - enterprise/app/models/captain/assistant.rb
+
+Rails/UniqueValidationWithoutIndex:
+  Exclude:
+    - app/models/canned_response.rb
+    - app/models/telegram_bot.rb
+    - enterprise/app/models/captain_inbox.rb
+    - 'app/models/channel/twitter_profile.rb'
+    - 'app/models/webhook.rb'
+    - 'app/models/contact.rb'
+
 Style/ClassAndModuleChildren:
  EnforcedStyle: compact
  Exclude:
    - 'config/application.rb'
    - 'config/initializers/monkey_patches/*'
+
 Style/MapToHash:
  Enabled: false
+
 Style/HashSyntax:
  Enabled: true
  EnforcedStyle: no_mixed_keys
  EnforcedShorthandSyntax: never
+
 RSpec/NestedGroups:
  Enabled: true
  Max: 4
+
 RSpec/MessageSpies:
  Enabled: false
+
 RSpec/StubbedMock:
  Enabled: false
-RSpec/FactoryBot/SyntaxMethods:
-  Enabled: false
+
 Naming/VariableNumber:
  Enabled: false
+
 Naming/MemoizedInstanceVariableName:
  Exclude:
    - 'app/models/message.rb'
+
 Style/GuardClause:
  Exclude:
    - 'app/builders/account_builder.rb'
    - 'app/models/attachment.rb'
    - 'app/models/message.rb'
+
 Metrics/AbcSize:
  Max: 26
  Exclude:
    - 'app/controllers/concerns/auth_helper.rb'
-Rails/UniqueValidationWithoutIndex:
-  Exclude:
-    - 'app/models/channel/twitter_profile.rb'
-    - 'app/models/webhook.rb'
-    - 'app/models/contact.rb'
+
    - 'app/models/integrations/hook.rb'
    - 'app/models/canned_response.rb'
    - 'app/models/telegram_bot.rb'
+
 Rails/RenderInline:
  Exclude:
    - 'app/controllers/swagger_controller.rb'
+
 Rails/ThreeStateBooleanColumn:
  Exclude:
    - 'db/migrate/20230503101201_create_sla_policies.rb'
+
 RSpec/IndexedLet:
  Enabled: false
+
 RSpec/NamedSubject:
  Enabled: false

 # we should bring this down
 RSpec/MultipleExpectations:
  Max: 7
+
 RSpec/MultipleMemoizedHelpers:
  Max: 14

@ -168,9 +221,124 @@ AllCops:
    - 'storage/**/*'
    - 'db/migrate/20230426130150_init_schema.rb'

+FactoryBot/SyntaxMethods:
+  Enabled: false
+
+# Disable new rules causing errors
 Layout/LeadingCommentSpace:
  Enabled: false

+Style/ReturnNilInPredicateMethodDefinition:
+  Enabled: false
+
+Style/RedundantParentheses:
+  Enabled: false
+
+Performance/StringIdentifierArgument:
+  Enabled: false
+
+Layout/EmptyLinesAroundExceptionHandlingKeywords:
+  Enabled: false
+
+Lint/LiteralAsCondition:
+  Enabled: false
+
+Style/RedundantReturn:
+  Enabled: false
+
+Layout/SpaceAroundOperators:
+  Enabled: false
+
+Rails/EnvLocal:
+  Enabled: false
+
+Rails/WhereRange:
+  Enabled: false
+
+Lint/UselessConstantScoping:
+  Enabled: false
+
+Style/MultipleComparison:
+  Enabled: false
+
+Bundler/OrderedGems:
+  Enabled: false
+
+RSpec/ExampleWording:
+  Enabled: false
+
+RSpec/ReceiveMessages:
+  Enabled: false
+
+FactoryBot/AssociationStyle:
+  Enabled: false
+
+Rails/EnumSyntax:
+  Enabled: false
+
+Lint/RedundantTypeConversion:
+  Enabled: false
+
+# Additional rules to disable
+Rails/RedundantActiveRecordAllMethod:
+  Enabled: false
+
+Layout/TrailingEmptyLines:
+  Enabled: false
+
+Style/SafeNavigationChainLength:
+  Enabled: false
+
+Lint/SafeNavigationConsistency:
+  Enabled: false
+
+Lint/CopDirectiveSyntax:
+  Enabled: false
+
+# Final set of rules to disable
+FactoryBot/ExcessiveCreateList:
+  Enabled: false
+
+RSpec/MissingExpectationTargetMethod:
+  Enabled: false
+
+Performance/InefficientHashSearch:
+  Enabled: false
+
+Style/RedundantSelfAssignmentBranch:
+  Enabled: false
+
+Style/YAMLFileRead:
+  Enabled: false
+
+Layout/ExtraSpacing:
+  Enabled: false
+
+Style/RedundantFilterChain:
+  Enabled: false
+
+Performance/MapMethodChain:
+  Enabled: false
+
+Rails/RootPathnameMethods:
+  Enabled: false
+
+Style/SuperArguments:
+  Enabled: false
+
+# Final remaining rules to disable
+Rails/Delegate:
+  Enabled: false
+
+Style/CaseLikeIf:
+  Enabled: false
+
+FactoryBot/RedundantFactoryOption:
+  Enabled: false
+
+FactoryBot/FactoryAssociationWithStrategy:
+  Enabled: false
+
 Rails/SaveBang:
  Enabled: true
  AllowedReceivers:
--- a/.ruby-version
+++ b/.ruby-version
@ -1 +1 @@
-3.3.3
+3.4.4
--- a/10
+++ b/10
@ -1,10 +1,10 @@
 source 'https://rubygems.org'

-ruby '3.3.3'
+ruby '3.4.4'

 ##-- base gems for rails --##
 gem 'rack-cors', '2.0.0', require: 'rack/cors'
-gem 'rails', '~> 7.0.8.4'
+gem 'rails', '~> 7.1'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false

@ -33,6 +33,8 @@ gem 'liquid'
 gem 'commonmarker'
 # Validate Data against JSON Schema
 gem 'json_schemer'
+# used in swagger build
+gem 'json_refs'
 # Rack middleware for blocking & throttling abusive requests
 gem 'rack-attack', '>= 6.7.0'
 # a utility tool for streaming, flexible and safe downloading of remote files
@ -198,9 +200,6 @@ group :development do
  gem 'scss_lint', require: false
  gem 'web-console', '>= 4.2.1'

-  # used in swagger build
-  gem 'json_refs'
-
  # When we want to squash migrations
  gem 'squasher'

@ -239,6 +238,7 @@ group :development, :test do
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
  gem 'rubocop-rspec', require: false
+  gem 'rubocop-factory_bot', require: false
  gem 'seed_dump'
  gem 'shoulda-matchers'
  gem 'simplecov', '0.17.1', require: false
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -25,76 +25,89 @@ GIT
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    actioncable (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      activejob (= 7.0.8.7)
-      activerecord (= 7.0.8.7)
-      activestorage (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+      zeitwerk (~> 2.6)
+    actionmailbox (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    actionmailer (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      actionview (= 7.0.8.7)
-      activejob (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    actionmailer (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      actionview (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
-      rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.7)
-      actionview (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
-      rack (~> 2.0, >= 2.2.4)
+      rails-dom-testing (~> 2.2)
+    actionpack (7.1.5.1)
+      actionview (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
+      nokogiri (>= 1.8.5)
+      racc
+      rack (>= 2.2.4)
+      rack-session (>= 1.0.1)
      rack-test (>= 0.6.3)
-      rails-dom-testing (~> 2.0)
-      rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      activerecord (= 7.0.8.7)
-      activestorage (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+      rails-dom-testing (~> 2.2)
+      rails-html-sanitizer (~> 1.6)
+    actiontext (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.0.8.7)
-      activesupport (= 7.0.8.7)
+    actionview (7.1.5.1)
+      activesupport (= 7.1.5.1)
      builder (~> 3.1)
-      erubi (~> 1.4)
-      rails-dom-testing (~> 2.0)
-      rails-html-sanitizer (~> 1.1, >= 1.2.0)
+      erubi (~> 1.11)
+      rails-dom-testing (~> 2.2)
+      rails-html-sanitizer (~> 1.6)
    active_record_query_trace (1.8)
-    activejob (7.0.8.7)
-      activesupport (= 7.0.8.7)
+    activejob (7.1.5.1)
+      activesupport (= 7.1.5.1)
      globalid (>= 0.3.6)
-    activemodel (7.0.8.7)
-      activesupport (= 7.0.8.7)
-    activerecord (7.0.8.7)
-      activemodel (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
-    activerecord-import (1.4.1)
+    activemodel (7.1.5.1)
+      activesupport (= 7.1.5.1)
+    activerecord (7.1.5.1)
+      activemodel (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
+      timeout (>= 0.4.0)
+    activerecord-import (2.1.0)
      activerecord (>= 4.2)
-    activestorage (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      activejob (= 7.0.8.7)
-      activerecord (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    activestorage (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
      marcel (~> 1.0)
-      mini_mime (>= 1.1.0)
-    activesupport (7.0.8.7)
+    activesupport (7.1.5.1)
+      base64
+      benchmark (>= 0.3)
+      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.0.2)
+      connection_pool (>= 2.2.5)
+      drb
      i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
      minitest (>= 5.1)
+      mutex_m
+      securerandom (>= 0.3)
      tzinfo (~> 2.0)
-    acts-as-taggable-on (9.0.1)
-      activerecord (>= 6.0, < 7.1)
+    acts-as-taggable-on (12.0.0)
+      activerecord (>= 7.1, < 8.1)
+      zeitwerk (>= 2.4, < 3.0)
    addressable (2.8.7)
      public_suffix (>= 2.0.2, < 7.0)
    administrate (0.20.1)
@ -116,7 +129,7 @@ GEM
    annotate (3.2.0)
      activerecord (>= 3.2, < 8.0)
      rake (>= 10.4, < 14.0)
-    ast (2.4.2)
+    ast (2.4.3)
    attr_extras (7.1.0)
    audited (5.4.1)
      activerecord (>= 5.0, < 7.7)
@ -142,14 +155,15 @@ GEM
      statsd-ruby (~> 1.1)
    base64 (0.2.0)
    bcrypt (3.1.20)
-    bigdecimal (3.1.8)
+    benchmark (0.4.0)
+    bigdecimal (3.1.9)
    bindex (0.8.1)
    bootsnap (1.16.0)
      msgpack (~> 1.2)
    brakeman (5.4.1)
    browser (5.3.1)
    builder (3.3.0)
-    bullet (7.0.7)
+    bullet (8.0.7)
      activesupport (>= 3.0.0)
      uniform_notifier (~> 1.11)
    bundle-audit (0.1.0)
@ -161,8 +175,8 @@ GEM
    climate_control (1.2.0)
    coderay (1.1.3)
    commonmarker (0.23.10)
-    concurrent-ruby (1.3.4)
-    connection_pool (2.4.1)
+    concurrent-ruby (1.3.5)
+    connection_pool (2.5.3)
    crack (1.0.0)
      bigdecimal
      rexml
@ -176,16 +190,10 @@ GEM
      activerecord (>= 5.a)
      database_cleaner-core (~> 2.0.0)
    database_cleaner-core (2.0.1)
-    datadog-ci (0.8.3)
-      msgpack
    date (3.4.1)
-    ddtrace (1.23.2)
-      datadog-ci (~> 0.8.1)
-      debase-ruby_core_source (= 3.3.1)
-      libdatadog (~> 7.0.0.1.0)
-      libddwaf (~> 1.14.0.0.0)
+    ddtrace (0.48.0)
+      ffi (~> 1.0)
      msgpack
-    debase-ruby_core_source (3.3.1)
    debug (1.8.0)
      irb (>= 1.5.0)
      reline (>= 0.3.1)
@ -196,10 +204,10 @@ GEM
      railties (>= 4.1.0)
      responders
      warden (~> 1.2.3)
-    devise_token_auth (1.2.3)
+    devise_token_auth (1.2.5)
      bcrypt (~> 3.0)
      devise (> 3.5.2, < 5)
-      rails (>= 4.2.0, < 7.2)
+      rails (>= 4.2.0, < 8.1)
    diff-lcs (1.5.1)
    digest-crc (0.6.5)
      rake (>= 12.0.0, < 14.0.0)
@ -212,6 +220,7 @@ GEM
      railties (>= 6.1)
    down (5.4.0)
      addressable (~> 2.8)
+    drb (2.2.3)
    dry-cli (1.1.0)
    ecma-re-validator (0.4.0)
      regexp_parser (~> 2.2)
@ -254,7 +263,10 @@ GEM
    fcm (1.0.8)
      faraday (>= 1.0.0, < 3.0)
      googleauth (~> 1)
-    ffi (1.16.3)
+    ffi (1.17.2)
+    ffi (1.17.2-arm64-darwin)
+    ffi (1.17.2-x86_64-darwin)
+    ffi (1.17.2-x86_64-linux-gnu)
    ffi-compiler (1.0.1)
      ffi (>= 1.0.0)
      rake
@ -315,16 +327,13 @@ GEM
    google-cloud-translate-v3 (0.10.0)
      gapic-common (>= 0.20.0, < 2.a)
      google-cloud-errors (~> 1.0)
-    google-protobuf (3.25.5)
-    google-protobuf (3.25.5-arm64-darwin)
-    google-protobuf (3.25.5-x86_64-darwin)
-    google-protobuf (3.25.5-x86_64-linux)
+    google-protobuf (3.25.7)
    googleapis-common-protos (1.6.0)
      google-protobuf (>= 3.18, < 5.a)
      googleapis-common-protos-types (~> 1.7)
      grpc (~> 1.41)
-    googleapis-common-protos-types (1.14.0)
-      google-protobuf (~> 3.18)
+    googleapis-common-protos-types (1.20.0)
+      google-protobuf (>= 3.18, < 5.a)
    googleauth (1.11.2)
      faraday (>= 1.0, < 3.a)
      google-cloud-env (~> 2.1)
@ -334,17 +343,17 @@ GEM
      signet (>= 0.16, < 2.a)
    groupdate (6.2.1)
      activesupport (>= 5.2)
-    grpc (1.62.0)
-      google-protobuf (~> 3.25)
+    grpc (1.72.0)
+      google-protobuf (>= 3.25, < 5.0)
      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-arm64-darwin)
-      google-protobuf (~> 3.25)
+    grpc (1.72.0-arm64-darwin)
+      google-protobuf (>= 3.25, < 5.0)
      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-x86_64-darwin)
-      google-protobuf (~> 3.25)
+    grpc (1.72.0-x86_64-darwin)
+      google-protobuf (>= 3.25, < 5.0)
      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-x86_64-linux)
-      google-protobuf (~> 3.25)
+    grpc (1.72.0-x86_64-linux)
+      google-protobuf (>= 3.25, < 5.0)
      googleapis-common-protos-types (~> 1.0)
    haikunator (1.1.1)
    hairtrigger (1.0.0)
@ -370,7 +379,7 @@ GEM
      mini_mime (>= 1.0.0)
      multi_xml (>= 0.5.2)
    httpclient (2.8.3)
-    i18n (1.14.6)
+    i18n (1.14.7)
      concurrent-ruby (~> 1.0)
    image_processing (1.12.2)
      mini_magick (>= 4.9.5, < 5)
@ -388,7 +397,7 @@ GEM
      rails-dom-testing (>= 1, < 3)
      railties (>= 4.2.0)
      thor (>= 0.14, < 2.0)
-    json (2.6.3)
+    json (2.12.0)
    json_refs (0.1.8)
      hana
    json_schemer (0.2.24)
@ -423,22 +432,13 @@ GEM
      faraday-multipart
      json (>= 1.8)
      rexml
-    language_server-protocol (3.17.0.4)
+    language_server-protocol (3.17.0.5)
    launchy (2.5.2)
      addressable (~> 2.8)
    letter_opener (1.8.1)
      launchy (>= 2.2, < 3)
-    libdatadog (7.0.0.1.0)
-    libdatadog (7.0.0.1.0-x86_64-linux)
-    libddwaf (1.14.0.0.0)
-      ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-arm64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-x86_64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-x86_64-linux)
-      ffi (~> 1.0)
    line-bot-api (1.28.0)
+    lint_roller (1.1.0)
    liquid (5.4.0)
    listen (3.8.0)
      rb-fsevent (~> 0.10, >= 0.10.3)
@ -446,7 +446,7 @@ GEM
    llhttp-ffi (0.4.0)
      ffi-compiler (~> 1.0)
      rake (~> 13.0)
-    logger (1.6.0)
+    logger (1.7.0)
    lograge (0.14.0)
      actionpack (>= 4)
      activesupport (>= 4)
@ -472,10 +472,10 @@ GEM
    mini_magick (4.12.0)
    mini_mime (1.1.5)
    mini_portile2 (2.8.8)
-    minitest (5.25.4)
+    minitest (5.25.5)
    mock_redis (0.36.0)
      ruby2_keywords
-    msgpack (1.7.0)
+    msgpack (1.8.0)
    multi_json (1.15.0)
    multi_xml (0.6.0)
    multipart-post (2.3.0)
@ -546,8 +546,8 @@ GEM
    orm_adapter (0.5.0)
    os (1.1.4)
    ostruct (0.6.1)
-    parallel (1.26.3)
-    parser (3.3.7.1)
+    parallel (1.27.0)
+    parser (3.3.8.0)
      ast (~> 2.4.1)
      racc
    pg (1.5.3)
@ -555,6 +555,7 @@ GEM
      activerecord (>= 5.2)
      activesupport (>= 5.2)
    pgvector (0.1.1)
+    prism (1.4.0)
    procore-sift (1.0.0)
      activerecord (>= 6.1)
    pry (0.14.2)
@ -569,7 +570,7 @@ GEM
      activesupport (>= 3.0.0)
    raabro (1.4.0)
    racc (1.8.1)
-    rack (2.2.14)
+    rack (2.2.15)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-contrib (2.5.0)
@ -583,23 +584,28 @@ GEM
      rack (~> 2.2, >= 2.2.4)
    rack-proxy (0.7.7)
      rack
+    rack-session (1.0.2)
+      rack (< 3)
    rack-test (2.1.0)
      rack (>= 1.3)
    rack-timeout (0.6.3)
-    rails (7.0.8.7)
-      actioncable (= 7.0.8.7)
-      actionmailbox (= 7.0.8.7)
-      actionmailer (= 7.0.8.7)
-      actionpack (= 7.0.8.7)
-      actiontext (= 7.0.8.7)
-      actionview (= 7.0.8.7)
-      activejob (= 7.0.8.7)
-      activemodel (= 7.0.8.7)
-      activerecord (= 7.0.8.7)
-      activestorage (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
+    rackup (1.0.1)
+      rack (< 3)
+      webrick
+    rails (7.1.5.1)
+      actioncable (= 7.1.5.1)
+      actionmailbox (= 7.1.5.1)
+      actionmailer (= 7.1.5.1)
+      actionpack (= 7.1.5.1)
+      actiontext (= 7.1.5.1)
+      actionview (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activemodel (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
      bundler (>= 1.15.0)
-      railties (= 7.0.8.7)
+      railties (= 7.1.5.1)
    rails-dom-testing (2.2.0)
      activesupport (>= 5.0.0)
      minitest
@ -607,13 +613,14 @@ GEM
    rails-html-sanitizer (1.6.1)
      loofah (~> 2.21)
      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    railties (7.0.8.7)
-      actionpack (= 7.0.8.7)
-      activesupport (= 7.0.8.7)
-      method_source
+    railties (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
+      irb
+      rackup (>= 1.0.0)
      rake (>= 12.2)
-      thor (~> 1.0)
-      zeitwerk (~> 2.5)
+      thor (~> 1.0, >= 1.2.2)
+      zeitwerk (~> 2.6)
    rainbow (3.1.1)
    rake (13.2.1)
    rb-fsevent (0.11.2)
@ -625,7 +632,7 @@ GEM
      connection_pool
    redis-namespace (1.10.0)
      redis (>= 4)
-    regexp_parser (2.8.0)
+    regexp_parser (2.10.0)
    reline (0.3.6)
      io-console (~> 0.5)
    representable (3.2.0)
@ -647,7 +654,7 @@ GEM
    retriable (3.1.2)
    reverse_markdown (2.1.1)
      nokogiri
-    rexml (3.3.9)
+    rexml (3.4.1)
    rspec-core (3.13.0)
      rspec-support (~> 3.13.0)
    rspec-expectations (3.13.2)
@ -667,31 +674,36 @@ GEM
    rspec-support (3.13.1)
    rspec_junit_formatter (0.6.0)
      rspec-core (>= 2, < 4, != 2.12.0)
-    rubocop (1.57.2)
+    rubocop (1.75.6)
      json (~> 2.3)
-      language_server-protocol (>= 3.17.0)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
      parallel (~> 1.10)
-      parser (>= 3.2.2.4)
+      parser (>= 3.3.0.2)
      rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
-      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.28.1, < 2.0)
+      regexp_parser (>= 2.9.3, < 3.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
      ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.28.1)
-      parser (>= 3.2.1.0)
-    rubocop-capybara (2.18.0)
-      rubocop (~> 1.41)
-    rubocop-performance (1.17.1)
-      rubocop (>= 1.7.0, < 2.0)
-      rubocop-ast (>= 0.4.0)
-    rubocop-rails (2.19.1)
+      unicode-display_width (>= 2.4.0, < 4.0)
+    rubocop-ast (1.44.1)
+      parser (>= 3.3.7.2)
+      prism (~> 1.4)
+    rubocop-factory_bot (2.27.1)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-performance (1.25.0)
+      lint_roller (~> 1.1)
+      rubocop (>= 1.75.0, < 2.0)
+      rubocop-ast (>= 1.38.0, < 2.0)
+    rubocop-rails (2.32.0)
      activesupport (>= 4.2.0)
+      lint_roller (~> 1.1)
      rack (>= 1.1)
-      rubocop (>= 1.33.0, < 2.0)
-    rubocop-rspec (2.21.0)
-      rubocop (~> 1.33)
-      rubocop-capybara (~> 2.17)
+      rubocop (>= 1.75.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
+    rubocop-rspec (3.6.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
    ruby-openai (7.3.1)
      event_stream_parser (>= 0.3.0, < 2.0.0)
      faraday (>= 1)
@ -821,8 +833,10 @@ GEM
    unf (0.1.4)
      unf_ext
    unf_ext (0.0.8.2)
-    unicode-display_width (2.6.0)
-    uniform_notifier (1.16.0)
+    unicode-display_width (3.1.4)
+      unicode-emoji (~> 4.0, >= 4.0.4)
+    unicode-emoji (4.0.4)
+    uniform_notifier (1.17.0)
    uri (1.0.3)
    uri_template (0.7.0)
    valid_email2 (5.2.6)
@ -850,7 +864,9 @@ GEM
      addressable (>= 2.8.0)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
-    websocket-driver (0.7.6)
+    webrick (1.9.1)
+    websocket-driver (0.7.7)
+      base64
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
    wisper (2.0.0)
@ -956,7 +972,7 @@ DEPENDENCIES
  rack-cors (= 2.0.0)
  rack-mini-profiler (>= 3.2.0)
  rack-timeout
-  rails (~> 7.0.8.4)
+  rails (~> 7.1)
  redis
  redis-namespace
  resend (~> 0.19.0)
@ -966,6 +982,7 @@ DEPENDENCIES
  rspec-rails (>= 6.1.5)
  rspec_junit_formatter
  rubocop
+  rubocop-factory_bot
  rubocop-performance
  rubocop-rails
  rubocop-rspec
@ -1003,7 +1020,7 @@ DEPENDENCIES
  working_hours

 RUBY VERSION
-   ruby 3.3.3p89
+   ruby 3.4.4p34

 BUNDLED WITH
   2.5.16
--- a/1
+++ b/1
@ -41,6 +41,7 @@ run:

 force_run:
 	rm -f ./.overmind.sock
+	rm -f tmp/pids/*.pid
 	overmind start -f Procfile.dev

 debug:
--- a/app/builders/account_builder.rb
+++ b/app/builders/account_builder.rb
@ -32,14 +32,7 @@ class AccountBuilder
  end

  def validate_email
-    raise InvalidEmail.new({ domain_blocked: domain_blocked }) if domain_blocked?
-
-    address = ValidEmail2::Address.new(@email)
-    if address.valid? && !address.disposable?
-      true
-    else
-      raise InvalidEmail.new({ valid: address.valid?, disposable: address.disposable? })
-    end
+    Account::SignUpEmailValidationService.new(@email).perform
  end

  def validate_user
@ -81,21 +74,4 @@ class AccountBuilder
    @user.confirm if @confirmed
    @user.save!
  end
-
-  def domain_blocked?
-    domain = @email.split('@').last
-
-    blocked_domains.each do |blocked_domain|
-      return true if domain.match?(blocked_domain)
-    end
-
-    false
-  end
-
-  def blocked_domains
-    domains = GlobalConfigService.load('BLOCKED_EMAIL_DOMAINS', '')
-    return [] if domains.blank?
-
-    domains.split("\n").map(&:strip)
-  end
 end
--- a/app/builders/contact_inbox_builder.rb
+++ b/app/builders/contact_inbox_builder.rb
@ -59,11 +59,13 @@ class ContactInboxBuilder
  end

  def create_contact_inbox
-    ::ContactInbox.create_with(hmac_verified: hmac_verified || false).find_or_create_by!(
+    attrs = {
      contact_id: @contact.id,
      inbox_id: @inbox.id,
      source_id: @source_id
-    )
+    }
+
+    ::ContactInbox.where(attrs).first_or_create!(hmac_verified: hmac_verified || false)
  rescue ActiveRecord::RecordNotUnique
    Rails.logger.info("[ContactInboxBuilder] RecordNotUnique #{@source_id} #{@contact.id} #{@inbox.id}")
    update_old_contact_inbox
--- a/app/builders/messages/instagram/base_message_builder.rb
+++ b/app/builders/messages/instagram/base_message_builder.rb
@ -152,11 +152,13 @@ class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuil
  end

  def message_already_exists?
-    cw_message = conversation.messages.where(
-      source_id: @messaging[:message][:mid]
-    ).first
+    find_message_by_source_id(@messaging[:message][:mid]).present?
+  end

-    cw_message.present?
+  def find_message_by_source_id(source_id)
+    return unless source_id
+
+    @message = Message.find_by(source_id: source_id)
  end

  def all_unsupported_files?
--- a/app/controllers/api/v1/accounts/agent_bots_controller.rb
+++ b/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
--- a/app/controllers/api/v1/accounts/articles_controller.rb
+++ b/app/controllers/api/v1/accounts/articles_controller.rb
@ -68,7 +68,7 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController

  def article_params
    params.require(:article).permit(
-      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status,
+      :title, :slug, :position, :content, :description, :category_id, :author_id, :associated_article_id, :status,
      :locale, meta: [:title,
                      :description,
                      { tags: [] }]
--- a/app/controllers/api/v1/accounts/contacts/conversations_controller.rb
+++ b/app/controllers/api/v1/accounts/contacts/conversations_controller.rb
@ -12,10 +12,6 @@ class Api::V1::Accounts::Contacts::ConversationsController < Api::V1::Accounts::
      Current.account
    ).perform

-    # Only allow conversations from inboxes the user has access to
-    inbox_ids = Current.user.assigned_inboxes.pluck(:id)
-    conversations = conversations.where(inbox_id: inbox_ids)
-
    @conversations = conversations.order(last_activity_at: :desc).limit(20)
  end
 end
--- a/app/controllers/api/v1/accounts/integrations/linear_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/linear_controller.rb
@ -94,7 +94,8 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
  end

  def permitted_params
-    params.permit(:team_id, :project_id, :conversation_id, :issue_id, :link_id, :title, :description, :assignee_id, :priority, label_ids: [])
+    params.permit(:team_id, :project_id, :conversation_id, :issue_id, :link_id, :title, :description, :assignee_id, :priority, :state_id,
+                  label_ids: [])
  end

  def fetch_hook
--- a/app/controllers/api/v1/accounts/search_controller.rb
+++ b/app/controllers/api/v1/accounts/search_controller.rb
@ -15,6 +15,10 @@ class Api::V1::Accounts::SearchController < Api::V1::Accounts::BaseController
    @result = search('Message')
  end

+  def articles
+    @result = search('Article')
+  end
+
  private

  def search(search_type)
--- a/app/controllers/api/v1/profiles_controller.rb
+++ b/app/controllers/api/v1/profiles_controller.rb
@ -42,6 +42,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
--- a/app/controllers/devise_overrides/omniauth_callbacks_controller.rb
+++ b/app/controllers/devise_overrides/omniauth_callbacks_controller.rb
@ -21,7 +21,7 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa

  def sign_up_user
    return redirect_to login_page_url(error: 'no-account-found') unless account_signup_allowed?
-    return redirect_to login_page_url(error: 'business-account-only') unless validate_business_account?
+    return redirect_to login_page_url(error: 'business-account-only') unless validate_signup_email_is_business_domain?

    create_account_for_user
    token = @resource.send(:set_reset_password_token)
@ -53,9 +53,11 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
    ).first
  end

-  def validate_business_account?
-    # return true if the user is a business account, false if it is a gmail account
-    auth_hash['info']['email'].downcase.exclude?('@gmail.com')
+  def validate_signup_email_is_business_domain?
+    # return true if the user is a business account, false if it is a blocked domain account
+    Account::SignUpEmailValidationService.new(auth_hash['info']['email']).perform
+  rescue CustomExceptions::Account::InvalidEmail
+    false
  end

  def create_account_for_user
--- a/app/controllers/platform/api/v1/users_controller.rb
+++ b/app/controllers/platform/api/v1/users_controller.rb
@ -1,9 +1,9 @@
 class Platform::Api::V1::UsersController < PlatformController
  # ref: https://stackoverflow.com/a/45190318/939299
  # set resource is called for other actions already in platform controller
-  # we want to add login to that chain as well
-  before_action(only: [:login]) { set_resource }
-  before_action(only: [:login]) { validate_platform_app_permissible }
+  # we want to add login and token to that chain as well
+  before_action(only: [:login, :token]) { set_resource }
+  before_action(only: [:login, :token]) { validate_platform_app_permissible }

  def show; end

@ -18,6 +18,8 @@ class Platform::Api::V1::UsersController < PlatformController
    render json: { url: @resource.generate_sso_link }
  end

+  def token; end
+
  def update
    @resource.assign_attributes(user_update_params)

--- a/app/controllers/public/api/v1/portals/articles_controller.rb
+++ b/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

--- a/app/controllers/super_admin/app_configs_controller.rb
+++ b/app/controllers/super_admin/app_configs_controller.rb
@ -32,22 +32,17 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
  end

  def allowed_configs
-    @allowed_configs = case @config
-                       when 'facebook'
-                         %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN FACEBOOK_API_VERSION ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT]
-                       when 'shopify'
-                         %w[SHOPIFY_CLIENT_ID SHOPIFY_CLIENT_SECRET]
-                       when 'microsoft'
-                         %w[AZURE_APP_ID AZURE_APP_SECRET]
-                       when 'email'
-                         ['MAILER_INBOUND_EMAIL_DOMAIN']
-                       when 'linear'
-                         %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET]
-                       when 'instagram'
-                         %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
-                       else
-                         %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS]
-                       end
+    mapping = {
+      'facebook' => %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN FACEBOOK_API_VERSION ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT],
+      'shopify' => %w[SHOPIFY_CLIENT_ID SHOPIFY_CLIENT_SECRET],
+      'microsoft' => %w[AZURE_APP_ID AZURE_APP_SECRET],
+      'email' => ['MAILER_INBOUND_EMAIL_DOMAIN'],
+      'linear' => %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET],
+      'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
+      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
+    }
+
+    @allowed_configs = mapping.fetch(@config, %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS])
  end
 end

--- a/app/finders/conversation_finder.rb
+++ b/app/finders/conversation_finder.rb
@ -88,7 +88,10 @@ class ConversationFinder

  def find_conversation_by_inbox
    @conversations = current_account.conversations
-    @conversations = @conversations.where(inbox_id: @inbox_ids) unless params[:inbox_id].blank? && @is_admin
+
+    return unless params[:inbox_id]
+
+    @conversations = @conversations.where(inbox_id: @inbox_ids)
  end

  def find_all_conversations
--- a/app/javascript/dashboard/api/agentBots.js
+++ b/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();
--- a/app/javascript/dashboard/api/auth.js
+++ b/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);
+  },
 };
--- a/app/javascript/dashboard/api/captain/copilotMessages.js
+++ b/app/javascript/dashboard/api/captain/copilotMessages.js
@ -0,0 +1,18 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class CopilotMessages extends ApiClient {
+  constructor() {
+    super('captain/copilot_threads', { accountScoped: true });
+  }
+
+  get(threadId) {
+    return axios.get(`${this.url}/${threadId}/copilot_messages`);
+  }
+
+  create({ threadId, ...rest }) {
+    return axios.post(`${this.url}/${threadId}/copilot_messages`, rest);
+  }
+}
+
+export default new CopilotMessages();
--- a/app/javascript/dashboard/api/captain/copilotThreads.js
+++ b/app/javascript/dashboard/api/captain/copilotThreads.js
@ -0,0 +1,9 @@
+import ApiClient from '../ApiClient';
+
+class CopilotThreads extends ApiClient {
+  constructor() {
+    super('captain/copilot_threads', { accountScoped: true });
+  }
+}
+
+export default new CopilotThreads();
--- a/app/javascript/dashboard/api/endPoints.js
+++ b/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 => {
--- a/app/javascript/dashboard/api/search.js
+++ b/app/javascript/dashboard/api/search.js
@ -40,6 +40,15 @@ class SearchAPI extends ApiClient {
      },
    });
  }
+
+  articles({ q, page = 1 }) {
+    return axios.get(`${this.url}/articles`, {
+      params: {
+        q,
+        page: page,
+      },
+    });
+  }
 }

 export default new SearchAPI();
--- a/app/javascript/dashboard/api/specs/agentBots.spec.js
+++ b/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');
  });
 });
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/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;
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/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 {
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue
@ -0,0 +1,65 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import ConfirmContactDeleteDialog from 'dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue';
+
+defineProps({
+  selectedContact: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const [showDeleteSection, toggleDeleteSection] = useToggle();
+const confirmDeleteContactDialogRef = ref(null);
+
+const openConfirmDeleteContactDialog = () => {
+  confirmDeleteContactDialogRef.value?.dialogRef.open();
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-start border-t border-n-strong px-6 py-5">
+    <Button
+      :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
+      sm
+      link
+      slate
+      class="hover:!no-underline text-n-slate-12"
+      icon="i-lucide-chevron-down"
+      trailing-icon
+      @click="toggleDeleteSection()"
+    />
+
+    <div
+      class="transition-all duration-300 ease-in-out grid w-full overflow-hidden"
+      :class="
+        showDeleteSection
+          ? 'grid-rows-[1fr] opacity-100 mt-2'
+          : 'grid-rows-[0fr] opacity-0 mt-0'
+      "
+    >
+      <div class="overflow-hidden min-h-0">
+        <span class="inline-flex text-n-slate-11 text-sm items-center gap-1">
+          {{ t('CONTACTS_LAYOUT.CARD.DELETE_CONTACT.MESSAGE') }}
+          <Button
+            :label="t('CONTACTS_LAYOUT.CARD.DELETE_CONTACT.BUTTON')"
+            sm
+            ruby
+            link
+            @click="openConfirmDeleteContactDialog()"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+  <ConfirmContactDeleteDialog
+    ref="confirmDeleteContactDialogRef"
+    :selected-contact="selectedContact"
+  />
+</template>
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@ -7,6 +7,7 @@ import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/Contac
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Flag from 'dashboard/components-next/flag/Flag.vue';
+import ContactDeleteSection from 'dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue';
 import countries from 'shared/constants/countries';

 const props = defineProps({
@ -149,15 +150,15 @@ const onClickViewDetails = () => emit('showContact', props.id);
    />

    <template #after>
-      <transition
-        enter-active-class="overflow-hidden transition-all duration-300 ease-out"
-        leave-active-class="overflow-hidden transition-all duration-300 ease-in"
-        enter-from-class="overflow-hidden opacity-0 max-h-0"
-        enter-to-class="opacity-100 max-h-[690px] sm:max-h-[470px] md:max-h-[410px]"
-        leave-from-class="opacity-100 max-h-[690px] sm:max-h-[470px] md:max-h-[410px]"
-        leave-to-class="overflow-hidden opacity-0 max-h-0"
+      <div
+        class="transition-all duration-500 ease-in-out grid overflow-hidden"
+        :class="
+          isExpanded
+            ? 'grid-rows-[1fr] opacity-100'
+            : 'grid-rows-[0fr] opacity-0'
+        "
      >
-        <div v-show="isExpanded" class="w-full">
+        <div class="overflow-hidden">
          <div class="flex flex-col gap-6 p-6 border-t border-n-strong">
            <ContactsForm
              ref="contactsFormRef"
@ -176,8 +177,14 @@ const onClickViewDetails = () => emit('showContact', props.id);
              />
            </div>
          </div>
+          <ContactDeleteSection
+            :selected-contact="{
+              id: props.id,
+              name: props.name,
+            }"
+          />
        </div>
-      </transition>
+      </div>
    </template>
  </CardLayout>
 </template>
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue
@ -47,11 +47,7 @@ defineExpose({ dialogRef });
    ref="dialogRef"
    type="alert"
    :title="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.TITLE')"
-    :description="
-      t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.DESCRIPTION', {
-        contactName: props.selectedContact.name,
-      })
-    "
+    :description="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.DESCRIPTION')"
    :confirm-button-label="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.CONFIRM')"
    @confirm="handleDialogConfirm"
  />
--- a/app/javascript/dashboard/components-next/Conversation/SidepanelSwitch.vue
+++ b/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>
--- a/app/javascript/dashboard/components-next/SidebarActionsHeader.story.vue
+++ b/app/javascript/dashboard/components-next/SidebarActionsHeader.story.vue
@ -0,0 +1,29 @@
+<script setup>
+import SidebarActionsHeader from './SidebarActionsHeader.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/SidebarActionsHeader"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <!-- Default State -->
+    <Variant title="Default State">
+      <SidebarActionsHeader title="Default State" />
+    </Variant>
+
+    <!-- With New Conversation Button -->
+    <Variant title="With New Conversation Button">
+      <!-- eslint-disable-next-line vue/prefer-true-attribute-shorthand -->
+      <SidebarActionsHeader
+        title="With New Conversation Button"
+        :buttons="[
+          {
+            key: 'new_conversation',
+            icon: 'i-lucide-plus',
+          },
+        ]"
+      />
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/SidebarActionsHeader.vue
+++ b/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>
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@ -117,7 +117,7 @@ const STYLE_CONFIG = {
        'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 focus-visible:bg-n-ruby-9/10 outline-n-ruby-8',
      ghost:
        'text-n-ruby-11 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-ruby-9 hover:enabled:underline focus-visible:underline outline-transparent',
+      link: 'text-n-ruby-9 dark:text-n-ruby-11 hover:enabled:underline focus-visible:underline outline-transparent',
    },
    amber: {
      solid:
--- a/app/javascript/dashboard/components-next/button/ConfirmButton.story.vue
+++ b/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>
--- a/app/javascript/dashboard/components-next/button/ConfirmButton.vue
+++ b/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>
--- a/app/javascript/dashboard/components-next/captain/pageComponents/assistant/EditAssistantForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/assistant/EditAssistantForm.vue
@ -42,6 +42,7 @@ const initialState = {
    conversationFaqs: false,
    memories: false,
  },
+  temperature: 1,
 };

 const state = reactive({ ...initialState });
@ -87,6 +88,7 @@ const updateStateFromAssistant = assistant => {
    conversationFaqs: config.feature_faq || false,
    memories: config.feature_memory || false,
  };
+  state.temperature = config.temperature || 1;
 };

 const handleBasicInfoUpdate = async () => {
@ -136,6 +138,7 @@ const handleInstructionsUpdate = async () => {
  const payload = {
    config: {
      ...props.assistant.config,
+      temperature: state.temperature || 1,
      instructions: state.instructions,
    },
  };
@ -212,7 +215,7 @@ watch(

    <!-- Instructions Section -->
    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.INSTRUCTIONS')">
-      <div class="flex flex-col gap-4 pt-4">
+      <div class="flex flex-col gap-4">
        <Editor
          v-model="state.instructions"
          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.PLACEHOLDER')"
@ -221,6 +224,25 @@ watch(
          :message-type="formErrors.instructions ? 'error' : 'info'"
        />

+        <div class="flex flex-col gap-2 mt-4">
+          <label class="text-sm font-medium text-n-slate-12">
+            {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.LABEL') }}
+          </label>
+          <div class="flex items-center gap-4">
+            <input
+              v-model="state.temperature"
+              type="range"
+              min="0"
+              max="1"
+              step="0.1"
+              class="w-full"
+            />
+            <span class="text-sm text-n-slate-12">{{ state.temperature }}</span>
+          </div>
+          <p class="text-sm text-n-slate-11 italic">
+            {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.DESCRIPTION') }}
+          </p>
+        </div>
        <div class="flex justify-end">
          <Button
            size="small"
--- a/app/javascript/dashboard/components-next/copilot/Copilot.vue
+++ b/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>
--- a/app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue
@ -1,31 +1,17 @@
 <script setup>
-import Avatar from '../avatar/Avatar.vue';
-
 defineProps({
  message: {
    type: Object,
    required: true,
  },
-  supportAgent: {
-    type: Object,
-    required: true,
-  },
 });
 </script>

 <template>
-  <div class="flex flex-row gap-2">
-    <Avatar
-      :name="supportAgent.available_name"
-      :src="supportAgent.avatar_url"
-      :size="24"
-      rounded-full
-    />
-    <div class="space-y-1 text-n-slate-12">
-      <div class="font-medium">{{ $t('CAPTAIN.COPILOT.YOU') }}</div>
-      <div class="break-words">
-        {{ message.content }}
-      </div>
+  <div class="space-y-1 text-n-slate-12">
+    <div class="font-medium">{{ $t('CAPTAIN.COPILOT.YOU') }}</div>
+    <div class="break-words">
+      {{ message.content }}
    </div>
  </div>
 </template>
--- a/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
@ -9,7 +9,6 @@ import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import MessageFormatter from 'shared/helpers/MessageFormatter.js';

 import Button from 'dashboard/components-next/button/Button.vue';
-import Avatar from '../avatar/Avatar.vue';

 const props = defineProps({
  message: {
@ -46,33 +45,25 @@ const useCopilotResponse = () => {
 </script>

 <template>
-  <div class="flex flex-row gap-2">
-    <Avatar
-      name="Captain Copilot"
-      icon-name="i-woot-captain"
-      :size="24"
-      rounded-full
+  <div class="flex flex-col gap-1 text-n-slate-12">
+    <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
+    <span v-if="hasEmptyMessageContent" class="text-n-ruby-11">
+      {{ $t('CAPTAIN.COPILOT.EMPTY_MESSAGE') }}
+    </span>
+    <div
+      v-else
+      v-dompurify-html="messageContent"
+      class="prose-sm break-words"
    />
-    <div class="flex flex-col gap-1 text-n-slate-12">
-      <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
-      <span v-if="hasEmptyMessageContent" class="text-n-ruby-11">
-        {{ $t('CAPTAIN.COPILOT.EMPTY_MESSAGE') }}
-      </span>
-      <div
-        v-else
-        v-dompurify-html="messageContent"
-        class="prose-sm break-words"
+    <div class="flex flex-row mt-1">
+      <Button
+        v-if="!hasEmptyMessageContent"
+        :label="$t('CAPTAIN.COPILOT.USE')"
+        faded
+        sm
+        slate
+        @click="useCopilotResponse"
      />
-      <div class="flex flex-row mt-1">
-        <Button
-          v-if="!hasEmptyMessageContent"
-          :label="$t('CAPTAIN.COPILOT.USE')"
-          faded
-          sm
-          slate
-          @click="useCopilotResponse"
-        />
-      </div>
    </div>
  </div>
 </template>
--- a/app/javascript/dashboard/components-next/copilot/CopilotInput.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotInput.vue
@ -13,19 +13,16 @@ const sendMessage = () => {
 </script>

 <template>
-  <form
-    class="border border-n-weak bg-n-alpha-3 rounded-lg h-12 flex"
-    @submit.prevent="sendMessage"
-  >
+  <form class="relative" @submit.prevent="sendMessage">
    <input
      v-model="message"
      type="text"
      :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
-      class="w-full reset-base bg-transparent px-4 py-3 text-n-slate-11 text-sm"
+      class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-n-slate-11 text-sm border border-n-weak rounded-lg focus:outline-none focus:ring-1 focus:ring-n-blue-11 focus:border-n-blue-11"
      @keyup.enter="sendMessage"
    />
    <button
-      class="h-auto w-12 flex items-center justify-center text-n-slate-11"
+      class="absolute ltr:right-1 rtl:left-1 top-1/2 -translate-y-1/2 h-9 w-10 flex items-center justify-center text-n-slate-11 hover:text-n-blue-11"
      type="submit"
    >
      <i class="i-ph-arrow-up" />
--- a/app/javascript/dashboard/components-next/copilot/CopilotThinkingBlock.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotThinkingBlock.vue
@ -0,0 +1,25 @@
+<script setup>
+import Icon from '../../components-next/icon/Icon.vue';
+defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 p-3 rounded-lg bg-n-background/50 border border-n-weak hover:bg-n-background/80 transition-colors duration-200"
+  >
+    <div class="flex items-start gap-2">
+      <Icon
+        icon="i-lucide-sparkles"
+        class="w-4 h-4 mt-0.5 flex-shrink-0 text-n-slate-9"
+      />
+      <div class="text-sm text-n-slate-11">
+        {{ content }}
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.story.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.story.vue
@ -0,0 +1,34 @@
+<script setup>
+import CopilotThinkingGroup from './CopilotThinkingGroup.vue';
+
+const messages = [
+  {
+    id: 1,
+    content: 'Analyzing the user query',
+    reasoning: 'Breaking down the request into actionable steps',
+  },
+  {
+    id: 2,
+    content: 'Searching codebase',
+    reasoning: 'Looking for relevant files and functions',
+  },
+  {
+    id: 3,
+    content: 'Generating response',
+    reasoning: 'Composing a helpful and accurate answer',
+  },
+];
+</script>
+
+<template>
+  <Story title="Captain/Copilot/CopilotThinkingGroup" group="components">
+    <Variant title="Default">
+      <CopilotThinkingGroup :messages="messages" />
+    </Variant>
+
+    <Variant title="With Default Collapsed">
+      <!-- eslint-disable-next-line -->
+      <CopilotThinkingGroup :messages="messages" :default-collapsed="true" />
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.vue
@ -0,0 +1,61 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from '../icon/Icon.vue';
+import CopilotThinkingBlock from './CopilotThinkingBlock.vue';
+
+const props = defineProps({
+  messages: { type: Array, required: true },
+  defaultCollapsed: { type: Boolean, default: false },
+});
+const { t } = useI18n();
+const isExpanded = ref(!props.defaultCollapsed);
+
+const thinkingCount = computed(() => props.messages.length);
+
+watch(
+  () => props.defaultCollapsed,
+  newValue => {
+    if (newValue) {
+      isExpanded.value = false;
+    }
+  }
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <button
+      class="group flex items-center gap-2 text-xs text-n-slate-10 hover:text-n-slate-11 transition-colors duration-200 -ml-3"
+      @click="isExpanded = !isExpanded"
+    >
+      <Icon
+        :icon="isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+        class="w-4 h-4 transition-transform duration-200 group-hover:scale-110"
+      />
+      <span class="flex items-center gap-2">
+        {{ t('CAPTAIN.COPILOT.SHOW_STEPS') }}
+        <span
+          class="inline-flex items-center justify-center h-4 min-w-4 px-1 text-xs font-medium rounded-full bg-n-solid-3 text-n-slate-11"
+        >
+          {{ thinkingCount }}
+        </span>
+      </span>
+    </button>
+    <div
+      v-show="isExpanded"
+      class="space-y-3 transition-all duration-200"
+      :class="{
+        'opacity-100': isExpanded,
+        'opacity-0 max-h-0 overflow-hidden': !isExpanded,
+      }"
+    >
+      <CopilotThinkingBlock
+        v-for="message in messages"
+        :key="message.id"
+        :content="message.content"
+        :reasoning="message.reasoning"
+      />
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@ -315,11 +315,7 @@ const componentToRender = computed(() => {
 });

 const shouldShowContextMenu = computed(() => {
-  return !(
-    props.status === MESSAGE_STATUS.FAILED ||
-    props.status === MESSAGE_STATUS.PROGRESS ||
-    props.contentAttributes?.isUnsupported
-  );
+  return !props.contentAttributes?.isUnsupported;
 });

 const isBubble = computed(() => {
@ -344,12 +340,23 @@ const contextMenuEnabledOptions = computed(() => {
  const hasAttachments = !!(props.attachments && props.attachments.length > 0);

  const isOutgoing = props.messageType === MESSAGE_TYPES.OUTGOING;
+  const isFailedOrProcessing =
+    props.status === MESSAGE_STATUS.FAILED ||
+    props.status === MESSAGE_STATUS.PROGRESS;

  return {
    copy: hasText,
-    delete: hasText || hasAttachments,
-    cannedResponse: isOutgoing && hasText,
-    replyTo: !props.private && props.inboxSupportsReplyTo.outgoing,
+    delete:
+      (hasText || hasAttachments) &&
+      !isFailedOrProcessing &&
+      !isMessageDeleted.value,
+    cannedResponse: isOutgoing && hasText && !isMessageDeleted.value,
+    copyLink: !isFailedOrProcessing,
+    translate: !isFailedOrProcessing && !isMessageDeleted.value && hasText,
+    replyTo:
+      !props.private &&
+      props.inboxSupportsReplyTo.outgoing &&
+      !isFailedOrProcessing,
  };
 });

@ -499,8 +506,8 @@ provideMessageContext({
      <div
        class="[grid-area:bubble] flex"
        :class="{
-          'ltr:pl-8 rtl:pr-8 justify-end': orientation === ORIENTATION.RIGHT,
-          'ltr:pr-8 rtl:pl-8': orientation === ORIENTATION.LEFT,
+          'ltr:ml-8 rtl:mr-8 justify-end': orientation === ORIENTATION.RIGHT,
+          'ltr:mr-8 rtl:ml-8': orientation === ORIENTATION.LEFT,
          'min-w-0': variant === MESSAGE_VARIANTS.EMAIL,
        }"
        @contextmenu="openContextMenu($event)"
@ -516,7 +523,7 @@ provideMessageContext({
    </div>
    <div v-if="shouldShowContextMenu" class="context-menu-wrap">
      <ContextMenu
-        v-if="isBubble && !isMessageDeleted"
+        v-if="isBubble"
        :context-menu-position="contextMenuPosition"
        :is-open="showContextMenu"
        :enabled-options="contextMenuEnabledOptions"
--- a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
@ -40,7 +40,7 @@ const senderName = computed(() => {
            <Icon :icon="icon" class="text-white size-4" />
          </slot>
        </div>
-        <div class="space-y-1">
+        <div class="space-y-1 overflow-hidden">
          <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
            {{
              t(senderTranslationKey, {
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/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"
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
@ -4,6 +4,7 @@ import { useMapGetter, useStore } from 'dashboard/composables/store';
 import wootConstants from 'dashboard/constants/globals';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
+import { useImpersonation } from 'dashboard/composables/useImpersonation';

 import {
  DropdownContainer,
@ -20,6 +21,8 @@ const currentUserAvailability = useMapGetter('getCurrentUserAvailability');
 const currentAccountId = useMapGetter('getCurrentAccountId');
 const currentUserAutoOffline = useMapGetter('getCurrentUserAutoOffline');

+const { isImpersonating } = useImpersonation();
+
 const { AVAILABILITY_STATUS_KEYS } = wootConstants;
 const statusList = computed(() => {
  return [
@ -46,6 +49,10 @@ const activeStatus = computed(() => {
 });

 function changeAvailabilityStatus(availability) {
+  if (isImpersonating.value) {
+    useAlert(t('PROFILE_SETTINGS.FORM.AVAILABILITY.IMPERSONATING_ERROR'));
+    return;
+  }
  try {
    store.dispatch('updateAvailability', {
      availability,
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@ -8,7 +8,6 @@ import {
  computed,
  watch,
  onMounted,
-  onUnmounted,
  defineEmits,
 } from 'vue';
 import { useStore } from 'vuex';
@ -44,7 +43,7 @@ import {
  useSnakeCase,
 } from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
-import { useEventListener, useScrollLock } from '@vueuse/core';
+import { useEventListener } from '@vueuse/core';

 import { emitter } from 'shared/helpers/mitt';

@ -87,12 +86,8 @@ const store = useStore();

 const conversationListRef = ref(null);
 const conversationDynamicScroller = ref(null);
-const conversationListScrollableElement = computed(
-  () => conversationDynamicScroller.value?.$el
-);
-const conversationListScrollLock = useScrollLock(
-  conversationListScrollableElement
-);
+
+provide('contextMenuElementTarget', conversationDynamicScroller);

 const activeAssigneeTab = ref(wootConstants.ASSIGNEE_TYPE.ME);
 const activeStatus = ref(wootConstants.STATUS_TYPE.OPEN);
@ -746,7 +741,6 @@ function allSelectedConversationsStatus(status) {

 function onContextMenuToggle(state) {
  isContextMenuOpen.value = state;
-  conversationListScrollLock.value = state;
 }

 function toggleSelectAll(check) {
@ -770,10 +764,6 @@ onMounted(() => {
  }
 });

-onUnmounted(() => {
-  conversationListScrollLock.value = false;
-});
-
 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
 provide('assignAgent', onAssignAgent);
@ -824,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 />
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/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 }}
--- a/app/javascript/dashboard/components/Snackbar.vue
+++ b/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>
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/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>
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useImpersonation } from 'dashboard/composables/useImpersonation';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
@ -20,6 +21,10 @@ export default {
    AvailabilityStatusBadge,
    NextButton,
  },
+  setup() {
+    const { isImpersonating } = useImpersonation();
+    return { isImpersonating };
+  },
  data() {
    return {
      isStatusMenuOpened: false,
@ -73,6 +78,13 @@ export default {
      });
    },
    changeAvailabilityStatus(availability) {
+      if (this.isImpersonating) {
+        useAlert(
+          this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.IMPERSONATING_ERROR')
+        );
+        return;
+      }
+
      if (this.isUpdating) {
        return;
      }
--- a/app/javascript/dashboard/components/ui/ContextMenu.vue
+++ b/app/javascript/dashboard/components/ui/ContextMenu.vue
@ -1,6 +1,13 @@
 <script setup>
-import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
-import { useWindowSize, useElementBounding } from '@vueuse/core';
+import {
+  computed,
+  onMounted,
+  nextTick,
+  onUnmounted,
+  useTemplateRef,
+  inject,
+} from 'vue';
+import { useWindowSize, useElementBounding, useScrollLock } from '@vueuse/core';

 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';

@ -11,27 +18,34 @@ const props = defineProps({

 const emit = defineEmits(['close']);

+const elementToLock = inject('contextMenuElementTarget', null);
+
 const menuRef = useTemplateRef('menuRef');

+const scrollLockElement = computed(() => {
+  if (!elementToLock?.value) return null;
+  return elementToLock.value?.$el;
+});
+
+const isLocked = useScrollLock(scrollLockElement);
+
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 const { width: menuWidth, height: menuHeight } = useElementBounding(menuRef);

 const calculatePosition = (x, y, menuW, menuH, windowW, windowH) => {
+  const PADDING = 16;
  // Initial position
  let left = x;
  let top = y;
-
  // Boundary checks
-  const isOverflowingRight = left + menuW > windowW;
-  const isOverflowingBottom = top + menuH > windowH;
-
+  const isOverflowingRight = left + menuW > windowW - PADDING;
+  const isOverflowingBottom = top + menuH > windowH - PADDING;
  // Adjust position if overflowing
-  if (isOverflowingRight) left = windowW - menuW;
-  if (isOverflowingBottom) top = windowH - menuH;
-
+  if (isOverflowingRight) left = windowW - menuW - PADDING;
+  if (isOverflowingBottom) top = windowH - menuH - PADDING;
  return {
-    left: Math.max(0, left),
-    top: Math.max(0, top),
+    left: Math.max(PADDING, left),
+    top: Math.max(PADDING, top),
  };
 };

@ -54,8 +68,18 @@ const position = computed(() => {
 });

 onMounted(() => {
+  isLocked.value = true;
  nextTick(() => menuRef.value?.focus());
 });
+
+const handleClose = () => {
+  isLocked.value = false;
+  emit('close');
+};
+
+onUnmounted(() => {
+  isLocked.value = false;
+});
 </script>

 <template>
@ -65,7 +89,7 @@ onMounted(() => {
      class="fixed outline-none z-[9999] cursor-pointer"
      :style="position"
      tabindex="0"
-      @blur="emit('close')"
+      @blur="handleClose"
    >
      <slot />
    </div>
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/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"
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@ -38,7 +38,7 @@ const currentSortBy = computed(() => {
  );
 });

-const chatStatusOptions = [
+const chatStatusOptions = computed(() => [
  {
    label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT'),
    value: 'open',
@ -59,9 +59,9 @@ const chatStatusOptions = [
    label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.all.TEXT'),
    value: 'all',
  },
-];
+]);

-const chatSortOptions = [
+const chatSortOptions = computed(() => [
  {
    label: t('CHAT_LIST.SORT_ORDER_ITEMS.last_activity_at_asc.TEXT'),
    value: 'last_activity_at_asc',
@ -94,15 +94,18 @@ const chatSortOptions = [
    label: t('CHAT_LIST.SORT_ORDER_ITEMS.waiting_since_desc.TEXT'),
    value: 'waiting_since_desc',
  },
-];
+]);

 const activeChatStatusLabel = computed(
  () =>
-    chatStatusOptions.find(m => m.value === chatStatusFilter.value)?.label || ''
+    chatStatusOptions.value.find(m => m.value === chatStatusFilter.value)
+      ?.label || ''
 );

 const activeChatSortLabel = computed(
-  () => chatSortOptions.find(m => m.value === chatSortFilter.value)?.label || ''
+  () =>
+    chatSortOptions.value.find(m => m.value === chatSortFilter.value)?.label ||
+    ''
 );

 const saveSelectedFilter = (type, value) => {
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/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"
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/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
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/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>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/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"
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@ -185,8 +185,17 @@ export default {
    contextMenuEnabledOptions() {
      return {
        copy: this.hasText,
-        delete: this.hasText || this.hasAttachments,
-        cannedResponse: this.isOutgoing && this.hasText,
+        delete:
+          (this.hasText || this.hasAttachments) &&
+          !this.isMessageDeleted &&
+          !this.isFailed,
+        cannedResponse:
+          this.isOutgoing && this.hasText && !this.isMessageDeleted,
+        copyLink: !this.isFailed || !this.isProcessing,
+        translate:
+          (!this.isFailed || !this.isProcessing) &&
+          !this.isMessageDeleted &&
+          this.hasText,
        replyTo: !this.data.private && this.inboxSupportsReplyTo.outgoing,
      };
    },
@ -328,7 +337,7 @@ export default {
      return !this.sender.type || this.sender.type === 'agent_bot';
    },
    shouldShowContextMenu() {
-      return !(this.isFailed || this.isPending || this.isUnsupported);
+      return !this.isUnsupported;
    },
    showAvatar() {
      if (this.isOutgoing || this.isTemplate) {
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@ -1,5 +1,5 @@
 <script>
-import { ref } from 'vue';
+import { ref, provide } from 'vue';
 // composable
 import { useConfig } from 'dashboard/composables/useConfig';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
@ -40,8 +40,6 @@ import { FEATURE_FLAGS } from '../../../featureFlags';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import WhatsappBaileysLinkDeviceModal from '../../../routes/dashboard/settings/inbox/components/WhatsappBaileysLinkDeviceModal.vue';

-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
  components: {
    Message,
@ -49,24 +47,13 @@ export default {
    ReplyBox,
    Banner,
    ConversationLabelSuggestion,
-    NextButton,
    WhatsappBaileysLinkDeviceModal,
  },
  mixins: [inboxMixin],
-  props: {
-    isContactPanelOpen: {
-      type: Boolean,
-      default: false,
-    },
-    isInboxView: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['contactPanelToggle'],
  setup() {
    const { isAdmin } = useAdmin();
    const isPopOutReplyBox = ref(false);
+    const conversationPanelRef = ref(null);
    const { isEnterprise } = useConfig();

    const closePopOutReplyBox = () => {
@ -102,6 +89,8 @@ export default {
      FEATURE_FLAGS.CHATWOOT_V4
    );

+    provide('contextMenuElementTarget', conversationPanelRef);
+
    return {
      isEnterprise,
      isPopOutReplyBox,
@ -112,6 +101,7 @@ export default {
      fetchIntegrationsIfRequired,
      fetchLabelSuggestions,
      showNextBubbles,
+      conversationPanelRef,
      isAdmin,
    };
  },
@ -208,12 +198,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;
@ -452,9 +436,6 @@ export default {
        relevantMessages
      );
    },
-    onToggleContactPanel() {
-      this.$emit('contactPanelToggle');
-    },
    setScrollParams() {
      this.heightBeforeLoad = this.conversationPanel.scrollHeight;
      this.scrollTopBeforeLoad = this.conversationPanel.scrollTop;
@ -574,21 +555,9 @@ 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"
      class="conversation-panel"
      :current-user-id="currentUserId"
      :first-unread-id="unReadMessages[0]?.id"
@ -620,7 +589,7 @@ export default {
        />
      </template>
    </NextMessageList>
-    <ul v-else class="conversation-panel">
+    <ul v-else ref="conversationPanelRef" class="conversation-panel">
      <transition name="slide-up">
        <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
        <li class="min-h-[4rem]">
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/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>
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/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>
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/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
--- a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
+++ b/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,
-      });
-    });
-  });
-});
--- a/app/javascript/dashboard/composables/spec/useFontSize.spec.js
+++ b/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(
--- a/app/javascript/dashboard/composables/spec/useImpersonation.spec.js
+++ b/app/javascript/dashboard/composables/spec/useImpersonation.spec.js
@ -0,0 +1,37 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useImpersonation } from '../useImpersonation';
+
+vi.mock('shared/helpers/sessionStorage', () => ({
+  __esModule: true,
+  default: {
+    get: vi.fn(),
+    set: vi.fn(),
+  },
+}));
+
+import SessionStorage from 'shared/helpers/sessionStorage';
+import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
+
+describe('useImpersonation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return true if impersonation flag is set in session storage', () => {
+    SessionStorage.get.mockReturnValue(true);
+    const { isImpersonating } = useImpersonation();
+    expect(isImpersonating.value).toBe(true);
+    expect(SessionStorage.get).toHaveBeenCalledWith(
+      SESSION_STORAGE_KEYS.IMPERSONATION_USER
+    );
+  });
+
+  it('should return false if impersonation flag is not set in session storage', () => {
+    SessionStorage.get.mockReturnValue(false);
+    const { isImpersonating } = useImpersonation();
+    expect(isImpersonating.value).toBe(false);
+    expect(SessionStorage.get).toHaveBeenCalledWith(
+      SESSION_STORAGE_KEYS.IMPERSONATION_USER
+    );
+  });
+});
--- a/app/javascript/dashboard/composables/useFontSize.js
+++ b/app/javascript/dashboard/composables/useFontSize.js
@ -19,7 +19,6 @@ const FONT_SIZE_OPTIONS = {
  DEFAULT: '16px',
  LARGE: '18px',
  LARGER: '20px',
-  EXTRA_LARGE: '22px',
 };

 /**
--- a/app/javascript/dashboard/composables/useImpersonation.js
+++ b/app/javascript/dashboard/composables/useImpersonation.js
@ -0,0 +1,10 @@
+import { computed } from 'vue';
+import SessionStorage from 'shared/helpers/sessionStorage';
+import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
+
+export function useImpersonation() {
+  const isImpersonating = computed(() => {
+    return SessionStorage.get(SESSION_STORAGE_KEYS.IMPERSONATION_USER);
+  });
+  return { isImpersonating };
+}
--- a/app/javascript/dashboard/composables/usePolicy.js
+++ b/app/javascript/dashboard/composables/usePolicy.js
@ -129,6 +129,7 @@ export function usePolicy() {
  return {
    checkPermissions,
    shouldShowPaywall,
+    isFeatureFlagEnabled,
    shouldShow,
  };
 }
--- a/app/javascript/dashboard/constants/sessionStorage.js
+++ b/app/javascript/dashboard/constants/sessionStorage.js
@ -0,0 +1,3 @@
+export const SESSION_STORAGE_KEYS = {
+  IMPERSONATION_USER: 'impersonationUser',
+};
--- a/app/javascript/dashboard/helper/actionCable.js
+++ b/app/javascript/dashboard/helper/actionCable.js
@ -3,6 +3,9 @@ import BaseActionCableConnector from '../../shared/helpers/BaseActionCableConnec
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
+import { useImpersonation } from 'dashboard/composables/useImpersonation';
+
+const { isImpersonating } = useImpersonation();

 class ActionCableConnector extends BaseActionCableConnector {
  constructor(app, pubsubToken) {
@ -30,6 +33,7 @@ class ActionCableConnector extends BaseActionCableConnector {
      'conversation.read': this.onConversationRead,
      'conversation.updated': this.onConversationUpdated,
      'account.cache_invalidated': this.onCacheInvalidate,
+      'copilot.message.created': this.onCopilotMessageCreated,
    };
  }

@ -52,6 +56,7 @@ class ActionCableConnector extends BaseActionCableConnector {
  };

  onPresenceUpdate = data => {
+    if (isImpersonating.value) return;
    this.app.$store.dispatch('contacts/updatePresence', data.contacts);
    this.app.$store.dispatch('agents/updatePresence', data.users);
    this.app.$store.dispatch('setCurrentUserAvailability', data.users);
@ -185,6 +190,10 @@ class ActionCableConnector extends BaseActionCableConnector {
    this.app.$store.dispatch('notifications/updateNotification', data);
  };

+  onCopilotMessageCreated = data => {
+    this.app.$store.dispatch('copilotMessages/upsert', data);
+  };
+
  onCacheInvalidate = data => {
    const keys = data.cache_keys;
    this.app.$store.dispatch('labels/revalidate', { newKey: keys.label });
--- a/app/javascript/dashboard/helper/specs/actionCable.spec.js
+++ b/app/javascript/dashboard/helper/specs/actionCable.spec.js
@ -0,0 +1,67 @@
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+import ActionCableConnector from '../actionCable';
+
+vi.mock('shared/helpers/mitt', () => ({
+  emitter: {
+    emit: vi.fn(),
+  },
+}));
+
+vi.mock('dashboard/composables/useImpersonation', () => ({
+  useImpersonation: () => ({
+    isImpersonating: { value: false },
+  }),
+}));
+
+global.chatwootConfig = {
+  websocketURL: 'wss://test.chatwoot.com',
+};
+
+describe('ActionCableConnector - Copilot Tests', () => {
+  let store;
+  let actionCable;
+  let mockDispatch;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockDispatch = vi.fn();
+    store = {
+      $store: {
+        dispatch: mockDispatch,
+        getters: {
+          getCurrentAccountId: 1,
+        },
+      },
+    };
+
+    actionCable = ActionCableConnector.init(store.$store, 'test-token');
+  });
+  describe('copilot event handlers', () => {
+    it('should register the copilot.message.created event handler', () => {
+      expect(Object.keys(actionCable.events)).toContain(
+        'copilot.message.created'
+      );
+      expect(actionCable.events['copilot.message.created']).toBe(
+        actionCable.onCopilotMessageCreated
+      );
+    });
+
+    it('should handle the copilot.message.created event through the ActionCable system', () => {
+      const copilotData = {
+        id: 2,
+        content: 'This is a copilot message from ActionCable',
+        conversation_id: 456,
+        created_at: '2025-05-27T15:58:04-06:00',
+        account_id: 1,
+      };
+      actionCable.onReceived({
+        event: 'copilot.message.created',
+        data: copilotData,
+      });
+      expect(mockDispatch).toHaveBeenCalledWith(
+        'copilotMessages/upsert',
+        copilotData
+      );
+    });
+  });
+});
--- a/app/javascript/dashboard/i18n/locale/en/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/en/agentBots.json
@ -59,6 +59,13 @@
        "ERROR_MESSAGE": "Could not update bot. Please try again."
      }
    },
+    "ACCESS_TOKEN": {
+      "TITLE": "Access Token",
+      "DESCRIPTION": "Copy the access token and save it securely",
+      "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": {
        "LABEL": "Bot avatar"
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@ -458,6 +458,10 @@
            "PLACEHOLDER": "Add Twitter"
          }
        }
+      },
+      "DELETE_CONTACT": {
+        "MESSAGE": "This action is permanent and irreversible.",
+        "BUTTON": "Delete now"
      }
    },
    "DETAILS": {
@ -467,7 +471,7 @@
      "DELETE_CONTACT": "Delete contact",
      "DELETE_DIALOG": {
        "TITLE": "Confirm Deletion",
-        "DESCRIPTION": "Are you sure you want to delete this {contactName} contact?",
+        "DESCRIPTION": "Are you sure you want to delete this contact?",
        "CONFIRM": "Yes, Delete",
        "API": {
          "SUCCESS_MESSAGE": "Contact deleted successfully",
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@ -71,6 +71,7 @@
      "RESOLVE_ACTION": "Resolve",
      "REOPEN_ACTION": "Reopen",
      "OPEN_ACTION": "Open",
+      "MORE_ACTIONS": "More actions",
      "OPEN": "More",
      "CLOSE": "Close",
      "DETAILS": "details",
--- a/app/javascript/dashboard/i18n/locale/en/general.json
+++ b/app/javascript/dashboard/i18n/locale/en/general.json
@ -4,6 +4,7 @@
    "PHONE_INPUT": {
      "PLACEHOLDER": "Search",
      "EMPTY_STATE": "No results found"
-    }
+    },
+    "CLOSE": "Close"
  }
 }
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@ -338,12 +338,14 @@
    "NAME": "Captain",
    "HEADER_KNOW_MORE": "Know more",
    "COPILOT": {
+      "TITLE": "Copilot",
      "SEND_MESSAGE": "Send message...",
      "EMPTY_MESSAGE": "There was an error generating the response. Please try again.",
      "LOADER": "Captain is thinking",
      "YOU": "You",
      "USE": "Use this",
      "RESET": "Reset",
+      "SHOW_STEPS": "Show steps",
      "SELECT_ASSISTANT": "Select Assistant",
      "PROMPTS": {
        "SUMMARIZE": {
@ -376,7 +378,6 @@
      "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
    },
    "ENTERPRISE_PAYWALL": {
-      "AVAILABLE_ON": "Captain AI feature is only available in a paid plan.",
      "UPGRADE_PROMPT": "Upgrade your plan to get access to our assistants, copilot and more.",
      "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
    },
@ -419,6 +420,10 @@
          "PLACEHOLDER": "Enter assistant name",
          "ERROR": "The name is required"
        },
+        "TEMPERATURE": {
+          "LABEL": "Response Temperature",
+          "DESCRIPTION": "Adjust how creative or restrictive the assistant's responses should be. Lower values produce more focused and deterministic responses, while higher values allow for more creative and varied outputs."
+        },
        "DESCRIPTION": {
          "LABEL": "Description",
          "PLACEHOLDER": "Enter assistant description",
--- a/app/javascript/dashboard/i18n/locale/en/search.json
+++ b/app/javascript/dashboard/i18n/locale/en/search.json
@ -4,12 +4,14 @@
      "ALL": "All",
      "CONTACTS": "Contacts",
      "CONVERSATIONS": "Conversations",
-      "MESSAGES": "Messages"
+      "MESSAGES": "Messages",
+      "ARTICLES": "Articles"
    },
    "SECTION": {
      "CONTACTS": "Contacts",
      "CONVERSATIONS": "Conversations",
-      "MESSAGES": "Messages"
+      "MESSAGES": "Messages",
+      "ARTICLES": "Articles"
    },
    "VIEW_MORE": "View more",
    "LOAD_MORE": "Load more",
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/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",
@ -185,7 +190,8 @@
          "OFFLINE": "Offline"
        },
        "SET_AVAILABILITY_SUCCESS": "Availability has been set successfully",
-        "SET_AVAILABILITY_ERROR": "Couldn't set availability, please try again"
+        "SET_AVAILABILITY_ERROR": "Couldn't set availability, please try again",
+        "IMPERSONATING_ERROR": "Cannot change availability while impersonating a user"
      },
      "EMAIL": {
        "LABEL": "Your email address",
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@ -47,6 +47,7 @@ export default {
  emits: ['open', 'close', 'replyTo'],
  setup() {
    const { getPlainText } = useMessageFormatter();
+
    return {
      getPlainText,
    };
@ -167,7 +168,7 @@ export default {
    </woot-modal>
    <!-- Confirm Deletion -->
    <woot-delete-modal
-      v-if="showDeleteModal"
+      v-if="showDeleteModal && enabledOptions['delete']"
      v-model:show="showDeleteModal"
      class="context-menu--delete-modal"
      :on-close="closeDeleteModal"
@ -212,7 +213,7 @@ export default {
          @click.stop="handleCopy"
        />
        <MenuItem
-          v-if="enabledOptions['copy']"
+          v-if="enabledOptions['translate']"
          :option="{
            icon: 'translate',
            label: $t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
@ -222,6 +223,7 @@ export default {
        />
        <hr />
        <MenuItem
+          v-if="enabledOptions['copyLink']"
          :option="{
            icon: 'link',
            label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
--- a/app/javascript/dashboard/modules/search/components/SearchResultArticleItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultArticleItem.vue
@ -0,0 +1,69 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import MessageFormatter from 'shared/helpers/MessageFormatter';
+
+const props = defineProps({
+  id: { type: [String, Number], default: 0 },
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  category: { type: String, default: '' },
+  locale: { type: String, default: '' },
+  content: { type: String, default: '' },
+  portalSlug: { type: String, required: true },
+  accountId: { type: [String, Number], default: 0 },
+});
+
+const MAX_LENGTH = 300;
+
+const navigateTo = computed(() => {
+  return frontendURL(
+    `accounts/${props.accountId}/portals/${props.portalSlug}/${props.locale}/articles/edit/${props.id}`
+  );
+});
+
+const truncatedContent = computed(() => {
+  if (!props.content) return props.description || '';
+
+  // Use MessageFormatter to properly convert markdown to plain text
+  const formatter = new MessageFormatter(props.content);
+  const plainText = formatter.plainText.trim();
+
+  return plainText.length > MAX_LENGTH
+    ? `${plainText.substring(0, MAX_LENGTH)}...`
+    : plainText;
+});
+</script>
+
+<template>
+  <router-link
+    :to="navigateTo"
+    class="flex items-start p-2 rounded-xl cursor-pointer hover:bg-n-slate-2"
+  >
+    <div
+      class="flex items-center justify-center w-6 h-6 mt-0.5 rounded bg-n-slate-3"
+    >
+      <Icon icon="i-lucide-library-big" class="text-n-slate-10" />
+    </div>
+    <div class="ltr:ml-2 rtl:mr-2 min-w-0 flex-1">
+      <div class="flex items-center gap-2">
+        <h5 class="text-sm font-medium truncate min-w-0 text-n-slate-12">
+          {{ title }}
+        </h5>
+        <span
+          v-if="category"
+          class="text-xs font-medium whitespace-nowrap capitalize bg-n-slate-3 px-1 py-0.5 rounded text-n-slate-10"
+        >
+          {{ category }}
+        </span>
+      </div>
+      <p
+        v-if="truncatedContent"
+        class="mt-1 text-sm text-n-slate-11 line-clamp-2"
+      >
+        {{ truncatedContent }}
+      </p>
+    </div>
+  </router-link>
+</template>
--- a/app/javascript/dashboard/modules/search/components/SearchResultArticlesList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultArticlesList.vue
@ -0,0 +1,53 @@
+<script setup>
+import { useMapGetter } from 'dashboard/composables/store.js';
+
+import SearchResultSection from './SearchResultSection.vue';
+import SearchResultArticleItem from './SearchResultArticleItem.vue';
+
+defineProps({
+  articles: {
+    type: Array,
+    default: () => [],
+  },
+  query: {
+    type: String,
+    default: '',
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const accountId = useMapGetter('getCurrentAccountId');
+</script>
+
+<template>
+  <SearchResultSection
+    :title="$t('SEARCH.SECTION.ARTICLES')"
+    :empty="!articles.length"
+    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
+  >
+    <ul v-if="articles.length" class="space-y-1.5 list-none">
+      <li v-for="article in articles" :key="article.id">
+        <SearchResultArticleItem
+          :id="article.id"
+          :title="article.title"
+          :description="article.description"
+          :content="article.content"
+          :portal-slug="article.portal_slug"
+          :locale="article.locale"
+          :account-id="accountId"
+          :category="article.category_name"
+          :status="article.status"
+        />
+      </li>
+    </ul>
+  </SearchResultSection>
+</template>
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@ -8,11 +8,10 @@ import {
  ROLES,
  CONVERSATION_PERMISSIONS,
  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';
@ -22,6 +21,7 @@ import SearchTabs from './SearchTabs.vue';
 import SearchResultConversationsList from './SearchResultConversationsList.vue';
 import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
+import SearchResultArticlesList from './SearchResultArticlesList.vue';

 const router = useRouter();
 const store = useStore();
@ -34,15 +34,15 @@ const pages = ref({
  contacts: 1,
  conversations: 1,
  messages: 1,
+  articles: 1,
 });

-const currentUser = useMapGetter('getCurrentUser');
-const currentAccountId = useMapGetter('getCurrentAccountId');
 const contactRecords = useMapGetter('conversationSearch/getContactRecords');
 const conversationRecords = useMapGetter(
  'conversationSearch/getConversationRecords'
 );
 const messageRecords = useMapGetter('conversationSearch/getMessageRecords');
+const articleRecords = useMapGetter('conversationSearch/getArticleRecords');
 const uiFlags = useMapGetter('conversationSearch/getUIFlags');

 const addTypeToRecords = (records, type) =>
@ -57,6 +57,9 @@ const mappedConversations = computed(() =>
 const mappedMessages = computed(() =>
  addTypeToRecords(messageRecords, 'message')
 );
+const mappedArticles = computed(() =>
+  addTypeToRecords(articleRecords, 'article')
+);

 const isSelectedTabAll = computed(() => selectedTab.value === 'all');

@ -66,6 +69,7 @@ const sliceRecordsIfAllTab = items =>
 const contacts = computed(() => sliceRecordsIfAllTab(mappedContacts));
 const conversations = computed(() => sliceRecordsIfAllTab(mappedConversations));
 const messages = computed(() => sliceRecordsIfAllTab(mappedMessages));
+const articles = computed(() => sliceRecordsIfAllTab(mappedArticles));

 const filterByTab = tab =>
  computed(() => selectedTab.value === tab || isSelectedTabAll.value);
@ -73,14 +77,18 @@ const filterByTab = tab =>
 const filterContacts = filterByTab('contacts');
 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: {
-    permissions: [CONTACT_PERMISSIONS, ...ROLES, ...CONVERSATION_PERMISSIONS],
+    permissions: [
+      CONTACT_PERMISSIONS,
+      ...ROLES,
+      ...CONVERSATION_PERMISSIONS,
+      PORTAL_PERMISSIONS,
+    ],
    count: () => null, // No count for all tab
  },
  contacts: {
@ -95,41 +103,69 @@ const TABS_CONFIG = {
    permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
    count: () => mappedMessages.value.length,
  },
+  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,
    },
-  };
-  return filterItemsByPermission(
-    permissionCounts,
-    userPermissions.value,
-    item => item.permissions,
-    (_, item) => item.count
-  ).reduce((total, count) => total + count(), 0);
+    {
+      permissions: [...ROLES, PORTAL_PERMISSIONS],
+      featureFlag: FEATURE_FLAGS.HELP_CENTER,
+      count: () => articles.value.length,
+    },
+  ];
+
+  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(() => {
@ -138,12 +174,13 @@ const activeTabIndex = computed(() => {
 });

 const isFetchingAny = computed(() => {
-  const { contact, message, conversation, isFetching } = uiFlags.value;
+  const { contact, message, conversation, article, isFetching } = uiFlags.value;
  return (
    isFetching ||
    contact.isFetching ||
    message.isFetching ||
-    conversation.isFetching
+    conversation.isFetching ||
+    article.isFetching
  );
 });

@ -171,6 +208,7 @@ const showLoadMore = computed(() => {
    contacts: mappedContacts.value,
    conversations: mappedConversations.value,
    messages: mappedMessages.value,
+    articles: mappedArticles.value,
  }[selectedTab.value];

  return (
@ -185,10 +223,11 @@ const showViewMore = computed(() => ({
  conversations:
    mappedConversations.value?.length > 5 && isSelectedTabAll.value,
  messages: mappedMessages.value?.length > 5 && isSelectedTabAll.value,
+  articles: mappedArticles.value?.length > 5 && isSelectedTabAll.value,
 }));

 const clearSearchResult = () => {
-  pages.value = { contacts: 1, conversations: 1, messages: 1 };
+  pages.value = { contacts: 1, conversations: 1, messages: 1, articles: 1 };
  store.dispatch('conversationSearch/clearSearchResults');
 };

@ -214,6 +253,7 @@ const loadMore = () => {
    contacts: 'conversationSearch/contactSearch',
    conversations: 'conversationSearch/conversationSearch',
    messages: 'conversationSearch/messageSearch',
+    articles: 'conversationSearch/articleSearch',
  };

  if (uiFlags.value.isFetching || selectedTab.value === 'all') return;
@ -328,6 +368,30 @@ 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
+                v-if="filterArticles"
+                :is-fetching="uiFlags.article.isFetching"
+                :articles="articles"
+                :query="query"
+                :show-title="isSelectedTabAll"
+              />
+              <NextButton
+                v-if="showViewMore.articles"
+                :label="t(`SEARCH.VIEW_MORE`)"
+                icon="i-lucide-eye"
+                slate
+                sm
+                outline
+                @click="selectedTab = 'articles'"
+              />
+            </Policy>
+
            <div v-if="showLoadMore" class="flex justify-center mt-4 mb-6">
              <NextButton
                v-if="!isSelectedTabAll"
--- a/app/javascript/dashboard/modules/search/search.routes.js
+++ b/app/javascript/dashboard/modules/search/search.routes.js
@ -3,6 +3,7 @@ import {
  ROLES,
  CONVERSATION_PERMISSIONS,
  CONTACT_PERMISSIONS,
+  PORTAL_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';

 import SearchView from './components/SearchView.vue';
@ -12,7 +13,12 @@ export const routes = [
    path: frontendURL('accounts/:accountId/search'),
    name: 'search',
    meta: {
-      permissions: [...ROLES, ...CONVERSATION_PERMISSIONS, CONTACT_PERMISSIONS],
+      permissions: [
+        ...ROLES,
+        ...CONVERSATION_PERMISSIONS,
+        CONTACT_PERMISSIONS,
+        PORTAL_PERMISSIONS,
+      ],
    },
    component: SearchView,
  },
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/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"
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/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>
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue
@ -5,12 +5,15 @@ import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { required, helpers, url } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { useToggle } from '@vueuse/core';

 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import AccessToken from 'dashboard/routes/dashboard/settings/profile/AccessToken.vue';

 const props = defineProps({
  type: {
@ -42,6 +45,9 @@ const formState = reactive({
  botAvatarUrl: '',
 });

+const [showAccessToken, toggleAccessToken] = useToggle();
+const accessToken = ref('');
+
 const v$ = useVuelidate(
  {
    botName: {
@ -70,11 +76,22 @@ const isLoading = computed(() =>
    : uiFlags.value.isUpdating
 );

-const dialogTitle = computed(() =>
-  props.type === MODAL_TYPES.CREATE
+const dialogTitle = computed(() => {
+  if (showAccessToken.value) {
+    return t('AGENT_BOTS.ACCESS_TOKEN.TITLE');
+  }
+
+  return props.type === MODAL_TYPES.CREATE
    ? t('AGENT_BOTS.ADD.TITLE')
-    : t('AGENT_BOTS.EDIT.TITLE')
-);
+    : t('AGENT_BOTS.EDIT.TITLE');
+});
+
+const dialogDescription = computed(() => {
+  if (showAccessToken.value) {
+    return t('AGENT_BOTS.ACCESS_TOKEN.DESCRIPTION');
+  }
+  return '';
+});

 const confirmButtonLabel = computed(() =>
  props.type === MODAL_TYPES.CREATE
@ -90,6 +107,13 @@ const botUrlError = computed(() =>
  v$.value.botUrl.$error ? v$.value.botUrl.$errors[0]?.$message : ''
 );

+const showAccessTokenInput = computed(
+  () =>
+    showAccessToken.value ||
+    props.type === MODAL_TYPES.EDIT ||
+    accessToken.value
+);
+
 const resetForm = () => {
  Object.assign(formState, {
    botName: '',
@ -128,6 +152,7 @@ const handleAvatarDelete = async () => {
 const handleSubmit = async () => {
  v$.value.$touch();
  if (v$.value.$invalid) return;
+  if (showAccessToken.value) return;

  const botData = {
    name: formState.botName,
@ -144,7 +169,7 @@ const handleSubmit = async () => {
      ? botData
      : { id: props.selectedBot.id, data: botData };

-    await store.dispatch(
+    const response = await store.dispatch(
      `agentBots/${isCreate ? 'create' : 'update'}`,
      actionPayload
    );
@ -154,7 +179,21 @@ const handleSubmit = async () => {
      : t('AGENT_BOTS.EDIT.API.SUCCESS_MESSAGE');
    useAlert(alertKey);

-    dialogRef.value.close();
+    // Show access token after creation
+    if (isCreate) {
+      const { access_token: responseAccessToken, id } = response || {};
+
+      if (id && responseAccessToken) {
+        accessToken.value = responseAccessToken;
+        toggleAccessToken(true);
+      } else {
+        accessToken.value = '';
+        dialogRef.value.close();
+      }
+    } else {
+      dialogRef.value.close();
+    }
+
    resetForm();
  } catch (error) {
    const errorKey = isCreate
@ -166,17 +205,56 @@ const handleSubmit = async () => {

 const initializeForm = () => {
  if (props.selectedBot && Object.keys(props.selectedBot).length) {
-    const { name, description, outgoing_url, thumbnail, bot_config } =
-      props.selectedBot;
+    const {
+      name,
+      description,
+      outgoing_url: botUrl,
+      thumbnail,
+      bot_config: botConfig,
+      access_token: botAccessToken,
+    } = props.selectedBot;
    formState.botName = name || '';
    formState.botDescription = description || '';
-    formState.botUrl = outgoing_url || bot_config?.webhook_url || '';
+    formState.botUrl = botUrl || botConfig?.webhook_url || '';
    formState.botAvatarUrl = thumbnail || '';
+
+    if (botAccessToken && props.type === MODAL_TYPES.EDIT) {
+      accessToken.value = botAccessToken;
+    }
  } else {
    resetForm();
  }
 };

+const onCopyToken = async value => {
+  await copyTextToClipboard(value);
+  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 = () => {
+  if (!showAccessToken.value) v$.value?.$reset();
+  accessToken.value = '';
+  toggleAccessToken(false);
+};
+
+const onClickClose = () => {
+  closeModal();
+  dialogRef.value.close();
+};
+
 watch(() => props.selectedBot, initializeForm, { immediate: true, deep: true });

 defineExpose({ dialogRef });
@ -187,48 +265,79 @@ defineExpose({ dialogRef });
    ref="dialogRef"
    type="edit"
    :title="dialogTitle"
+    :description="dialogDescription"
    :show-cancel-button="false"
    :show-confirm-button="false"
-    @close="v$.$reset()"
+    @close="closeModal"
  >
    <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-      <div class="mb-2 flex flex-col items-start">
-        <span class="mb-2 text-sm font-medium text-n-slate-12">
-          {{ $t('AGENT_BOTS.FORM.AVATAR.LABEL') }}
-        </span>
-        <Avatar
-          :src="formState.botAvatarUrl"
-          :name="formState.botName"
-          :size="68"
-          allow-upload
-          @upload="handleImageUpload"
-          @delete="handleAvatarDelete"
+      <div
+        v-if="!showAccessToken || type === MODAL_TYPES.EDIT"
+        class="flex flex-col gap-4"
+      >
+        <div class="mb-2 flex flex-col items-start">
+          <span class="mb-2 text-sm font-medium text-n-slate-12">
+            {{ $t('AGENT_BOTS.FORM.AVATAR.LABEL') }}
+          </span>
+          <Avatar
+            :src="formState.botAvatarUrl"
+            :name="formState.botName"
+            :size="68"
+            allow-upload
+            icon-name="i-lucide-bot-message-square"
+            @upload="handleImageUpload"
+            @delete="handleAvatarDelete"
+          />
+        </div>
+
+        <Input
+          id="bot-name"
+          v-model="formState.botName"
+          :label="$t('AGENT_BOTS.FORM.NAME.LABEL')"
+          :placeholder="$t('AGENT_BOTS.FORM.NAME.PLACEHOLDER')"
+          :message="botNameError"
+          :message-type="botNameError ? 'error' : 'info'"
+          @blur="v$.botName.$touch()"
+        />
+
+        <TextArea
+          id="bot-description"
+          v-model="formState.botDescription"
+          :label="$t('AGENT_BOTS.FORM.DESCRIPTION.LABEL')"
+          :placeholder="$t('AGENT_BOTS.FORM.DESCRIPTION.PLACEHOLDER')"
+        />
+
+        <Input
+          id="bot-url"
+          v-model="formState.botUrl"
+          :label="$t('AGENT_BOTS.FORM.WEBHOOK_URL.LABEL')"
+          :placeholder="$t('AGENT_BOTS.FORM.WEBHOOK_URL.PLACEHOLDER')"
+          :message="botUrlError"
+          :message-type="botUrlError ? 'error' : 'info'"
+          @blur="v$.botUrl.$touch()"
        />
      </div>

-      <Input
-        v-model="formState.botName"
-        :label="$t('AGENT_BOTS.FORM.NAME.LABEL')"
-        :placeholder="$t('AGENT_BOTS.FORM.NAME.PLACEHOLDER')"
-        :message="botNameError"
-        :message-type="botNameError ? 'error' : 'info'"
-        @blur="v$.botName.$touch()"
-      />
-
-      <TextArea
-        v-model="formState.botDescription"
-        :label="$t('AGENT_BOTS.FORM.DESCRIPTION.LABEL')"
-        :placeholder="$t('AGENT_BOTS.FORM.DESCRIPTION.PLACEHOLDER')"
-      />
-
-      <Input
-        v-model="formState.botUrl"
-        :label="$t('AGENT_BOTS.FORM.WEBHOOK_URL.LABEL')"
-        :placeholder="$t('AGENT_BOTS.FORM.WEBHOOK_URL.PLACEHOLDER')"
-        :message="botUrlError"
-        :message-type="botUrlError ? 'error' : 'info'"
-        @blur="v$.botUrl.$touch()"
-      />
+      <div v-if="showAccessTokenInput" class="flex flex-col gap-1">
+        <label
+          v-if="type === MODAL_TYPES.EDIT"
+          class="mb-0.5 text-sm font-medium text-n-slate-12"
+        >
+          {{ $t('AGENT_BOTS.ACCESS_TOKEN.TITLE') }}
+        </label>
+        <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">
        <NextButton
@ -236,9 +345,10 @@ defineExpose({ dialogRef });
          slate
          type="reset"
          :label="$t('AGENT_BOTS.FORM.CANCEL')"
-          @click="dialogRef.close()"
+          @click="onClickClose()"
        />
        <NextButton
+          v-if="!showAccessToken"
          type="submit"
          data-testid="label-submit"
          :label="confirmButtonLabel"
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
@ -117,7 +117,7 @@ export default {
  <div class="flex flex-col h-auto overflow-auto integration-hooks">
    <woot-modal-header
      :header-title="integration.name"
-      :header-content="integration.short_description || integration.description"
+      :header-content="integration.short_description"
    />
    <FormKit
      v-model="values"
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
+++ b/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,22 +45,36 @@ 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"
        >
          <fluent-icon :icon="maskIcon" :size="16" />
        </button>
      </template>
    </woot-input>
-    <FormButton
-      type="submit"
-      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>
--- a/Show More
+++ b/Show More
 @ -1 +1 @@
 .3.3
 .4.4