remove copilot channel

.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) \
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-    && curl -fsSL https://deb.nodesource.com/setup_${NODE_MAJOR}.x | bash - \
+  && apt-get -y install --no-install-recommends \
-    && apt-get update \
+    build-essential \
-    && apt-get -y install --no-install-recommends \
+    libssl-dev \
-        build-essential \
+    zlib1g-dev \
-        libssl-dev \
+    gnupg2 \
-        zlib1g-dev \
+    tar \
-        gnupg \
+    tzdata \
-        tar \
+    postgresql-client \
-        tzdata \
+    libpq-dev \
-        postgresql-client \
+    yarn \
-        libpq-dev \
+    git \
-        git \
+    imagemagick \
-        imagemagick \
+    tmux \
-        libyaml-dev \
+    zsh \
-        curl \
+    git-flow \
-        ca-certificates \
+    npm \
-        tmux \
+    libyaml-dev
-        nodejs \
-    && apt-get clean \
-    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
-# Install rbenv and ruby for root user first
+# Install rbenv and ruby
-RUN git clone --depth 1 https://github.com/rbenv/rbenv.git ~/.rbenv \
+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
+# Install overmind
-RUN su - vscode -c "git clone --depth 1 https://github.com/rbenv/rbenv.git ~/.rbenv" \
-    && su - vscode -c "echo 'export PATH=\"\$HOME/.rbenv/bin:\$PATH\"' >> ~/.bashrc" \
-    && su - vscode -c "echo 'eval \"\$(rbenv init -)\"' >> ~/.bashrc" \
-    && su - vscode -c "PATH=\"/home/vscode/.rbenv/bin:\$PATH\" rbenv install $RUBY_VERSION" \
-    && su - vscode -c "PATH=\"/home/vscode/.rbenv/bin:\$PATH\" rbenv global $RUBY_VERSION"
-
-# Install overmind and gh in single layer
 RUN curl -L https://github.com/DarthSim/overmind/releases/download/v2.1.0/overmind-v2.1.0-linux-amd64.gz > overmind.gz \
   && gunzip overmind.gz \
-  && mv overmind /usr/local/bin \
+  && sudo mv overmind /usr/local/bin \
-  && chmod +x /usr/local/bin/overmind \
+  && 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 \
+# Install gh
-  && apt-get install -y --no-install-recommends gh \
+RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \
-  && apt-get clean \
+   && 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 \
-  && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
+   && 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
+# set up ruby
-RUN npm install -g pnpm@${PNPM_VERSION} @anthropic-ai/claude-code \
+COPY Gemfile Gemfile.lock ./
-    && npm cache clean --force
+RUN gem install bundler && bundle install
 
-# Switch to vscode user
+# set up node js
-USER vscode
+RUN npm install n -g && \
-ENV PATH="/home/vscode/.rbenv/bin:/home/vscode/.rbenv/shims:$PATH"
+    n $NODE_VERSION
-
+RUN npm install --global yarn
-# Copy dependency files first for better caching
+RUN yarn
-COPY --chown=vscode:vscode Gemfile Gemfile.lock package.json pnpm-lock.yaml ./
-
-# Install dependencies as vscode user
-RUN eval "$(rbenv init -)" \
-    && gem install bundler -N \
-    && bundle install --jobs=$(nproc) \
-    && pnpm install --frozen-lockfile
-
-# Copy source code after dependencies are installed
-COPY --chown=vscode:vscode . /workspace

.devcontainer/devcontainer.json

