Merge branch 'release/4.3.0'

2025-06-17 17:29:27 -07:00
parent b76ec878f1 89bcef4623
commit d75702c6b2
1277 changed files with 59669 additions and 10246 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

@@ -166,3 +219,121 @@ AllCops:
    - 'tmp/**/*'
    - '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
--- 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
@@ -196,9 +198,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'

@@ -237,6 +236,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,21 +432,13 @@ GEM
      faraday-multipart
      json (>= 1.8)
      rexml
+    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)
@@ -445,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)
@@ -471,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)
@@ -545,14 +546,16 @@ GEM
    orm_adapter (0.5.0)
    os (1.1.4)
    ostruct (0.6.1)
-    parallel (1.23.0)
-    parser (3.2.2.1)
+    parallel (1.27.0)
+    parser (3.3.8.0)
      ast (~> 2.4.1)
+      racc
    pg (1.5.3)
    pg_search (2.3.6)
      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)
@@ -567,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)
@@ -581,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
@@ -605,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)
@@ -623,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)
@@ -643,7 +652,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)
@@ -663,30 +672,36 @@ GEM
    rspec-support (3.13.1)
    rspec_junit_formatter (0.6.0)
      rspec-core (>= 2, < 4, != 2.12.0)
-    rubocop (1.50.2)
+    rubocop (1.75.6)
      json (~> 2.3)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
      parallel (~> 1.10)
-      parser (>= 3.2.0.0)
+      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.0, < 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)
@@ -816,8 +831,10 @@ GEM
    unf (0.1.4)
      unf_ext
    unf_ext (0.0.8.2)
-    unicode-display_width (2.4.2)
-    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)
@@ -845,7 +862,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)
@@ -951,7 +970,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
  responders (>= 3.1.1)
@@ -960,6 +979,7 @@ DEPENDENCIES
  rspec-rails (>= 6.1.5)
  rspec_junit_formatter
  rubocop
+  rubocop-factory_bot
  rubocop-performance
  rubocop-rails
  rubocop-rspec
@@ -997,7 +1017,7 @@ DEPENDENCIES
  working_hours

 RUBY VERSION
-   ruby 3.3.3p89
+   ruby 3.4.4p34

 BUNDLED WITH
   2.5.16
--- a/9
+++ b/9
@@ -41,8 +41,15 @@ run:

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

