chore: add logs for debug

This PR adds the components for new Copilot UI
- Added a Header component
- Added a thinking block.
- Update the outline on copilot input

---------

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

.circleci/config.yml

@@ -73,15 +73,15 @@ jobs:
               libvips
 
       - run:
-          name: Install RVM and Ruby 3.4.4
+          name: Install RVM and Ruby 3.3.3
           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.4.4"
-            rvm use 3.4.4 --default
+            rvm install "3.3.3"
+            rvm use 3.3.3 --default
             gem install bundler -v 2.5.16
 
       - run:

.devcontainer/Dockerfile

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

.devcontainer/Dockerfile.base

@@ -1,16 +1,12 @@
-ARG VARIANT="ubuntu-22.04"
+
+ARG VARIANT
 
 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 \
@@ -19,80 +15,61 @@ RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
         && chmod -R $USER_UID:$USER_GID /home/vscode; \
     fi
 
-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/*
+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
 
-# Install rbenv and ruby for root user first
-RUN git clone --depth 1 https://github.com/rbenv/rbenv.git ~/.rbenv \
+# Install rbenv and ruby
+RUN git clone 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 --depth 1 https://github.com/rbenv/ruby-build.git && \
+RUN git clone 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
 
-# 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
+# Install overmind
 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 \
-  && 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/*
+  && 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
 
 
 # Do the set up required for chatwoot app
 WORKDIR /workspace
-RUN chown vscode:vscode /workspace
+COPY . /workspace
 
-# 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 ruby
+COPY Gemfile Gemfile.lock ./
+RUN gem install bundler && bundle install
 
-# 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
+# set up node js
+RUN npm install n -g && \
+    n $NODE_VERSION
+RUN npm install --global yarn
+RUN yarn

.devcontainer/devcontainer.json

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

.devcontainer/docker-compose.base.yml

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

.devcontainer/docker-compose.yml

@@ -5,6 +5,19 @@
 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: ..
@@ -12,7 +25,7 @@ services:
       args:
         VARIANT: 'ubuntu-22.04'
         NODE_VERSION: '23.7.0'
-        RUBY_VERSION: '3.4.4'
+        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'

.devcontainer/scripts/setup.sh

@@ -2,15 +2,12 @@ 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.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
+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
 
 # codespaces make the ports public
-gh codespace ports visibility 3000:public 3036:public 8025:public -c $CODESPACE_NAME
+gh codespace ports visibility 3000:public 3035:public 8025:public -c $CODESPACE_NAME

.github/workflows/publish_codespace_image.yml

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

.rubocop.yml

@@ -1,10 +1,7 @@
-plugins:
+require:
   - rubocop-performance
   - rubocop-rails
   - rubocop-rspec
-  - rubocop-factory_bot
-
-require:
   - ./rubocop/use_from_email.rb
   - ./rubocop/custom_cop_location.rb
 
@@ -16,61 +13,44 @@ 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:
@@ -78,16 +58,10 @@ 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'
@@ -97,101 +71,74 @@ 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
 
@@ -219,121 +166,3 @@ 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

.ruby-version

@@ -1 +1 @@
-3.4.4
+3.3.3

Gemfile

@@ -1,10 +1,10 @@
 source 'https://rubygems.org'
 
-ruby '3.4.4'
+ruby '3.3.3'
 
 ##-- base gems for rails --##
 gem 'rack-cors', '2.0.0', require: 'rack/cors'
-gem 'rails', '~> 7.1'
+gem 'rails', '~> 7.0.8.4'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false
 
@@ -33,8 +33,6 @@ gem 'liquid'
 gem 'commonmarker'
 # Validate Data against JSON Schema
 gem 'json_schemer'
-# used in swagger build
-gem 'json_refs'
 # Rack middleware for blocking & throttling abusive requests
 gem 'rack-attack', '>= 6.7.0'
 # a utility tool for streaming, flexible and safe downloading of remote files
@@ -198,6 +196,9 @@ 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'
 
@@ -236,7 +237,6 @@ 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

Gemfile.lock

@@ -25,89 +25,76 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.1.5.1)
-      actionpack (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    actioncable (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-      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)
+    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)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    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)
+    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)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
-      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)
+      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)
       rack-test (>= 0.6.3)
-      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)
+      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)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.1.5.1)
-      activesupport (= 7.1.5.1)
+    actionview (7.0.8.7)
+      activesupport (= 7.0.8.7)
       builder (~> 3.1)
-      erubi (~> 1.11)
-      rails-dom-testing (~> 2.2)
-      rails-html-sanitizer (~> 1.6)
+      erubi (~> 1.4)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.1, >= 1.2.0)
     active_record_query_trace (1.8)
-    activejob (7.1.5.1)
-      activesupport (= 7.1.5.1)
+    activejob (7.0.8.7)
+      activesupport (= 7.0.8.7)
       globalid (>= 0.3.6)
-    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)
+    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)
       activerecord (>= 4.2)
-    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)
+    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)
       marcel (~> 1.0)
-    activesupport (7.1.5.1)
-      base64
-      benchmark (>= 0.3)
-      bigdecimal
+      mini_mime (>= 1.1.0)
+    activesupport (7.0.8.7)
       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 (12.0.0)
-      activerecord (>= 7.1, < 8.1)
-      zeitwerk (>= 2.4, < 3.0)
+    acts-as-taggable-on (9.0.1)
+      activerecord (>= 6.0, < 7.1)
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     administrate (0.20.1)
@@ -129,7 +116,7 @@ GEM
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
-    ast (2.4.3)
+    ast (2.4.2)
     attr_extras (7.1.0)
     audited (5.4.1)
       activerecord (>= 5.0, < 7.7)
@@ -155,15 +142,14 @@ GEM
       statsd-ruby (~> 1.1)
     base64 (0.2.0)
     bcrypt (3.1.20)
-    benchmark (0.4.0)
-    bigdecimal (3.1.9)
+    bigdecimal (3.1.8)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
     brakeman (5.4.1)
     browser (5.3.1)
     builder (3.3.0)
-    bullet (8.0.7)
+    bullet (7.0.7)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
     bundle-audit (0.1.0)
@@ -175,8 +161,8 @@ GEM
     climate_control (1.2.0)
     coderay (1.1.3)
     commonmarker (0.23.10)
-    concurrent-ruby (1.3.5)
-    connection_pool (2.5.3)
+    concurrent-ruby (1.3.4)
+    connection_pool (2.4.1)
     crack (1.0.0)
       bigdecimal
       rexml
@@ -190,10 +176,16 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    date (3.4.1)
-    ddtrace (0.48.0)
-      ffi (~> 1.0)
+    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)
+      msgpack
+    debase-ruby_core_source (3.3.1)
     debug (1.8.0)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
@@ -204,10 +196,10 @@ GEM
       railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
-    devise_token_auth (1.2.5)
+    devise_token_auth (1.2.3)
       bcrypt (~> 3.0)
       devise (> 3.5.2, < 5)
-      rails (>= 4.2.0, < 8.1)
+      rails (>= 4.2.0, < 7.2)
     diff-lcs (1.5.1)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
@@ -220,7 +212,6 @@ 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)
@@ -263,10 +254,7 @@ GEM
     fcm (1.0.8)
       faraday (>= 1.0.0, < 3.0)
       googleauth (~> 1)
-    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 (1.16.3)
     ffi-compiler (1.0.1)
       ffi (>= 1.0.0)
       rake
@@ -327,13 +315,16 @@ GEM
     google-cloud-translate-v3 (0.10.0)
       gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
-    google-protobuf (3.25.7)
+    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)
     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.20.0)
-      google-protobuf (>= 3.18, < 5.a)
+    googleapis-common-protos-types (1.14.0)
+      google-protobuf (~> 3.18)
     googleauth (1.11.2)
       faraday (>= 1.0, < 3.a)
       google-cloud-env (~> 2.1)
@@ -343,17 +334,17 @@ GEM
       signet (>= 0.16, < 2.a)
     groupdate (6.2.1)
       activesupport (>= 5.2)
-    grpc (1.72.0)
-      google-protobuf (>= 3.25, < 5.0)
+    grpc (1.62.0)
+      google-protobuf (~> 3.25)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.72.0-arm64-darwin)
-      google-protobuf (>= 3.25, < 5.0)
+    grpc (1.62.0-arm64-darwin)
+      google-protobuf (~> 3.25)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.72.0-x86_64-darwin)
-      google-protobuf (>= 3.25, < 5.0)
+    grpc (1.62.0-x86_64-darwin)
+      google-protobuf (~> 3.25)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.72.0-x86_64-linux)
-      google-protobuf (>= 3.25, < 5.0)
+    grpc (1.62.0-x86_64-linux)
+      google-protobuf (~> 3.25)
       googleapis-common-protos-types (~> 1.0)
     haikunator (1.1.1)
     hairtrigger (1.0.0)
@@ -379,7 +370,7 @@ GEM
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
-    i18n (1.14.7)
+    i18n (1.14.6)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
@@ -397,7 +388,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (2.12.0)
+    json (2.6.3)
     json_refs (0.1.8)
       hana
     json_schemer (0.2.24)
@@ -432,13 +423,21 @@ 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)
@@ -446,7 +445,7 @@ GEM
     llhttp-ffi (0.4.0)
       ffi-compiler (~> 1.0)
       rake (~> 13.0)
-    logger (1.7.0)
+    logger (1.6.0)
     lograge (0.14.0)
       actionpack (>= 4)
       activesupport (>= 4)
@@ -472,10 +471,10 @@ GEM
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.8)
-    minitest (5.25.5)
+    minitest (5.25.4)
     mock_redis (0.36.0)
       ruby2_keywords
-    msgpack (1.8.0)
+    msgpack (1.7.0)
     multi_json (1.15.0)
     multi_xml (0.6.0)
     multipart-post (2.3.0)
@@ -546,16 +545,14 @@ GEM
     orm_adapter (0.5.0)
     os (1.1.4)
     ostruct (0.6.1)
-    parallel (1.27.0)
-    parser (3.3.8.0)
+    parallel (1.23.0)
+    parser (3.2.2.1)
       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)
@@ -570,7 +567,7 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (2.2.15)
+    rack (2.2.14)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -584,28 +581,23 @@ 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)
-    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)
+    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)
       bundler (>= 1.15.0)
-      railties (= 7.1.5.1)
+      railties (= 7.0.8.7)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -613,14 +605,13 @@ 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.1.5.1)
-      actionpack (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
-      irb
-      rackup (>= 1.0.0)
+    railties (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
+      method_source
       rake (>= 12.2)
-      thor (~> 1.0, >= 1.2.2)
-      zeitwerk (~> 2.6)
+      thor (~> 1.0)
+      zeitwerk (~> 2.5)
     rainbow (3.1.1)
     rake (13.2.1)
     rb-fsevent (0.11.2)
@@ -632,7 +623,7 @@ GEM
       connection_pool
     redis-namespace (1.10.0)
       redis (>= 4)
-    regexp_parser (2.10.0)
+    regexp_parser (2.8.0)
     reline (0.3.6)
       io-console (~> 0.5)
     representable (3.2.0)
@@ -652,7 +643,7 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.4.1)
+    rexml (3.3.9)
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.2)
@@ -672,36 +663,30 @@ GEM
     rspec-support (3.13.1)
     rspec_junit_formatter (0.6.0)
       rspec-core (>= 2, < 4, != 2.12.0)
-    rubocop (1.75.6)
+    rubocop (1.50.2)
       json (~> 2.3)
-      language_server-protocol (~> 3.17.0.2)
-      lint_roller (~> 1.1.0)
       parallel (~> 1.10)
-      parser (>= 3.3.0.2)
+      parser (>= 3.2.0.0)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.44.0, < 2.0)
+      regexp_parser (>= 1.8, < 3.0)
+      rexml (>= 3.2.5, < 4.0)
+      rubocop-ast (>= 1.28.0, < 2.0)
       ruby-progressbar (~> 1.7)
-      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)
+      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)
       activesupport (>= 4.2.0)
-      lint_roller (~> 1.1)
       rack (>= 1.1)
-      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)
+      rubocop (>= 1.33.0, < 2.0)
+    rubocop-rspec (2.21.0)
+      rubocop (~> 1.33)
+      rubocop-capybara (~> 2.17)
     ruby-openai (7.3.1)
       event_stream_parser (>= 0.3.0, < 2.0.0)
       faraday (>= 1)
@@ -831,10 +816,8 @@ GEM
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.8.2)
-    unicode-display_width (3.1.4)
-      unicode-emoji (~> 4.0, >= 4.0.4)
-    unicode-emoji (4.0.4)
-    uniform_notifier (1.17.0)
+    unicode-display_width (2.4.2)
+    uniform_notifier (1.16.0)
     uri (1.0.3)
     uri_template (0.7.0)
     valid_email2 (5.2.6)
@@ -862,9 +845,7 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.9.1)
-    websocket-driver (0.7.7)
-      base64
+    websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     wisper (2.0.0)
@@ -970,7 +951,7 @@ DEPENDENCIES
   rack-cors (= 2.0.0)
   rack-mini-profiler (>= 3.2.0)
   rack-timeout
-  rails (~> 7.1)
+  rails (~> 7.0.8.4)
   redis
   redis-namespace
   responders (>= 3.1.1)
@@ -979,7 +960,6 @@ DEPENDENCIES
   rspec-rails (>= 6.1.5)
   rspec_junit_formatter
   rubocop
-  rubocop-factory_bot
   rubocop-performance
   rubocop-rails
   rubocop-rspec
@@ -1017,7 +997,7 @@ DEPENDENCIES
   working_hours
 
 RUBY VERSION
-   ruby 3.4.4p34
+   ruby 3.3.3p89
 
 BUNDLED WITH
    2.5.16

Makefile

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

app/builders/contact_inbox_builder.rb

@@ -59,13 +59,11 @@ class ContactInboxBuilder
   end
 
   def create_contact_inbox
-    attrs = {
+    ::ContactInbox.create_with(hmac_verified: hmac_verified || false).find_or_create_by!(
       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

app/builders/messages/instagram/base_message_builder.rb

@@ -152,13 +152,11 @@ class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuil
   end
 
   def message_already_exists?
-    find_message_by_source_id(@messaging[:message][:mid]).present?
-  end
+    cw_message = conversation.messages.where(
+      source_id: @messaging[:message][:mid]
+    ).first
 
-  def find_message_by_source_id(source_id)
-    return unless source_id
-
-    @message = Message.find_by(source_id: source_id)
+    cw_message.present?
   end
 
   def all_unsupported_files?

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

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

app/controllers/api/v1/accounts/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, :category_id, :author_id, :associated_article_id, :status,
+      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status,
       :locale, meta: [:title,
                       :description,
                       { tags: [] }]

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

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

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

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

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

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

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

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

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

@@ -15,10 +15,6 @@ class Api::V1::Accounts::SearchController < Api::V1::Accounts::BaseController
     @result = search('Message')
   end
 
-  def articles
-    @result = search('Article')
-  end
-
   private
 
   def search(search_type)

app/controllers/api/v1/profiles_controller.rb

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

app/controllers/concerns/google_concern.rb

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

app/controllers/concerns/microsoft_concern.rb

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

app/controllers/google/callbacks_controller.rb

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

app/controllers/oauth_callback_controller.rb

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

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 and token to that chain as well
-  before_action(only: [:login, :token]) { set_resource }
-  before_action(only: [:login, :token]) { validate_platform_app_permissible }
+  # we want to add login to that chain as well
+  before_action(only: [:login]) { set_resource }
+  before_action(only: [:login]) { validate_platform_app_permissible }
 
   def show; end
 
@@ -18,8 +18,6 @@ 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)
 

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, :tracking_pixel]
+  before_action :set_category, except: [:index, :show]
   before_action :set_article, only: [:show]
   layout 'portal'
 
@@ -15,21 +15,6 @@ 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
@@ -54,6 +39,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
+    @article.increment_view_count if @article.published?
     @parsed_content = render_article_content(@article.content)
   end
 

app/controllers/super_admin/app_configs_controller.rb

@@ -32,17 +32,22 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
   end
 
   def allowed_configs
-    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])
+    @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
   end
 end
 

app/javascript/dashboard/api/agentBots.js

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

app/javascript/dashboard/api/auth.js

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

app/javascript/dashboard/api/captain/copilotMessages.js

@@ -1,18 +0,0 @@
-/* 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();

app/javascript/dashboard/api/captain/copilotThreads.js

@@ -1,9 +0,0 @@
-import ApiClient from '../ApiClient';
-
-class CopilotThreads extends ApiClient {
-  constructor() {
-    super('captain/copilot_threads', { accountScoped: true });
-  }
-}
-
-export default new CopilotThreads();

app/javascript/dashboard/api/endPoints.js

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

app/javascript/dashboard/api/search.js

@@ -40,15 +40,6 @@ class SearchAPI extends ApiClient {
       },
     });
   }
-
-  articles({ q, page = 1 }) {
-    return axios.get(`${this.url}/articles`, {
-      params: {
-        q,
-        page: page,
-      },
-    });
-  }
 }
 
 export default new SearchAPI();

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

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

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

@@ -101,7 +101,7 @@ select {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
   background-size: 9px 6px;
 
-  @apply field-base h-10 bg-origin-content 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 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;
 
   &[disabled] {
     @apply field-disabled;

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

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

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

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

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

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

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

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

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

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

app/javascript/dashboard/components-next/captain/pageComponents/assistant/EditAssistantForm.vue

@@ -42,7 +42,6 @@ const initialState = {
     conversationFaqs: false,
     memories: false,
   },
-  temperature: 1,
 };
 
 const state = reactive({ ...initialState });
@@ -88,7 +87,6 @@ const updateStateFromAssistant = assistant => {
     conversationFaqs: config.feature_faq || false,
     memories: config.feature_memory || false,
   };
-  state.temperature = config.temperature || 1;
 };
 
 const handleBasicInfoUpdate = async () => {
@@ -138,7 +136,6 @@ const handleInstructionsUpdate = async () => {
   const payload = {
     config: {
       ...props.assistant.config,
-      temperature: state.temperature || 1,
       instructions: state.instructions,
     },
   };
@@ -215,7 +212,7 @@ watch(
 
     <!-- Instructions Section -->
     <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.INSTRUCTIONS')">
-      <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-4 pt-4">
         <Editor
           v-model="state.instructions"
           :placeholder="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.PLACEHOLDER')"
@@ -224,25 +221,6 @@ 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"

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

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

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

@@ -1,17 +1,31 @@
 <script setup>
+import Avatar from '../avatar/Avatar.vue';
+
 defineProps({
   message: {
     type: Object,
     required: true,
   },
+  supportAgent: {
+    type: Object,
+    required: true,
+  },
 });
 </script>
 
 <template>
-  <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 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>
   </div>
 </template>

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

@@ -9,6 +9,7 @@ import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 
 import Button from 'dashboard/components-next/button/Button.vue';
+import Avatar from '../avatar/Avatar.vue';
 
 const props = defineProps({
   message: {
@@ -45,25 +46,33 @@ const useCopilotResponse = () => {
 </script>
 
 <template>
-  <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 gap-2">
+    <Avatar
+      name="Captain Copilot"
+      icon-name="i-woot-captain"
+      :size="24"
+      rounded-full
     />
-    <div class="flex flex-row mt-1">
-      <Button
-        v-if="!hasEmptyMessageContent"
-        :label="$t('CAPTAIN.COPILOT.USE')"
-        faded
-        sm
-        slate
-        @click="useCopilotResponse"
+    <div class="flex flex-col gap-1 text-n-slate-12">
+      <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
+      <span v-if="hasEmptyMessageContent" class="text-n-ruby-11">
+        {{ $t('CAPTAIN.COPILOT.EMPTY_MESSAGE') }}
+      </span>
+      <div
+        v-else
+        v-dompurify-html="messageContent"
+        class="prose-sm break-words"
       />
+      <div class="flex flex-row mt-1">
+        <Button
+          v-if="!hasEmptyMessageContent"
+          :label="$t('CAPTAIN.COPILOT.USE')"
+          faded
+          sm
+          slate
+          @click="useCopilotResponse"
+        />
+      </div>
     </div>
   </div>
 </template>

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

@@ -1,29 +1,21 @@
 <script setup>
-import SidebarActionsHeader from './SidebarActionsHeader.vue';
+import CopilotHeader from './CopilotHeader.vue';
 </script>
 
 <template>
   <Story
-    title="Components/SidebarActionsHeader"
+    title="Captain/Copilot/CopilotHeader"
     :layout="{ type: 'grid', width: '800px' }"
   >
     <!-- Default State -->
     <Variant title="Default State">
-      <SidebarActionsHeader title="Default State" />
+      <CopilotHeader />
     </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',
-          },
-        ]"
-      />
+      <CopilotHeader :has-messages="true" />
     </Variant>
   </Story>
 </template>

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

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

app/javascript/dashboard/components-next/message/Message.vue

@@ -315,7 +315,11 @@ const componentToRender = computed(() => {
 });
 
 const shouldShowContextMenu = computed(() => {
-  return !props.contentAttributes?.isUnsupported;
+  return !(
+    props.status === MESSAGE_STATUS.FAILED ||
+    props.status === MESSAGE_STATUS.PROGRESS ||
+    props.contentAttributes?.isUnsupported
+  );
 });
 
 const isBubble = computed(() => {
@@ -340,23 +344,12 @@ 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) &&
-      !isFailedOrProcessing &&
-      !isMessageDeleted.value,
-    cannedResponse: isOutgoing && hasText && !isMessageDeleted.value,
-    copyLink: !isFailedOrProcessing,
-    translate: !isFailedOrProcessing && !isMessageDeleted.value && hasText,
-    replyTo:
-      !props.private &&
-      props.inboxSupportsReplyTo.outgoing &&
-      !isFailedOrProcessing,
+    delete: hasText || hasAttachments,
+    cannedResponse: isOutgoing && hasText,
+    replyTo: !props.private && props.inboxSupportsReplyTo.outgoing,
   };
 });
 
@@ -506,8 +499,8 @@ provideMessageContext({
       <div
         class="[grid-area:bubble] flex"
         :class="{
-          'ltr:ml-8 rtl:mr-8 justify-end': orientation === ORIENTATION.RIGHT,
-          'ltr:mr-8 rtl:ml-8': orientation === ORIENTATION.LEFT,
+          'ltr:pl-8 rtl:pr-8 justify-end': orientation === ORIENTATION.RIGHT,
+          'ltr:pr-8 rtl:pl-8': orientation === ORIENTATION.LEFT,
           'min-w-0': variant === MESSAGE_VARIANTS.EMAIL,
         }"
         @contextmenu="openContextMenu($event)"
@@ -523,7 +516,7 @@ provideMessageContext({
     </div>
     <div v-if="shouldShowContextMenu" class="context-menu-wrap">
       <ContextMenu
-        v-if="isBubble"
+        v-if="isBubble && !isMessageDeleted"
         :context-menu-position="contextMenuPosition"
         :is-open="showContextMenu"
         :enabled-options="contextMenuEnabledOptions"

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 overflow-hidden">
+        <div class="space-y-1">
           <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
             {{
               t(senderTranslationKey, {

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

@@ -477,7 +477,7 @@ const menuItems = computed(() => {
 
 <template>
   <aside
-    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"
+    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"
   >
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">
@@ -519,7 +519,7 @@ const menuItems = computed(() => {
       </div>
     </section>
     <nav class="grid flex-grow gap-2 px-2 pb-5 overflow-y-scroll no-scrollbar">
-      <ul class="flex flex-col gap-1.5 m-0 list-none">
+      <ul class="flex flex-col gap-2 m-0 list-none">
         <SidebarGroup
           v-for="item in menuItems"
           :key="item.name"

app/javascript/dashboard/components/ChatList.vue

@@ -8,6 +8,7 @@ import {
   computed,
   watch,
   onMounted,
+  onUnmounted,
   defineEmits,
 } from 'vue';
 import { useStore } from 'vuex';
@@ -43,7 +44,7 @@ import {
   useSnakeCase,
 } from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
-import { useEventListener } from '@vueuse/core';
+import { useEventListener, useScrollLock } from '@vueuse/core';
 
 import { emitter } from 'shared/helpers/mitt';
 
@@ -86,8 +87,12 @@ const store = useStore();
 
 const conversationListRef = ref(null);
 const conversationDynamicScroller = ref(null);
-
-provide('contextMenuElementTarget', conversationDynamicScroller);
+const conversationListScrollableElement = computed(
+  () => conversationDynamicScroller.value?.$el
+);
+const conversationListScrollLock = useScrollLock(
+  conversationListScrollableElement
+);
 
 const activeAssigneeTab = ref(wootConstants.ASSIGNEE_TYPE.ME);
 const activeStatus = ref(wootConstants.STATUS_TYPE.OPEN);
@@ -741,6 +746,7 @@ function allSelectedConversationsStatus(status) {
 
 function onContextMenuToggle(state) {
   isContextMenuOpen.value = state;
+  conversationListScrollLock.value = state;
 }
 
 function toggleSelectAll(check) {
@@ -764,6 +770,10 @@ onMounted(() => {
   }
 });
 
+onUnmounted(() => {
+  conversationListScrollLock.value = false;
+});
+
 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
 provide('assignAgent', onAssignAgent);
@@ -814,7 +824,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-[340px] 2xl:w-[412px]',
+      isOnExpandedLayout ? 'basis-full' : 'w-[360px] 2xl:w-[420px]',
     ]"
   >
     <slot />

app/javascript/dashboard/components/ChatListHeader.vue

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

app/javascript/dashboard/components/Snackbar.vue

@@ -20,7 +20,7 @@ export default {
 <template>
   <div>
     <div
-      class="shadow-sm bg-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"
+      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"
     >
       <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-n-blue-10 hover:text-n-brand"
+          class="font-medium cursor-pointer select-none text-woot-500 dark:text-woot-500 hover:text-woot-600 dark:hover:text-woot-600"
         >
           {{ action.message }}
         </router-link>

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -1,72 +1,62 @@
-<script setup>
-import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+<script>
 import WootSnackbar from './Snackbar.vue';
 import { emitter } from 'shared/helpers/mitt';
-import { useI18n } from 'vue-i18n';
 
-const props = defineProps({
-  duration: {
-    type: Number,
-    default: 2500,
+export default {
+  components: {
+    WootSnackbar,
+  },
+  props: {
+    duration: {
+      type: Number,
+      default: 2500,
+    },
   },
-});
 
-const { t } = useI18n();
+  data() {
+    return {
+      snackMessages: [],
+    };
+  },
 
-const snackMessages = ref([]);
-const snackbarContainer = ref(null);
+  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 showPopover = () => {
-  try {
-    const el = snackbarContainer.value;
-    if (el?.matches(':popover-open')) {
-      el.hidePopover();
-    }
-    el?.showPopover();
-  } catch (e) {
-    // ignore
-  }
+      this.snackMessages.push({
+        key: new Date().getTime(),
+        message,
+        action,
+      });
+      window.setTimeout(() => {
+        this.snackMessages.splice(0, 1);
+      }, duration);
+    },
+  },
 };
-
-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>
-  <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"
+  <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]"
   >
-    <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>
+    <WootSnackbar
+      v-for="snackMessage in snackMessages"
+      :key="snackMessage.key"
+      :message="snackMessage.message"
+      :action="snackMessage.action"
+    />
+  </transition-group>
 </template>

app/javascript/dashboard/components/ui/ContextMenu.vue

@@ -1,13 +1,6 @@
 <script setup>
-import {
-  computed,
-  onMounted,
-  nextTick,
-  onUnmounted,
-  useTemplateRef,
-  inject,
-} from 'vue';
-import { useWindowSize, useElementBounding, useScrollLock } from '@vueuse/core';
+import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
+import { useWindowSize, useElementBounding } from '@vueuse/core';
 
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
 
@@ -18,34 +11,27 @@ 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 - PADDING;
-  const isOverflowingBottom = top + menuH > windowH - PADDING;
+  const isOverflowingRight = left + menuW > windowW;
+  const isOverflowingBottom = top + menuH > windowH;
+
   // Adjust position if overflowing
-  if (isOverflowingRight) left = windowW - menuW - PADDING;
-  if (isOverflowingBottom) top = windowH - menuH - PADDING;
+  if (isOverflowingRight) left = windowW - menuW;
+  if (isOverflowingBottom) top = windowH - menuH;
+
   return {
-    left: Math.max(PADDING, left),
-    top: Math.max(PADDING, top),
+    left: Math.max(0, left),
+    top: Math.max(0, top),
   };
 };
 
@@ -68,18 +54,8 @@ const position = computed(() => {
 });
 
 onMounted(() => {
-  isLocked.value = true;
   nextTick(() => menuRef.value?.focus());
 });
-
-const handleClose = () => {
-  isLocked.value = false;
-  emit('close');
-};
-
-onUnmounted(() => {
-  isLocked.value = false;
-});
 </script>
 
 <template>
@@ -89,7 +65,7 @@ onUnmounted(() => {
       class="fixed outline-none z-[9999] cursor-pointer"
       :style="position"
       tabindex="0"
-      @blur="handleClose"
+      @blur="emit('close')"
     >
       <slot />
     </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -185,17 +185,8 @@ export default {
     contextMenuEnabledOptions() {
       return {
         copy: this.hasText,
-        delete:
-          (this.hasText || this.hasAttachments) &&
-          !this.isMessageDeleted &&
-          !this.isFailed,
-        cannedResponse:
-          this.isOutgoing && this.hasText && !this.isMessageDeleted,
-        copyLink: !this.isFailed || !this.isProcessing,
-        translate:
-          (!this.isFailed || !this.isProcessing) &&
-          !this.isMessageDeleted &&
-          this.hasText,
+        delete: this.hasText || this.hasAttachments,
+        cannedResponse: this.isOutgoing && this.hasText,
         replyTo: !this.data.private && this.inboxSupportsReplyTo.outgoing,
       };
     },
@@ -337,7 +328,7 @@ export default {
       return !this.sender.type || this.sender.type === 'agent_bot';
     },
     shouldShowContextMenu() {
-      return !this.isUnsupported;
+      return !(this.isFailed || this.isPending || this.isUnsupported);
     },
     showAvatar() {
       if (this.isOutgoing || this.isTemplate) {

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

@@ -1,5 +1,5 @@
 <script>
-import { ref, provide } from 'vue';
+import { ref } from 'vue';
 // composable
 import { useConfig } from 'dashboard/composables/useConfig';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
@@ -38,6 +38,8 @@ import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { FEATURE_FLAGS } from '../../../featureFlags';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     Message,
@@ -45,11 +47,22 @@ export default {
     ReplyBox,
     Banner,
     ConversationLabelSuggestion,
+    NextButton,
   },
   mixins: [inboxMixin],
+  props: {
+    isContactPanelOpen: {
+      type: Boolean,
+      default: false,
+    },
+    isInboxView: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['contactPanelToggle'],
   setup() {
     const isPopOutReplyBox = ref(false);
-    const conversationPanelRef = ref(null);
     const { isEnterprise } = useConfig();
 
     const closePopOutReplyBox = () => {
@@ -85,8 +98,6 @@ export default {
       FEATURE_FLAGS.CHATWOOT_V4
     );
 
-    provide('contextMenuElementTarget', conversationPanelRef);
-
     return {
       isEnterprise,
       isPopOutReplyBox,
@@ -97,7 +108,6 @@ export default {
       fetchIntegrationsIfRequired,
       fetchLabelSuggestions,
       showNextBubbles,
-      conversationPanelRef,
     };
   },
   data() {
@@ -189,6 +199,12 @@ export default {
     isATweet() {
       return this.conversationType === 'tweet';
     },
+    isRightOrLeftIcon() {
+      if (this.isContactPanelOpen) {
+        return 'arrow-chevron-right';
+      }
+      return 'arrow-chevron-left';
+    },
     getLastSeenAt() {
       const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
       return contactLastSeenAt;
@@ -424,6 +440,9 @@ export default {
         relevantMessages
       );
     },
+    onToggleContactPanel() {
+      this.$emit('contactPanelToggle');
+    },
     setScrollParams() {
       this.heightBeforeLoad = this.conversationPanel.scrollHeight;
       this.scrollTopBeforeLoad = this.conversationPanel.scrollTop;
@@ -507,9 +526,21 @@ export default {
       class="mx-2 mt-2 overflow-hidden rounded-lg"
       :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
     />
+    <div class="flex justify-end">
+      <NextButton
+        faded
+        xs
+        slate
+        class="!rounded-r-none rtl:rotate-180 !rounded-2xl !fixed z-10"
+        :icon="
+          isContactPanelOpen ? 'i-ph-caret-right-fill' : 'i-ph-caret-left-fill'
+        "
+        :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
+        @click="onToggleContactPanel"
+      />
+    </div>
     <NextMessageList
       v-if="showNextBubbles"
-      ref="conversationPanelRef"
       class="conversation-panel"
       :current-user-id="currentUserId"
       :first-unread-id="unReadMessages[0]?.id"
@@ -541,7 +572,7 @@ export default {
         />
       </template>
     </NextMessageList>
-    <ul v-else ref="conversationPanelRef" class="conversation-panel">
+    <ul v-else class="conversation-panel">
       <transition name="slide-up">
         <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
         <li class="min-h-[4rem]">

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

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

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

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

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

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

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

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

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

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

app/javascript/dashboard/composables/useFontSize.js

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

app/javascript/dashboard/composables/usePolicy.js

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

app/javascript/dashboard/helper/actionCable.js

@@ -3,9 +3,6 @@ import BaseActionCableConnector from '../../shared/helpers/BaseActionCableConnec
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
-import { useImpersonation } from 'dashboard/composables/useImpersonation';
-
-const { isImpersonating } = useImpersonation();
 
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
@@ -33,7 +30,6 @@ class ActionCableConnector extends BaseActionCableConnector {
       'conversation.read': this.onConversationRead,
       'conversation.updated': this.onConversationUpdated,
       'account.cache_invalidated': this.onCacheInvalidate,
-      'copilot.message.created': this.onCopilotMessageCreated,
     };
   }
 
@@ -56,7 +52,6 @@ class ActionCableConnector extends BaseActionCableConnector {
   };
 
   onPresenceUpdate = data => {
-    if (isImpersonating.value) return;
     this.app.$store.dispatch('contacts/updatePresence', data.contacts);
     this.app.$store.dispatch('agents/updatePresence', data.users);
     this.app.$store.dispatch('setCurrentUserAvailability', data.users);
@@ -190,10 +185,6 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('notifications/updateNotification', data);
   };
 
-  onCopilotMessageCreated = data => {
-    this.app.$store.dispatch('copilotMessages/upsert', data);
-  };
-
   onCacheInvalidate = data => {
     const keys = data.cache_keys;
     this.app.$store.dispatch('labels/revalidate', { newKey: keys.label });

app/javascript/dashboard/helper/specs/actionCable.spec.js

@@ -1,67 +0,0 @@
-import { describe, it, beforeEach, expect, vi } from 'vitest';
-import ActionCableConnector from '../actionCable';
-
-vi.mock('shared/helpers/mitt', () => ({
-  emitter: {
-    emit: vi.fn(),
-  },
-}));
-
-vi.mock('dashboard/composables/useImpersonation', () => ({
-  useImpersonation: () => ({
-    isImpersonating: { value: false },
-  }),
-}));
-
-global.chatwootConfig = {
-  websocketURL: 'wss://test.chatwoot.com',
-};
-
-describe('ActionCableConnector - Copilot Tests', () => {
-  let store;
-  let actionCable;
-  let mockDispatch;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockDispatch = vi.fn();
-    store = {
-      $store: {
-        dispatch: mockDispatch,
-        getters: {
-          getCurrentAccountId: 1,
-        },
-      },
-    };
-
-    actionCable = ActionCableConnector.init(store.$store, 'test-token');
-  });
-  describe('copilot event handlers', () => {
-    it('should register the copilot.message.created event handler', () => {
-      expect(Object.keys(actionCable.events)).toContain(
-        'copilot.message.created'
-      );
-      expect(actionCable.events['copilot.message.created']).toBe(
-        actionCable.onCopilotMessageCreated
-      );
-    });
-
-    it('should handle the copilot.message.created event through the ActionCable system', () => {
-      const copilotData = {
-        id: 2,
-        content: 'This is a copilot message from ActionCable',
-        conversation_id: 456,
-        created_at: '2025-05-27T15:58:04-06:00',
-        account_id: 1,
-      };
-      actionCable.onReceived({
-        event: 'copilot.message.created',
-        data: copilotData,
-      });
-      expect(mockDispatch).toHaveBeenCalledWith(
-        'copilotMessages/upsert',
-        copilotData
-      );
-    });
-  });
-});

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

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

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

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

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

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

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

@@ -367,6 +367,7 @@
       "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
     },
     "ENTERPRISE_PAYWALL": {
+      "AVAILABLE_ON": "Captain AI feature is only available in a paid plan.",
       "UPGRADE_PROMPT": "Upgrade your plan to get access to our assistants, copilot and more.",
       "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
     },
@@ -409,10 +410,6 @@
           "PLACEHOLDER": "Enter assistant name",
           "ERROR": "The name is required"
         },
-        "TEMPERATURE": {
-          "LABEL": "Response Temperature",
-          "DESCRIPTION": "Adjust how creative or restrictive the assistant's responses should be. Lower values produce more focused and deterministic responses, while higher values allow for more creative and varied outputs."
-        },
         "DESCRIPTION": {
           "LABEL": "Description",
           "PLACEHOLDER": "Enter assistant description",

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

@@ -4,14 +4,12 @@
       "ALL": "All",
       "CONTACTS": "Contacts",
       "CONVERSATIONS": "Conversations",
-      "MESSAGES": "Messages",
-      "ARTICLES": "Articles"
+      "MESSAGES": "Messages"
     },
     "SECTION": {
       "CONTACTS": "Contacts",
       "CONVERSATIONS": "Conversations",
-      "MESSAGES": "Messages",
-      "ARTICLES": "Articles"
+      "MESSAGES": "Messages"
     },
     "VIEW_MORE": "View more",
     "LOAD_MORE": "Load more",

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

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

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -47,7 +47,6 @@ export default {
   emits: ['open', 'close', 'replyTo'],
   setup() {
     const { getPlainText } = useMessageFormatter();
-
     return {
       getPlainText,
     };
@@ -168,7 +167,7 @@ export default {
     </woot-modal>
     <!-- Confirm Deletion -->
     <woot-delete-modal
-      v-if="showDeleteModal && enabledOptions['delete']"
+      v-if="showDeleteModal"
       v-model:show="showDeleteModal"
       class="context-menu--delete-modal"
       :on-close="closeDeleteModal"
@@ -213,7 +212,7 @@ export default {
           @click.stop="handleCopy"
         />
         <MenuItem
-          v-if="enabledOptions['translate']"
+          v-if="enabledOptions['copy']"
           :option="{
             icon: 'translate',
             label: $t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
@@ -223,7 +222,6 @@ export default {
         />
         <hr />
         <MenuItem
-          v-if="enabledOptions['copyLink']"
           :option="{
             icon: 'link',
             label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),

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

@@ -1,69 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import Icon from 'next/icon/Icon.vue';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-import MessageFormatter from 'shared/helpers/MessageFormatter';
-
-const props = defineProps({
-  id: { type: [String, Number], default: 0 },
-  title: { type: String, default: '' },
-  description: { type: String, default: '' },
-  category: { type: String, default: '' },
-  locale: { type: String, default: '' },
-  content: { type: String, default: '' },
-  portalSlug: { type: String, required: true },
-  accountId: { type: [String, Number], default: 0 },
-});
-
-const MAX_LENGTH = 300;
-
-const navigateTo = computed(() => {
-  return frontendURL(
-    `accounts/${props.accountId}/portals/${props.portalSlug}/${props.locale}/articles/edit/${props.id}`
-  );
-});
-
-const truncatedContent = computed(() => {
-  if (!props.content) return props.description || '';
-
-  // Use MessageFormatter to properly convert markdown to plain text
-  const formatter = new MessageFormatter(props.content);
-  const plainText = formatter.plainText.trim();
-
-  return plainText.length > MAX_LENGTH
-    ? `${plainText.substring(0, MAX_LENGTH)}...`
-    : plainText;
-});
-</script>
-
-<template>
-  <router-link
-    :to="navigateTo"
-    class="flex items-start p-2 rounded-xl cursor-pointer hover:bg-n-slate-2"
-  >
-    <div
-      class="flex items-center justify-center w-6 h-6 mt-0.5 rounded bg-n-slate-3"
-    >
-      <Icon icon="i-lucide-library-big" class="text-n-slate-10" />
-    </div>
-    <div class="ltr:ml-2 rtl:mr-2 min-w-0 flex-1">
-      <div class="flex items-center gap-2">
-        <h5 class="text-sm font-medium truncate min-w-0 text-n-slate-12">
-          {{ title }}
-        </h5>
-        <span
-          v-if="category"
-          class="text-xs font-medium whitespace-nowrap capitalize bg-n-slate-3 px-1 py-0.5 rounded text-n-slate-10"
-        >
-          {{ category }}
-        </span>
-      </div>
-      <p
-        v-if="truncatedContent"
-        class="mt-1 text-sm text-n-slate-11 line-clamp-2"
-      >
-        {{ truncatedContent }}
-      </p>
-    </div>
-  </router-link>
-</template>

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

@@ -1,53 +0,0 @@
-<script setup>
-import { useMapGetter } from 'dashboard/composables/store.js';
-
-import SearchResultSection from './SearchResultSection.vue';
-import SearchResultArticleItem from './SearchResultArticleItem.vue';
-
-defineProps({
-  articles: {
-    type: Array,
-    default: () => [],
-  },
-  query: {
-    type: String,
-    default: '',
-  },
-  isFetching: {
-    type: Boolean,
-    default: false,
-  },
-  showTitle: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const accountId = useMapGetter('getCurrentAccountId');
-</script>
-
-<template>
-  <SearchResultSection
-    :title="$t('SEARCH.SECTION.ARTICLES')"
-    :empty="!articles.length"
-    :query="query"
-    :show-title="showTitle"
-    :is-fetching="isFetching"
-  >
-    <ul v-if="articles.length" class="space-y-1.5 list-none">
-      <li v-for="article in articles" :key="article.id">
-        <SearchResultArticleItem
-          :id="article.id"
-          :title="article.title"
-          :description="article.description"
-          :content="article.content"
-          :portal-slug="article.portal_slug"
-          :locale="article.locale"
-          :account-id="accountId"
-          :category="article.category_name"
-          :status="article.status"
-        />
-      </li>
-    </ul>
-  </SearchResultSection>
-</template>

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

@@ -8,10 +8,11 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
   CONTACT_PERMISSIONS,
-  PORTAL_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-import { usePolicy } from 'dashboard/composables/usePolicy';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import {
+  getUserPermissions,
+  filterItemsByPermission,
+} from 'dashboard/helper/permissionsHelper.js';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
 import Policy from 'dashboard/components/policy.vue';
@@ -21,7 +22,6 @@ import SearchTabs from './SearchTabs.vue';
 import SearchResultConversationsList from './SearchResultConversationsList.vue';
 import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
-import SearchResultArticlesList from './SearchResultArticlesList.vue';
 
 const router = useRouter();
 const store = useStore();
@@ -34,15 +34,15 @@ const pages = ref({
   contacts: 1,
   conversations: 1,
   messages: 1,
-  articles: 1,
 });
 
+const currentUser = useMapGetter('getCurrentUser');
+const currentAccountId = useMapGetter('getCurrentAccountId');
 const contactRecords = useMapGetter('conversationSearch/getContactRecords');
 const conversationRecords = useMapGetter(
   'conversationSearch/getConversationRecords'
 );
 const messageRecords = useMapGetter('conversationSearch/getMessageRecords');
-const articleRecords = useMapGetter('conversationSearch/getArticleRecords');
 const uiFlags = useMapGetter('conversationSearch/getUIFlags');
 
 const addTypeToRecords = (records, type) =>
@@ -57,9 +57,6 @@ const mappedConversations = computed(() =>
 const mappedMessages = computed(() =>
   addTypeToRecords(messageRecords, 'message')
 );
-const mappedArticles = computed(() =>
-  addTypeToRecords(articleRecords, 'article')
-);
 
 const isSelectedTabAll = computed(() => selectedTab.value === 'all');
 
@@ -69,7 +66,6 @@ const sliceRecordsIfAllTab = items =>
 const contacts = computed(() => sliceRecordsIfAllTab(mappedContacts));
 const conversations = computed(() => sliceRecordsIfAllTab(mappedConversations));
 const messages = computed(() => sliceRecordsIfAllTab(mappedMessages));
-const articles = computed(() => sliceRecordsIfAllTab(mappedArticles));
 
 const filterByTab = tab =>
   computed(() => selectedTab.value === tab || isSelectedTabAll.value);
@@ -77,18 +73,14 @@ const filterByTab = tab =>
 const filterContacts = filterByTab('contacts');
 const filterConversations = filterByTab('conversations');
 const filterMessages = filterByTab('messages');
-const filterArticles = filterByTab('articles');
 
-const { shouldShow, isFeatureFlagEnabled } = usePolicy();
+const userPermissions = computed(() =>
+  getUserPermissions(currentUser.value, currentAccountId.value)
+);
 
 const TABS_CONFIG = {
   all: {
-    permissions: [
-      CONTACT_PERMISSIONS,
-      ...ROLES,
-      ...CONVERSATION_PERMISSIONS,
-      PORTAL_PERMISSIONS,
-    ],
+    permissions: [CONTACT_PERMISSIONS, ...ROLES, ...CONVERSATION_PERMISSIONS],
     count: () => null, // No count for all tab
   },
   contacts: {
@@ -103,69 +95,41 @@ const TABS_CONFIG = {
     permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
     count: () => mappedMessages.value.length,
   },
-  articles: {
-    permissions: [...ROLES, PORTAL_PERMISSIONS],
-    featureFlag: FEATURE_FLAGS.HELP_CENTER,
-    count: () => mappedArticles.value.length,
-  },
 };
 
 const tabs = computed(() => {
-  return Object.entries(TABS_CONFIG)
-    .map(([key, config]) => ({
-      key,
-      name: t(`SEARCH.TABS.${key.toUpperCase()}`),
-      count: config.count(),
-      showBadge: key !== 'all',
-      permissions: config.permissions,
-      featureFlag: config.featureFlag,
-    }))
-    .filter(config => {
-      // why the double check, glad you asked.
-      // Some features are marked as premium features, that means
-      // the feature will be visible, but a Paywall will be shown instead
-      // this works for pages and routes, but fails for UI elements like search here
-      // so we explicitly check if the feature is enabled
-      return (
-        shouldShow(config.featureFlag, config.permissions, null) &&
-        isFeatureFlagEnabled(config.featureFlag)
-      );
-    });
+  const configs = Object.entries(TABS_CONFIG).map(([key, config]) => ({
+    key,
+    name: t(`SEARCH.TABS.${key.toUpperCase()}`),
+    count: config.count(),
+    showBadge: key !== 'all',
+    permissions: config.permissions,
+  }));
+
+  return filterItemsByPermission(
+    configs,
+    userPermissions.value,
+    item => item.permissions
+  );
 });
 
 const totalSearchResultsCount = computed(() => {
-  const permissionCounts = [
-    {
+  const permissionCounts = {
+    contacts: {
       permissions: [...ROLES, CONTACT_PERMISSIONS],
       count: () => contacts.value.length,
     },
-    {
+    conversations: {
       permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
       count: () => conversations.value.length + messages.value.length,
     },
-    {
-      permissions: [...ROLES, PORTAL_PERMISSIONS],
-      featureFlag: FEATURE_FLAGS.HELP_CENTER,
-      count: () => articles.value.length,
-    },
-  ];
-
-  return permissionCounts
-    .filter(config => {
-      // why the double check, glad you asked.
-      // Some features are marked as premium features, that means
-      // the feature will be visible, but a Paywall will be shown instead
-      // this works for pages and routes, but fails for UI elements like search here
-      // so we explicitly check if the feature is enabled
-      return (
-        shouldShow(config.featureFlag, config.permissions, null) &&
-        isFeatureFlagEnabled(config.featureFlag)
-      );
-    })
-    .map(config => {
-      return config.count();
-    })
-    .reduce((sum, count) => sum + count, 0);
+  };
+  return filterItemsByPermission(
+    permissionCounts,
+    userPermissions.value,
+    item => item.permissions,
+    (_, item) => item.count
+  ).reduce((total, count) => total + count(), 0);
 });
 
 const activeTabIndex = computed(() => {
@@ -174,13 +138,12 @@ const activeTabIndex = computed(() => {
 });
 
 const isFetchingAny = computed(() => {
-  const { contact, message, conversation, article, isFetching } = uiFlags.value;
+  const { contact, message, conversation, isFetching } = uiFlags.value;
   return (
     isFetching ||
     contact.isFetching ||
     message.isFetching ||
-    conversation.isFetching ||
-    article.isFetching
+    conversation.isFetching
   );
 });
 
@@ -208,7 +171,6 @@ const showLoadMore = computed(() => {
     contacts: mappedContacts.value,
     conversations: mappedConversations.value,
     messages: mappedMessages.value,
-    articles: mappedArticles.value,
   }[selectedTab.value];
 
   return (
@@ -223,11 +185,10 @@ const showViewMore = computed(() => ({
   conversations:
     mappedConversations.value?.length > 5 && isSelectedTabAll.value,
   messages: mappedMessages.value?.length > 5 && isSelectedTabAll.value,
-  articles: mappedArticles.value?.length > 5 && isSelectedTabAll.value,
 }));
 
 const clearSearchResult = () => {
-  pages.value = { contacts: 1, conversations: 1, messages: 1, articles: 1 };
+  pages.value = { contacts: 1, conversations: 1, messages: 1 };
   store.dispatch('conversationSearch/clearSearchResults');
 };
 
@@ -253,7 +214,6 @@ const loadMore = () => {
     contacts: 'conversationSearch/contactSearch',
     conversations: 'conversationSearch/conversationSearch',
     messages: 'conversationSearch/messageSearch',
-    articles: 'conversationSearch/articleSearch',
   };
 
   if (uiFlags.value.isFetching || selectedTab.value === 'all') return;
@@ -368,30 +328,6 @@ onUnmounted(() => {
               />
             </Policy>
 
-            <Policy
-              v-if="isFeatureFlagEnabled(FEATURE_FLAGS.HELP_CENTER)"
-              :permissions="[...ROLES, PORTAL_PERMISSIONS]"
-              :feature-flag="FEATURE_FLAGS.HELP_CENTER"
-              class="flex flex-col justify-center"
-            >
-              <SearchResultArticlesList
-                v-if="filterArticles"
-                :is-fetching="uiFlags.article.isFetching"
-                :articles="articles"
-                :query="query"
-                :show-title="isSelectedTabAll"
-              />
-              <NextButton
-                v-if="showViewMore.articles"
-                :label="t(`SEARCH.VIEW_MORE`)"
-                icon="i-lucide-eye"
-                slate
-                sm
-                outline
-                @click="selectedTab = 'articles'"
-              />
-            </Policy>
-
             <div v-if="showLoadMore" class="flex justify-center mt-4 mb-6">
               <NextButton
                 v-if="!isSelectedTabAll"

app/javascript/dashboard/modules/search/search.routes.js

@@ -3,7 +3,6 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
   CONTACT_PERMISSIONS,
-  PORTAL_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
 import SearchView from './components/SearchView.vue';
@@ -13,12 +12,7 @@ export const routes = [
     path: frontendURL('accounts/:accountId/search'),
     name: 'search',
     meta: {
-      permissions: [
-        ...ROLES,
-        ...CONVERSATION_PERMISSIONS,
-        CONTACT_PERMISSIONS,
-        PORTAL_PERMISSIONS,
-      ],
+      permissions: [...ROLES, ...CONVERSATION_PERMISSIONS, CONTACT_PERMISSIONS],
     },
     component: SearchView,
   },

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue

@@ -117,7 +117,7 @@ export default {
   <div class="flex flex-col h-auto overflow-auto integration-hooks">
     <woot-modal-header
       :header-title="integration.name"
-      :header-content="integration.short_description"
+      :header-content="integration.short_description || integration.description"
     />
     <FormKit
       v-model="values"

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

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

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

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

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

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

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

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

app/javascript/dashboard/store/captain/copilotMessages.js

@@ -1,19 +0,0 @@
-import CopilotMessagesAPI from 'dashboard/api/captain/copilotMessages';
-import { createStore } from './storeFactory';
-
-export default createStore({
-  name: 'CopilotMessages',
-  API: CopilotMessagesAPI,
-  getters: {
-    getMessagesByThreadId: state => copilotThreadId => {
-      return state.records.filter(
-        record => record.copilot_thread?.id === Number(copilotThreadId)
-      );
-    },
-  },
-  actions: mutationTypes => ({
-    upsert({ commit }, data) {
-      commit(mutationTypes.UPSERT, data);
-    },
-  }),
-});