@@ -4,26 +4,17 @@
   "dockerComposeFile": "docker-compose.yml",
 
   "settings": {
-    "terminal.integrated.shell.linux": "/bin/zsh",
+    "terminal.integrated.shell.linux": "/bin/zsh"
-    "extensions.showRecommendationsOnlyOnDemand": true,
-    "editor.formatOnSave": true,
-    "files.trimTrailingWhitespace": true,
-    "files.insertFinalNewline": true,
-    "search.exclude": {
-      "**/node_modules": true,
-      "**/tmp": true,
-      "**/log": true,
-      "**/coverage": true,
-      "**/public/packs": true
-    }
   },
 
 
   // Add the IDs of extensions you want installed when the container is created.
   "extensions": [
-    "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": {
+    "3035": {
-      "label": "Vite Dev Server"
+      "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.4.4'
+        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
+        USER_UID: '1000'
+        USER_GID: '1000'
+    image: base:latest
+
   app:
     build:
       context: ..

.devcontainer/scripts/setup.sh

@@ -2,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
+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
-# Setup Claude Code API key if available
+# uncomment the webpacker env variable
-if [ -n "$CLAUDE_CODE_API_KEY" ]; then
+sed -i -e '/WEBPACKER_DEV_SERVER_PUBLIC/s/^# //' .env
-  mkdir -p ~/.claude
+# fix the error with webpacker
-  echo '{"apiKeyHelper": "~/.claude/anthropic_key.sh"}' > ~/.claude/settings.json
+echo 'export NODE_OPTIONS=--openssl-legacy-provider' >> ~/.zshrc
-  echo "echo \"$CLAUDE_CODE_API_KEY\"" > ~/.claude/anthropic_key.sh
-  chmod +x ~/.claude/anthropic_key.sh
-fi
 
 # codespaces make the ports public
-gh codespace ports visibility 3000:public 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

Makefile

@@ -41,15 +41,8 @@ run:
 
 force_run:
 	rm -f ./.overmind.sock
-	rm -f tmp/pids/*.pid
 	overmind start -f Procfile.dev
 
-force_run_tunnel:
-	lsof -ti:3000 | xargs kill -9 2>/dev/null || true
-	rm -f ./.overmind.sock
-	rm -f tmp/pids/*.pid
-	overmind start -f Procfile.tunnel
-
 debug:
 	overmind connect backend
 
@@ -59,4 +52,4 @@ debug_worker:
 docker: 
 	docker build -t $(APP_NAME) -f ./docker/Dockerfile .
 
-.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run force_run_tunnel debug debug_worker
+.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run debug debug_worker

Procfile.tunnel

@@ -1,4 +0,0 @@
-backend: DISABLE_MINI_PROFILER=true bin/rails s -p 3000
-# https://github.com/mperham/sidekiq/issues/3090#issuecomment-389748695
-worker: dotenv bundle exec sidekiq -C config/sidekiq.yml
-vite: bin/vite build --watch

app/assets/javascripts/secretField.js

@@ -10,8 +10,7 @@ function toggleSecretField(e) {
   if (!textElement) return;
 
   if (textElement.dataset.secretMasked === 'false') {
-    const maskedLength = secretField.dataset.secretText?.length || 10;
+    textElement.textContent = '•'.repeat(10);
-    textElement.textContent = '•'.repeat(maskedLength);
     textElement.dataset.secretMasked = 'true';
     toggler.querySelector('svg use').setAttribute('xlink:href', '#eye-show');
 
@@ -33,13 +32,3 @@ function copySecretField(e) {
 
   navigator.clipboard.writeText(secretField.dataset.secretText);
 }
-
-document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('.cell-data__secret-field').forEach(field => {
-    const span = field.querySelector('[data-secret-masked]');
-    if (span && span.dataset.secretMasked === 'true') {
-      const len = field.dataset.secretText?.length || 10;
-      span.textContent = '•'.repeat(len);
-    }
-  });
-});

app/assets/stylesheets/administrate/components/_cells.scss

@@ -46,25 +46,17 @@
 
 .cell-data__secret-field {
   align-items: center;
-  color: $hint-grey;
   display: flex;
 
   span {
-    flex: 0 0 auto;
+    flex: 1;
   }
 
-  [data-secret-toggler],
+  button {
-  [data-secret-copier] {
+    margin-left: 5px;
-    background: transparent;
-    border: 0;
-    color: inherit;
-    margin-left: 0.5rem;
-    padding: 0;
 
     svg {
       fill: currentColor;
-      height: 1.25rem;
-      width: 1.25rem;
     }
   }
 }

app/builders/v2/reports/label_summary_builder.rb

@@ -1,103 +0,0 @@
-class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
-  attr_reader :account, :params
-
-  # rubocop:disable Lint/MissingSuper
-  # the parent class has no initialize
-  def initialize(account:, params:)
-    @account = account
-    @params = params
-
-    timezone_offset = (params[:timezone_offset] || 0).to_f
-    @timezone = ActiveSupport::TimeZone[timezone_offset]&.name
-  end
-  # rubocop:enable Lint/MissingSuper
-
-  def build
-    labels = account.labels.to_a
-    return [] if labels.empty?
-
-    report_data = collect_report_data
-    labels.map { |label| build_label_report(label, report_data) }
-  end
-
-  private
-
-  def collect_report_data
-    conversation_filter = build_conversation_filter
-    use_business_hours = use_business_hours?
-
-    {
-      conversation_counts: fetch_conversation_counts(conversation_filter),
-      resolved_counts: fetch_resolved_counts(conversation_filter),
-      resolution_metrics: fetch_metrics(conversation_filter, 'conversation_resolved', use_business_hours),
-      first_response_metrics: fetch_metrics(conversation_filter, 'first_response', use_business_hours),
-      reply_metrics: fetch_metrics(conversation_filter, 'reply_time', use_business_hours)
-    }
-  end
-
-  def build_label_report(label, report_data)
-    {
-      id: label.id,
-      name: label.title,
-      conversations_count: report_data[:conversation_counts][label.title] || 0,
-      avg_resolution_time: report_data[:resolution_metrics][label.title] || 0,
-      avg_first_response_time: report_data[:first_response_metrics][label.title] || 0,
-      avg_reply_time: report_data[:reply_metrics][label.title] || 0,
-      resolved_conversations_count: report_data[:resolved_counts][label.title] || 0
-    }
-  end
-
-  def use_business_hours?
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours])
-  end
-
-  def build_conversation_filter
-    conversation_filter = { account_id: account.id }
-    conversation_filter[:created_at] = range if range.present?
-
-    conversation_filter
-  end
-
-  def fetch_conversation_counts(conversation_filter)
-    fetch_counts(conversation_filter)
-  end
-
-  def fetch_resolved_counts(conversation_filter)
-    # since the base query is ActsAsTaggableOn,
-    # the status :resolved won't automatically be converted to integer status
-    fetch_counts(conversation_filter.merge(status: Conversation.statuses[:resolved]))
-  end
-
-  def fetch_counts(conversation_filter)
-    ActsAsTaggableOn::Tagging
-      .joins('INNER JOIN conversations ON taggings.taggable_id = conversations.id')
-      .joins('INNER JOIN tags ON taggings.tag_id = tags.id')
-      .where(
-        taggable_type: 'Conversation',
-        context: 'labels',
-        conversations: conversation_filter
-      )
-      .select('tags.name, COUNT(taggings.*) AS count')
-      .group('tags.name')
-      .each_with_object({}) { |record, hash| hash[record.name] = record.count }
-  end
-
-  def fetch_metrics(conversation_filter, event_name, use_business_hours)
-    ReportingEvent
-      .joins('INNER JOIN conversations ON reporting_events.conversation_id = conversations.id')
-      .joins('INNER JOIN taggings ON taggings.taggable_id = conversations.id')
-      .joins('INNER JOIN tags ON taggings.tag_id = tags.id')
-      .where(
-        conversations: conversation_filter,
-        name: event_name,
-        taggings: { taggable_type: 'Conversation', context: 'labels' }
-      )
-      .group('tags.name')
-      .order('tags.name')
-      .select(
-        'tags.name',
-        use_business_hours ? 'AVG(reporting_events.value_in_business_hours) as avg_value' : 'AVG(reporting_events.value) as avg_value'
-      )
-      .each_with_object({}) { |record, hash| hash[record.name] = record.avg_value.to_f }
-  end
-end

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/contacts_controller.rb

@@ -14,7 +14,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
   before_action :set_current_page, only: [:index, :active, :search, :filter]
   before_action :fetch_contact, only: [:show, :update, :destroy, :avatar, :contactable_inboxes, :destroy_custom_attributes]
-  before_action :set_include_contact_inboxes, only: [:index, :active, :search, :filter, :show, :update]
+  before_action :set_include_contact_inboxes, only: [:index, :search, :filter, :show, :update]
 
   def index
     @contacts_count = resolved_contacts.count
@@ -56,7 +56,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     contacts = Current.account.contacts.where(id: ::OnlineStatusTracker
                   .get_available_contact_ids(Current.account.id))
     @contacts_count = contacts.count
-    @contacts = fetch_contacts(contacts)
+    @contacts = contacts.page(@current_page)
   end
 
   def show; end

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

@@ -124,12 +124,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     @conversation.save!
   end
 
-  def destroy
-    authorize @conversation, :destroy?
-    ::DeleteObjectJob.perform_later(@conversation, Current.user, request.ip)
-    head :ok
-  end
-
   private
 
   def permitted_update_params

app/controllers/api/v1/accounts/integrations/linear_controller.rb

@@ -1,5 +1,5 @@
 class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::BaseController
-  before_action :fetch_conversation, only: [:create_issue, :link_issue, :unlink_issue, :linked_issues]
+  before_action :fetch_conversation, only: [:link_issue, :linked_issues]
   before_action :fetch_hook, only: [:destroy]
 
   def destroy
@@ -31,12 +31,6 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
     if issue[:error]
       render json: { error: issue[:error] }, status: :unprocessable_entity
     else
-      Linear::ActivityMessageService.new(
-        conversation: @conversation,
-        action_type: :issue_created,
-        issue_data: { id: issue[:data][:identifier] },
-        user: Current.user
-      ).perform
       render json: issue[:data], status: :ok
     end
   end
@@ -48,30 +42,17 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
     if issue[:error]
       render json: { error: issue[:error] }, status: :unprocessable_entity
     else
-      Linear::ActivityMessageService.new(
-        conversation: @conversation,
-        action_type: :issue_linked,
-        issue_data: { id: issue_id },
-        user: Current.user
-      ).perform
       render json: issue[:data], status: :ok
     end
   end
 
   def unlink_issue
     link_id = permitted_params[:link_id]
-    issue_id = permitted_params[:issue_id]
     issue = linear_processor_service.unlink_issue(link_id)
 
     if issue[:error]
       render json: { error: issue[:error] }, status: :unprocessable_entity
     else
-      Linear::ActivityMessageService.new(
-        conversation: @conversation,
-        action_type: :issue_unlinked,
-        issue_data: { id: issue_id },
-        user: Current.user
-      ).perform
       render json: issue[:data], status: :ok
     end
   end

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/accounts_controller.rb

@@ -92,7 +92,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def settings_params
-    params.permit(:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting, :audio_transcriptions, :auto_resolve_label)
+    params.permit(:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting)
   end
 
   def check_signup_enabled

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/api/v2/accounts/summary_reports_controller.rb

@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox]
 
   def agent
     render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -14,10 +14,6 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     render_report_with(V2::Reports::InboxSummaryBuilder)
   end
 
-  def label
-    render_report_with(V2::Reports::LabelSummaryBuilder)
-  end
-
   private
 
   def check_authorization

app/controllers/dashboard_controller.rb

@@ -15,7 +15,7 @@ class DashboardController < ActionController::Base
   private
 
   def ensure_html_format
-    render json: { error: 'Please use API routes instead of dashboard routes for JSON requests' }, status: :not_acceptable if request.format.json?
+    head :not_acceptable unless request.format.html?
   end
 
   def set_global_config

app/controllers/oauth_callback_controller.rb

@@ -71,7 +71,6 @@ class OauthCallbackController < ApplicationController
   def create_channel_with_inbox
     ActiveRecord::Base.transaction do
       channel_email = Channel::Email.create!(email: users_data['email'], account: account)
-
       account.inboxes.create!(
         account: account,
         channel: channel_email,

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/account_users_controller.rb

@@ -2,13 +2,6 @@ class SuperAdmin::AccountUsersController < SuperAdmin::ApplicationController
   # Overwrite any of the RESTful controller actions to implement custom behavior
   # For example, you may want to send an email after a foo is updated.
   #
-
-  # Since account/user page - account user role attribute links to the show page
-  # Handle with a redirect to the user show page
-  def show
-    redirect_to super_admin_user_path(requested_resource.user)
-  end
-
   def create
     resource = resource_class.new(resource_params)
     authorize_resource(resource)

app/controllers/super_admin/app_configs_controller.rb

@@ -32,17 +32,22 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
   end
 
   def allowed_configs
-    mapping = {
+    @allowed_configs = case @config
-      'facebook' => %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN FACEBOOK_API_VERSION ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT],
+                       when 'facebook'
-      'shopify' => %w[SHOPIFY_CLIENT_ID SHOPIFY_CLIENT_SECRET],
+                         %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN FACEBOOK_API_VERSION ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT]
-      'microsoft' => %w[AZURE_APP_ID AZURE_APP_SECRET],
+                       when 'shopify'
-      'email' => ['MAILER_INBOUND_EMAIL_DOMAIN'],
+                         %w[SHOPIFY_CLIENT_ID SHOPIFY_CLIENT_SECRET]
-      'linear' => %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET],
+                       when 'microsoft'
-      'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
+                         %w[AZURE_APP_ID AZURE_APP_SECRET]
-      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
+                       when 'email'
-    }
+                         ['MAILER_INBOUND_EMAIL_DOMAIN']
-
+                       when 'linear'
-    @allowed_configs = mapping.fetch(@config, %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS])
+                         %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/helpers/api/v2/accounts/reports_helper.rb

@@ -36,13 +36,9 @@ module Api::V2::Accounts::ReportsHelper
   end
 
   def generate_labels_report
-    reports = V2::Reports::LabelSummaryBuilder.new(
+    Current.account.labels.map do |label|
-      account: Current.account,
+      label_report = report_builder({ type: :label, id: label.id }).short_summary
-      params: build_params({})
+      [label.title] + generate_readable_report_metrics(label_report)
-    ).build
-
-    reports.map do |report|
-      [report[:name]] + generate_readable_report_metrics(report)
     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

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

@@ -61,11 +61,6 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
-  active(page = 1, sortAttr = 'name') {
-    let requestURL = `${this.url}/active?${buildContactParams(page, sortAttr)}`;
-    return axios.get(requestURL);
-  }
-
   // eslint-disable-next-line default-param-last
   filter(page = 1, sortAttr = 'name', queryPayload) {
     let requestURL = `${this.url}/filter?${buildContactParams(page, sortAttr)}`;

app/javascript/dashboard/api/endPoints.js

@@ -51,10 +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/inbox/conversation.js

@@ -137,10 +137,6 @@ class ConversationApi extends ApiClient {
   getInboxAssistant(conversationId) {
     return axios.get(`${this.url}/${conversationId}/inbox_assistant`);
   }
-
-  delete(conversationId) {
-    return axios.delete(`${this.url}/${conversationId}`);
-  }
 }
 
 export default new ConversationApi();

app/javascript/dashboard/api/integrations/linear.js

@@ -33,11 +33,9 @@ class LinearAPI extends ApiClient {
     );
   }
 
-  unlinkIssue(linkId, issueIdentifier, conversationId) {
+  unlinkIssue(linkId) {
     return axios.post(`${this.url}/unlink_issue`, {
       link_id: linkId,
-      issue_id: issueIdentifier,
-      conversation_id: conversationId,
     });
   }
 

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/api/specs/integrations/linear.spec.js

@@ -91,19 +91,6 @@ describe('#linearAPI', () => {
         issueData
       );
     });
-
-    it('creates a valid request with conversation_id', () => {
-      const issueData = {
-        title: 'New Issue',
-        description: 'Issue description',
-        conversation_id: 123,
-      };
-      LinearAPIClient.createIssue(issueData);
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/integrations/linear/create_issue',
-        issueData
-      );
-    });
   });
 
   describe('link_issue', () => {
@@ -133,18 +120,6 @@ describe('#linearAPI', () => {
         }
       );
     });
-
-    it('creates a valid request with title', () => {
-      LinearAPIClient.link_issue(1, 'ENG-123', 'Sample Issue');
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/integrations/linear/link_issue',
-        {
-          issue_id: 'ENG-123',
-          conversation_id: 1,
-          title: 'Sample Issue',
-        }
-      );
-    });
   });
 
   describe('getLinkedIssue', () => {
@@ -189,26 +164,12 @@ describe('#linearAPI', () => {
       window.axios = originalAxios;
     });
 
-    it('creates a valid request with link_id only', () => {
+    it('creates a valid request', () => {
-      LinearAPIClient.unlinkIssue('link123');
+      LinearAPIClient.unlinkIssue(1);
       expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/linear/unlink_issue',
         {
-          link_id: 'link123',
+          link_id: 1,
-          issue_id: undefined,
-          conversation_id: undefined,
-        }
-      );
-    });
-
-    it('creates a valid request with all parameters', () => {
-      LinearAPIClient.unlinkIssue('link123', 'ENG-456', 789);
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/integrations/linear/unlink_issue',
-        {
-          link_id: 'link123',
-          issue_id: 'ENG-456',
-          conversation_id: 789,
         }
       );
     });

app/javascript/dashboard/api/summaryReports.js

@@ -35,16 +35,6 @@ class SummaryReportsAPI extends ApiClient {
       },
     });
   }
-
-  getLabelReports({ since, until, businessHours } = {}) {
-    return axios.get(`${this.url}/label`, {
-      params: {
-        since,
-        until,
-        business_hours: businessHours,
-      },
-    });
-  }
 }
 
 export default new SummaryReportsAPI();

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/components-next/Contacts/ContactsCard/ContactsCard.vue

@@ -17,7 +17,6 @@ const props = defineProps({
   additionalAttributes: { type: Object, default: () => ({}) },
   phoneNumber: { type: String, default: '' },
   thumbnail: { type: String, default: '' },
-  availabilityStatus: { type: String, default: null },
   isExpanded: { type: Boolean, default: false },
   isUpdating: { type: Boolean, default: false },
 });
@@ -93,13 +92,7 @@ const onClickViewDetails = () => emit('showContact', props.id);
 <template>
   <CardLayout :key="id" layout="row">
     <div class="flex items-center justify-start flex-1 gap-4">
-      <Avatar
+      <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
-        :name="name"
-        :src="thumbnail"
-        :size="48"
-        :status="availabilityStatus"
-        rounded-full
-      />
       <div class="flex flex-col gap-0.5 flex-1">
         <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
           <span class="text-base font-medium truncate text-n-slate-12">

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -7,16 +7,42 @@ import ContactMoreActions from './components/ContactMoreActions.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
 defineProps({
-  showSearch: { type: Boolean, default: true },
+  showSearch: {
-  searchValue: { type: String, default: '' },
+    type: Boolean,
-  headerTitle: { type: String, required: true },
+    default: true,
-  buttonLabel: { type: String, default: '' },
+  },
-  activeSort: { type: String, default: 'last_activity_at' },
+  searchValue: {
-  activeOrdering: { type: String, default: '' },
+    type: String,
-  isSegmentsView: { type: Boolean, default: false },
+    default: '',
-  hasActiveFilters: { type: Boolean, default: false },
+  },
-  isLabelView: { type: Boolean, default: false },
+  headerTitle: {
-  isActiveView: { type: Boolean, default: false },
+    type: String,
+    required: true,
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  activeSort: {
+    type: String,
+    default: 'last_activity_at',
+  },
+  activeOrdering: {
+    type: String,
+    default: '',
+  },
+  isSegmentsView: {
+    type: Boolean,
+    default: false,
+  },
+  hasActiveFilters: {
+    type: Boolean,
+    default: false,
+  },
+  isLabelView: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -59,7 +85,7 @@ const emit = defineEmits([
           </Input>
         </div>
         <div class="flex items-center gap-2">
-          <div v-if="!isLabelView && !isActiveView" class="relative">
+          <div v-if="!isLabelView" class="relative">
             <Button
               id="toggleContactsFilterButton"
               :icon="
@@ -79,12 +105,7 @@ const emit = defineEmits([
             <slot name="filter" />
           </div>
           <Button
-            v-if="
+            v-if="hasActiveFilters && !isSegmentsView && !isLabelView"
-              hasActiveFilters &&
-              !isSegmentsView &&
-              !isLabelView &&
-              !isActiveView
-            "
             icon="i-lucide-save"
             color="slate"
             size="sm"
@@ -92,7 +113,7 @@ const emit = defineEmits([
             @click="emit('createSegment')"
           />
           <Button
-            v-if="isSegmentsView && !isLabelView && !isActiveView"
+            v-if="isSegmentsView && !isLabelView"
             icon="i-lucide-trash"
             color="slate"
             size="sm"

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue

@@ -36,7 +36,6 @@ const props = defineProps({
   activeSegment: { type: Object, default: null },
   hasAppliedFilters: { type: Boolean, default: false },
   isLabelView: { type: Boolean, default: false },
-  isActiveView: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -278,7 +277,6 @@ defineExpose({
     :header-title="headerTitle"
     :is-segments-view="hasActiveSegments"
     :is-label-view="isLabelView"
-    :is-active-view="isActiveView"
     :has-active-filters="hasAppliedFilters"
     :button-label="t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
     @search="emit('search', $event)"

app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue

@@ -6,7 +6,7 @@ import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/Contact
 import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 
-const props = defineProps({
+defineProps({
   searchValue: { type: String, default: '' },
   headerTitle: { type: String, default: '' },
   showPaginationFooter: { type: Boolean, default: true },
@@ -37,23 +37,10 @@ const isNotSegmentView = computed(() => {
   return route.name !== 'contacts_dashboard_segments_index';
 });
 
-const isActiveView = computed(() => {
-  return route.name === 'contacts_dashboard_active';
-});
-
 const isLabelView = computed(
   () => route.name === 'contacts_dashboard_labels_index'
 );
 
-const showActiveFiltersPreview = computed(() => {
-  return (
-    (props.hasAppliedFilters || !isNotSegmentView.value) &&
-    !props.isFetchingList &&
-    !isLabelView.value &&
-    !isActiveView.value
-  );
-});
-
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
 };
@@ -70,7 +57,7 @@ const openFilter = () => {
     <div class="flex flex-col w-full h-full transition-all duration-300">
       <ContactListHeaderWrapper
         ref="contactListHeaderWrapper"
-        :show-search="isNotSegmentView && !isActiveView"
+        :show-search="isNotSegmentView"
         :search-value="searchValue"
         :active-sort="activeSort"
         :active-ordering="activeOrdering"
@@ -79,7 +66,6 @@ const openFilter = () => {
         :segments-id="segmentsId"
         :has-applied-filters="hasAppliedFilters"
         :is-label-view="isLabelView"
-        :is-active-view="isActiveView"
         @update:sort="emit('update:sort', $event)"
         @search="emit('search', $event)"
         @apply-filter="emit('applyFilter', $event)"
@@ -88,7 +74,11 @@ const openFilter = () => {
       <main class="flex-1 overflow-y-auto">
         <div class="w-full mx-auto max-w-[60rem]">
           <ContactsActiveFiltersPreview
-            v-if="showActiveFiltersPreview"
+            v-if="
+              (hasAppliedFilters || !isNotSegmentView) &&
+              !isFetchingList &&
+              !isLabelView
+            "
             :active-segment="activeSegment"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"

app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue

@@ -71,7 +71,6 @@ const toggleExpanded = id => {
       :thumbnail="contact.thumbnail"
       :phone-number="contact.phoneNumber"
       :additional-attributes="contact.additionalAttributes"
-      :availability-status="contact.availabilityStatus"
       :is-expanded="expandedCardId === contact.id"
       :is-updating="isUpdating"
       @toggle="toggleExpanded(contact.id)"

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-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2 border border-n-weak rounded-full gap-2 p-1"
-  >
-    <Button
-      v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"
-      ghost
-      slate
-      sm
-      class="!rounded-full"
-      :class="{
-        'bg-n-alpha-2': isContactSidebarOpen,
-      }"
-      icon="i-ph-user-bold"
-      @click="handleConversationSidebarToggle"
-    />
-    <Button
-      v-if="showCopilotTab"
-      v-tooltip.bottom="$t('CONVERSATION.SIDEBAR.COPILOT')"
-      ghost
-      slate
-      class="!rounded-full"
-      :class="{
-        'bg-n-alpha-2 !text-n-iris-9': isCopilotPanelOpen,
-      }"
-      sm
-      icon="i-woot-captain"
-      @click="handleCopilotSidebarToggle"
-    />
-  </div>
-</template>

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

@@ -4,14 +4,38 @@ import { computed, ref, watch, useSlots } from 'vue';
 import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 const props = defineProps({
-  modelValue: { type: String, default: '' },
+  modelValue: {
-  label: { type: String, default: '' },
+    type: String,
-  placeholder: { type: String, default: '' },
+    default: '',
-  focusOnMount: { type: Boolean, default: false },
+  },
-  maxLength: { type: Number, default: 200 },
+  label: {
-  showCharacterCount: { type: Boolean, default: true },
+    type: String,
-  disabled: { type: Boolean, default: false },
+    default: '',
-  message: { type: String, default: '' },
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  focusOnMount: {
+    type: Boolean,
+    default: false,
+  },
+  maxLength: {
+    type: Number,
+    default: 200,
+  },
+  showCharacterCount: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  message: {
+    type: String,
+    default: '',
+  },
   messageType: {
     type: String,
     default: 'info',
@@ -19,7 +43,6 @@ const props = defineProps({
   },
   enableVariables: { type: Boolean, default: false },
   enableCannedResponses: { type: Boolean, default: true },
-  enabledMenuOptions: { type: Array, default: () => [] },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -97,7 +120,6 @@ watch(
         :disabled="disabled"
         :enable-variables="enableVariables"
         :enable-canned-responses="enableCannedResponses"
-        :enabled-menu-options="enabledMenuOptions"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"

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/PageLayout.vue

@@ -76,7 +76,7 @@ const handlePageChange = event => {
 
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6">
+    <header class="sticky top-0 z-10 px-6 xl:px-0">
       <div class="w-full max-w-[60rem] mx-auto">
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
@@ -116,7 +116,7 @@ const handlePageChange = event => {
         </div>
       </div>
     </header>
-    <main class="flex-1 px-6 overflow-y-auto">
+    <main class="flex-1 px-6 overflow-y-auto xl:px-0">
       <div class="w-full max-w-[60rem] h-full mx-auto py-4">
         <slot v-if="!showPaywall" name="controls" />
         <div

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

@@ -2,7 +2,6 @@
 import { nextTick, ref, watch, computed } from 'vue';
 import { useTrack } from 'dashboard/composables';
 import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 
 import CopilotInput from './CopilotInput.vue';
 import CopilotLoader from './CopilotLoader.vue';
@@ -10,18 +9,25 @@ import CopilotAgentMessage from './CopilotAgentMessage.vue';
 import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
 import CopilotThinkingGroup from './CopilotThinkingGroup.vue';
 import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
+import CopilotHeader from './CopilotHeader.vue';
 import CopilotEmptyState from './CopilotEmptyState.vue';
-import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
-import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
+  supportAgent: {
+    type: Object,
+    default: () => ({}),
+  },
   messages: {
     type: Array,
     default: () => [],
   },
+  isCaptainTyping: {
+    type: Boolean,
+    default: false,
+  },
   conversationInboxType: {
     type: String,
-    required: true,
+    default: '',
   },
   assistants: {
     type: Array,
@@ -33,15 +39,17 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['sendMessage', 'reset', 'setAssistant']);
+const emit = defineEmits(['sendMessage', 'reset', 'setAssistant', 'close']);
-
-const { t } = useI18n();
 
 const sendMessage = message => {
   emit('sendMessage', message);
   useTrack(COPILOT_EVENTS.SEND_MESSAGE);
 };
 
+const handleReset = () => {
+  emit('reset');
+};
+
 const chatContainer = ref(null);
 
 const scrollToBottom = async () => {
@@ -54,69 +62,28 @@ const scrollToBottom = async () => {
 const groupedMessages = computed(() => {
   const result = [];
   let thinkingGroup = [];
+
   props.messages.forEach(message => {
-    if (message.message_type === 'assistant_thinking') {
+    if (message.role === 'assistant_thinking') {
       thinkingGroup.push(message);
     } else {
       if (thinkingGroup.length > 0) {
-        result.push({
+        result.push({ type: 'thinking_group', messages: thinkingGroup });
-          id: thinkingGroup[0].id,
-          message_type: 'thinking_group',
-          messages: thinkingGroup,
-        });
         thinkingGroup = [];
       }
-      result.push(message);
+      result.push({ type: 'message', message });
     }
   });
+
   if (thinkingGroup.length > 0) {
-    result.push({
+    result.push({ type: 'thinking_group', messages: thinkingGroup });
-      id: thinkingGroup[0].id,
-      message_type: 'thinking_group',
-      messages: thinkingGroup,
-    });
   }
+
   return result;
 });
 
-const isLastMessageFromAssistant = computed(() => {
-  return (
-    groupedMessages.value[groupedMessages.value.length - 1].message_type ===
-    'assistant'
-  );
-});
-
-const { updateUISettings } = useUISettings();
-
-const closeCopilotPanel = () => {
-  updateUISettings({
-    is_copilot_panel_open: false,
-    is_contact_sidebar_open: false,
-  });
-};
-
-const handleSidebarAction = action => {
-  if (action === 'reset') {
-    emit('reset');
-  }
-};
-
-const hasAssistants = computed(() => props.assistants.length > 0);
-const hasMessages = computed(() => props.messages.length > 0);
-const copilotButtons = computed(() => {
-  if (hasMessages.value) {
-    return [
-      {
-        key: 'reset',
-        icon: 'i-lucide-refresh-ccw',
-        tooltip: t('CAPTAIN.COPILOT.RESET'),
-      },
-    ];
-  }
-  return [];
-});
 watch(
-  [() => props.messages],
+  [() => props.messages, () => props.isCaptainTyping],
   () => {
     scrollToBottom();
   },
@@ -126,40 +93,49 @@ watch(
 
 <template>
   <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
-    <SidebarActionsHeader
+    <CopilotHeader
-      :title="$t('CAPTAIN.COPILOT.TITLE')"
+      :has-messages="messages.length > 0"
-      :buttons="copilotButtons"
+      @reset="handleReset"
-      @click="handleSidebarAction"
+      @close="$emit('close')"
-      @close="closeCopilotPanel"
     />
     <div
       ref="chatContainer"
       class="flex-1 flex px-4 py-4 overflow-y-auto items-start"
     >
-      <div v-if="hasMessages" class="space-y-6 flex-1 flex flex-col w-full">
+      <div v-if="messages.length" class="space-y-6 flex-1 flex flex-col w-full">
-        <template v-for="(item, index) in groupedMessages" :key="item.id">
+        <template
-          <CopilotAgentMessage
+          v-for="item in groupedMessages"
-            v-if="item.message_type === 'user'"
+          :key="item.type === 'message' ? item.message.id : 'thinking-group'"
-            :message="item.message"
+        >
-          />
+          <template v-if="item.type === 'message'">
-          <CopilotAssistantMessage
+            <CopilotAgentMessage
-            v-else-if="item.message_type === 'assistant'"
+              v-if="item.message.role === 'user'"
-            :message="item.message"
+              :support-agent="supportAgent"
-            :is-last-message="index === groupedMessages.length - 1"
+              :message="item.message"
-            :conversation-inbox-type="conversationInboxType"
+            />
-          />
+            <CopilotAssistantMessage
+              v-else-if="
+                item.message.role === 'assistant' ||
+                item.message.role === 'system'
+              "
+              :message="item.message"
+              :conversation-inbox-type="conversationInboxType"
+            />
+          </template>
           <CopilotThinkingGroup
             v-else
             :messages="item.messages"
-            :default-collapsed="isLastMessageFromAssistant"
+            :has-assistant-message-after="
+              groupedMessages[groupedMessages.indexOf(item) + 1]?.message
+                ?.role === 'assistant'
+            "
           />
         </template>
 
-        <CopilotLoader v-if="!isLastMessageFromAssistant" />
+        <CopilotLoader v-if="isCaptainTyping" />
       </div>
       <CopilotEmptyState
-        v-else
+        v-if="!messages.length"
-        :has-assistants="hasAssistants"
         @use-suggestion="sendMessage"
       />
     </div>
@@ -174,11 +150,7 @@ watch(
         />
         <div v-else />
       </div>
-      <CopilotInput
+      <CopilotInput class="mb-1 w-full" @send="sendMessage" />
-        v-if="hasAssistants"
-        class="mb-1 w-full"
-        @send="sendMessage"
-      />
     </div>
   </div>
 </template>

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

@@ -11,28 +11,15 @@ import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
-  isLastMessage: {
-    type: Boolean,
-    default: false,
-  },
   message: {
     type: Object,
     required: true,
   },
   conversationInboxType: {
     type: String,
-    required: true,
+    default: '',
   },
 });
-const hasEmptyMessageContent = computed(() => !props.message?.content);
-
-const showUseButton = computed(() => {
-  return (
-    !hasEmptyMessageContent.value &&
-    props.message.reply_suggestion &&
-    props.isLastMessage
-  );
-});
 
 const messageContent = computed(() => {
   const formatter = new MessageFormatter(props.message.content);
@@ -45,6 +32,8 @@ const insertIntoRichEditor = computed(() => {
   );
 });
 
+const hasEmptyMessageContent = computed(() => !props.message?.content);
+
 const useCopilotResponse = () => {
   if (insertIntoRichEditor.value) {
     emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
@@ -68,7 +57,7 @@ const useCopilotResponse = () => {
     />
     <div class="flex flex-row mt-1">
       <Button
-        v-if="showUseButton"
+        v-if="!hasEmptyMessageContent"
         :label="$t('CAPTAIN.COPILOT.USE')"
         faded
         sm

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

@@ -4,13 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import Icon from '../icon/Icon.vue';
 
-defineProps({
-  hasAssistants: {
-    type: Boolean,
-    default: false,
-  },
-});
-
 const emit = defineEmits(['useSuggestion']);
 const { t } = useI18n();
 const route = useRoute();
@@ -32,12 +25,16 @@ const routePromptMap = {
   ],
   dashboard: [
     {
-      label: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.LABEL',
+      label: 'High priority conversations',
-      prompt: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.CONTENT',
+      prompt: 'Get me a summary of all high priority open conversations',
     },
     {
-      label: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.LABEL',
+      label: 'List contacts',
-      prompt: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.CONTENT',
+      prompt: 'Show me the list of contacts',
+    },
+    {
+      label: 'Summarize articles',
+      prompt: 'List articles that are in draft',
     },
   ],
 };
@@ -46,6 +43,8 @@ const getCurrentRoute = () => {
   const path = route.path;
   if (path.includes('/conversations')) return 'conversations';
   if (path.includes('/dashboard')) return 'dashboard';
+  if (path.includes('/contacts')) return 'contacts';
+  if (path.includes('/articles')) return 'articles';
   return 'dashboard';
 };
 
@@ -72,21 +71,7 @@ const handleSuggestion = opt => {
         </p>
       </div>
     </div>
-    <div v-if="!hasAssistants" class="w-full space-y-2">
+    <div class="w-full space-y-2">
-      <p class="text-sm text-n-slate-11 leading-6">
-        {{ $t('CAPTAIN.ASSISTANTS.NO_ASSISTANTS_AVAILABLE') }}
-      </p>
-      <router-link
-        :to="{
-          name: 'captain_assistants_index',
-          params: { accountId: route.params.accountId },
-        }"
-        class="text-n-slate-11 underline hover:text-n-slate-12"
-      >
-        {{ $t('CAPTAIN.ASSISTANTS.ADD_NEW') }}
-      </router-link>
-    </div>
-    <div v-else class="w-full space-y-2">
       <span class="text-xs text-n-slate-10 block">
         {{ $t('CAPTAIN.COPILOT.TRY_THESE_PROMPTS') }}
       </span>

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
+      <CopilotHeader :has-messages="true" />
-        title="With New Conversation Button"
-        :buttons="[
-          {
-            key: 'new_conversation',
-            icon: 'i-lucide-plus',
-          },
-        ]"
-      />
     </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-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">
+        {{ $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/copilot/CopilotLauncher.vue

@@ -1,13 +1,15 @@
 <script setup>
 import { computed } from 'vue';
+import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import Button from 'dashboard/components-next/button/Button.vue';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useMapGetter } from 'dashboard/composables/store';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
+const store = useStore();
 const route = useRoute();
 
-const { uiSettings, updateUISettings } = useUISettings();
+const getUIState = useMapGetter('uiState/getUIState');
+const isSidebarOpen = computed(() => getUIState.value('isCopilotSidebarOpen'));
 
 const isConversationRoute = computed(() => {
   const CONVERSATION_ROUTES = [
@@ -19,45 +21,27 @@ const isConversationRoute = computed(() => {
     'conversation_through_mentions',
     'conversation_through_unattended',
     'conversation_through_participating',
-    'inbox_view_conversation',
   ];
   return CONVERSATION_ROUTES.includes(route.name);
 });
 
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
-const showCopilotLauncher = computed(() => {
-  const isCaptainEnabled = isFeatureEnabledonAccount.value(
-    currentAccountId.value,
-    FEATURE_FLAGS.CAPTAIN
-  );
-  return (
-    isCaptainEnabled &&
-    !uiSettings.value.is_copilot_panel_open &&
-    !isConversationRoute.value
-  );
-});
 const toggleSidebar = () => {
-  updateUISettings({
+  store.dispatch('uiState/toggle', 'isCopilotSidebarOpen');
-    is_copilot_panel_open: !uiSettings.value.is_copilot_panel_open,
-    is_contact_sidebar_open: false,
-  });
 };
 </script>
 
 <template>
-  <div v-if="showCopilotLauncher" class="fixed bottom-4 right-4 z-50">
+  <div class="fixed bottom-4 right-4 z-50">
-    <div class="rounded-full bg-n-alpha-2 p-1">
+    <div
+      v-if="!isSidebarOpen && !isConversationRoute"
+      class="rounded-full bg-n-solid-2 p-2 hover:bg-n-solid-3"
+    >
       <Button
         icon="i-woot-captain"
-        class="!rounded-full !bg-n-solid-3 dark:!bg-n-alpha-2 !text-n-slate-12 text-xl"
+        class="!rounded-full !bg-n-alpha-2 text-n-slate-12 text-xl"
         lg
         @click="toggleSidebar"
       />
     </div>
   </div>
-  <template v-else />
 </template>

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

@@ -17,7 +17,7 @@ defineProps({
         icon="i-lucide-sparkles"
         class="w-4 h-4 mt-0.5 flex-shrink-0 text-n-slate-9"
       />
-      <div class="text-sm text-n-slate-12">
+      <div class="text-sm text-n-slate-11">
         {{ content }}
       </div>
     </div>

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

@@ -51,10 +51,10 @@ watch(
       }"
     >
       <CopilotThinkingBlock
-        v-for="copilotMessage in messages"
+        v-for="message in messages"
-        :key="copilotMessage.id"
+        :key="message.id"
-        :content="copilotMessage.message.content"
+        :content="message.content"
-        :reasoning="copilotMessage.message.reasoning"
+        :reasoning="message.reasoning"
       />
     </div>
   </div>

app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue

@@ -74,7 +74,6 @@ const updateSelected = newValue => {
       <slot name="trigger" :toggle="toggle">
         <Button
           ref="triggerRef"
-          type="button"
           sm
           slate
           :variant

app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue

@@ -9,14 +9,7 @@ import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 
-const {
+const { options } = defineProps({
-  options,
-  disableSearch,
-  placeholderIcon,
-  placeholder,
-  placeholderTrailingIcon,
-  searchPlaceholder,
-} = defineProps({
   options: {
     type: Array,
     required: true,
@@ -25,22 +18,6 @@ const {
     type: Boolean,
     default: false,
   },
-  placeholderIcon: {
-    type: String,
-    default: 'i-lucide-plus',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  placeholderTrailingIcon: {
-    type: Boolean,
-    default: false,
-  },
-  searchPlaceholder: {
-    type: String,
-    default: '',
-  },
 });
 
 const { t } = useI18n();
@@ -92,26 +69,15 @@ const toggleSelected = option => {
         sm
         slate
         faded
-        type="button"
         :icon="selectedItem.icon"
         :label="selectedItem.name"
         @click="toggle"
       />
-      <Button
+      <Button v-else sm slate faded @click="toggle">
-        v-else
-        sm
-        slate
-        faded
-        type="button"
-        :trailing-icon="placeholderTrailingIcon"
-        @click="toggle"
-      >
         <template #icon>
-          <Icon :icon="placeholderIcon" class="text-n-slate-11" />
+          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
         </template>
-        <span class="text-n-slate-11">{{
+        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
-          placeholder || t('COMBOBOX.PLACEHOLDER')
-        }}</span>
       </Button>
     </template>
     <DropdownBody class="top-0 min-w-56 z-50" strong>
@@ -121,7 +87,7 @@ const toggleSelected = option => {
           v-model="searchTerm"
           autofocus
           class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
-          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
+          :placeholder="t('COMBOBOX.SEARCH_PLACEHOLDER')"
         />
       </div>
       <DropdownSection class="max-h-80 overflow-scroll">

app/javascript/dashboard/components-next/input/DurationInput.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { computed, watch } from 'vue';
+import { computed, ref } from 'vue';
 import Input from './Input.vue';
 import { useI18n } from 'vue-i18n';
-import { DURATION_UNITS } from './constants';
 
 const props = defineProps({
   min: { type: Number, default: 0 },
@@ -12,50 +11,36 @@ const props = defineProps({
 
 const { t } = useI18n();
 const duration = defineModel('modelValue', { type: Number, default: null });
-const unit = defineModel('unit', {
-  type: String,
-  default: DURATION_UNITS.MINUTES,
-  validate(value) {
-    return Object.values(DURATION_UNITS).includes(value);
-  },
-});
 
-const convertToMinutes = newValue => {
+const UNIT_TYPES = {
-  if (unit.value === DURATION_UNITS.MINUTES) {
+  MINUTES: 'minutes',
-    return Math.floor(newValue);
+  HOURS: 'hours',
-  }
+  DAYS: 'days',
-  if (unit.value === DURATION_UNITS.HOURS) {
-    return Math.floor(newValue) * 60;
-  }
-  return Math.floor(newValue) * 24 * 60;
 };
+const unit = ref(UNIT_TYPES.MINUTES);
 
 const transformedValue = computed({
   get() {
-    if (unit.value === DURATION_UNITS.MINUTES) return duration.value;
+    if (unit.value === UNIT_TYPES.MINUTES) return duration.value;
-    if (unit.value === DURATION_UNITS.HOURS)
+    if (unit.value === UNIT_TYPES.HOURS) return Math.floor(duration.value / 60);
-      return Math.floor(duration.value / 60);
+    if (unit.value === UNIT_TYPES.DAYS)
-    if (unit.value === DURATION_UNITS.DAYS)
       return Math.floor(duration.value / 24 / 60);
 
     return 0;
   },
   set(newValue) {
-    let minuteValue = convertToMinutes(newValue);
+    let minuteValue;
+    if (unit.value === UNIT_TYPES.MINUTES) {
+      minuteValue = Math.floor(newValue);
+    } else if (unit.value === UNIT_TYPES.HOURS) {
+      minuteValue = Math.floor(newValue * 60);
+    } else if (unit.value === UNIT_TYPES.DAYS) {
+      minuteValue = Math.floor(newValue * 24 * 60);
+    }
 
     duration.value = Math.min(Math.max(minuteValue, props.min), props.max);
   },
 });
-
-// when unit is changed set the nearest value to that unit
-// so if the minute is set to 900, and the user changes the unit to "days"
-// the transformed value will show 0, but the real value will still be 900
-// this might create some confusion, especially when saving
-// this watcher fixes it by rounding the duration basically, to the nearest unit value
-watch(unit, () => {
-  let adjustedValue = convertToMinutes(transformedValue.value);
-  duration.value = Math.min(Math.max(adjustedValue, props.min), props.max);
-});
 </script>
 
 <template>
@@ -72,12 +57,10 @@ watch(unit, () => {
     :disabled="disabled"
     class="mb-0 text-sm disabled:outline-n-weak disabled:opacity-40"
   >
-    <option :value="DURATION_UNITS.MINUTES">
+    <option :value="UNIT_TYPES.MINUTES">
       {{ t('DURATION_INPUT.MINUTES') }}
     </option>
-    <option :value="DURATION_UNITS.HOURS">
+    <option :value="UNIT_TYPES.HOURS">{{ t('DURATION_INPUT.HOURS') }}</option>
-      {{ t('DURATION_INPUT.HOURS') }}
+    <option :value="UNIT_TYPES.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
-    </option>
-    <option :value="DURATION_UNITS.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
   </select>
 </template>

app/javascript/dashboard/components-next/input/constants.js

@@ -1,5 +0,0 @@
-export const DURATION_UNITS = {
-  MINUTES: 'minutes',
-  HOURS: 'hours',
-  DAYS: 'days',
-};

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:
+    delete: hasText || hasAttachments,
-      (hasText || hasAttachments) &&
+    cannedResponse: isOutgoing && hasText,
-      !isFailedOrProcessing &&
+    replyTo: !props.private && props.inboxSupportsReplyTo.outgoing,
-      !isMessageDeleted.value,
-    cannedResponse: isOutgoing && hasText && !isMessageDeleted.value,
-    copyLink: !isFailedOrProcessing,
-    translate: !isFailedOrProcessing && !isMessageDeleted.value && hasText,
-    replyTo:
-      !props.private &&
-      props.inboxSupportsReplyTo.outgoing &&
-      !isFailedOrProcessing,
   };
 });
 
@@ -506,8 +499,8 @@ provideMessageContext({
       <div
         class="[grid-area:bubble] flex"
         :class="{
-          'ltr:ml-8 rtl:mr-8 justify-end': orientation === ORIENTATION.RIGHT,
+          'ltr:pl-8 rtl:pr-8 justify-end': orientation === ORIENTATION.RIGHT,
-          'ltr:mr-8 rtl:ml-8': orientation === ORIENTATION.LEFT,
+          '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/message/bubbles/Email/EmailMeta.vue

@@ -14,8 +14,7 @@ const fromEmail = computed(() => {
 });
 
 const toEmail = computed(() => {
-  const { toEmails, email } = contentAttributes.value;
+  return contentAttributes.value?.email?.to ?? [];
-  return email?.to ?? toEmails ?? [];
 });
 
 const ccEmail = computed(() => {

app/javascript/dashboard/components-next/message/bubbles/Form.vue

@@ -4,11 +4,9 @@ import BaseBubble from './Base.vue';
 import { useI18n } from 'vue-i18n';
 import { CONTENT_TYPES } from '../constants.js';
 import { useMessageContext } from '../provider.js';
-import { useInbox } from 'dashboard/composables/useInbox';
 
 const { content, contentAttributes, contentType } = useMessageContext();
 const { t } = useI18n();
-const { isAWebWidgetInbox } = useInbox();
 
 const formValues = computed(() => {
   if (contentType.value === CONTENT_TYPES.FORM) {
@@ -58,7 +56,7 @@ const formValues = computed(() => {
         <dd>{{ item.title }}</dd>
       </template>
     </dl>
-    <div v-else-if="isAWebWidgetInbox" class="my-2 font-medium">
+    <div v-else class="my-2 font-medium">
       {{ t('CONVERSATION.NO_RESPONSE') }}
     </div>
   </BaseBubble>

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -109,58 +109,49 @@ const downloadAudio = async () => {
   </audio>
   <div
     v-bind="$attrs"
-    class="rounded-xl w-full gap-2 p-1.5 bg-n-alpha-white flex flex-col items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
+    class="rounded-xl w-full gap-1 p-1.5 bg-n-alpha-white flex items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
   >
-    <div class="flex gap-1 w-full flex-1 items-center justify-start">
+    <button class="p-0 border-0 size-8" @click="playOrPause">
-      <button class="p-0 border-0 size-8" @click="playOrPause">
+      <Icon
-        <Icon
+        v-if="isPlaying"
-          v-if="isPlaying"
+        class="size-8"
-          class="size-8"
+        icon="i-teenyicons-pause-small-solid"
-          icon="i-teenyicons-pause-small-solid"
+      />
-        />
+      <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
-        <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
+    </button>
-      </button>
+    <div class="tabular-nums text-xs">
-      <div class="tabular-nums text-xs">
+      {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
-        {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
-      </div>
-      <div class="flex-1 items-center flex px-2">
-        <input
-          type="range"
-          min="0"
-          :max="duration"
-          :value="currentTime"
-          class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
-          @input="seek"
-        />
-      </div>
-      <button
-        class="border-0 w-10 h-6 grid place-content-center bg-n-alpha-2 hover:bg-alpha-3 rounded-2xl"
-        @click="changePlaybackSpeed"
-      >
-        <span class="text-xs text-n-slate-11 font-medium">
-          {{ playbackSpeedLabel }}
-        </span>
-      </button>
-      <button
-        class="p-0 border-0 size-8 grid place-content-center"
-        @click="toggleMute"
-      >
-        <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
-        <Icon v-else class="size-4" icon="i-lucide-volume-2" />
-      </button>
-      <button
-        class="p-0 border-0 size-8 grid place-content-center"
-        @click="downloadAudio"
-      >
-        <Icon class="size-4" icon="i-lucide-download" />
-      </button>
     </div>
-
+    <div class="flex-1 items-center flex px-2">
-    <div
+      <input
-      v-if="attachment.transcribedText"
+        type="range"
-      class="text-n-slate-12 p-3 text-sm bg-n-alpha-1 rounded-lg w-full break-words"
+        min="0"
+        :max="duration"
+        :value="currentTime"
+        class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
+        @input="seek"
+      />
+    </div>
+    <button
+      class="border-0 w-10 h-6 grid place-content-center bg-n-alpha-2 hover:bg-alpha-3 rounded-2xl"
+      @click="changePlaybackSpeed"
     >
-      {{ attachment.transcribedText }}
+      <span class="text-xs text-n-slate-11 font-medium">
-    </div>
+        {{ playbackSpeedLabel }}
+      </span>
+    </button>
+    <button
+      class="p-0 border-0 size-8 grid place-content-center"
+      @click="toggleMute"
+    >
+      <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
+      <Icon v-else class="size-4" icon="i-lucide-volume-2" />
+    </button>
+    <button
+      class="p-0 border-0 size-8 grid place-content-center"
+      @click="downloadAudio"
+    >
+      <Icon class="size-4" icon="i-lucide-download" />
+    </button>
   </div>
 </template>

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

@@ -87,7 +87,7 @@ const newReportRoutes = () => [
   {
     name: 'Reports Label',
     label: t('SIDEBAR.REPORTS_LABEL'),
-    to: accountScopedRoute('label_reports_index'),
+    to: accountScopedRoute('label_reports'),
   },
   {
     name: 'Reports Inbox',
@@ -235,12 +235,6 @@ const menuItems = computed(() => {
           ),
           activeOn: ['contacts_dashboard_index', 'contacts_edit'],
         },
-        {
-          name: 'Active',
-          label: t('SIDEBAR.ACTIVE'),
-          to: accountScopedRoute('contacts_dashboard_active'),
-          activeOn: ['contacts_dashboard_active'],
-        },
         {
           name: 'Segments',
           icon: 'i-lucide-group',
@@ -483,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">

app/javascript/dashboard/components/ChatList.vue

@@ -8,6 +8,7 @@ import {
   computed,
   watch,
   onMounted,
+  onUnmounted,
   defineEmits,
 } from 'vue';
 import { useStore } from 'vuex';
@@ -22,7 +23,6 @@ import {
 // https://tanstack.com/virtual/latest/docs/framework/vue/examples/variable
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import ChatListHeader from './ChatListHeader.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ConversationFilter from 'next/filter/ConversationFilter.vue';
 import SaveCustomView from 'next/filter/SaveCustomView.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
@@ -44,7 +44,7 @@ import {
   useSnakeCase,
 } from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
-import { useEventListener } from '@vueuse/core';
+import { useEventListener, useScrollLock } from '@vueuse/core';
 
 import { emitter } from 'shared/helpers/mitt';
 
@@ -83,13 +83,16 @@ const emit = defineEmits(['conversationLoad']);
 const { uiSettings } = useUISettings();
 const { t } = useI18n();
 const router = useRouter();
-const route = useRoute();
 const store = useStore();
 
 const conversationListRef = ref(null);
 const conversationDynamicScroller = ref(null);
-
+const conversationListScrollableElement = computed(
-provide('contextMenuElementTarget', conversationDynamicScroller);
+  () => conversationDynamicScroller.value?.$el
+);
+const conversationListScrollLock = useScrollLock(
+  conversationListScrollableElement
+);
 
 const activeAssigneeTab = ref(wootConstants.ASSIGNEE_TYPE.ME);
 const activeStatus = ref(wootConstants.STATUS_TYPE.OPEN);
@@ -648,30 +651,6 @@ function openLastItemAfterDeleteInFolder() {
   }
 }
 
-function redirectToConversationList() {
-  const {
-    params: { accountId, inbox_id: inboxId, label, teamId },
-    name,
-  } = route;
-
-  let conversationType = '';
-  if (isOnMentionsView({ route: { name } })) {
-    conversationType = 'mention';
-  } else if (isOnUnattendedView({ route: { name } })) {
-    conversationType = 'unattended';
-  }
-  router.push(
-    conversationListPageURL({
-      accountId,
-      conversationType: conversationType,
-      customViewId: props.foldersId,
-      inboxId,
-      label,
-      teamId,
-    })
-  );
-}
-
 async function assignPriority(priority, conversationId = null) {
   store.dispatch('setCurrentChatPriority', {
     priority,
@@ -696,7 +675,26 @@ async function markAsUnread(conversationId) {
     await store.dispatch('markMessagesUnread', {
       id: conversationId,
     });
-    redirectToConversationList();
+    const {
+      params: { accountId, inbox_id: inboxId, label, teamId },
+      name,
+    } = useRoute();
+    let conversationType = '';
+    if (isOnMentionsView({ route: { name } })) {
+      conversationType = 'mention';
+    } else if (isOnUnattendedView({ route: { name } })) {
+      conversationType = 'unattended';
+    }
+    router.push(
+      conversationListPageURL({
+        accountId,
+        conversationType: conversationType,
+        customViewId: props.foldersId,
+        inboxId,
+        label,
+        teamId,
+      })
+    );
   } catch (error) {
     // Ignore error
   }
@@ -710,7 +708,6 @@ async function markAsRead(conversationId) {
     // Ignore error
   }
 }
-
 async function onAssignTeam(team, conversationId = null) {
   try {
     await store.dispatch('assignTeam', {
@@ -749,6 +746,7 @@ function allSelectedConversationsStatus(status) {
 
 function onContextMenuToggle(state) {
   isContextMenuOpen.value = state;
+  conversationListScrollLock.value = state;
 }
 
 function toggleSelectAll(check) {
@@ -772,25 +770,9 @@ onMounted(() => {
   }
 });
 
-const deleteConversationDialogRef = ref(null);
+onUnmounted(() => {
-const selectedConversationId = ref(null);
+  conversationListScrollLock.value = false;
-
+});
-async function deleteConversation() {
-  try {
-    await store.dispatch('deleteConversation', selectedConversationId.value);
-    redirectToConversationList();
-    selectedConversationId.value = null;
-    deleteConversationDialogRef.value.close();
-    useAlert(t('CONVERSATION.SUCCESS_DELETE_CONVERSATION'));
-  } catch (error) {
-    useAlert(t('CONVERSATION.FAIL_DELETE_CONVERSATION'));
-  }
-}
-
-const handleDelete = conversationId => {
-  selectedConversationId.value = conversationId;
-  deleteConversationDialogRef.value.open();
-};
 
 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
@@ -803,7 +785,6 @@ provide('markAsUnread', markAsUnread);
 provide('markAsRead', markAsRead);
 provide('assignPriority', assignPriority);
 provide('isConversationSelected', isConversationSelected);
-provide('deleteConversation', handleDelete);
 
 watch(activeTeam, () => resetAndFetchData());
 
@@ -843,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-[21rem] 2xl:w-[26rem]',
     ]"
   >
     <slot />
@@ -853,8 +834,6 @@ watch(conversationFilters, (newVal, oldVal) => {
       :has-active-folders="hasActiveFolders"
       :active-status="activeStatus"
       :is-on-expanded-layout="isOnExpandedLayout"
-      :conversation-stats="conversationStats"
-      :is-list-loading="chatListLoading && !conversationList.length"
       @add-folders="onClickOpenAddFoldersModal"
       @delete-folders="onClickOpenDeleteFoldersModal"
       @filters-modal="onToggleAdvanceFiltersModal"
@@ -969,19 +948,6 @@ watch(conversationFilters, (newVal, oldVal) => {
         </template>
       </DynamicScroller>
     </div>
-    <Dialog
-      ref="deleteConversationDialogRef"
-      type="alert"
-      :title="
-        $t('CONVERSATION.DELETE_CONVERSATION.TITLE', {
-          conversationId: selectedConversationId,
-        })
-      "
-      :description="$t('CONVERSATION.DELETE_CONVERSATION.DESCRIPTION')"
-      :confirm-button-label="$t('CONVERSATION.DELETE_CONVERSATION.CONFIRM')"
-      @confirm="deleteConversation"
-      @close="selectedConversationId = null"
-    />
     <TeleportWithDirection
       v-if="showAdvancedFilters"
       to="#conversationFilterTeleportTarget"

app/javascript/dashboard/components/ChatListHeader.vue

@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useMapGetter } from 'dashboard/composables/store.js';
-import { formatNumber } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
@@ -11,13 +10,26 @@ import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchL
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
-  pageTitle: { type: String, required: true },
+  pageTitle: {
-  hasAppliedFilters: { type: Boolean, required: true },
+    type: String,
-  hasActiveFolders: { type: Boolean, required: true },
+    required: true,
-  activeStatus: { type: String, required: true },
+  },
-  isOnExpandedLayout: { type: Boolean, required: true },
+  hasAppliedFilters: {
-  conversationStats: { type: Object, required: true },
+    type: Boolean,
-  isListLoading: { type: Boolean, required: true },
+    required: true,
+  },
+  hasActiveFolders: {
+    type: Boolean,
+    required: true,
+  },
+  activeStatus: {
+    type: String,
+    required: true,
+  },
+  isOnExpandedLayout: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 const emit = defineEmits([
@@ -50,9 +62,6 @@ const showV4View = computed(() => {
   );
 });
 
-const allCount = computed(() => props.conversationStats?.allCount || 0);
-const formattedAllCount = computed(() => formatNumber(allCount.value));
-
 const toggleConversationLayout = () => {
   const { LAYOUT_TYPES } = wootConstants;
   const {
@@ -71,7 +80,7 @@ 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-3 h-12 pt-3 pb-3"
     :class="{
       'border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
     }"
@@ -83,15 +92,6 @@ const toggleConversationLayout = () => {
       >
         {{ pageTitle }}
       </h1>
-      <span
-        v-if="
-          allCount > 0 && hasAppliedFiltersOrActiveFolders && !isListLoading
-        "
-        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
-        :title="allCount"
-      >
-        {{ formattedAllCount }}
-      </span>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
         class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"

app/javascript/dashboard/components/ConversationItem.vue

@@ -16,7 +16,6 @@ export default {
     'markAsRead',
     'assignPriority',
     'isConversationSelected',
-    'deleteConversation',
   ],
   props: {
     source: {
@@ -68,6 +67,5 @@ export default {
     @mark-as-unread="markAsUnread"
     @mark-as-read="markAsRead"
     @assign-priority="assignPriority"
-    @delete-conversation="deleteConversation"
   />
 </template>

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

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -134,7 +134,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
 <template>
   <div class="relative flex items-center justify-end resolve-actions">
     <div
-      class="rounded-lg shadow outline-1 outline flex-shrink-0"
+      class="rounded-lg shadow outline-1 outline"
       :class="!showOpenButton ? 'outline-n-container' : 'outline-transparent'"
     >
       <Button
@@ -178,7 +178,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 start-0 xl:start-auto xl:end-0 max-w-[12.5rem] min-w-[9.75rem]"
+      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 ltr:right-0 rtl:left-0 max-w-[12.5rem] min-w-[9.75rem]"
     >
       <WootDropdownMenu class="mb-0">
         <WootDropdownItem v-if="!isPending">

app/javascript/dashboard/components/copilot/CopilotContainer.vue

@@ -4,35 +4,21 @@ import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-defineProps({
-  conversationInboxType: {
-    type: String,
-    required: true,
-  },
-});
 
 const store = useStore();
 const currentUser = useMapGetter('getCurrentUser');
 const assistants = useMapGetter('captainAssistants/getRecords');
-const uiFlags = useMapGetter('captainAssistants/getUIFlags');
 const inboxAssistant = useMapGetter('getCopilotAssistant');
+const { uiSettings, updateUISettings } = useUISettings();
 const currentChat = useMapGetter('getSelectedChat');
 
-const selectedCopilotThreadId = ref(null);
+const getUIState = useMapGetter('uiState/getUIState');
-const messages = computed(() =>
+const isSidebarOpen = computed(() => getUIState.value('isCopilotSidebarOpen'));
-  store.getters['copilotMessages/getMessagesByThreadId'](
-    selectedCopilotThreadId.value
-  )
-);
-
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
 
+const messages = ref([]);
+const isCaptainTyping = ref(false);
 const selectedAssistantId = ref(null);
-const { uiSettings, updateUISettings } = useUISettings();
+const copilotConnector = ref(null);
 
 const activeAssistant = computed(() => {
   const preferredId = uiSettings.value.preferred_captain_assistant_id;
@@ -62,57 +48,89 @@ const setAssistant = async assistant => {
   });
 };
 
-const shouldShowCopilotPanel = computed(() => {
-  const isCaptainEnabled = isFeatureEnabledonAccount.value(
-    currentAccountId.value,
-    FEATURE_FLAGS.CAPTAIN
-  );
-  const { is_copilot_panel_open: isCopilotPanelOpen } = uiSettings.value;
-  return isCaptainEnabled && isCopilotPanelOpen && !uiFlags.value.fetchingList;
-});
-
 const handleReset = () => {
-  selectedCopilotThreadId.value = null;
+  messages.value = [];
 };
 
-const sendMessage = async message => {
+const sendMessage = message => {
-  if (selectedCopilotThreadId.value) {
+  // Ensure WebSocket is connected before sending
-    await store.dispatch('copilotMessages/create', {
+  if (!copilotConnector.value || !isSidebarOpen.value) {
-      assistant_id: activeAssistant.value.id,
+    return;
-      conversation_id: currentChat.value?.id,
-      threadId: selectedCopilotThreadId.value,
-      message,
-    });
-  } else {
-    const response = await store.dispatch('copilotThreads/create', {
-      assistant_id: activeAssistant.value.id,
-      conversation_id: currentChat.value?.id,
-      message,
-    });
-    selectedCopilotThreadId.value = response.id;
   }
+
+  // Add user message
+  messages.value.push({
+    id: messages.value.length + 1,
+    role: 'user',
+    content: message,
+  });
+  isCaptainTyping.value = true;
+
+  copilotConnector.value.sendMessage({
+    assistantId: activeAssistant.value.id,
+    conversationId: currentChat.value?.id,
+    previousHistory: messages.value
+      .filter(m => m.role !== 'assistant_thinking')
+      .map(m => ({
+        role: m.role,
+        content: m.content,
+      }))
+      .slice(0, -1),
+    message,
+  });
 };
 
 onMounted(() => {
   store.dispatch('captainAssistants/get');
 });
+
+// const onCopilotResponse = data => {
+//   if (data.type === 'final_response') {
+//     messages.value.push({
+//       id: new Date().getTime(),
+//       role: 'assistant',
+//       content: data.response.response,
+//     });
+//     isCaptainTyping.value = false;
+//   } else if (data.type === 'ui_event') {
+//     if (data.event === 'ui:linear_ticket_create') {
+//       emitter.emit('ui:linear_ticket_create');
+//       setTimeout(() => {
+//         emitter.emit('ui:linear_ticket_create_data', data.response);
+//       }, 100);
+//     }
+//   } else {
+//     messages.value.push({
+//       id: new Date().getTime(),
+//       role: 'assistant_thinking',
+//       content: data.response.response,
+//       reasoning: data.response.reasoning,
+//     });
+//   }
+// };
+
+const handleClose = () => {
+  store.dispatch('uiState/set', { isCopilotSidebarOpen: false });
+};
 </script>
 
 <template>
   <div
-    v-if="shouldShowCopilotPanel"
+    v-if="isSidebarOpen"
-    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="border-l border-n-weak w-[20rem] min-w-[20rem]"
   >
     <Copilot
       :messages="messages"
       :support-agent="currentUser"
+      :is-captain-typing="isCaptainTyping"
       :conversation-inbox-type="conversationInboxType"
       :assistants="assistants"
       :active-assistant="activeAssistant"
       @set-assistant="setAssistant"
       @send-message="sendMessage"
       @reset="handleReset"
+      @close="handleClose"
     />
   </div>
-  <template v-else />
+  <div v-else class="hidden" />
 </template>

app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js

@@ -9,7 +9,6 @@ const contacts = accountId => ({
     'contacts_edit',
     'contacts_edit_segment',
     'contacts_edit_label',
-    'contacts_dashboard_active',
   ],
   menuItems: [
     {
@@ -19,13 +18,6 @@ const contacts = accountId => ({
       toState: frontendURL(`accounts/${accountId}/contacts?page=1`),
       toStateName: 'contacts_dashboard_index',
     },
-    {
-      icon: 'visitor-contacts',
-      label: 'ACTIVE',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/contacts/active`),
-      toStateName: 'contacts_dashboard_active',
-    },
   ],
 });
 

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

@@ -1,13 +1,6 @@
 <script setup>
-import {
+import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
-  computed,
+import { useWindowSize, useElementBounding } from '@vueuse/core';
-  onMounted,
-  nextTick,
-  onUnmounted,
-  useTemplateRef,
-  inject,
-} from 'vue';
-import { useWindowSize, useElementBounding, useScrollLock } 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 isOverflowingRight = left + menuW > windowW;
-  const isOverflowingBottom = top + menuH > windowH - PADDING;
+  const isOverflowingBottom = top + menuH > windowH;
+
   // Adjust position if overflowing
-  if (isOverflowingRight) left = windowW - menuW - PADDING;
+  if (isOverflowingRight) left = windowW - menuW;
-  if (isOverflowingBottom) top = windowH - menuH - PADDING;
+  if (isOverflowingBottom) top = windowH - menuH;
+
   return {
-    left: Math.max(PADDING, left),
+    left: Math.max(0, left),
-    top: Math.max(PADDING, top),
+    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

@@ -54,7 +54,6 @@ useKeyboardEvents(keyboardEvents);
     <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/DashboardApp/Frame.vue

@@ -83,7 +83,7 @@ export default {
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
-  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
+  <div v-if="hasOpenedAtleastOnce" class="flex-1">
     <div
       v-for="(configItem, index) in config"
       :key="index"
@@ -115,6 +115,7 @@ export default {
 .dashboard-app--list iframe {
   border: 0;
 }
+
 .dashboard-app_loading-container {
   display: flex;
   align-items: center;

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

@@ -12,6 +12,7 @@ export default {
     EmptyState,
     MessagesView,
   },
+
   props: {
     inboxId: {
       type: [Number, String],
@@ -22,10 +23,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    isContactPanelOpen: {
-      type: Boolean,
-      default: true,
-    },
     isOnExpandedLayout: {
       type: Boolean,
       default: true,
@@ -53,9 +50,6 @@ export default {
         })),
       ];
     },
-    showContactPanel() {
-      return this.isContactPanelOpen && this.currentChat.id;
-    },
   },
   watch: {
     'currentChat.inbox_id': {
@@ -99,12 +93,13 @@ export default {
     <ConversationHeader
       v-if="currentChat.id"
       :chat="currentChat"
+      :is-inbox-view="isInboxView"
       :show-back-button="isOnExpandedLayout && !isInboxView"
     />
     <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 border-t border-t-n-background bg-n-background dashboard-app--tabs"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -115,7 +110,7 @@ export default {
         :show-badge="false"
       />
     </woot-tabs>
-    <div v-show="!activeIndex" class="flex h-full min-h-0 m-0">
+    <div v-show="!activeIndex" class="flex-1 h-full min-h-0 m-0">
       <MessagesView
         v-if="currentChat.id"
         :inbox-id="inboxId"

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

@@ -78,7 +78,6 @@ export default {
     'markAsRead',
     'assignPriority',
     'updateConversationStatus',
-    'deleteConversation',
   ],
   data() {
     return {
@@ -238,10 +237,6 @@ export default {
       this.$emit('assignPriority', priority, this.chat.id);
       this.closeContextMenu();
     },
-    async deleteConversation() {
-      this.$emit('deleteConversation', this.chat.id);
-      this.closeContextMenu();
-    },
   },
 };
 </script>
@@ -368,7 +363,6 @@ export default {
         @mark-as-unread="markAsUnread"
         @mark-as-read="markAsRead"
         @assign-priority="assignPriority"
-        @delete-conversation="deleteConversation"
       />
     </ContextMenu>
   </div>

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

@@ -1,9 +1,7 @@
-<script setup>
+<script>
-import { computed, ref } from 'vue';
+import { mapGetters } from 'vuex';
-import { useRoute } from 'vue-router';
-import { useStore } from 'vuex';
-import { useElementSize } from '@vueuse/core';
 import BackButton from '../BackButton.vue';
+import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Thumbnail from '../Thumbnail.vue';
@@ -11,140 +9,173 @@ import SLACardLabel from './components/SLACardLabel.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
-import { useInbox } from 'dashboard/composables/useInbox';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { useI18n } from 'vue-i18n';
+import Linear from './linear/index.vue';
 
-const props = defineProps({
+export default {
-  chat: {
+  components: {
-    type: Object,
+    BackButton,
-    default: () => ({}),
+    InboxName,
+    MoreActions,
+    Thumbnail,
+    SLACardLabel,
+    Linear,
   },
-  showBackButton: {
+  mixins: [inboxMixin],
-    type: Boolean,
+  props: {
-    default: false,
+    chat: {
+      type: Object,
+      default: () => {},
+    },
+    showBackButton: {
+      type: Boolean,
+      default: false,
+    },
+    isInboxView: {
+      type: Boolean,
+      default: false,
+    },
   },
-});
+  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');
+    },
 
-const { t } = useI18n();
+    inbox() {
-const store = useStore();
+      const { inbox_id: inboxId } = this.chat;
-const route = useRoute();
+      return this.$store.getters['inboxes/getInbox'](inboxId);
-const conversationHeader = ref(null);
+    },
-const { width } = useElementSize(conversationHeader);
+    hasMultipleInboxes() {
-const { isAWebWidgetInbox } = useInbox();
+      return this.$store.getters['inboxes/getInboxes'].length > 1;
-
+    },
-const currentChat = computed(() => store.getters.getSelectedChat);
+    hasSlaPolicyId() {
-const accountId = computed(() => store.getters.getCurrentAccountId);
+      return this.chat?.sla_policy_id;
-
+    },
-const chatMetadata = computed(() => props.chat.meta);
+    isLinearIntegrationEnabled() {
-
+      return this.appIntegrations.find(
-const backButtonUrl = computed(() => {
+        integration => integration.id === 'linear' && !!integration.hooks.length
-  const {
+      );
-    params: { inbox_id: inboxId, label, teamId },
+    },
-    name,
+    isLinearFeatureEnabled() {
-  } = route;
+      return this.isFeatureEnabledonAccount(
-  return conversationListPageURL({
+        this.accountId,
-    accountId,
+        FEATURE_FLAGS.LINEAR
-    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);
 </script>
 
 <template>
   <div
-    ref="conversationHeader"
+    class="flex flex-col items-center justify-between px-3 border-b bg-n-background border-n-weak md:flex-row h-12"
-    class="flex flex-col gap-3 items-center justify-between flex-1 w-full min-w-0 xl:flex-row px-3 py-2 border-b bg-n-background border-n-weak h-24 xl:h-12"
   >
     <div
-      class="flex items-center justify-start w-full xl:w-auto max-w-full min-w-0 xl:flex-1"
+      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
+      :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
     >
-      <BackButton
+      <div class="flex items-center justify-start max-w-full min-w-0 w-fit">
-        v-if="showBackButton"
+        <BackButton
-        :back-url="backButtonUrl"
+          v-if="showBackButton"
-        class="ltr:mr-2 rtl:ml-2"
+          :back-url="backButtonUrl"
-      />
+          class="ltr:mr-2 rtl:ml-2"
-      <Thumbnail
+        />
-        :src="currentContact.thumbnail"
+        <Thumbnail
-        :username="currentContact.name"
+          :src="currentContact.thumbnail"
-        :status="currentContact.availability_status"
+          :badge="inboxBadge"
-        size="32px"
+          :username="currentContact.name"
-        class="flex-shrink-0"
+          :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"
-      >
-        <div class="flex flex-row items-center max-w-full gap-1 p-0 m-0">
-          <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] flex-shrink-0"
-            icon="warning"
-          />
-        </div>
-
         <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" />
+          <div class="flex items-center max-w-full gap-1 p-0 m-0 w-fit">
-          <span v-if="isSnoozed" class="font-medium text-n-amber-10">
+            <span
-            {{ snoozedDisplayText }}
+              class="text-sm font-medium truncate leading-tight text-n-slate-12"
-          </span>
+            >
+              {{ currentContact.name }}
+            </span>
+
+            <fluent-icon
+              v-if="!isHMACVerified"
+              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
+              size="14"
+              class="text-n-amber-10 my-0 mx-0 min-w-[14px]"
+              icon="warning"
+            />
+          </div>
+
+          <div
+            class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
+          >
+            <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />
+            <span v-if="isSnoozed" class="font-medium text-n-amber-10">
+              {{ snoozedDisplayText }}
+            </span>
+          </div>
         </div>
       </div>
-    </div>
+      <div
-    <div
+        class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
-      class="flex flex-row items-center justify-start xl:justify-end flex-shrink-0 gap-2 w-full xl:w-auto header-actions-wrap"
+      >
-    >
+        <SLACardLabel v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
-      <SLACardLabel
+        <Linear
-        v-if="hasSlaPolicyId"
+          v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
-        :chat="chat"
+          :conversation-id="currentChat.id"
-        show-extended-info
+        />
-        :parent-width="width"
+        <MoreActions :conversation-id="currentChat.id" />
-        class="hidden md:flex"
+      </div>
-      />
-      <MoreActions :conversation-id="currentChat.id" />
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.conversation--header--actions {
+  ::v-deep .inbox--name {
+    @apply m-0;
+  }
+}
+</style>

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

@@ -1,37 +1,58 @@
 <script setup>
-import { computed } from 'vue';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
-import { useUISettings } from 'dashboard/composables/useUISettings';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { computed } from 'vue';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
 
-defineProps({
+const props = defineProps({
   currentChat: {
     required: true,
     type: Object,
   },
 });
 
-const { uiSettings } = useUISettings();
+const getUIState = useMapGetter('uiState/getUIState');
+const isCopilotSidebarOpen = computed(() =>
+  getUIState.value('isCopilotSidebarOpen')
+);
+const isConversationSidebarOpen = computed(() =>
+  getUIState.value('isConversationSidebarOpen')
+);
 
-const activeTab = computed(() => {
+const showConversationSidebar = computed(
-  const { is_contact_sidebar_open: isContactSidebarOpen } = uiSettings.value;
+  () =>
+    props.currentChat.id &&
+    !isCopilotSidebarOpen.value &&
+    isConversationSidebarOpen.value
+);
 
-  if (isContactSidebarOpen) {
+const store = useStore();
-    return 0;
+const closeConversationPanel = () => {
-  }
+  store.dispatch('uiState/set', { isConversationSidebarOpen: false });
-  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"
+    v-if="showConversationSidebar"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[20rem] min-w-[20rem] flex flex-col"
   >
-    <div class="flex flex-1 overflow-auto">
+    <div class="flex flex-1 flex-col overflow-auto">
+      <div
+        class="flex items-center justify-between gap-2 px-4 py-2 border-b border-n-weak h-12"
+      >
+        <span class="font-medium text-sm text-n-slate-12">
+          {{ $t('CONVERSATION.SIDEBAR.ACTIONS') }}
+        </span>
+        <div class="flex items-center">
+          <Button icon="i-lucide-x" ghost sm @click="closeConversationPanel" />
+        </div>
+      </div>
       <ContactPanel
-        v-show="activeTab === 0"
+        :conversation-id="props.currentChat.id"
-        :conversation-id="currentChat.id"
+        :inbox-id="props.currentChat.inbox_id"
-        :inbox-id="currentChat.inbox_id"
       />
     </div>
   </div>
+  <div v-else class="hidden" />
 </template>

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

@@ -185,17 +185,8 @@ export default {
     contextMenuEnabledOptions() {
       return {
         copy: this.hasText,
-        delete:
+        delete: this.hasText || this.hasAttachments,
-          (this.hasText || this.hasAttachments) &&
+        cannedResponse: this.isOutgoing && this.hasText,
-          !this.isMessageDeleted &&
-          !this.isFailed,
-        cannedResponse:
-          this.isOutgoing && this.hasText && !this.isMessageDeleted,
-        copyLink: !this.isFailed || !this.isProcessing,
-        translate:
-          (!this.isFailed || !this.isProcessing) &&
-          !this.isMessageDeleted &&
-          this.hasText,
         replyTo: !this.data.private && this.inboxSupportsReplyTo.outgoing,
       };
     },
@@ -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';
@@ -49,7 +49,6 @@ export default {
   mixins: [inboxMixin],
   setup() {
     const isPopOutReplyBox = ref(false);
-    const conversationPanelRef = ref(null);
     const { isEnterprise } = useConfig();
 
     const closePopOutReplyBox = () => {
@@ -85,8 +84,6 @@ export default {
       FEATURE_FLAGS.CHATWOOT_V4
     );
 
-    provide('contextMenuElementTarget', conversationPanelRef);
-
     return {
       isEnterprise,
       isPopOutReplyBox,
@@ -97,7 +94,6 @@ export default {
       fetchIntegrationsIfRequired,
       fetchLabelSuggestions,
       showNextBubbles,
-      conversationPanelRef,
     };
   },
   data() {
@@ -507,9 +503,9 @@ export default {
       class="mx-2 mt-2 overflow-hidden rounded-lg"
       :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
     />
+
     <NextMessageList
       v-if="showNextBubbles"
-      ref="conversationPanelRef"
       class="conversation-panel"
       :current-user-id="currentUserId"
       :first-unread-id="unReadMessages[0]?.id"
@@ -541,7 +537,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>
+<script>
-import { computed, onUnmounted } from 'vue';
+import { mapGetters } from 'vuex';
-import { useToggle } from '@vueuse/core';
-import { useStore } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
 import { emitter } from 'shared/helpers/mitt';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
 import ButtonV4 from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 
 import {
   CMD_MUTE_CONVERSATION,
@@ -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
+export default {
-const store = useStore();
+  components: {
-const { t } = useI18n();
+    EmailTranscriptModal,
-
+    ResolveAction,
-const [showEmailActionsModal, toggleEmailModal] = useToggle(false);
+    ButtonV4,
-const [showActionsDropdown, toggleDropdown] = useToggle(false);
+  },
-
+  data() {
-const currentChat = computed(() => store.getters.getSelectedChat);
+    return {
-
+      showEmailActionsModal: false,
-const actionMenuItems = computed(() => {
+    };
-  const items = [];
+  },
-
+  computed: {
-  if (!currentChat.value.muted) {
+    ...mapGetters({ currentChat: 'getSelectedChat' }),
-    items.push({
+  },
-      icon: 'i-lucide-volume-off',
+  mounted() {
-      label: t('CONTACT_PANEL.MUTE_CONTACT'),
+    emitter.on(CMD_MUTE_CONVERSATION, this.mute);
-      action: 'mute',
+    emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
-      value: 'mute',
+    emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
-    });
+  },
-  } else {
+  unmounted() {
-    items.push({
+    emitter.off(CMD_MUTE_CONVERSATION, this.mute);
-      icon: 'i-lucide-volume-1',
+    emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
-      label: t('CONTACT_PANEL.UNMUTE_CONTACT'),
+    emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
-      action: 'unmute',
+  },
-      value: 'unmute',
+  methods: {
-    });
+    mute() {
-  }
+      this.$store.dispatch('muteConversation', this.currentChat.id);
-
+      useAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
-  items.push({
+    },
-    icon: 'i-lucide-share',
+    unmute() {
-    label: t('CONTACT_PANEL.SEND_TRANSCRIPT'),
+      this.$store.dispatch('unmuteConversation', this.currentChat.id);
-    action: 'send_transcript',
+      useAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
-    value: 'send_transcript',
+    },
-  });
+    toggleEmailActionsModal() {
-
+      this.showEmailActionsModal = !this.showEmailActionsModal;
-  return items;
+    },
-});
+  },
-
-const handleActionClick = ({ action }) => {
-  toggleDropdown(false);
-
-  if (action === 'mute') {
-    store.dispatch('muteConversation', currentChat.value.id);
-    useAlert(t('CONTACT_PANEL.MUTED_SUCCESS'));
-  } else if (action === 'unmute') {
-    store.dispatch('unmuteConversation', currentChat.value.id);
-    useAlert(t('CONTACT_PANEL.UNMUTED_SUCCESS'));
-  } else if (action === 'send_transcript') {
-    toggleEmailModal();
-  }
 };
-
-// These functions are needed for the event listeners
-const mute = () => {
-  store.dispatch('muteConversation', currentChat.value.id);
-  useAlert(t('CONTACT_PANEL.MUTED_SUCCESS'));
-};
-
-const unmute = () => {
-  store.dispatch('unmuteConversation', currentChat.value.id);
-  useAlert(t('CONTACT_PANEL.UNMUTED_SUCCESS'));
-};
-
-emitter.on(CMD_MUTE_CONVERSATION, mute);
-emitter.on(CMD_UNMUTE_CONVERSATION, unmute);
-emitter.on(CMD_SEND_TRANSCRIPT, toggleEmailModal);
-
-onUnmounted(() => {
-  emitter.off(CMD_MUTE_CONVERSATION, mute);
-  emitter.off(CMD_UNMUTE_CONVERSATION, unmute);
-  emitter.off(CMD_SEND_TRANSCRIPT, toggleEmailModal);
-});
 </script>
 
 <template>
   <div class="relative flex items-center gap-2 actions--container">
+    <ButtonV4
+      v-if="!currentChat.muted"
+      v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-volume-off"
+      @click="mute"
+    />
+    <ButtonV4
+      v-else
+      v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-volume-1"
+      @click="unmute"
+    />
+    <ButtonV4
+      v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-share"
+      @click="toggleEmailActionsModal"
+    />
     <ResolveAction
       :conversation-id="currentChat.id"
       :status="currentChat.status"
     />
-    <div
-      v-on-clickaway="() => toggleDropdown(false)"
-      class="relative flex items-center group"
-    >
-      <ButtonV4
-        v-tooltip="$t('CONVERSATION.HEADER.MORE_ACTIONS')"
-        size="sm"
-        variant="ghost"
-        color="slate"
-        icon="i-lucide-more-vertical"
-        class="rounded-md group-hover:bg-n-alpha-2"
-        @click="toggleDropdown()"
-      />
-      <DropdownMenu
-        v-if="showActionsDropdown"
-        :menu-items="actionMenuItems"
-        class="mt-1 ltr:right-0 rtl:left-0 top-full"
-        @action="handleActionClick"
-      />
-    </div>
     <EmailTranscriptModal
       v-if="showEmailActionsModal"
       :show="showEmailActionsModal"
       :current-chat="currentChat"
-      @cancel="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>
+<script>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { evaluateSLAStatus } from '@chatwoot/utils';
 import SLAPopoverCard from './SLAPopoverCard.vue';
 
-const props = defineProps({
-  chat: {
-    type: Object,
-    default: () => ({}),
-  },
-  showExtendedInfo: {
-    type: Boolean,
-    default: false,
-  },
-  parentWidth: {
-    type: Number,
-    default: 1000,
-  },
-});
-
 const REFRESH_INTERVAL = 60000;
-const { t } = useI18n();
 
-const timer = ref(null);
+export default {
-const slaStatus = ref({
+  components: {
-  threshold: null,
+    SLAPopoverCard,
-  isSlaMissed: false,
+  },
-  type: null,
+  props: {
-  icon: null,
+    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);
+      return this.$t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
-const slaEvents = computed(() => props.chat?.sla_events);
+        status: this.$t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
-const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
+      });
-const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
+    },
-const slaTextStyles = computed(() =>
+    showSlaPopoverCard() {
-  isSlaMissed.value ? 'text-n-ruby-11' : 'text-n-amber-11'
+      return (
-);
+        this.showExtendedInfo && this.showSlaPopover && this.slaEvents.length
-
+      );
-const slaStatusText = computed(() => {
+    },
-  const upperCaseType = slaStatus.value?.type?.toUpperCase(); // FRT, NRT, or RT
+  },
-  const statusKey = isSlaMissed.value ? 'MISSED' : 'DUE';
+  watch: {
-
+    chat() {
-  return t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
+      this.updateSlaStatus();
-    status: t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
+    },
-  });
+  },
-});
+  mounted() {
-
+    this.updateSlaStatus();
-const showSlaPopoverCard = computed(
+    this.createTimer();
-  () => props.showExtendedInfo && slaEvents.value?.length > 0
+  },
-);
+  unmounted() {
-
+    if (this.timer) {
-const groupClass = computed(() => {
+      clearTimeout(this.timer);
-  return props.showExtendedInfo
+    }
-    ? 'h-[26px] rounded-lg bg-n-alpha-1'
+  },
-    : 'rounded h-5  border border-n-strong';
+  methods: {
-});
+    createTimer() {
-
+      this.timer = setTimeout(() => {
-const updateSlaStatus = () => {
+        this.updateSlaStatus();
-  slaStatus.value = evaluateSLAStatus({
+        this.createTimer();
-    appliedSla: appliedSLA.value,
+      }, REFRESH_INTERVAL);
-    chat: props.chat,
+    },
-  });
+    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="relative flex items-center cursor-pointer min-w-fit"
-    :class="groupClass"
+    :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"
+      v-on-clickaway="closeSlaPopover"
-      :class="showExtendedInfo ? '' : 'gap-1'"
+      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="start-0 xl:start-auto xl:end-0 top-7 hidden group-hover:flex"
+      class="right-0 top-7"
     />
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -8,7 +8,6 @@ import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
 import wootConstants from 'dashboard/constants/globals';
 import AgentLoadingPlaceholder from './agentLoadingPlaceholder.vue';
-import { useAdmin } from 'dashboard/composables/useAdmin';
 
 export default {
   components: {
@@ -46,14 +45,7 @@ export default {
     'assignAgent',
     'assignTeam',
     'assignLabel',
-    'deleteConversation',
   ],
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
   data() {
     return {
       STATUS_TYPE: wootConstants.STATUS_TYPE,
@@ -129,11 +121,6 @@ export default {
         icon: 'people-team-add',
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.ASSIGN_TEAM'),
       },
-      deleteOption: {
-        key: 'delete',
-        icon: 'delete',
-        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.DELETE'),
-      },
     };
   },
   computed: {
@@ -191,9 +178,6 @@ export default {
     assignPriority(priority) {
       this.$emit('assignPriority', priority);
     },
-    deleteConversation() {
-      this.$emit('deleteConversation', this.chatId);
-    },
     show(key) {
       // If the conversation status is same as the action, then don't display the option
       // i.e.: Don't show an option to resolve if the conversation is already resolved.
@@ -293,13 +277,5 @@ export default {
         @click.stop="$emit('assignTeam', team)"
       />
     </MenuItemWithSubmenu>
-    <template v-if="isAdmin">
-      <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
-      <MenuItem
-        :option="deleteOption"
-        variant="icon"
-        @click.stop="deleteConversation"
-      />
-    </template>
   </div>
 </template>

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

@@ -10,6 +10,7 @@ import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
 import SearchableDropdown from './SearchableDropdown.vue';
 import { LINEAR_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import Button from 'dashboard/components-next/button/Button.vue';
+import { useEmitter } from 'dashboard/composables/emitter';
 
 const props = defineProps({
   conversationId: {
@@ -183,18 +184,13 @@ const createIssue = async () => {
     state_id: formState.stateId || undefined,
     priority: formState.priority || undefined,
     label_ids: formState.labelId ? [formState.labelId] : undefined,
-    conversation_id: props.conversationId,
   };
 
   try {
     isCreating.value = true;
     const response = await LinearAPI.createIssue(payload);
-    const { identifier: issueIdentifier } = response.data;
+    const { id: issueId } = response.data;
-    await LinearAPI.link_issue(
+    await LinearAPI.link_issue(props.conversationId, issueId, props.title);
-      props.conversationId,
-      issueIdentifier,
-      props.title
-    );
     useAlert(t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE_SUCCESS'));
     useTrack(LINEAR_EVENTS.CREATE_ISSUE);
     onClose();
@@ -209,6 +205,12 @@ const createIssue = async () => {
   }
 };
 
+useEmitter('ui:linear_ticket_create_data', data => {
+  formState.title = data.title;
+  formState.description = data.description;
+  formState.priority = data.priority;
+});
+
 onMounted(getTeams);
 </script>
 

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

@@ -0,0 +1,123 @@
+<script setup>
+import { format } from 'date-fns';
+import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
+import IssueHeader from './IssueHeader.vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+  issue: {
+    type: Object,
+    required: true,
+  },
+  linkId: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['unlinkIssue']);
+
+const priorityMap = {
+  1: 'Urgent',
+  2: 'High',
+  3: 'Medium',
+  4: 'Low',
+};
+
+const formattedDate = computed(() => {
+  const { createdAt } = props.issue;
+  return format(new Date(createdAt), 'hh:mm a, MMM dd');
+});
+
+const assignee = computed(() => {
+  const assigneeDetails = props.issue.assignee;
+
+  if (!assigneeDetails) return null;
+  const { name, avatarUrl } = assigneeDetails;
+
+  return {
+    name,
+    thumbnail: avatarUrl,
+  };
+});
+
+const labels = computed(() => {
+  return props.issue.labels?.nodes || [];
+});
+
+const priorityLabel = computed(() => {
+  return priorityMap[props.issue.priority];
+});
+
+const unlinkIssue = () => {
+  emit('unlinkIssue', props.linkId);
+};
+</script>
+
+<template>
+  <div
+    class="absolute flex flex-col items-start bg-n-alpha-3 backdrop-blur-[100px] z-50 px-4 py-3 border border-solid border-n-container w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+  >
+    <div class="flex flex-col w-full">
+      <IssueHeader
+        :identifier="issue.identifier"
+        :link-id="linkId"
+        :issue-url="issue.url"
+        @unlink-issue="unlinkIssue"
+      />
+
+      <span class="mt-2 text-sm font-medium text-n-slate-12">
+        {{ issue.title }}
+      </span>
+      <span
+        v-if="issue.description"
+        class="mt-1 text-sm text-n-slate-11 line-clamp-3"
+      >
+        {{ issue.description }}
+      </span>
+    </div>
+    <div class="flex flex-row items-center h-6 gap-2">
+      <UserAvatarWithName v-if="assignee" :user="assignee" class="py-1" />
+      <div v-if="assignee" class="w-px h-3 bg-n-slate-4" />
+      <div class="flex items-center gap-1 py-1">
+        <fluent-icon
+          icon="status"
+          size="14"
+          :style="{ color: issue.state.color }"
+        />
+        <h6 class="text-xs text-n-slate-12">
+          {{ issue.state.name }}
+        </h6>
+      </div>
+      <div v-if="priorityLabel" class="w-px h-3 bg-n-slate-4" />
+      <div v-if="priorityLabel" class="flex items-center gap-1 py-1">
+        <fluent-icon
+          :icon="`priority-${priorityLabel.toLowerCase()}`"
+          size="14"
+          view-box="0 0 12 12"
+        />
+        <h6 class="text-xs text-n-slate-12">{{ priorityLabel }}</h6>
+      </div>
+    </div>
+    <div v-if="labels.length" class="flex flex-wrap items-center gap-1">
+      <woot-label
+        v-for="label in labels"
+        :key="label.id"
+        :title="label.name"
+        :description="label.description"
+        :color="label.color"
+        variant="smooth"
+        small
+      />
+    </div>
+    <div class="flex items-center">
+      <span class="text-xs text-n-slate-11">
+        {{
+          $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.CREATED_AT', {
+            createdAt: formattedDate,
+          })
+        }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -1,4 +1,5 @@
 <script setup>
+import { inject } from 'vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
@@ -14,6 +15,8 @@ const props = defineProps({
 
 const emit = defineEmits(['unlinkIssue']);
 
+const isUnlinking = inject('isUnlinking');
+
 const unlinkIssue = () => {
   emit('unlinkIssue');
 };
@@ -24,33 +27,36 @@ const openIssue = () => {
 </script>
 
 <template>
-  <div class="flex items-center justify-between">
+  <div class="flex flex-row justify-between">
     <div
-      class="flex items-center gap-2 px-2 py-1.5 border rounded-lg border-n-strong"
+      class="flex items-center justify-center gap-1 h-[24px] px-2 py-1 border rounded-lg border-ash-200"
     >
-      <div class="flex items-center gap-1">
+      <fluent-icon
-        <fluent-icon
+        icon="linear"
-          icon="linear"
+        size="19"
-          size="16"
+        class="text-[#5E6AD2]"
-          class="text-[#5E6AD2]"
+        view-box="0 0 19 19"
-          view-box="0 0 19 19"
+      />
-        />
+      <span class="text-xs font-medium text-ash-900">{{ identifier }}</span>
-        <span class="text-xs font-medium text-n-slate-12">
+    </div>
-          {{ identifier }}
+    <div class="flex items-center gap-1">
-        </span>
-      </div>
-      <span class="w-px h-3 text-n-weak bg-n-weak" />
-
       <Button
-        link
+        ghost
         xs
         slate
+        icon="i-lucide-unlink"
+        class="!transition-none"
+        :is-loading="isUnlinking"
+        @click="unlinkIssue"
+      />
+      <Button
+        ghost
+        xs
+        slate
+        class="!transition-none"
         icon="i-lucide-arrow-up-right"
-        class="!size-4"
         @click="openIssue"
       />
     </div>
-
-    <Button ghost xs slate icon="i-lucide-unlink" @click="unlinkIssue" />
   </div>
 </template>

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

@@ -1,132 +0,0 @@
-<script setup>
-import { computed, ref, onMounted, watch } from 'vue';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { useStoreGetters } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import LinearAPI from 'dashboard/api/integrations/linear';
-import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
-import LinearIssueItem from './LinearIssueItem.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import { LINEAR_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
-
-const props = defineProps({
-  conversationId: {
-    type: [Number, String],
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-const getters = useStoreGetters();
-
-const linkedIssues = ref([]);
-const isLoading = ref(false);
-const shouldShowCreateModal = ref(false);
-
-const currentAccountId = getters.getCurrentAccountId;
-
-const conversation = computed(
-  () => getters.getConversationById.value(props.conversationId) || {}
-);
-
-const hasIssues = computed(() => linkedIssues.value.length > 0);
-
-const loadLinkedIssues = async () => {
-  isLoading.value = true;
-  linkedIssues.value = [];
-  try {
-    const response = await LinearAPI.getLinkedIssue(props.conversationId);
-    linkedIssues.value = response.data || [];
-  } catch (error) {
-    // Silent fail - not critical for UX
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const unlinkIssue = async (linkId, issueIdentifier) => {
-  try {
-    await LinearAPI.unlinkIssue(linkId, issueIdentifier, props.conversationId);
-    useTrack(LINEAR_EVENTS.UNLINK_ISSUE);
-    linkedIssues.value = linkedIssues.value.filter(
-      issue => issue.id !== linkId
-    );
-    useAlert(t('INTEGRATION_SETTINGS.LINEAR.UNLINK.SUCCESS'));
-  } catch (error) {
-    const errorMessage = parseLinearAPIErrorResponse(
-      error,
-      t('INTEGRATION_SETTINGS.LINEAR.UNLINK.ERROR')
-    );
-    useAlert(errorMessage);
-  }
-};
-
-const openCreateModal = () => {
-  shouldShowCreateModal.value = true;
-};
-
-const closeCreateModal = () => {
-  shouldShowCreateModal.value = false;
-  loadLinkedIssues();
-};
-
-watch(
-  () => props.conversationId,
-  () => {
-    loadLinkedIssues();
-  }
-);
-
-onMounted(() => {
-  loadLinkedIssues();
-});
-</script>
-
-<template>
-  <div>
-    <div class="px-4 pt-3 pb-2">
-      <NextButton
-        ghost
-        xs
-        icon="i-lucide-plus"
-        :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON')"
-        @click="openCreateModal"
-      />
-    </div>
-
-    <div v-if="isLoading" class="flex justify-center p-8">
-      <Spinner />
-    </div>
-
-    <div v-else-if="!hasIssues" class="flex justify-center p-4">
-      <p class="text-sm text-n-slate-11">
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.NO_LINKED_ISSUES') }}
-      </p>
-    </div>
-
-    <div v-else class="max-h-[300px] overflow-y-auto">
-      <LinearIssueItem
-        v-for="linkedIssue in linkedIssues"
-        :key="linkedIssue.id"
-        class="px-4 pt-3 pb-4 border-b border-n-weak last:border-b-0"
-        :linked-issue="linkedIssue"
-        @unlink-issue="unlinkIssue"
-      />
-    </div>
-
-    <woot-modal
-      v-model:show="shouldShowCreateModal"
-      :on-close="closeCreateModal"
-      :close-on-backdrop-click="false"
-      class="!items-start [&>div]:!top-12 [&>div]:sticky"
-    >
-      <CreateOrLinkIssue
-        :conversation="conversation"
-        :account-id="currentAccountId"
-        @close="closeCreateModal"
-      />
-    </woot-modal>
-  </div>
-</template>

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

@@ -1,113 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
-import IssueHeader from './IssueHeader.vue';
-
-const props = defineProps({
-  linkedIssue: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['unlinkIssue']);
-
-const { linkedIssue } = props;
-
-const priorityMap = {
-  1: 'Urgent',
-  2: 'High',
-  3: 'Medium',
-  4: 'Low',
-};
-
-const issue = computed(() => linkedIssue.issue);
-
-const assignee = computed(() => {
-  const assigneeDetails = issue.value.assignee;
-  if (!assigneeDetails) return null;
-  return {
-    name: assigneeDetails.name,
-    thumbnail: assigneeDetails.avatarUrl,
-  };
-});
-
-const labels = computed(() => issue.value.labels?.nodes || []);
-
-const priorityLabel = computed(() => priorityMap[issue.value.priority]);
-
-const unlinkIssue = () => {
-  emit('unlinkIssue', linkedIssue.id, linkedIssue.issue.identifier);
-};
-</script>
-
-<template>
-  <div class="flex flex-col gap-4">
-    <div class="flex flex-col w-full">
-      <IssueHeader
-        :identifier="issue.identifier"
-        :link-id="linkedIssue.id"
-        :issue-url="issue.url"
-        @unlink-issue="unlinkIssue"
-      />
-
-      <h3 class="mt-2 text-sm font-medium text-n-slate-12">
-        {{ issue.title }}
-      </h3>
-
-      <p
-        v-if="issue.description"
-        class="mt-1 text-sm text-n-slate-11 line-clamp-3"
-      >
-        {{ issue.description }}
-      </p>
-    </div>
-
-    <div class="flex flex-col gap-2">
-      <div class="flex items-center gap-2">
-        <div v-if="assignee" class="flex items-center gap-1.5">
-          <Avatar :src="assignee.thumbnail" :name="assignee.name" :size="16" />
-          <span class="text-xs capitalize truncate text-n-slate-12">
-            {{ assignee.name }}
-          </span>
-        </div>
-
-        <div v-if="assignee" class="w-px h-3 bg-n-slate-4" />
-
-        <div class="flex items-center gap-1">
-          <Icon
-            icon="i-lucide-activity"
-            class="size-4"
-            :style="{ color: issue.state?.color }"
-          />
-          <span class="text-xs text-n-slate-12">
-            {{ issue.state?.name }}
-          </span>
-        </div>
-
-        <div v-if="priorityLabel" class="w-px h-3 bg-n-slate-4" />
-
-        <div v-if="priorityLabel" class="flex items-center gap-1.5">
-          <CardPriorityIcon :priority="priorityLabel.toLowerCase()" />
-          <span class="text-xs text-n-slate-12">
-            {{ priorityLabel }}
-          </span>
-        </div>
-      </div>
-
-      <div v-if="labels.length" class="flex flex-wrap">
-        <woot-label
-          v-for="label in labels"
-          :key="label.id"
-          :title="label.name"
-          :description="label.description"
-          :color="label.color"
-          variant="smooth"
-          small
-        />
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,54 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useStoreGetters } from 'dashboard/composables/store';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-
-const { isAdmin } = useAdmin();
-const getters = useStoreGetters();
-const accountId = getters.getCurrentAccountId;
-
-const integrationId = 'linear';
-
-const actionURL = computed(() =>
-  frontendURL(
-    `accounts/${accountId.value}/settings/integrations/${integrationId}`
-  )
-);
-
-const openLinearAccount = () => {
-  window.open(actionURL.value, '_blank');
-};
-</script>
-
-<template>
-  <div class="flex flex-col p-3">
-    <div class="w-12 h-12 mb-3">
-      <img
-        :src="`/dashboard/images/integrations/${integrationId}.png`"
-        class="object-contain w-full h-full border rounded-md shadow-sm border-n-weak dark:hidden dark:bg-n-alpha-2"
-      />
-      <img
-        :src="`/dashboard/images/integrations/${integrationId}-dark.png`"
-        class="hidden object-contain w-full h-full border rounded-md shadow-sm border-n-weak dark:block"
-      />
-    </div>
-
-    <div class="flex-1 mb-4">
-      <h3 class="mb-1.5 text-sm font-medium text-n-slate-12">
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.TITLE') }}
-      </h3>
-      <p v-if="isAdmin" class="text-sm text-n-slate-11">
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.DESCRIPTION') }}
-      </p>
-      <p v-else class="text-sm text-n-slate-11">
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.AGENT_DESCRIPTION') }}
-      </p>
-    </div>
-
-    <NextButton v-if="isAdmin" faded slate @click="openLinearAccount">
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.BUTTON_TEXT') }}
-    </NextButton>
-  </div>
-</template>

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

@@ -63,7 +63,7 @@ const onSearch = async value => {
     isFetching.value = true;
     const response = await LinearAPI.searchIssues(value);
     issues.value = response.data.map(issue => ({
-      id: issue.identifier,
+      id: issue.id,
       name: `${issue.identifier} ${issue.title}`,
       icon: 'status',
       iconColor: issue.state.color,

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

@@ -0,0 +1,151 @@
+<script setup>
+import { computed, ref, onMounted, watch, defineOptions, provide } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import LinearAPI from 'dashboard/api/integrations/linear';
+import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
+import Issue from './Issue.vue';
+import { useTrack } from 'dashboard/composables';
+import { LINEAR_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useEmitter } from 'dashboard/composables/emitter';
+
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+defineOptions({
+  name: 'Linear',
+});
+
+const getters = useStoreGetters();
+const { t } = useI18n();
+
+const linkedIssue = ref(null);
+const shouldShow = ref(false);
+const shouldShowPopup = ref(false);
+const isUnlinking = ref(false);
+
+provide('isUnlinking', isUnlinking);
+
+const currentAccountId = getters.getCurrentAccountId;
+
+const conversation = computed(() =>
+  getters.getConversationById.value(props.conversationId)
+);
+
+const tooltipText = computed(() => {
+  return linkedIssue.value === null
+    ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON')
+    : null;
+});
+
+const loadLinkedIssue = async () => {
+  linkedIssue.value = null;
+  try {
+    const response = await LinearAPI.getLinkedIssue(props.conversationId);
+    const issues = response.data;
+    linkedIssue.value = issues && issues.length ? issues[0] : null;
+  } catch (error) {
+    // We don't want to show an error message here, as it's not critical. When someone clicks on the Linear icon, we can inform them that the integration is disabled.
+  }
+};
+
+const unlinkIssue = async linkId => {
+  try {
+    isUnlinking.value = true;
+    await LinearAPI.unlinkIssue(linkId);
+    useTrack(LINEAR_EVENTS.UNLINK_ISSUE);
+    linkedIssue.value = null;
+    useAlert(t('INTEGRATION_SETTINGS.LINEAR.UNLINK.SUCCESS'));
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.UNLINK.ERROR')
+    );
+    useAlert(errorMessage);
+  } finally {
+    isUnlinking.value = false;
+  }
+};
+
+const openIssue = () => {
+  if (!linkedIssue.value) shouldShowPopup.value = true;
+  shouldShow.value = true;
+};
+
+const closePopup = () => {
+  shouldShowPopup.value = false;
+  loadLinkedIssue();
+};
+
+const closeIssue = () => {
+  shouldShow.value = false;
+};
+
+watch(
+  () => props.conversationId,
+  () => {
+    loadLinkedIssue();
+  }
+);
+
+useEmitter('ui:linear_ticket_create', () => {
+  shouldShowPopup.value = true;
+});
+
+onMounted(() => {
+  loadLinkedIssue();
+});
+</script>
+
+<template>
+  <div
+    class="relative after:content-[''] after:h-5 after:bg-transparent after:top-5 after:w-full after:block after:absolute after:z-0"
+    :class="{ group: linkedIssue }"
+  >
+    <Button
+      v-on-clickaway="closeIssue"
+      v-tooltip="tooltipText"
+      sm
+      ghost
+      slate
+      class="!gap-1 group-hover:bg-n-alpha-2"
+      @click="openIssue"
+    >
+      <fluent-icon
+        icon="linear"
+        size="19"
+        class="text-[#5E6AD2] flex-shrink-0"
+        view-box="0 0 19 19"
+      />
+      <span v-if="linkedIssue" class="text-xs font-medium text-n-slate-11">
+        {{ linkedIssue.issue.identifier }}
+      </span>
+    </Button>
+    <Issue
+      v-if="linkedIssue"
+      :issue="linkedIssue.issue"
+      :link-id="linkedIssue.id"
+      class="absolute right-0 top-[36px] invisible group-hover:visible"
+      @unlink-issue="unlinkIssue"
+    />
+    <woot-modal
+      v-model:show="shouldShowPopup"
+      :on-close="closePopup"
+      :close-on-backdrop-click="false"
+      class="!items-start [&>div]:!top-12 [&>div]:sticky"
+    >
+      <CreateOrLinkIssue
+        :conversation="conversation"
+        :account-id="currentAccountId"
+        @close="closePopup"
+      />
+    </woot-modal>
+  </div>
+</template>

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(