+force_run_tunnel:
+	lsof -ti:3000 | xargs kill -9 2>/dev/null || true
+	rm -f ./.overmind.sock
+	rm -f tmp/pids/*.pid
+	overmind start -f Procfile.tunnel
+
 debug:
 	overmind connect backend

@@ -52,4 +59,4 @@ debug_worker:
 docker: 
 	docker build -t $(APP_NAME) -f ./docker/Dockerfile .

-.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run debug debug_worker
+.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run force_run_tunnel debug debug_worker
--- a/Procfile.tunnel
+++ b/Procfile.tunnel
@@ -0,0 +1,4 @@
+backend: DISABLE_MINI_PROFILER=true bin/rails s -p 3000
+# https://github.com/mperham/sidekiq/issues/3090#issuecomment-389748695
+worker: dotenv bundle exec sidekiq -C config/sidekiq.yml
+vite: bin/vite build --watch
--- a/app/assets/javascripts/secretField.js
+++ b/app/assets/javascripts/secretField.js
@@ -10,7 +10,8 @@ function toggleSecretField(e) {
  if (!textElement) return;

  if (textElement.dataset.secretMasked === 'false') {
-    textElement.textContent = '•'.repeat(10);
+    const maskedLength = secretField.dataset.secretText?.length || 10;
+    textElement.textContent = '•'.repeat(maskedLength);
    textElement.dataset.secretMasked = 'true';
    toggler.querySelector('svg use').setAttribute('xlink:href', '#eye-show');

@@ -32,3 +33,13 @@ function copySecretField(e) {

  navigator.clipboard.writeText(secretField.dataset.secretText);
 }
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.cell-data__secret-field').forEach(field => {
+    const span = field.querySelector('[data-secret-masked]');
+    if (span && span.dataset.secretMasked === 'true') {
+      const len = field.dataset.secretText?.length || 10;
+      span.textContent = '•'.repeat(len);
+    }
+  });
+});
--- a/app/assets/stylesheets/administrate/components/_cells.scss
+++ b/app/assets/stylesheets/administrate/components/_cells.scss
@@ -46,17 +46,25 @@

 .cell-data__secret-field {
  align-items: center;
+  color: $hint-grey;
  display: flex;

  span {
-    flex: 1;
+    flex: 0 0 auto;
  }

-  button {
-    margin-left: 5px;
+  [data-secret-toggler],
+  [data-secret-copier] {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    margin-left: 0.5rem;
+    padding: 0;

    svg {
      fill: currentColor;
+      height: 1.25rem;
+      width: 1.25rem;
    }
  }
 }
--- 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/builders/v2/reports/label_summary_builder.rb
+++ b/app/builders/v2/reports/label_summary_builder.rb
@@ -0,0 +1,103 @@
+class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
+  attr_reader :account, :params
+
+  # rubocop:disable Lint/MissingSuper
+  # the parent class has no initialize
+  def initialize(account:, params:)
+    @account = account
+    @params = params
+
+    timezone_offset = (params[:timezone_offset] || 0).to_f
+    @timezone = ActiveSupport::TimeZone[timezone_offset]&.name
+  end
+  # rubocop:enable Lint/MissingSuper
+
+  def build
+    labels = account.labels.to_a
+    return [] if labels.empty?
+
+    report_data = collect_report_data
+    labels.map { |label| build_label_report(label, report_data) }
+  end
+
+  private
+
+  def collect_report_data
+    conversation_filter = build_conversation_filter
+    use_business_hours = use_business_hours?
+
+    {
+      conversation_counts: fetch_conversation_counts(conversation_filter),
+      resolved_counts: fetch_resolved_counts(conversation_filter),
+      resolution_metrics: fetch_metrics(conversation_filter, 'conversation_resolved', use_business_hours),
+      first_response_metrics: fetch_metrics(conversation_filter, 'first_response', use_business_hours),
+      reply_metrics: fetch_metrics(conversation_filter, 'reply_time', use_business_hours)
+    }
+  end
+
+  def build_label_report(label, report_data)
+    {
+      id: label.id,
+      name: label.title,
+      conversations_count: report_data[:conversation_counts][label.title] || 0,
+      avg_resolution_time: report_data[:resolution_metrics][label.title] || 0,
+      avg_first_response_time: report_data[:first_response_metrics][label.title] || 0,
+      avg_reply_time: report_data[:reply_metrics][label.title] || 0,
+      resolved_conversations_count: report_data[:resolved_counts][label.title] || 0
+    }
+  end
+
+  def use_business_hours?
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours])
+  end
+
+  def build_conversation_filter
+    conversation_filter = { account_id: account.id }
+    conversation_filter[:created_at] = range if range.present?
+
+    conversation_filter
+  end
+
+  def fetch_conversation_counts(conversation_filter)
+    fetch_counts(conversation_filter)
+  end
+
+  def fetch_resolved_counts(conversation_filter)
+    # since the base query is ActsAsTaggableOn,
+    # the status :resolved won't automatically be converted to integer status
+    fetch_counts(conversation_filter.merge(status: Conversation.statuses[:resolved]))
+  end
+
+  def fetch_counts(conversation_filter)
+    ActsAsTaggableOn::Tagging
+      .joins('INNER JOIN conversations ON taggings.taggable_id = conversations.id')
+      .joins('INNER JOIN tags ON taggings.tag_id = tags.id')
+      .where(
+        taggable_type: 'Conversation',
+        context: 'labels',
+        conversations: conversation_filter
+      )
+      .select('tags.name, COUNT(taggings.*) AS count')
+      .group('tags.name')
+      .each_with_object({}) { |record, hash| hash[record.name] = record.count }
+  end
+
+  def fetch_metrics(conversation_filter, event_name, use_business_hours)
+    ReportingEvent
+      .joins('INNER JOIN conversations ON reporting_events.conversation_id = conversations.id')
+      .joins('INNER JOIN taggings ON taggings.taggable_id = conversations.id')
+      .joins('INNER JOIN tags ON taggings.tag_id = tags.id')
+      .where(
+        conversations: conversation_filter,
+        name: event_name,
+        taggings: { taggable_type: 'Conversation', context: 'labels' }
+      )
+      .group('tags.name')
+      .order('tags.name')
+      .select(
+        'tags.name',
+        use_business_hours ? 'AVG(reporting_events.value_in_business_hours) as avg_value' : 'AVG(reporting_events.value) as avg_value'
+      )
+      .each_with_object({}) { |record, hash| hash[record.name] = record.avg_value.to_f }
+  end
+end
--- 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/contacts_controller.rb
+++ b/app/controllers/api/v1/accounts/contacts_controller.rb
@@ -14,7 +14,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
  before_action :check_authorization
  before_action :set_current_page, only: [:index, :active, :search, :filter]
  before_action :fetch_contact, only: [:show, :update, :destroy, :avatar, :contactable_inboxes, :destroy_custom_attributes]
-  before_action :set_include_contact_inboxes, only: [:index, :search, :filter, :show, :update]
+  before_action :set_include_contact_inboxes, only: [:index, :active, :search, :filter, :show, :update]

  def index
    @contacts_count = resolved_contacts.count
@@ -56,7 +56,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
    contacts = Current.account.contacts.where(id: ::OnlineStatusTracker
                  .get_available_contact_ids(Current.account.id))
    @contacts_count = contacts.count
-    @contacts = contacts.page(@current_page)
+    @contacts = fetch_contacts(contacts)
  end

  def show; end
--- a/app/controllers/api/v1/accounts/conversations_controller.rb
+++ b/app/controllers/api/v1/accounts/conversations_controller.rb
@@ -124,6 +124,12 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
    @conversation.save!
  end

+  def destroy
+    authorize @conversation, :destroy?
+    ::DeleteObjectJob.perform_later(@conversation, Current.user, request.ip)
+    head :ok
+  end
+
  private

  def permitted_update_params
--- a/app/controllers/api/v1/accounts/integrations/linear_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/linear_controller.rb
@@ -1,5 +1,5 @@
 class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::BaseController
-  before_action :fetch_conversation, only: [:link_issue, :linked_issues]
+  before_action :fetch_conversation, only: [:create_issue, :link_issue, :unlink_issue, :linked_issues]
  before_action :fetch_hook, only: [:destroy]

  def destroy
@@ -31,6 +31,12 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
    if issue[:error]
      render json: { error: issue[:error] }, status: :unprocessable_entity
    else
+      Linear::ActivityMessageService.new(
+        conversation: @conversation,
+        action_type: :issue_created,
+        issue_data: { id: issue[:data][:identifier] },
+        user: Current.user
+      ).perform
      render json: issue[:data], status: :ok
    end
  end
@@ -42,17 +48,30 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
    if issue[:error]
      render json: { error: issue[:error] }, status: :unprocessable_entity
    else
+      Linear::ActivityMessageService.new(
+        conversation: @conversation,
+        action_type: :issue_linked,
+        issue_data: { id: issue_id },
+        user: Current.user
+      ).perform
      render json: issue[:data], status: :ok
    end
  end

  def unlink_issue
    link_id = permitted_params[:link_id]
+    issue_id = permitted_params[:issue_id]
    issue = linear_processor_service.unlink_issue(link_id)

    if issue[:error]
      render json: { error: issue[:error] }, status: :unprocessable_entity
    else
+      Linear::ActivityMessageService.new(
+        conversation: @conversation,
+        action_type: :issue_unlinked,
+        issue_data: { id: issue_id },
+        user: Current.user
+      ).perform
      render json: issue[:data], status: :ok
    end
  end
@@ -94,7 +113,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/accounts_controller.rb
+++ b/app/controllers/api/v1/accounts_controller.rb
@@ -92,7 +92,7 @@ class Api::V1::AccountsController < Api::BaseController
  end

  def settings_params
-    params.permit(:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting)
+    params.permit(:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting, :audio_transcriptions, :auto_resolve_label)
  end

  def check_signup_enabled
--- a/app/controllers/api/v1/profiles_controller.rb
+++ b/app/controllers/api/v1/profiles_controller.rb
@@ -38,6 +38,11 @@ class Api::V1::ProfilesController < Api::BaseController
    head :ok
  end

+  def reset_access_token
+    @user.access_token.regenerate_token
+    @user.reload
+  end
+
  private

  def set_user
--- a/app/controllers/api/v2/accounts/summary_reports_controller.rb
+++ b/app/controllers/api/v2/accounts/summary_reports_controller.rb
@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
  before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team, :inbox]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label]

  def agent
    render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -14,6 +14,10 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
    render_report_with(V2::Reports::InboxSummaryBuilder)
  end

+  def label
+    render_report_with(V2::Reports::LabelSummaryBuilder)
+  end
+
  private

  def check_authorization
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -15,7 +15,7 @@ class DashboardController < ActionController::Base
  private

  def ensure_html_format
-    head :not_acceptable unless request.format.html?
+    render json: { error: 'Please use API routes instead of dashboard routes for JSON requests' }, status: :not_acceptable if request.format.json?
  end

  def set_global_config
--- 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/oauth_callback_controller.rb
+++ b/app/controllers/oauth_callback_controller.rb
@@ -71,6 +71,7 @@ class OauthCallbackController < ApplicationController
  def create_channel_with_inbox
    ActiveRecord::Base.transaction do
      channel_email = Channel::Email.create!(email: users_data['email'], account: account)
+
      account.inboxes.create!(
        account: account,
        channel: channel_email,
--- 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/account_users_controller.rb
+++ b/app/controllers/super_admin/account_users_controller.rb
@@ -2,6 +2,13 @@ class SuperAdmin::AccountUsersController < SuperAdmin::ApplicationController
  # Overwrite any of the RESTful controller actions to implement custom behavior
  # For example, you may want to send an email after a foo is updated.
  #
+
+  # Since account/user page - account user role attribute links to the show page
+  # Handle with a redirect to the user show page
+  def show
+    redirect_to super_admin_user_path(requested_resource.user)
+  end
+
  def create
    resource = resource_class.new(resource_params)
    authorize_resource(resource)
--- 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/helpers/api/v2/accounts/reports_helper.rb
+++ b/app/helpers/api/v2/accounts/reports_helper.rb
@@ -36,9 +36,13 @@ module Api::V2::Accounts::ReportsHelper
  end

  def generate_labels_report
-    Current.account.labels.map do |label|
-      label_report = report_builder({ type: :label, id: label.id }).short_summary
-      [label.title] + generate_readable_report_metrics(label_report)
+    reports = V2::Reports::LabelSummaryBuilder.new(
+      account: Current.account,
+      params: build_params({})
+    ).build
+
+    reports.map do |report|
+      [report[:name]] + generate_readable_report_metrics(report)
    end
  end

--- 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
@@ -38,13 +38,7 @@ export default {
    }
    return false;
  },
-  profileUpdate({
-    password,
-    password_confirmation,
-    displayName,
-    avatar,
-    ...profileAttributes
-  }) {
+  profileUpdate({ displayName, avatar, ...profileAttributes }) {
    const formData = new FormData();
    Object.keys(profileAttributes).forEach(key => {
      const hasValue = profileAttributes[key] === undefined;
@@ -53,16 +47,22 @@ export default {
      }
    });
    formData.append('profile[display_name]', displayName || '');
-    if (password && password_confirmation) {
-      formData.append('profile[password]', password);
-      formData.append('profile[password_confirmation]', password_confirmation);
-    }
    if (avatar) {
      formData.append('profile[avatar]', avatar);
    }
    return axios.put(endPoints('profileUpdate').url, formData);
  },

+  profilePasswordUpdate({ currentPassword, password, passwordConfirmation }) {
+    return axios.put(endPoints('profileUpdate').url, {
+      profile: {
+        current_password: currentPassword,
+        password,
+        password_confirmation: passwordConfirmation,
+      },
+    });
+  },
+
  updateUISettings({ uiSettings }) {
    return axios.put(endPoints('profileUpdate').url, {
      profile: { ui_settings: uiSettings },
@@ -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/contacts.js
+++ b/app/javascript/dashboard/api/contacts.js
@@ -61,6 +61,11 @@ class ContactAPI extends ApiClient {
    return axios.get(requestURL);
  }

+  active(page = 1, sortAttr = 'name') {
+    let requestURL = `${this.url}/active?${buildContactParams(page, sortAttr)}`;
+    return axios.get(requestURL);
+  }
+
  // eslint-disable-next-line default-param-last
  filter(page = 1, sortAttr = 'name', queryPayload) {
    let requestURL = `${this.url}/filter?${buildContactParams(page, sortAttr)}`;
--- a/app/javascript/dashboard/api/endPoints.js
+++ b/app/javascript/dashboard/api/endPoints.js
@@ -51,6 +51,10 @@ 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/inbox/conversation.js
+++ b/app/javascript/dashboard/api/inbox/conversation.js
@@ -134,13 +134,13 @@ class ConversationApi extends ApiClient {
    return axios.get(`${this.url}/${conversationId}/attachments`);
  }

-  requestCopilot(conversationId, body) {
-    return axios.post(`${this.url}/${conversationId}/copilot`, body);
-  }
-
  getInboxAssistant(conversationId) {
    return axios.get(`${this.url}/${conversationId}/inbox_assistant`);
  }
+
+  delete(conversationId) {
+    return axios.delete(`${this.url}/${conversationId}`);
+  }
 }

 export default new ConversationApi();
--- a/app/javascript/dashboard/api/integrations/linear.js
+++ b/app/javascript/dashboard/api/integrations/linear.js
@@ -33,9 +33,11 @@ class LinearAPI extends ApiClient {
    );
  }

-  unlinkIssue(linkId) {
+  unlinkIssue(linkId, issueIdentifier, conversationId) {
    return axios.post(`${this.url}/unlink_issue`, {
      link_id: linkId,
+      issue_id: issueIdentifier,
+      conversation_id: conversationId,
    });
  }

--- 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/api/specs/integrations/linear.spec.js
+++ b/app/javascript/dashboard/api/specs/integrations/linear.spec.js
@@ -91,6 +91,19 @@ describe('#linearAPI', () => {
        issueData
      );
    });
+
+    it('creates a valid request with conversation_id', () => {
+      const issueData = {
+        title: 'New Issue',
+        description: 'Issue description',
+        conversation_id: 123,
+      };
+      LinearAPIClient.createIssue(issueData);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/create_issue',
+        issueData
+      );
+    });
  });

  describe('link_issue', () => {
@@ -120,6 +133,18 @@ describe('#linearAPI', () => {
        }
      );
    });
+
+    it('creates a valid request with title', () => {
+      LinearAPIClient.link_issue(1, 'ENG-123', 'Sample Issue');
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/link_issue',
+        {
+          issue_id: 'ENG-123',
+          conversation_id: 1,
+          title: 'Sample Issue',
+        }
+      );
+    });
  });

  describe('getLinkedIssue', () => {
@@ -164,12 +189,26 @@ describe('#linearAPI', () => {
      window.axios = originalAxios;
    });

-    it('creates a valid request', () => {
-      LinearAPIClient.unlinkIssue(1);
+    it('creates a valid request with link_id only', () => {
+      LinearAPIClient.unlinkIssue('link123');
      expect(axiosMock.post).toHaveBeenCalledWith(
        '/api/v1/integrations/linear/unlink_issue',
        {
-          link_id: 1,
+          link_id: 'link123',
+          issue_id: undefined,
+          conversation_id: undefined,
+        }
+      );
+    });
+
+    it('creates a valid request with all parameters', () => {
+      LinearAPIClient.unlinkIssue('link123', 'ENG-456', 789);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/unlink_issue',
+        {
+          link_id: 'link123',
+          issue_id: 'ENG-456',
+          conversation_id: 789,
        }
      );
    });
--- a/app/javascript/dashboard/api/summaryReports.js
+++ b/app/javascript/dashboard/api/summaryReports.js
@@ -35,6 +35,16 @@ class SummaryReportsAPI extends ApiClient {
      },
    });
  }
+
+  getLabelReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/label`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
 }

 export default new SummaryReportsAPI();
--- 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({
@@ -16,6 +17,7 @@ const props = defineProps({
  additionalAttributes: { type: Object, default: () => ({}) },
  phoneNumber: { type: String, default: '' },
  thumbnail: { type: String, default: '' },
+  availabilityStatus: { type: String, default: null },
  isExpanded: { type: Boolean, default: false },
  isUpdating: { type: Boolean, default: false },
 });
@@ -91,7 +93,13 @@ const onClickViewDetails = () => emit('showContact', props.id);
 <template>
  <CardLayout :key="id" layout="row">
    <div class="flex items-center justify-start flex-1 gap-4">
-      <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
+      <Avatar
+        :name="name"
+        :src="thumbnail"
+        :size="48"
+        :status="availabilityStatus"
+        rounded-full
+      />
      <div class="flex flex-col gap-0.5 flex-1">
        <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
          <span class="text-base font-medium truncate text-n-slate-12">
@@ -149,15 +157,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 +184,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/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -7,42 +7,16 @@ import ContactMoreActions from './components/ContactMoreActions.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';

 defineProps({
-  showSearch: {
-    type: Boolean,
-    default: true,
-  },
-  searchValue: {
-    type: String,
-    default: '',
-  },
-  headerTitle: {
-    type: String,
-    required: true,
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-  activeSort: {
-    type: String,
-    default: 'last_activity_at',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-  isSegmentsView: {
-    type: Boolean,
-    default: false,
-  },
-  hasActiveFilters: {
-    type: Boolean,
-    default: false,
-  },
-  isLabelView: {
-    type: Boolean,
-    default: false,
-  },
+  showSearch: { type: Boolean, default: true },
+  searchValue: { type: String, default: '' },
+  headerTitle: { type: String, required: true },
+  buttonLabel: { type: String, default: '' },
+  activeSort: { type: String, default: 'last_activity_at' },
+  activeOrdering: { type: String, default: '' },
+  isSegmentsView: { type: Boolean, default: false },
+  hasActiveFilters: { type: Boolean, default: false },
+  isLabelView: { type: Boolean, default: false },
+  isActiveView: { type: Boolean, default: false },
 });

 const emit = defineEmits([
@@ -85,7 +59,7 @@ const emit = defineEmits([
          </Input>
        </div>
        <div class="flex items-center gap-2">
-          <div v-if="!isLabelView" class="relative">
+          <div v-if="!isLabelView && !isActiveView" class="relative">
            <Button
              id="toggleContactsFilterButton"
              :icon="
@@ -105,7 +79,12 @@ const emit = defineEmits([
            <slot name="filter" />
          </div>
          <Button
-            v-if="hasActiveFilters && !isSegmentsView && !isLabelView"
+            v-if="
+              hasActiveFilters &&
+              !isSegmentsView &&
+              !isLabelView &&
+              !isActiveView
+            "
            icon="i-lucide-save"
            color="slate"
            size="sm"
@@ -113,7 +92,7 @@ const emit = defineEmits([
            @click="emit('createSegment')"
          />
          <Button
-            v-if="isSegmentsView && !isLabelView"
+            v-if="isSegmentsView && !isLabelView && !isActiveView"
            icon="i-lucide-trash"
            color="slate"
            size="sm"
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -36,6 +36,7 @@ const props = defineProps({
  activeSegment: { type: Object, default: null },
  hasAppliedFilters: { type: Boolean, default: false },
  isLabelView: { type: Boolean, default: false },
+  isActiveView: { type: Boolean, default: false },
 });

 const emit = defineEmits([
@@ -277,6 +278,7 @@ defineExpose({
    :header-title="headerTitle"
    :is-segments-view="hasActiveSegments"
    :is-label-view="isLabelView"
+    :is-active-view="isActiveView"
    :has-active-filters="hasAppliedFilters"
    :button-label="t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
    @search="emit('search', $event)"
--- a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -6,7 +6,7 @@ import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/Contact
 import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';

-defineProps({
+const props = defineProps({
  searchValue: { type: String, default: '' },
  headerTitle: { type: String, default: '' },
  showPaginationFooter: { type: Boolean, default: true },
@@ -37,10 +37,23 @@ const isNotSegmentView = computed(() => {
  return route.name !== 'contacts_dashboard_segments_index';
 });

+const isActiveView = computed(() => {
+  return route.name === 'contacts_dashboard_active';
+});
+
 const isLabelView = computed(
  () => route.name === 'contacts_dashboard_labels_index'
 );

+const showActiveFiltersPreview = computed(() => {
+  return (
+    (props.hasAppliedFilters || !isNotSegmentView.value) &&
+    !props.isFetchingList &&
+    !isLabelView.value &&
+    !isActiveView.value
+  );
+});
+
 const updateCurrentPage = page => {
  emit('update:currentPage', page);
 };
@@ -57,7 +70,7 @@ const openFilter = () => {
    <div class="flex flex-col w-full h-full transition-all duration-300">
      <ContactListHeaderWrapper
        ref="contactListHeaderWrapper"
-        :show-search="isNotSegmentView"
+        :show-search="isNotSegmentView && !isActiveView"
        :search-value="searchValue"
        :active-sort="activeSort"
        :active-ordering="activeOrdering"
@@ -66,6 +79,7 @@ const openFilter = () => {
        :segments-id="segmentsId"
        :has-applied-filters="hasAppliedFilters"
        :is-label-view="isLabelView"
+        :is-active-view="isActiveView"
        @update:sort="emit('update:sort', $event)"
        @search="emit('search', $event)"
        @apply-filter="emit('applyFilter', $event)"
@@ -74,11 +88,7 @@ const openFilter = () => {
      <main class="flex-1 overflow-y-auto">
        <div class="w-full mx-auto max-w-[60rem]">
          <ContactsActiveFiltersPreview
-            v-if="
-              (hasAppliedFilters || !isNotSegmentView) &&
-              !isFetchingList &&
-              !isLabelView
-            "
+            v-if="showActiveFiltersPreview"
            :active-segment="activeSegment"
            @clear-filters="emit('clearFilters')"
            @open-filter="openFilter"
--- a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
@@ -71,6 +71,7 @@ const toggleExpanded = id => {
      :thumbnail="contact.thumbnail"
      :phone-number="contact.phoneNumber"
      :additional-attributes="contact.additionalAttributes"
+      :availability-status="contact.availabilityStatus"
      :is-expanded="expandedCardId === contact.id"
      :is-updating="isUpdating"
      @toggle="toggleExpanded(contact.id)"
--- 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-36 xl: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/Editor/Editor.vue
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -4,38 +4,14 @@ import { computed, ref, watch, useSlots } from 'vue';
 import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';

 const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  focusOnMount: {
-    type: Boolean,
-    default: false,
-  },
-  maxLength: {
-    type: Number,
-    default: 200,
-  },
-  showCharacterCount: {
-    type: Boolean,
-    default: true,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  message: {
-    type: String,
-    default: '',
-  },
+  modelValue: { type: String, default: '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  focusOnMount: { type: Boolean, default: false },
+  maxLength: { type: Number, default: 200 },
+  showCharacterCount: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  message: { type: String, default: '' },
  messageType: {
    type: String,
    default: 'info',
@@ -43,6 +19,7 @@ const props = defineProps({
  },
  enableVariables: { type: Boolean, default: false },
  enableCannedResponses: { type: Boolean, default: true },
+  enabledMenuOptions: { type: Array, default: () => [] },
 });

 const emit = defineEmits(['update:modelValue']);
@@ -120,6 +97,7 @@ watch(
        :disabled="disabled"
        :enable-variables="enableVariables"
        :enable-canned-responses="enableCannedResponses"
+        :enabled-menu-options="enabledMenuOptions"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
--- 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/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -76,7 +76,7 @@ const handlePageChange = event => {

 <template>
  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6 xl:px-0">
+    <header class="sticky top-0 z-10 px-6">
      <div class="w-full max-w-[60rem] mx-auto">
        <div
          class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
@@ -116,7 +116,7 @@ const handlePageChange = event => {
        </div>
      </div>
    </header>
-    <main class="flex-1 px-6 overflow-y-auto xl:px-0">
+    <main class="flex-1 px-6 overflow-y-auto">
      <div class="w-full max-w-[60rem] h-full mx-auto py-4">
        <slot v-if="!showPaywall" name="controls" />
        <div
--- 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
@@ -1,29 +1,24 @@
 <script setup>
-import { nextTick, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { nextTick, ref, watch, computed } from 'vue';
 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 CopilotThinkingGroup from './CopilotThinkingGroup.vue';
 import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
-import Icon from '../icon/Icon.vue';
+import CopilotEmptyState from './CopilotEmptyState.vue';
+import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
+import { useI18n } from 'vue-i18n';

 const props = defineProps({
-  supportAgent: {
-    type: Object,
-    default: () => ({}),
-  },
  messages: {
    type: Array,
    default: () => [],
  },
-  isCaptainTyping: {
-    type: Boolean,
-    default: false,
-  },
  conversationInboxType: {
    type: String,
    required: true,
@@ -42,22 +37,11 @@ const emit = defineEmits(['sendMessage', 'reset', 'setAssistant']);

 const { t } = useI18n();

-const COPILOT_USER_ROLES = ['assistant', 'system'];
-
 const sendMessage = message => {
  emit('sendMessage', message);
  useTrack(COPILOT_EVENTS.SEND_MESSAGE);
 };

-const useSuggestion = opt => {
-  emit('sendMessage', t(opt.prompt));
-  useTrack(COPILOT_EVENTS.SEND_SUGGESTED);
-};
-
-const handleReset = () => {
-  emit('reset');
-};
-
 const chatContainer = ref(null);

 const scrollToBottom = async () => {
@@ -67,23 +51,72 @@ const scrollToBottom = async () => {
  }
 };

-const promptOptions = [
-  {
-    label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
-  },
-  {
-    label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
-  },
-  {
-    label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
-  },
-];
+const groupedMessages = computed(() => {
+  const result = [];
+  let thinkingGroup = [];
+  props.messages.forEach(message => {
+    if (message.message_type === 'assistant_thinking') {
+      thinkingGroup.push(message);
+    } else {
+      if (thinkingGroup.length > 0) {
+        result.push({
+          id: thinkingGroup[0].id,
+          message_type: 'thinking_group',
+          messages: thinkingGroup,
+        });
+        thinkingGroup = [];
+      }
+      result.push(message);
+    }
+  });
+  if (thinkingGroup.length > 0) {
+    result.push({
+      id: thinkingGroup[0].id,
+      message_type: 'thinking_group',
+      messages: thinkingGroup,
+    });
+  }
+  return result;
+});

+const isLastMessageFromAssistant = computed(() => {
+  return (
+    groupedMessages.value[groupedMessages.value.length - 1].message_type ===
+    'assistant'
+  );
+});
+
+const { updateUISettings } = useUISettings();
+
+const closeCopilotPanel = () => {
+  updateUISettings({
+    is_copilot_panel_open: false,
+    is_contact_sidebar_open: false,
+  });
+};
+
+const handleSidebarAction = action => {
+  if (action === 'reset') {
+    emit('reset');
+  }
+};
+
+const hasAssistants = computed(() => props.assistants.length > 0);
+const hasMessages = computed(() => props.messages.length > 0);
+const copilotButtons = computed(() => {
+  if (hasMessages.value) {
+    return [
+      {
+        key: 'reset',
+        icon: 'i-lucide-refresh-ccw',
+        tooltip: t('CAPTAIN.COPILOT.RESET'),
+      },
+    ];
+  }
+  return [];
+});
 watch(
-  [() => props.messages, () => props.isCaptainTyping],
+  [() => props.messages],
  () => {
    scrollToBottom();
  },
@@ -93,62 +126,59 @@ watch(

 <template>
  <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
-    <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
-          v-if="message.role === 'user'"
-          :support-agent="supportAgent"
-          :message="message"
-        />
-        <CopilotAssistantMessage
-          v-else-if="COPILOT_USER_ROLES.includes(message.role)"
-          :message="message"
-          :conversation-inbox-type="conversationInboxType"
-        />
-      </template>
-
-      <CopilotLoader v-if="isCaptainTyping" />
-    </div>
-
+    <SidebarActionsHeader
+      :title="$t('CAPTAIN.COPILOT.TITLE')"
+      :buttons="copilotButtons"
+      @click="handleSidebarAction"
+      @close="closeCopilotPanel"
+    />
    <div
-      v-if="!messages.length"
-      class="h-full w-full flex items-center justify-center"
+      ref="chatContainer"
+      class="flex-1 flex px-4 py-4 overflow-y-auto items-start"
    >
-      <div class="h-fit px-3 py-3 space-y-1">
-        <span class="text-xs text-n-slate-10">
-          {{ $t('COPILOT.TRY_THESE_PROMPTS') }}
-        </span>
-        <button
-          v-for="prompt in promptOptions"
-          :key="prompt.label"
-          class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
-          @click="() => useSuggestion(prompt)"
-        >
-          <span>{{ t(prompt.label) }}</span>
-          <Icon icon="i-lucide-chevron-right" />
-        </button>
+      <div v-if="hasMessages" class="space-y-6 flex-1 flex flex-col w-full">
+        <template v-for="(item, index) in groupedMessages" :key="item.id">
+          <CopilotAgentMessage
+            v-if="item.message_type === 'user'"
+            :message="item.message"
+          />
+          <CopilotAssistantMessage
+            v-else-if="item.message_type === 'assistant'"
+            :message="item.message"
+            :is-last-message="index === groupedMessages.length - 1"
+            :conversation-inbox-type="conversationInboxType"
+          />
+          <CopilotThinkingGroup
+            v-else
+            :messages="item.messages"
+            :default-collapsed="isLastMessageFromAssistant"
+          />
+        </template>
+
+        <CopilotLoader v-if="!isLastMessageFromAssistant" />
      </div>
+      <CopilotEmptyState
+        v-else
+        :has-assistants="hasAssistants"
+        @use-suggestion="sendMessage"
+      />
    </div>

    <div class="mx-3 mt-px mb-2">
      <div class="flex items-center gap-2 justify-between w-full mb-1">
        <ToggleCopilotAssistant
-          v-if="assistants.length"
+          v-if="assistants.length > 1"
          :assistants="assistants"
          :active-assistant="activeAssistant"
          @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" />
+      <CopilotInput
+        v-if="hasAssistants"
+        class="mb-1 w-full"
+        @send="sendMessage"
+      />
    </div>
  </div>
 </template>
--- 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,9 +9,12 @@ 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({
+  isLastMessage: {
+    type: Boolean,
+    default: false,
+  },
  message: {
    type: Object,
    required: true,
@@ -21,6 +24,15 @@ const props = defineProps({
    required: true,
  },
 });
+const hasEmptyMessageContent = computed(() => !props.message?.content);
+
+const showUseButton = computed(() => {
+  return (
+    !hasEmptyMessageContent.value &&
+    props.message.reply_suggestion &&
+    props.isLastMessage
+  );
+});

 const messageContent = computed(() => {
  const formatter = new MessageFormatter(props.message.content);
@@ -33,8 +45,6 @@ const insertIntoRichEditor = computed(() => {
  );
 });

-const hasEmptyMessageContent = computed(() => !props.message?.content);
-
 const useCopilotResponse = () => {
  if (insertIntoRichEditor.value) {
    emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
@@ -46,33 +56,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="showUseButton"
+        :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/CopilotEmptyState.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotEmptyState.vue
@@ -0,0 +1,106 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import Icon from '../icon/Icon.vue';
+
+defineProps({
+  hasAssistants: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['useSuggestion']);
+const { t } = useI18n();
+const route = useRoute();
+
+const routePromptMap = {
+  conversations: [
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
+    },
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
+    },
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
+    },
+  ],
+  dashboard: [
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.CONTENT',
+    },
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.CONTENT',
+    },
+  ],
+};
+
+const getCurrentRoute = () => {
+  const path = route.path;
+  if (path.includes('/conversations')) return 'conversations';
+  if (path.includes('/dashboard')) return 'dashboard';
+  return 'dashboard';
+};
+
+const promptOptions = computed(() => {
+  const currentRoute = getCurrentRoute();
+  return routePromptMap[currentRoute] || routePromptMap.conversations;
+});
+
+const handleSuggestion = opt => {
+  emit('useSuggestion', t(opt.prompt));
+};
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col gap-6 px-2">
+    <div class="flex flex-col space-y-4 py-4">
+      <Icon icon="i-woot-captain" class="text-n-slate-9 text-4xl" />
+      <div class="space-y-1">
+        <h3 class="text-base font-medium text-n-slate-12 leading-8">
+          {{ $t('CAPTAIN.COPILOT.PANEL_TITLE') }}
+        </h3>
+        <p class="text-sm text-n-slate-11 leading-6">
+          {{ $t('CAPTAIN.COPILOT.KICK_OFF_MESSAGE') }}
+        </p>
+      </div>
+    </div>
+    <div v-if="!hasAssistants" class="w-full space-y-2">
+      <p class="text-sm text-n-slate-11 leading-6">
+        {{ $t('CAPTAIN.ASSISTANTS.NO_ASSISTANTS_AVAILABLE') }}
+      </p>
+      <router-link
+        :to="{
+          name: 'captain_assistants_index',
+          params: { accountId: route.params.accountId },
+        }"
+        class="text-n-slate-11 underline hover:text-n-slate-12"
+      >
+        {{ $t('CAPTAIN.ASSISTANTS.ADD_NEW') }}
+      </router-link>
+    </div>
+    <div v-else class="w-full space-y-2">
+      <span class="text-xs text-n-slate-10 block">
+        {{ $t('CAPTAIN.COPILOT.TRY_THESE_PROMPTS') }}
+      </span>
+      <div class="space-y-1">
+        <button
+          v-for="prompt in promptOptions"
+          :key="prompt.label"
+          class="w-full px-3 py-2 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center justify-between hover:bg-n-slate-3 transition-colors"
+          @click="handleSuggestion(prompt)"
+        >
+          <span>{{ t(prompt.label) }}</span>
+          <Icon icon="i-lucide-chevron-right" />
+        </button>
+      </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/CopilotLauncher.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotLauncher.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useMapGetter } from 'dashboard/composables/store';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+const route = useRoute();
+
+const { uiSettings, updateUISettings } = useUISettings();
+
+const isConversationRoute = computed(() => {
+  const CONVERSATION_ROUTES = [
+    'inbox_conversation',
+    'conversation_through_inbox',
+    'conversations_through_label',
+    'team_conversations_through_label',
+    'conversations_through_folders',
+    'conversation_through_mentions',
+    'conversation_through_unattended',
+    'conversation_through_participating',
+    'inbox_view_conversation',
+  ];
+  return CONVERSATION_ROUTES.includes(route.name);
+});
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const showCopilotLauncher = computed(() => {
+  const isCaptainEnabled = isFeatureEnabledonAccount.value(
+    currentAccountId.value,
+    FEATURE_FLAGS.CAPTAIN
+  );
+  return (
+    isCaptainEnabled &&
+    !uiSettings.value.is_copilot_panel_open &&
+    !isConversationRoute.value
+  );
+});
+const toggleSidebar = () => {
+  updateUISettings({
+    is_copilot_panel_open: !uiSettings.value.is_copilot_panel_open,
+    is_contact_sidebar_open: false,
+  });
+};
+</script>
+
+<template>
+  <div v-if="showCopilotLauncher" class="fixed bottom-4 right-4 z-50">
+    <div class="rounded-full bg-n-alpha-2 p-1">
+      <Button
+        icon="i-woot-captain"
+        class="!rounded-full !bg-n-solid-3 dark:!bg-n-alpha-2 !text-n-slate-12 text-xl"
+        lg
+        @click="toggleSidebar"
+      />
+    </div>
+  </div>
+  <template v-else />
+</template>
--- 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-12">
+        {{ 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="copilotMessage in messages"
+        :key="copilotMessage.id"
+        :content="copilotMessage.message.content"
+        :reasoning="copilotMessage.message.reasoning"
+      />
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
@@ -74,6 +74,7 @@ const updateSelected = newValue => {
      <slot name="trigger" :toggle="toggle">
        <Button
          ref="triggerRef"
+          type="button"
          sm
          slate
          :variant
--- a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
@@ -9,7 +9,14 @@ import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';

-const { options } = defineProps({
+const {
+  options,
+  disableSearch,
+  placeholderIcon,
+  placeholder,
+  placeholderTrailingIcon,
+  searchPlaceholder,
+} = defineProps({
  options: {
    type: Array,
    required: true,
@@ -18,6 +25,22 @@ const { options } = defineProps({
    type: Boolean,
    default: false,
  },
+  placeholderIcon: {
+    type: String,
+    default: 'i-lucide-plus',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  placeholderTrailingIcon: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
 });

 const { t } = useI18n();
@@ -69,15 +92,26 @@ const toggleSelected = option => {
        sm
        slate
        faded
+        type="button"
        :icon="selectedItem.icon"
        :label="selectedItem.name"
        @click="toggle"
      />
-      <Button v-else sm slate faded @click="toggle">
+      <Button
+        v-else
+        sm
+        slate
+        faded
+        type="button"
+        :trailing-icon="placeholderTrailingIcon"
+        @click="toggle"
+      >
        <template #icon>
-          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
+          <Icon :icon="placeholderIcon" class="text-n-slate-11" />
        </template>
-        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
+        <span class="text-n-slate-11">{{
+          placeholder || t('COMBOBOX.PLACEHOLDER')
+        }}</span>
      </Button>
    </template>
    <DropdownBody class="top-0 min-w-56 z-50" strong>
@@ -87,7 +121,7 @@ const toggleSelected = option => {
          v-model="searchTerm"
          autofocus
          class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
-          :placeholder="t('COMBOBOX.SEARCH_PLACEHOLDER')"
+          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
        />
      </div>
      <DropdownSection class="max-h-80 overflow-scroll">
--- a/app/javascript/dashboard/components-next/input/DurationInput.vue
+++ b/app/javascript/dashboard/components-next/input/DurationInput.vue
@@ -1,7 +1,8 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, watch } from 'vue';
 import Input from './Input.vue';
 import { useI18n } from 'vue-i18n';
+import { DURATION_UNITS } from './constants';

 const props = defineProps({
  min: { type: Number, default: 0 },
@@ -11,36 +12,50 @@ const props = defineProps({

 const { t } = useI18n();
 const duration = defineModel('modelValue', { type: Number, default: null });
+const unit = defineModel('unit', {
+  type: String,
+  default: DURATION_UNITS.MINUTES,
+  validate(value) {
+    return Object.values(DURATION_UNITS).includes(value);
+  },
+});

-const UNIT_TYPES = {
-  MINUTES: 'minutes',
-  HOURS: 'hours',
-  DAYS: 'days',
+const convertToMinutes = newValue => {
+  if (unit.value === DURATION_UNITS.MINUTES) {
+    return Math.floor(newValue);
+  }
+  if (unit.value === DURATION_UNITS.HOURS) {
+    return Math.floor(newValue) * 60;
+  }
+  return Math.floor(newValue) * 24 * 60;
 };
-const unit = ref(UNIT_TYPES.MINUTES);

 const transformedValue = computed({
  get() {
-    if (unit.value === UNIT_TYPES.MINUTES) return duration.value;
-    if (unit.value === UNIT_TYPES.HOURS) return Math.floor(duration.value / 60);
-    if (unit.value === UNIT_TYPES.DAYS)
+    if (unit.value === DURATION_UNITS.MINUTES) return duration.value;
+    if (unit.value === DURATION_UNITS.HOURS)
+      return Math.floor(duration.value / 60);
+    if (unit.value === DURATION_UNITS.DAYS)
      return Math.floor(duration.value / 24 / 60);

    return 0;
  },
  set(newValue) {
-    let minuteValue;
-    if (unit.value === UNIT_TYPES.MINUTES) {
-      minuteValue = Math.floor(newValue);
-    } else if (unit.value === UNIT_TYPES.HOURS) {
-      minuteValue = Math.floor(newValue * 60);
-    } else if (unit.value === UNIT_TYPES.DAYS) {
-      minuteValue = Math.floor(newValue * 24 * 60);
-    }
+    let minuteValue = convertToMinutes(newValue);

    duration.value = Math.min(Math.max(minuteValue, props.min), props.max);
  },
 });
+
+// when unit is changed set the nearest value to that unit
+// so if the minute is set to 900, and the user changes the unit to "days"
+// the transformed value will show 0, but the real value will still be 900
+// this might create some confusion, especially when saving
+// this watcher fixes it by rounding the duration basically, to the nearest unit value
+watch(unit, () => {
+  let adjustedValue = convertToMinutes(transformedValue.value);
+  duration.value = Math.min(Math.max(adjustedValue, props.min), props.max);
+});
 </script>

 <template>
@@ -57,10 +72,12 @@ const transformedValue = computed({
    :disabled="disabled"
    class="mb-0 text-sm disabled:outline-n-weak disabled:opacity-40"
  >
-    <option :value="UNIT_TYPES.MINUTES">
+    <option :value="DURATION_UNITS.MINUTES">
      {{ t('DURATION_INPUT.MINUTES') }}
    </option>
-    <option :value="UNIT_TYPES.HOURS">{{ t('DURATION_INPUT.HOURS') }}</option>
-    <option :value="UNIT_TYPES.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
+    <option :value="DURATION_UNITS.HOURS">
+      {{ t('DURATION_INPUT.HOURS') }}
+    </option>
+    <option :value="DURATION_UNITS.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
  </select>
 </template>
--- a/app/javascript/dashboard/components-next/input/constants.js
+++ b/app/javascript/dashboard/components-next/input/constants.js
@@ -0,0 +1,5 @@
+export const DURATION_UNITS = {
+  MINUTES: 'minutes',
+  HOURS: 'hours',
+  DAYS: 'days',
+};
--- 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/message/bubbles/Email/EmailMeta.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue
@@ -14,7 +14,8 @@ const fromEmail = computed(() => {
 });

 const toEmail = computed(() => {
-  return contentAttributes.value?.email?.to ?? [];
+  const { toEmails, email } = contentAttributes.value;
+  return email?.to ?? toEmails ?? [];
 });

 const ccEmail = computed(() => {
--- a/app/javascript/dashboard/components-next/message/bubbles/Form.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Form.vue
@@ -4,9 +4,11 @@ import BaseBubble from './Base.vue';
 import { useI18n } from 'vue-i18n';
 import { CONTENT_TYPES } from '../constants.js';
 import { useMessageContext } from '../provider.js';
+import { useInbox } from 'dashboard/composables/useInbox';

 const { content, contentAttributes, contentType } = useMessageContext();
 const { t } = useI18n();
+const { isAWebWidgetInbox } = useInbox();

 const formValues = computed(() => {
  if (contentType.value === CONTENT_TYPES.FORM) {
@@ -56,7 +58,7 @@ const formValues = computed(() => {
        <dd>{{ item.title }}</dd>
      </template>
    </dl>
-    <div v-else class="my-2 font-medium">
+    <div v-else-if="isAWebWidgetInbox" class="my-2 font-medium">
      {{ t('CONVERSATION.NO_RESPONSE') }}
    </div>
  </BaseBubble>
--- a/app/javascript/dashboard/components-next/message/chips/Audio.vue
+++ b/app/javascript/dashboard/components-next/message/chips/Audio.vue
@@ -109,49 +109,58 @@ const downloadAudio = async () => {
  </audio>
  <div
    v-bind="$attrs"
-    class="rounded-xl w-full gap-1 p-1.5 bg-n-alpha-white flex items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
+    class="rounded-xl w-full gap-2 p-1.5 bg-n-alpha-white flex flex-col items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
  >
-    <button class="p-0 border-0 size-8" @click="playOrPause">
-      <Icon
-        v-if="isPlaying"
-        class="size-8"
-        icon="i-teenyicons-pause-small-solid"
-      />
-      <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
-    </button>
-    <div class="tabular-nums text-xs">
-      {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+    <div class="flex gap-1 w-full flex-1 items-center justify-start">
+      <button class="p-0 border-0 size-8" @click="playOrPause">
+        <Icon
+          v-if="isPlaying"
+          class="size-8"
+          icon="i-teenyicons-pause-small-solid"
+        />
+        <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
+      </button>
+      <div class="tabular-nums text-xs">
+        {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+      </div>
+      <div class="flex-1 items-center flex px-2">
+        <input
+          type="range"
+          min="0"
+          :max="duration"
+          :value="currentTime"
+          class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
+          @input="seek"
+        />
+      </div>
+      <button
+        class="border-0 w-10 h-6 grid place-content-center bg-n-alpha-2 hover:bg-alpha-3 rounded-2xl"
+        @click="changePlaybackSpeed"
+      >
+        <span class="text-xs text-n-slate-11 font-medium">
+          {{ playbackSpeedLabel }}
+        </span>
+      </button>
+      <button
+        class="p-0 border-0 size-8 grid place-content-center"
+        @click="toggleMute"
+      >
+        <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
+        <Icon v-else class="size-4" icon="i-lucide-volume-2" />
+      </button>
+      <button
+        class="p-0 border-0 size-8 grid place-content-center"
+        @click="downloadAudio"
+      >
+        <Icon class="size-4" icon="i-lucide-download" />
+      </button>
    </div>
-    <div class="flex-1 items-center flex px-2">
-      <input
-        type="range"
-        min="0"
-        :max="duration"
-        :value="currentTime"
-        class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
-        @input="seek"
-      />
+
+    <div
+      v-if="attachment.transcribedText"
+      class="text-n-slate-12 p-3 text-sm bg-n-alpha-1 rounded-lg w-full break-words"
+    >
+      {{ attachment.transcribedText }}
    </div>
-    <button
-      class="border-0 w-10 h-6 grid place-content-center bg-n-alpha-2 hover:bg-alpha-3 rounded-2xl"
-      @click="changePlaybackSpeed"
-    >
-      <span class="text-xs text-n-slate-11 font-medium">
-        {{ playbackSpeedLabel }}
-      </span>
-    </button>
-    <button
-      class="p-0 border-0 size-8 grid place-content-center"
-      @click="toggleMute"
-    >
-      <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
-      <Icon v-else class="size-4" icon="i-lucide-volume-2" />
-    </button>
-    <button
-      class="p-0 border-0 size-8 grid place-content-center"
-      @click="downloadAudio"
-    >
-      <Icon class="size-4" icon="i-lucide-download" />
-    </button>
  </div>
 </template>
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -87,7 +87,7 @@ const newReportRoutes = () => [
  {
    name: 'Reports Label',
    label: t('SIDEBAR.REPORTS_LABEL'),
-    to: accountScopedRoute('label_reports'),
+    to: accountScopedRoute('label_reports_index'),
  },
  {
    name: 'Reports Inbox',
@@ -235,6 +235,12 @@ const menuItems = computed(() => {
          ),
          activeOn: ['contacts_dashboard_index', 'contacts_edit'],
        },
+        {
+          name: 'Active',
+          label: t('SIDEBAR.ACTIVE'),
+          to: accountScopedRoute('contacts_dashboard_active'),
+          activeOn: ['contacts_dashboard_active'],
+        },
        {
          name: 'Segments',
          icon: 'i-lucide-group',
@@ -477,7 +483,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 +525,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';
@@ -23,6 +22,7 @@ import {
 // https://tanstack.com/virtual/latest/docs/framework/vue/examples/variable
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import ChatListHeader from './ChatListHeader.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ConversationFilter from 'next/filter/ConversationFilter.vue';
 import SaveCustomView from 'next/filter/SaveCustomView.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
@@ -44,7 +44,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';

@@ -83,16 +83,13 @@ const emit = defineEmits(['conversationLoad']);
 const { uiSettings } = useUISettings();
 const { t } = useI18n();
 const router = useRouter();
+const route = useRoute();
 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);
@@ -651,6 +648,30 @@ function openLastItemAfterDeleteInFolder() {
  }
 }

+function redirectToConversationList() {
+  const {
+    params: { accountId, inbox_id: inboxId, label, teamId },
+    name,
+  } = route;
+
+  let conversationType = '';
+  if (isOnMentionsView({ route: { name } })) {
+    conversationType = 'mention';
+  } else if (isOnUnattendedView({ route: { name } })) {
+    conversationType = 'unattended';
+  }
+  router.push(
+    conversationListPageURL({
+      accountId,
+      conversationType: conversationType,
+      customViewId: props.foldersId,
+      inboxId,
+      label,
+      teamId,
+    })
+  );
+}
+
 async function assignPriority(priority, conversationId = null) {
  store.dispatch('setCurrentChatPriority', {
    priority,
@@ -675,26 +696,7 @@ async function markAsUnread(conversationId) {
    await store.dispatch('markMessagesUnread', {
      id: conversationId,
    });
-    const {
-      params: { accountId, inbox_id: inboxId, label, teamId },
-      name,
-    } = useRoute();
-    let conversationType = '';
-    if (isOnMentionsView({ route: { name } })) {
-      conversationType = 'mention';
-    } else if (isOnUnattendedView({ route: { name } })) {
-      conversationType = 'unattended';
-    }
-    router.push(
-      conversationListPageURL({
-        accountId,
-        conversationType: conversationType,
-        customViewId: props.foldersId,
-        inboxId,
-        label,
-        teamId,
-      })
-    );
+    redirectToConversationList();
  } catch (error) {
    // Ignore error
  }
@@ -708,6 +710,7 @@ async function markAsRead(conversationId) {
    // Ignore error
  }
 }
+
 async function onAssignTeam(team, conversationId = null) {
  try {
    await store.dispatch('assignTeam', {
@@ -746,7 +749,6 @@ function allSelectedConversationsStatus(status) {

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

 function toggleSelectAll(check) {
@@ -770,9 +772,25 @@ onMounted(() => {
  }
 });

-onUnmounted(() => {
-  conversationListScrollLock.value = false;
-});
+const deleteConversationDialogRef = ref(null);
+const selectedConversationId = ref(null);
+
+async function deleteConversation() {
+  try {
+    await store.dispatch('deleteConversation', selectedConversationId.value);
+    redirectToConversationList();
+    selectedConversationId.value = null;
+    deleteConversationDialogRef.value.close();
+    useAlert(t('CONVERSATION.SUCCESS_DELETE_CONVERSATION'));
+  } catch (error) {
+    useAlert(t('CONVERSATION.FAIL_DELETE_CONVERSATION'));
+  }
+}
+
+const handleDelete = conversationId => {
+  selectedConversationId.value = conversationId;
+  deleteConversationDialogRef.value.open();
+};

 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
@@ -785,6 +803,7 @@ provide('markAsUnread', markAsUnread);
 provide('markAsRead', markAsRead);
 provide('assignPriority', assignPriority);
 provide('isConversationSelected', isConversationSelected);
+provide('deleteConversation', handleDelete);

 watch(activeTeam, () => resetAndFetchData());

@@ -824,7 +843,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 />
@@ -834,6 +853,8 @@ watch(conversationFilters, (newVal, oldVal) => {
      :has-active-folders="hasActiveFolders"
      :active-status="activeStatus"
      :is-on-expanded-layout="isOnExpandedLayout"
+      :conversation-stats="conversationStats"
+      :is-list-loading="chatListLoading && !conversationList.length"
      @add-folders="onClickOpenAddFoldersModal"
      @delete-folders="onClickOpenDeleteFoldersModal"
      @filters-modal="onToggleAdvanceFiltersModal"
@@ -948,6 +969,19 @@ watch(conversationFilters, (newVal, oldVal) => {
        </template>
      </DynamicScroller>
    </div>
+    <Dialog
+      ref="deleteConversationDialogRef"
+      type="alert"
+      :title="
+        $t('CONVERSATION.DELETE_CONVERSATION.TITLE', {
+          conversationId: selectedConversationId,
+        })
+      "
+      :description="$t('CONVERSATION.DELETE_CONVERSATION.DESCRIPTION')"
+      :confirm-button-label="$t('CONVERSATION.DELETE_CONVERSATION.CONFIRM')"
+      @confirm="deleteConversation"
+      @close="selectedConversationId = null"
+    />
    <TeleportWithDirection
      v-if="showAdvancedFilters"
      to="#conversationFilterTeleportTarget"
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useMapGetter } from 'dashboard/composables/store.js';
+import { formatNumber } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';

@@ -10,26 +11,13 @@ import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchL
 import NextButton from 'dashboard/components-next/button/Button.vue';

 const props = defineProps({
-  pageTitle: {
-    type: String,
-    required: true,
-  },
-  hasAppliedFilters: {
-    type: Boolean,
-    required: true,
-  },
-  hasActiveFolders: {
-    type: Boolean,
-    required: true,
-  },
-  activeStatus: {
-    type: String,
-    required: true,
-  },
-  isOnExpandedLayout: {
-    type: Boolean,
-    required: true,
-  },
+  pageTitle: { type: String, required: true },
+  hasAppliedFilters: { type: Boolean, required: true },
+  hasActiveFolders: { type: Boolean, required: true },
+  activeStatus: { type: String, required: true },
+  isOnExpandedLayout: { type: Boolean, required: true },
+  conversationStats: { type: Object, required: true },
+  isListLoading: { type: Boolean, required: true },
 });

 const emit = defineEmits([
@@ -62,6 +50,9 @@ const showV4View = computed(() => {
  );
 });

+const allCount = computed(() => props.conversationStats?.allCount || 0);
+const formattedAllCount = computed(() => formatNumber(allCount.value));
+
 const toggleConversationLayout = () => {
  const { LAYOUT_TYPES } = wootConstants;
  const {
@@ -80,20 +71,27 @@ 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 }}
      </h1>
+      <span
+        v-if="
+          allCount > 0 && hasAppliedFiltersOrActiveFolders && !isListLoading
+        "
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
+        :title="allCount"
+      >
+        {{ formattedAllCount }}
+      </span>
      <span
        v-if="!hasAppliedFiltersOrActiveFolders"
        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
--- a/app/javascript/dashboard/components/ConversationItem.vue
+++ b/app/javascript/dashboard/components/ConversationItem.vue
@@ -16,6 +16,7 @@ export default {
    'markAsRead',
    'assignPriority',
    'isConversationSelected',
+    'deleteConversation',
  ],
  props: {
    source: {
@@ -67,5 +68,6 @@ export default {
    @mark-as-unread="markAsUnread"
    @mark-as-read="markAsRead"
    @assign-priority="assignPriority"
+    @delete-conversation="deleteConversation"
  />
 </template>
--- 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/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -134,7 +134,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
 <template>
  <div class="relative flex items-center justify-end resolve-actions">
    <div
-      class="rounded-lg shadow outline-1 outline"
+      class="rounded-lg shadow outline-1 outline flex-shrink-0"
      :class="!showOpenButton ? 'outline-n-container' : 'outline-transparent'"
    >
      <Button
@@ -178,7 +178,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
    <div
      v-if="showActionsDropdown"
      v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 ltr:right-0 rtl:left-0 max-w-[12.5rem] min-w-[9.75rem]"
+      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 start-0 xl:start-auto xl:end-0 max-w-[12.5rem] min-w-[9.75rem]"
    >
      <WootDropdownMenu class="mb-0">
        <WootDropdownItem v-if="!isPending">
--- a/app/javascript/dashboard/components/copilot/CopilotContainer.vue
+++ b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
@@ -1,16 +1,11 @@
 <script setup>
-import { ref, computed, onMounted, watchEffect } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
-import ConversationAPI from 'dashboard/api/inbox/conversation';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-
-const props = defineProps({
-  conversationId: {
-    type: [Number, String],
-    required: true,
-  },
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+defineProps({
  conversationInboxType: {
    type: String,
    required: true,
@@ -20,12 +15,24 @@ const props = defineProps({
 const store = useStore();
 const currentUser = useMapGetter('getCurrentUser');
 const assistants = useMapGetter('captainAssistants/getRecords');
+const uiFlags = useMapGetter('captainAssistants/getUIFlags');
 const inboxAssistant = useMapGetter('getCopilotAssistant');
-const { uiSettings, updateUISettings } = useUISettings();
+const currentChat = useMapGetter('getSelectedChat');
+
+const selectedCopilotThreadId = ref(null);
+const messages = computed(() =>
+  store.getters['copilotMessages/getMessagesByThreadId'](
+    selectedCopilotThreadId.value
+  )
+);
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);

-const messages = ref([]);
-const isCaptainTyping = ref(false);
 const selectedAssistantId = ref(null);
+const { uiSettings, updateUISettings } = useUISettings();

 const activeAssistant = computed(() => {
  const preferredId = uiSettings.value.preferred_captain_assistant_id;
@@ -55,68 +62,57 @@ const setAssistant = async assistant => {
  });
 };

+const shouldShowCopilotPanel = computed(() => {
+  const isCaptainEnabled = isFeatureEnabledonAccount.value(
+    currentAccountId.value,
+    FEATURE_FLAGS.CAPTAIN
+  );
+  const { is_copilot_panel_open: isCopilotPanelOpen } = uiSettings.value;
+  return isCaptainEnabled && isCopilotPanelOpen && !uiFlags.value.fetchingList;
+});
+
 const handleReset = () => {
-  messages.value = [];
+  selectedCopilotThreadId.value = null;
 };

 const sendMessage = async message => {
-  // Add user message
-  messages.value.push({
-    id: messages.value.length + 1,
-    role: 'user',
-    content: message,
-  });
-  isCaptainTyping.value = true;
-
-  try {
-    const { data } = await ConversationAPI.requestCopilot(
-      props.conversationId,
-      {
-        previous_history: messages.value
-          .map(m => ({
-            role: m.role,
-            content: m.content,
-          }))
-          .slice(0, -1),
-        message,
-        assistant_id: selectedAssistantId.value,
-      }
-    );
-    messages.value.push({
-      id: new Date().getTime(),
-      role: 'assistant',
-      content: data.message,
+  if (selectedCopilotThreadId.value) {
+    await store.dispatch('copilotMessages/create', {
+      assistant_id: activeAssistant.value.id,
+      conversation_id: currentChat.value?.id,
+      threadId: selectedCopilotThreadId.value,
+      message,
    });
-  } catch (error) {
-    // eslint-disable-next-line
-    console.log(error);
-  } finally {
-    isCaptainTyping.value = false;
+  } else {
+    const response = await store.dispatch('copilotThreads/create', {
+      assistant_id: activeAssistant.value.id,
+      conversation_id: currentChat.value?.id,
+      message,
+    });
+    selectedCopilotThreadId.value = response.id;
  }
 };

 onMounted(() => {
  store.dispatch('captainAssistants/get');
 });
-
-watchEffect(() => {
-  if (props.conversationId) {
-    store.dispatch('getInboxCaptainAssistantById', props.conversationId);
-    selectedAssistantId.value = activeAssistant.value?.id;
-  }
-});
 </script>

 <template>
-  <Copilot
-    :messages="messages"
-    :support-agent="currentUser"
-    :is-captain-typing="isCaptainTyping"
-    :conversation-inbox-type="conversationInboxType"
-    :assistants="assistants"
-    :active-assistant="activeAssistant"
-    @set-assistant="setAssistant"
-    @send-message="sendMessage"
-    @reset="handleReset"
-  />
+  <div
+    v-if="shouldShowCopilotPanel"
+    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"
+  >
+    <Copilot
+      :messages="messages"
+      :support-agent="currentUser"
+      :conversation-inbox-type="conversationInboxType"
+      :assistants="assistants"
+      :active-assistant="activeAssistant"
+      @set-assistant="setAssistant"
+      @send-message="sendMessage"
+      @reset="handleReset"
+    />
+  </div>
+  <template v-else />
 </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/layout/config/sidebarItems/contacts.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
@@ -9,6 +9,7 @@ const contacts = accountId => ({
    'contacts_edit',
    'contacts_edit_segment',
    'contacts_edit_label',
+    'contacts_dashboard_active',
  ],
  menuItems: [
    {
@@ -18,6 +19,13 @@ const contacts = accountId => ({
      toState: frontendURL(`accounts/${accountId}/contacts?page=1`),
      toStateName: 'contacts_dashboard_index',
    },
+    {
+      icon: 'visitor-contacts',
+      label: 'ACTIVE',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/contacts/active`),
+      toStateName: 'contacts_dashboard_active',
+    },
  ],
 });

--- 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/Show More
+++ b/Show More
@@ -1 +1 @@
 .3.3
 .4.4