diff --git a/.env.example b/.env.example index 69b1b9cde..c9f3c855c 100644 --- a/.env.example +++ b/.env.example @@ -272,9 +272,9 @@ AZURE_APP_SECRET= # ENABLE_SIDEKIQ_DEQUEUE_LOGGER=false -# AI powered features -## OpenAI key -# OPENAI_API_KEY= +# AI powered features (Captain) +# The OpenAI API key and endpoint for Captain are not configured via .env. +# Set them at Super Admin > App Configs > Captain (CAPTAIN_OPEN_AI_API_KEY, CAPTAIN_OPEN_AI_ENDPOINT). # Housekeeping/Performance related configurations # Set to true if you want to remove stale contact inboxes diff --git a/Gemfile b/Gemfile index 7533cf3cf..7735dc099 100644 --- a/Gemfile +++ b/Gemfile @@ -195,7 +195,7 @@ gem 'reverse_markdown' gem 'iso-639' gem 'ruby-openai' -gem 'ai-agents', '>= 0.10.0' +gem 'ai-agents', '>= 0.12.0' # TODO: Move this gem as a dependency of ai-agents gem 'ruby_llm', '>= 1.14.1' diff --git a/Gemfile.lock b/Gemfile.lock index 8da80f52c..bd41474a3 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -126,7 +126,7 @@ GEM jbuilder (~> 2) rails (>= 4.2, < 7.2) selectize-rails (~> 0.6) - ai-agents (0.10.0) + ai-agents (0.12.0) ruby_llm (~> 1.14) annotaterb (4.20.0) activerecord (>= 6.0.0) @@ -198,7 +198,7 @@ GEM crack (1.0.0) bigdecimal rexml - crass (1.0.6) + crass (1.0.7) cronex (0.15.0) tzinfo unicode (>= 0.4.4.5) @@ -570,7 +570,7 @@ GEM minitest (5.25.5) mock_redis (0.36.0) ruby2_keywords - msgpack (1.8.0) + msgpack (1.8.3) multi_json (1.15.0) multi_xml (0.9.1) bigdecimal (>= 3.1, < 5) @@ -1058,7 +1058,7 @@ DEPENDENCIES administrate (>= 0.20.1) administrate-field-active_storage (>= 1.0.3) administrate-field-belongs_to_search (>= 0.9.0) - ai-agents (>= 0.10.0) + ai-agents (>= 0.12.0) annotaterb attr_extras audited (~> 5.4, >= 5.4.1) diff --git a/app/builders/conversation_builder.rb b/app/builders/conversation_builder.rb index 07fa3dbc1..d6af2b1f1 100644 --- a/app/builders/conversation_builder.rb +++ b/app/builders/conversation_builder.rb @@ -2,7 +2,7 @@ class ConversationBuilder pattr_initialize [:params!, :contact_inbox!] def perform - raise CustomExceptions::Inbox::Disabled unless @contact_inbox.inbox.active? + raise CustomExceptions::InboxDisabled unless @contact_inbox.inbox.active? look_up_exising_conversation || create_new_conversation end diff --git a/app/builders/messages/message_builder.rb b/app/builders/messages/message_builder.rb index 40a22f9da..4fe0eb90b 100644 --- a/app/builders/messages/message_builder.rb +++ b/app/builders/messages/message_builder.rb @@ -22,7 +22,7 @@ class Messages::MessageBuilder end def perform - raise CustomExceptions::Inbox::Disabled unless @conversation.inbox.active? + raise CustomExceptions::InboxDisabled unless @conversation.inbox.active? @message = @conversation.messages.build(message_params) process_attachments diff --git a/app/builders/v2/reports/drilldown_builder.rb b/app/builders/v2/reports/drilldown_builder.rb new file mode 100644 index 000000000..a3d2c073d --- /dev/null +++ b/app/builders/v2/reports/drilldown_builder.rb @@ -0,0 +1,213 @@ +class V2::Reports::DrilldownBuilder + include DateRangeHelper + include TimezoneHelper + + DEFAULT_GROUP_BY = 'day'.freeze + DEFAULT_PAGE = 1 + DEFAULT_PER_PAGE = 25 + MAX_PER_PAGE = 100 + SUPPORTED_GROUP_BY = %w[hour day week month year].freeze + SUPPORTED_DIMENSION_TYPES = %w[account inbox agent label team].freeze + MESSAGE_METRICS = { + 'incoming_messages_count' => :incoming, + 'outgoing_messages_count' => :outgoing + }.freeze + MESSAGE_EVENT_METRICS = %w[avg_first_response_time reply_time].freeze + + pattr_initialize :account, :params + + def self.supported_dimension_type?(type) = SUPPORTED_DIMENSION_TYPES.include?((type.presence || 'account').to_s) + + def build + records = paginated_records.to_a + { meta: meta, payload: records.map { |record| record_serializer(records).serialize(record) } } + end + + private + + def meta + { + metric: metric, + record_type: record_type, + bucket: { + since: bucket_range.begin.to_i, + until: bucket_range.end.to_i + }, + current_page: current_page, + per_page: per_page, + total_count: paginated_records.total_count, + conversation_count: conversation_count + } + end + + def conversation_count + return paginated_records.total_count if conversation_metric? + + drilldown_scope.except(:includes).reorder(nil).distinct.count(:conversation_id) + end + + def paginated_records + @paginated_records ||= drilldown_scope.page(current_page).per(per_page) + end + + def drilldown_scope + if message_metric? + message_scope + elsif conversation_metric? + conversation_scope + else + reporting_event_scope + end + end + + def message_scope + scope.messages + .where(account_id: account.id, created_at: bucket_range) + .public_send(MESSAGE_METRICS.fetch(metric)) + .includes(:sender, conversation: [:assignee, :contact, :inbox]) + .reorder(created_at: :desc) + end + + def conversation_scope + scope.conversations + .where(account_id: account.id, created_at: bucket_range) + .includes(:assignee, :contact, :inbox) + .order(created_at: :desc) + end + + def reporting_event_scope + events = scope.reporting_events + .where(account_id: account.id, name: raw_event_name, created_at: bucket_range) + .includes(:user, :inbox, conversation: [:assignee, :contact, :inbox]) + .order(created_at: :desc) + + if raw_count_strategy == :exclude_bot_handoffs + events = events.where.not(conversation_id: bot_handoff_conversation_ids_subquery) + elsif raw_count_strategy == :distinct_conversation + events = events.where(id: distinct_conversation_event_ids(events)) + end + + events + end + + def bot_handoff_conversation_ids_subquery + scope.reporting_events + .where(account_id: account.id, name: :conversation_bot_handoff, created_at: range) + .where.not(conversation_id: nil) + .select(:conversation_id) + end + + def distinct_conversation_event_ids(events) + events.reorder(nil) + .where.not(conversation_id: nil) + .select('MAX(reporting_events.id)') + .group(:conversation_id) + end + + def record_serializer(records) + @record_serializer ||= V2::Reports::DrilldownRecordSerializer.new( + account, + metric, + use_business_hours?, + records + ) + end + + def bucket_range + @bucket_range ||= begin + bucket_start = Time.zone.at(params[:bucket_timestamp].to_i).in_time_zone(timezone) + bucket_end = bucket_end_for(bucket_start) + requested_start = Time.zone.at(params[:since].to_i) + requested_end = Time.zone.at(params[:until].to_i) + + [bucket_start, requested_start].max...[bucket_end, requested_end].min + end + end + + def bucket_end_for(bucket_start) + { + 'hour' => bucket_start + 1.hour, + 'day' => bucket_start + 1.day, + 'week' => bucket_start + 1.week, + 'month' => bucket_start + 1.month, + 'year' => bucket_start + 1.year + }.fetch(group_by) + end + + def scope + case dimension_type + when 'account' then account + when 'inbox' then inbox + when 'agent' then user + when 'label' then label + when 'team' then team + else + raise ArgumentError, "Unsupported drilldown dimension type: #{dimension_type}" + end + end + + def inbox = @inbox ||= account.inboxes.find(params[:id]) + + def user = @user ||= account.users.find(params[:id]) + + def label = @label ||= account.labels.find(params[:id]) + + def team = @team ||= account.teams.find(params[:id]) + + def metric + params[:metric].to_s + end + + def report_metric + @report_metric ||= Reports::ReportMetricRegistry.fetch(metric) + end + + def raw_event_name + report_metric&.raw_event_name + end + + def raw_count_strategy + report_metric&.raw_count_strategy + end + + def record_type + return 'message' if message_metric? || MESSAGE_EVENT_METRICS.include?(metric) + + 'conversation' + end + + def message_metric? + MESSAGE_METRICS.key?(metric) + end + + def conversation_metric? + metric == 'conversations_count' + end + + def dimension_type + (params[:type].presence || 'account').to_s + end + + def group_by + @group_by ||= SUPPORTED_GROUP_BY.include?(params[:group_by].to_s) ? params[:group_by].to_s : DEFAULT_GROUP_BY + end + + def timezone + @timezone ||= timezone_name_from_offset(params[:timezone_offset]) + end + + def current_page + [params[:page].to_i, DEFAULT_PAGE].max + end + + def per_page + requested_per_page = params[:per_page].to_i + requested_per_page = DEFAULT_PER_PAGE if requested_per_page <= 0 + + [requested_per_page, MAX_PER_PAGE].min + end + + def use_business_hours? + ActiveModel::Type::Boolean.new.cast(params[:business_hours]) + end +end diff --git a/app/builders/v2/reports/drilldown_record_serializer.rb b/app/builders/v2/reports/drilldown_record_serializer.rb new file mode 100644 index 000000000..04edf65b4 --- /dev/null +++ b/app/builders/v2/reports/drilldown_record_serializer.rb @@ -0,0 +1,199 @@ +class V2::Reports::DrilldownRecordSerializer + MESSAGE_EVENT_METRICS = %w[avg_first_response_time reply_time].freeze + + attr_reader :account, :metric, :use_business_hours, :records + + def initialize(account, metric, use_business_hours, records = []) + @account = account + @metric = metric + @use_business_hours = use_business_hours + @records = records + end + + def serialize(record) + return serialize_message(record) if record.is_a?(Message) + return serialize_conversation_event(record) if record.is_a?(ReportingEvent) + + serialize_conversation(record) + end + + private + + def serialize_message(message, metric_value: nil, occurred_at: nil) + { + record_type: 'message', + conversation: conversation_attributes(message.conversation), + message: message_attributes(message), + metric_value: metric_value, + occurred_at: (occurred_at || message.created_at).to_i + } + end + + def serialize_conversation_event(event) + inferred_message = inferred_message_for(event) + if inferred_message.present? + return serialize_message( + inferred_message, + metric_value: event_metric_value(event), + occurred_at: event_timestamp(event) + ) + end + + serialize_conversation( + event.conversation, + metric_value: event_metric_value(event), + occurred_at: event_timestamp(event), + event_name: event.name + ) + end + + def serialize_conversation(conversation, metric_value: nil, occurred_at: nil, event_name: nil) + serialized_record = { + record_type: 'conversation', + conversation: conversation_attributes(conversation), + message: nil, + metric_value: metric_value, + occurred_at: (occurred_at || conversation&.created_at)&.to_i + } + serialized_record[:event_name] = event_name if event_name.present? + serialized_record + end + + def conversation_attributes(conversation) + return {} if conversation.blank? + + { + id: conversation.id, + display_id: conversation.display_id, + contact_id: conversation.contact_id, + contact_name: conversation.contact&.name, + inbox_id: conversation.inbox_id, + inbox_name: conversation.inbox&.name, + assignee_id: conversation.assignee_id, + assignee_name: conversation.assignee&.name, + status: conversation.status, + created_at: conversation.created_at.to_i, + last_activity_at: conversation.last_activity_at.to_i, + last_message: last_message_attributes(conversation) + } + end + + def message_attributes(message) + { + id: message.id, + content: message.content, + message_type: message.message_type, + sender_name: message.sender&.try(:name), + created_at: message.created_at.to_i + } + end + + def last_message_attributes(conversation) + message = latest_messages_by_conversation_id[conversation.id] + return if message.blank? + + message_attributes(message) + end + + def inferred_message_for(event) + return unless MESSAGE_EVENT_METRICS.include?(metric) + return if event.conversation.blank? || event.event_end_time.blank? + + inferred_messages_by_event_id[event.id] + end + + def first_response_event_with_user?(event) + metric == 'avg_first_response_time' && event.user_id.present? + end + + def message_inference_range(event) + (event.event_end_time - 1.second)..(event.event_end_time + 1.second) + end + + def event_metric_value(event) + use_business_hours ? event.value_in_business_hours : event.value + end + + def event_timestamp(event) + event.event_end_time || event.created_at + end + + def latest_messages_by_conversation_id + @latest_messages_by_conversation_id ||= if conversation_ids.blank? + {} + else + latest_messages.index_by(&:conversation_id) + end + end + + def latest_messages + Message + .where(account_id: account.id, conversation_id: conversation_ids) + .where.not(message_type: :activity) + .select('DISTINCT ON (messages.conversation_id) messages.*') + .reorder(Arel.sql('messages.conversation_id, messages.created_at DESC, messages.id DESC')) + .includes(:sender) + end + + def inferred_messages_by_event_id + @inferred_messages_by_event_id ||= inference_events.each_with_object({}) do |event, messages_by_event_id| + messages_by_event_id[event.id] = inferred_message_candidates.find do |message| + message_matches_event?(message, event) + end + end + end + + def inferred_message_candidates + @inferred_message_candidates ||= if inference_events.blank? + [] + else + inferred_messages.to_a + end + end + + def inferred_messages + Message + .where(account_id: account.id, conversation_id: inference_events.map(&:conversation_id).uniq) + .where(created_at: inference_time_range) + .where(message_type: %i[outgoing template]) + .includes(:sender) + .reorder(created_at: :desc, id: :desc) + end + + def message_matches_event?(message, event) + message.conversation_id == event.conversation_id && + message.created_at.between?( + message_inference_range(event).begin, + message_inference_range(event).end + ) && + message_sender_matches_event?(message, event) + end + + def message_sender_matches_event?(message, event) + return true unless first_response_event_with_user?(event) + + message.sender_id == event.user_id && message.sender_type == 'User' + end + + def inference_time_range + event_end_times = inference_events.map(&:event_end_time) + + (event_end_times.min - 1.second)..(event_end_times.max + 1.second) + end + + def inference_events + @inference_events ||= records.select do |record| + record.is_a?(ReportingEvent) && record.conversation_id.present? && record.event_end_time.present? + end + end + + def conversation_ids + @conversation_ids ||= records.filter_map { |record| conversation_id_for(record) }.uniq + end + + def conversation_id_for(record) + return record.conversation_id if record.is_a?(Message) || record.is_a?(ReportingEvent) + + record.id + end +end diff --git a/app/controllers/api/v1/accounts/articles_controller.rb b/app/controllers/api/v1/accounts/articles_controller.rb index 5e1609b64..4a8363fdd 100644 --- a/app/controllers/api/v1/accounts/articles_controller.rb +++ b/app/controllers/api/v1/accounts/articles_controller.rb @@ -40,8 +40,8 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController end def reorder - Article.update_positions(portal: @portal, positions_hash: params[:positions_hash]) - head :ok + positions = Article.update_positions(portal: @portal, positions_hash: params[:positions_hash]) + render json: { positions: positions } end private diff --git a/app/controllers/api/v1/accounts/captain/preferences_controller.rb b/app/controllers/api/v1/accounts/captain/preferences_controller.rb index 156c031fa..04eeff92b 100644 --- a/app/controllers/api/v1/accounts/captain/preferences_controller.rb +++ b/app/controllers/api/v1/accounts/captain/preferences_controller.rb @@ -8,8 +8,8 @@ class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::Bas def update params_to_update = captain_params - @current_account.captain_models = params_to_update[:captain_models] if params_to_update[:captain_models] - @current_account.captain_features = params_to_update[:captain_features] if params_to_update[:captain_features] + @current_account.captain_models = params_to_update[:captain_models] if params_to_update.key?(:captain_models) + @current_account.captain_features = params_to_update[:captain_features] if params_to_update.key?(:captain_features) @current_account.save! render json: preferences_payload @@ -38,7 +38,7 @@ class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::Bas def merged_captain_models existing_models = @current_account.captain_models || {} - existing_models.merge(permitted_captain_models) + existing_models.merge(permitted_captain_models).compact_blank.presence end def merged_captain_features @@ -47,29 +47,30 @@ class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::Bas end def permitted_captain_models - params.require(:captain_models).permit( - :editor, :assistant, :copilot, :label_suggestion, - :audio_transcription, :help_center_search - ).to_h.stringify_keys + params.require(:captain_models).permit(*captain_feature_keys).to_h.stringify_keys end def permitted_captain_features - params.require(:captain_features).permit( - :editor, :assistant, :copilot, :label_suggestion, - :audio_transcription, :help_center_search - ).to_h.stringify_keys + params.require(:captain_features).permit(*captain_feature_keys).to_h.stringify_keys + end + + def captain_feature_keys + Llm::Models.feature_keys.map(&:to_sym) end def features_with_account_preferences preferences = Current.account.captain_preferences account_features = preferences[:features] || {} - account_models = preferences[:models] || {} Llm::Models.feature_keys.index_with do |feature_key| config = Llm::Models.feature_config(feature_key) + route = Llm::FeatureRouter.resolve(feature: feature_key, account: Current.account) config.merge( enabled: account_features[feature_key] == true, - selected: account_models[feature_key] || config[:default] + model: route[:model], + selected: route[:model], + provider: route[:provider], + source: route[:source] ) end end diff --git a/app/controllers/api/v1/accounts/conversations/messages_controller.rb b/app/controllers/api/v1/accounts/conversations/messages_controller.rb index d1ac68998..ec70c79b2 100644 --- a/app/controllers/api/v1/accounts/conversations/messages_controller.rb +++ b/app/controllers/api/v1/accounts/conversations/messages_controller.rb @@ -10,7 +10,7 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts:: user = Current.user || @resource mb = Messages::MessageBuilder.new(user, @conversation, params) @message = mb.perform - rescue CustomExceptions::Inbox::Disabled + rescue CustomExceptions::InboxDisabled render_inbox_disabled_error rescue StandardError => e render_could_not_create_error(e.message) @@ -35,7 +35,7 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts:: service.perform message.update!(content_attributes: {}) ::SendReplyJob.perform_later(message.id) - rescue CustomExceptions::Inbox::Disabled + rescue CustomExceptions::InboxDisabled render_inbox_disabled_error rescue StandardError => e render_could_not_create_error(e.message) @@ -57,6 +57,9 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts:: end render json: { content: translated_content } + rescue Google::Cloud::Error => e + # `details` carries the clean human message; `message` includes gRPC debug noise + render_could_not_create_error(e.details.presence || e.message) end private diff --git a/app/controllers/api/v1/accounts/onboardings_controller.rb b/app/controllers/api/v1/accounts/onboardings_controller.rb index 181e4965e..d7c49b35d 100644 --- a/app/controllers/api/v1/accounts/onboardings_controller.rb +++ b/app/controllers/api/v1/accounts/onboardings_controller.rb @@ -1,17 +1,19 @@ class Api::V1::Accounts::OnboardingsController < Api::V1::Accounts::BaseController before_action :check_admin_authorization? + ONBOARDING_STEP_KEY = 'onboarding_step'.freeze + STEP_ACCOUNT_DETAILS = 'account_details'.freeze + STEP_INBOX_SETUP = 'inbox_setup'.freeze + ONBOARDING_STEPS = [STEP_ACCOUNT_DETAILS, STEP_INBOX_SETUP].freeze + def update + return render json: { error: 'Invalid onboarding step' }, status: :unprocessable_entity unless ONBOARDING_STEPS.include?(params[:onboarding_step]) + @account = Current.account - finalize = finalizing_account_details? - - @account.assign_attributes(account_params) - @account.custom_attributes.merge!(custom_attributes_params) - @account.custom_attributes.delete('onboarding_step') if finalize - @account.save! - - # TODO: re-enable when the help center generation UI is ready to surface progress - # Onboarding::HelpCenterCreationService.new(@account, Current.user).perform if finalize && website.present? + # The client declares the step it is completing; `account_details` runs + # `complete_account_details`, and so on. The known-step guard above keeps the + # client value from `send`-ing an arbitrary method. + send("complete_#{params[:onboarding_step]}") render 'api/v1/accounts/update', format: :json end @@ -22,12 +24,48 @@ class Api::V1::Accounts::OnboardingsController < Api::V1::Accounts::BaseControll private - def finalizing_account_details? - @account.custom_attributes['onboarding_step'] == 'account_details' + def complete_account_details + # Only act while the cursor still points here, so a stale replay after + # onboarding finished can't re-enter it. + return unless current_step == STEP_ACCOUNT_DETAILS + + @account.assign_attributes(account_params) + @account.custom_attributes.merge!(custom_attributes_params) + + # inbox_setup is a cloud-only step (DEPLOYMENT_ENV config, not a hardcoded + # environment check); self-hosted finishes onboarding here. + if ChatwootApp.chatwoot_cloud? + move_to_step(STEP_INBOX_SETUP) + create_onboarding_inboxes + else + finish_onboarding + end end - def website - custom_attributes_params[:website] + def complete_inbox_setup + # Only finalize while the cursor still points here, so a stale or out-of-order + # request can't end onboarding early. Replays are no-ops. + return unless current_step == STEP_INBOX_SETUP + + finish_onboarding + end + + def current_step + @account.custom_attributes[ONBOARDING_STEP_KEY] + end + + def move_to_step(step) + @account.custom_attributes[ONBOARDING_STEP_KEY] = step + @account.save! + end + + def finish_onboarding + @account.custom_attributes.delete(ONBOARDING_STEP_KEY) + @account.save! + end + + def create_onboarding_inboxes + Onboarding::WebWidgetCreationService.new(@account, Current.user).perform end def account_params diff --git a/app/controllers/api/v2/accounts/reports_controller.rb b/app/controllers/api/v2/accounts/reports_controller.rb index 192b3619c..93be19eb9 100644 --- a/app/controllers/api/v2/accounts/reports_controller.rb +++ b/app/controllers/api/v2/accounts/reports_controller.rb @@ -51,6 +51,13 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController generate_csv('conversation_traffic_reports', 'api/v2/accounts/reports/conversation_traffic') end + def drilldown + return head :unauthorized unless Current.account_user.administrator? + return head :unprocessable_entity unless valid_drilldown_params? + + render json: V2::Reports::DrilldownBuilder.new(Current.account, drilldown_params).build + end + def conversations return head :unprocessable_entity if params[:type].blank? @@ -133,6 +140,22 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController }) end + def drilldown_params + permitted_params = params.permit( + :metric, :id, :since, :until, :group_by, :timezone_offset, :bucket_timestamp, :page, :per_page + ).to_h.symbolize_keys + permitted_params.merge( + type: (params[:type].presence || 'account').to_sym, + business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours]) + ) + end + + def valid_drilldown_params? + %i[metric bucket_timestamp since until].all? { |param| params[param].present? } && + Reports::ReportMetricRegistry.supported?(params[:metric]) && + V2::Reports::DrilldownBuilder.supported_dimension_type?(params[:type]) && Reports::DrilldownTimestampValidator.valid?(params) + end + def conversation_params { type: params[:type].to_sym, diff --git a/app/controllers/concerns/request_exception_handler.rb b/app/controllers/concerns/request_exception_handler.rb index c078d0d5e..6b3f8fe72 100644 --- a/app/controllers/concerns/request_exception_handler.rb +++ b/app/controllers/concerns/request_exception_handler.rb @@ -3,7 +3,7 @@ module RequestExceptionHandler included do rescue_from ActiveRecord::RecordInvalid, with: :render_record_invalid - rescue_from CustomExceptions::Inbox::Disabled, with: :render_inbox_disabled_error + rescue_from CustomExceptions::InboxDisabled, with: :render_inbox_disabled_error end private diff --git a/app/controllers/super_admin/accounts_controller.rb b/app/controllers/super_admin/accounts_controller.rb index 27ce587f7..59b99c37e 100644 --- a/app/controllers/super_admin/accounts_controller.rb +++ b/app/controllers/super_admin/accounts_controller.rb @@ -35,7 +35,8 @@ class SuperAdmin::AccountsController < SuperAdmin::ApplicationController # def resource_params permitted_params = super - permitted_params[:limits] = permitted_params[:limits].to_h.compact + permitted_params[:limits] = permitted_params[:limits].to_h.compact if permitted_params.key?(:limits) + permitted_params[:captain_models] = permitted_params[:captain_models].to_h.compact_blank.presence if permitted_params.key?(:captain_models) permitted_params[:selected_feature_flags] = params[:enabled_features].keys.map(&:to_sym) if params[:enabled_features].present? permitted_params end diff --git a/app/dashboards/account_dashboard.rb b/app/dashboards/account_dashboard.rb index 9be674f11..b2683f2e0 100644 --- a/app/dashboards/account_dashboard.rb +++ b/app/dashboards/account_dashboard.rb @@ -18,6 +18,7 @@ class AccountDashboard < Administrate::BaseDashboard # Add all_features last so it appears after manually_managed_features attributes[:all_features] = AccountFeaturesField + attributes[:captain_models] = CaptainModelOverridesField attributes else @@ -57,6 +58,7 @@ class AccountDashboard < Administrate::BaseDashboard attrs = %i[custom_attributes limits] attrs << :manually_managed_features if ChatwootApp.chatwoot_cloud? attrs << :all_features + attrs << :captain_models attrs else [] @@ -79,6 +81,7 @@ class AccountDashboard < Administrate::BaseDashboard attrs = %i[limits] attrs << :manually_managed_features if ChatwootApp.chatwoot_cloud? attrs << :all_features + attrs << :captain_models attrs else [] @@ -117,7 +120,7 @@ class AccountDashboard < Administrate::BaseDashboard # to prevent an error from being raised (wrong number of arguments) # Reference: https://github.com/thoughtbot/administrate/pull/2356/files#diff-4e220b661b88f9a19ac527c50d6f1577ef6ab7b0bed2bfdf048e22e6bfa74a05R204 def permitted_attributes(action) - attrs = super + [limits: {}] + attrs = super + [limits: {}, captain_models: {}] # Add manually_managed_features to permitted attributes only for Chatwoot Cloud attrs << { manually_managed_features: [] } if ChatwootApp.chatwoot_cloud? diff --git a/app/javascript/dashboard/api/reports.js b/app/javascript/dashboard/api/reports.js index 00f040f8e..daa0cb11d 100644 --- a/app/javascript/dashboard/api/reports.js +++ b/app/javascript/dashboard/api/reports.js @@ -31,6 +31,42 @@ class ReportsAPI extends ApiClient { }); } + getDrilldown({ + metric, + bucketTimestamp, + from, + to, + type = 'account', + id, + groupBy, + businessHours, + page, + perPage, + signal, + }) { + const requestConfig = { + params: { + metric, + bucket_timestamp: bucketTimestamp, + since: from, + until: to, + type, + id, + group_by: groupBy, + business_hours: businessHours, + timezone_offset: getTimeOffset(), + page, + per_page: perPage, + }, + }; + + if (signal) { + requestConfig.signal = signal; + } + + return axios.get(`${this.url}/drilldown`, requestConfig); + } + // eslint-disable-next-line default-param-last getSummary(since, until, type = 'account', id, groupBy, businessHours) { return axios.get(`${this.url}/summary`, { diff --git a/app/javascript/dashboard/api/specs/reports.spec.js b/app/javascript/dashboard/api/specs/reports.spec.js index e458633d0..178c98a70 100644 --- a/app/javascript/dashboard/api/specs/reports.spec.js +++ b/app/javascript/dashboard/api/specs/reports.spec.js @@ -1,6 +1,8 @@ import reportsAPI from '../reports'; import ApiClient from '../ApiClient'; +const timezoneOffset = () => -new Date().getTimezoneOffset() / 60; + describe('#Reports API', () => { it('creates correct instance', () => { expect(reportsAPI).toBeInstanceOf(ApiClient); @@ -11,6 +13,7 @@ describe('#Reports API', () => { expect(reportsAPI).toHaveProperty('update'); expect(reportsAPI).toHaveProperty('delete'); expect(reportsAPI).toHaveProperty('getReports'); + expect(reportsAPI).toHaveProperty('getDrilldown'); expect(reportsAPI).toHaveProperty('getSummary'); expect(reportsAPI).toHaveProperty('getAgentReports'); expect(reportsAPI).toHaveProperty('getLabelReports'); @@ -42,11 +45,14 @@ describe('#Reports API', () => { }); expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', { params: { + business_hours: undefined, + group_by: undefined, + id: undefined, metric: 'conversations_count', since: 1621103400, until: 1621621800, type: 'account', - timezone_offset: -0, + timezone_offset: timezoneOffset(), }, }); }); @@ -59,13 +65,70 @@ describe('#Reports API', () => { group_by: undefined, id: undefined, since: 1621103400, - timezone_offset: -0, + timezone_offset: timezoneOffset(), type: 'account', until: 1621621800, }, }); }); + it('#getDrilldown', () => { + reportsAPI.getDrilldown({ + metric: 'incoming_messages_count', + bucketTimestamp: 1621103400, + from: 1621103400, + to: 1621621800, + type: 'inbox', + id: 1, + groupBy: 'day', + businessHours: false, + page: 2, + perPage: 25, + }); + expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', { + params: { + metric: 'incoming_messages_count', + bucket_timestamp: 1621103400, + since: 1621103400, + until: 1621621800, + type: 'inbox', + id: 1, + group_by: 'day', + business_hours: false, + timezone_offset: timezoneOffset(), + page: 2, + per_page: 25, + }, + }); + }); + + it('#getDrilldown with abort signal', () => { + const controller = new AbortController(); + + reportsAPI.getDrilldown({ + metric: 'incoming_messages_count', + bucketTimestamp: 1621103400, + signal: controller.signal, + }); + + expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', { + params: { + metric: 'incoming_messages_count', + bucket_timestamp: 1621103400, + since: undefined, + until: undefined, + type: 'account', + id: undefined, + group_by: undefined, + business_hours: undefined, + timezone_offset: timezoneOffset(), + page: undefined, + per_page: undefined, + }, + signal: controller.signal, + }); + }); + it('#getAgentReports', () => { reportsAPI.getAgentReports({ from: 1621103400, diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue index df2b22b7e..3486816d5 100644 --- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue +++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue @@ -16,6 +16,10 @@ const props = defineProps({ type: Array, required: true, }, + contact: { + type: Object, + required: true, + }, }); const { t } = useI18n(); @@ -49,7 +53,9 @@ const unreadMessagesCount = computed(() => { const hasSlaThreshold = computed(() => { return ( - slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId + !props.contact?.blocked && + slaCardLabelRef.value?.hasSlaThreshold && + props.conversation?.appliedSla?.id ); }); diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue index f9a2507a1..be3ddf280 100644 --- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue +++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue @@ -126,6 +126,7 @@ const onCardClick = e => { v-show="!showMessagePreviewWithoutMeta" ref="cardMessagePreviewWithMetaRef" :conversation="conversation" + :contact="contact" :account-labels="accountLabels" /> diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue index d0f8f0211..0119b7168 100644 --- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue +++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue @@ -51,7 +51,9 @@ const unreadCount = computed(() => props.chat.unread_count); const slaCardLabel = useTemplateRef('slaCardLabel'); const hasSlaPolicyId = computed( - () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold + () => + !props.currentContact?.blocked && + (props.chat?.applied_sla?.id || slaCardLabel.value?.hasSlaThreshold) ); const selectedModel = computed({ diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue index ff57d6c93..608bd84bd 100644 --- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue +++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue @@ -1,6 +1,6 @@ diff --git a/app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue b/app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue index 98a79c921..359e237ec 100644 --- a/app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue +++ b/app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue @@ -1,6 +1,6 @@ + + diff --git a/app/javascript/dashboard/components-next/DraggableReorderList/specs/DraggableReorderList.spec.js b/app/javascript/dashboard/components-next/DraggableReorderList/specs/DraggableReorderList.spec.js new file mode 100644 index 000000000..a6800beb5 --- /dev/null +++ b/app/javascript/dashboard/components-next/DraggableReorderList/specs/DraggableReorderList.spec.js @@ -0,0 +1,222 @@ +import { mount } from '@vue/test-utils'; +import { h, nextTick } from 'vue'; +import DraggableReorderList from '../DraggableReorderList.vue'; + +// The component is pointer-driven, so we drive it through real pointer events on +// window while mocking the layout APIs jsdom does not implement: elementFromPoint +// (which card is under the cursor) and getBoundingClientRect (its geometry). +const elementAtPoint = { current: null }; + +const move = (clientX, clientY) => + window.dispatchEvent(new MouseEvent('pointermove', { clientX, clientY })); +const release = () => window.dispatchEvent(new MouseEvent('pointerup')); + +// Stack the rows 50px apart, each 40px tall, inside a 500px-wide list. +const stubGeometry = wrapper => { + wrapper.element.getBoundingClientRect = () => ({ + left: 0, + right: 500, + top: 0, + bottom: 600, + }); + wrapper.findAll('[data-drag-id]').forEach((li, index) => { + const top = index * 50; + li.element.getBoundingClientRect = () => ({ + top, + height: 40, + bottom: top + 40, + }); + }); +}; + +const mountList = (props = {}) => + mount(DraggableReorderList, { + props: { items: [], ...props }, + slots: { + item: scope => h('div', { class: 'card' }, scope.item.title), + ghost: scope => h('div', { class: 'ghost' }, scope.item.title), + }, + global: { stubs: { Icon: true, teleport: true } }, + }); + +describe('DraggableReorderList', () => { + let wrapper; + + beforeEach(() => { + elementAtPoint.current = null; + document.elementFromPoint = vi.fn(() => elementAtPoint.current); + }); + + afterEach(() => { + wrapper?.unmount(); + vi.useRealTimers(); + }); + + const startDragging = async id => { + stubGeometry(wrapper); + wrapper.find(`[data-drag-id="${id}"]`).element.dispatchEvent( + new MouseEvent('pointerdown', { + button: 0, + clientX: 250, + clientY: 20, + bubbles: true, + }) + ); + await nextTick(); + }; + + it('renders each item through the item slot', () => { + wrapper = mountList({ + items: [ + { id: 1, title: 'Alpha' }, + { id: 2, title: 'Beta' }, + ], + }); + + const cards = wrapper.findAll('.card'); + expect(cards).toHaveLength(2); + expect(cards[0].text()).toBe('Alpha'); + expect(wrapper.find('[data-drag-id="1"]').exists()).toBe(true); + expect(wrapper.find('[data-drag-id="2"]').exists()).toBe(true); + }); + + it('shows a grab affordance only when enabled', () => { + wrapper = mountList({ items: [{ id: 1, title: 'Alpha' }] }); + expect(wrapper.find('[data-drag-id="1"]').classes()).toContain( + 'cursor-grab' + ); + + wrapper.unmount(); + wrapper = mountList({ items: [{ id: 1, title: 'Alpha' }], disabled: true }); + expect(wrapper.find('[data-drag-id="1"]').classes()).not.toContain( + 'cursor-grab' + ); + }); + + it('does not start a drag when disabled', async () => { + wrapper = mountList({ + items: [ + { id: 1, title: 'Alpha' }, + { id: 2, title: 'Beta' }, + ], + disabled: true, + }); + await startDragging(1); + move(250, 200); + await nextTick(); + + expect(wrapper.emitted('dragging')).toBeUndefined(); + }); + + it('emits dragging true then false across a drag', async () => { + wrapper = mountList({ + items: [ + { id: 1, title: 'Alpha' }, + { id: 2, title: 'Beta' }, + ], + }); + await startDragging(1); + elementAtPoint.current = wrapper.find('[data-drag-id="2"]').element; + move(250, 60); + await nextTick(); + + expect(wrapper.emitted('dragging')[0]).toEqual([true]); + + release(); + await nextTick(); + expect(wrapper.emitted('dragging')[1]).toEqual([false]); + }); + + it('emits the midpoint position when dropped between two rows', async () => { + wrapper = mountList({ + items: [ + { id: 1, title: 'Alpha', position: 10 }, + { id: 2, title: 'Beta', position: 20 }, + { id: 3, title: 'Gamma', position: 30 }, + ], + }); + await startDragging(1); + + // Hover the lower half of Beta (top 50, height 40 → midpoint 70) so the gap + // sits before Gamma; dropping there lands halfway between Beta and Gamma. + elementAtPoint.current = wrapper.find('[data-drag-id="2"]').element; + move(250, 85); + await nextTick(); + release(); + await nextTick(); + + expect(wrapper.emitted('reorder')[0][0]).toEqual({ 1: 25 }); + }); + + it('does not reorder when the only row on a page is dropped in place', async () => { + // P1: dragging the lone article on a later page and releasing without + // crossing to another page must be a no-op, not move it to the top. + wrapper = mountList({ + items: [{ id: 5, title: 'Solo', position: 260 }], + currentPage: 2, + totalPages: 2, + }); + await startDragging(5); + move(250, 300); + await nextTick(); + release(); + await nextTick(); + + expect(wrapper.emitted('dragging')).toEqual([[true], [false]]); + expect(wrapper.emitted('reorder')).toBeUndefined(); + }); + + it('turns the page after dwelling on a pageable edge', async () => { + vi.useFakeTimers(); + wrapper = mountList({ + items: [ + { id: 1, title: 'Alpha', position: 10 }, + { id: 2, title: 'Beta', position: 20 }, + ], + currentPage: 1, + totalPages: 2, + }); + await startDragging(1); + + // Drag to the right edge over blank space (no card) and hold. + elementAtPoint.current = null; + move(490, 20); + await nextTick(); + vi.advanceTimersByTime(600); + + expect(wrapper.emitted('navigatePage')[0]).toEqual([2]); + }); + + it('can still turn pages after releasing during a pending flip', async () => { + // Releasing while a flip fetch is in flight must clear paging state, or every + // later drag would be stuck unable to navigate. + vi.useFakeTimers(); + wrapper = mountList({ + items: [ + { id: 1, title: 'Alpha', position: 10 }, + { id: 2, title: 'Beta', position: 20 }, + ], + currentPage: 1, + totalPages: 2, + }); + + // First drag: park at the edge to start a flip, then release before the new + // page arrives (items never change here). + await startDragging(1); + elementAtPoint.current = null; + move(490, 20); + await nextTick(); + vi.advanceTimersByTime(600); + release(); + await nextTick(); + + // Second drag must be able to flip again. + await startDragging(1); + elementAtPoint.current = null; + move(490, 20); + await nextTick(); + vi.advanceTimersByTime(600); + + expect(wrapper.emitted('navigatePage')).toEqual([[2], [2]]); + }); +}); diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue index 75aeb86d1..9e886d1d3 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue @@ -1,6 +1,5 @@ { state.handoffMessage = config.handoff_message; state.resolutionMessage = config.resolution_message; state.instructions = config.instructions; - state.temperature = config.temperature || 1; }; const handleSystemMessagesUpdate = async () => { @@ -80,7 +78,6 @@ const handleSystemMessagesUpdate = async () => { ...props.assistant.config, handoff_message: state.handoffMessage, resolution_message: state.resolutionMessage, - temperature: state.temperature || 1, }, }; @@ -131,26 +128,6 @@ watch( class="z-0" /> -
- -
- - {{ state.temperature }} -
-

- {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.DESCRIPTION') }} -

-
-
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue index c44ab58e5..ccd71b3a4 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue @@ -5,16 +5,38 @@ import { GROUP_BY_FILTER, METRIC_CHART } from './constants'; import fromUnixTime from 'date-fns/fromUnixTime'; import format from 'date-fns/format'; import { formatTime } from '@chatwoot/utils'; +import { useAlert } from 'dashboard/composables'; import ChartStats from './components/ChartElements/ChartStats.vue'; import BarChart from 'shared/components/charts/BarChart.vue'; +import ReportDrilldownDrawer from './components/ReportDrilldownDrawer.vue'; export default { - components: { ChartStats, BarChart }, + components: { ChartStats, BarChart, ReportDrilldownDrawer }, props: { groupBy: { type: Object, default: () => ({}), }, + from: { + type: Number, + default: 0, + }, + to: { + type: Number, + default: 0, + }, + reportType: { + type: String, + default: 'account', + }, + selectedItemId: { + type: [String, Number], + default: null, + }, + businessHours: { + type: Boolean, + default: false, + }, accountSummaryKey: { type: String, default: 'getAccountSummary', @@ -42,10 +64,27 @@ export default { ); return { calculateTrend, isAverageMetricType }; }, + data() { + return { + drilldownRequest: null, + drilldownMetric: null, + drilldownIndex: null, + }; + }, computed: { ...mapGetters({ accountReport: 'getAccountReports', + currentRole: 'getCurrentRole', }), + isAdmin() { + return this.currentRole === 'administrator'; + }, + canDrilldownPrev() { + return this.findDrillableIndex(this.drilldownIndex - 1, -1) !== null; + }, + canDrilldownNext() { + return this.findDrillableIndex(this.drilldownIndex + 1, 1) !== null; + }, metrics() { const reportKeys = Object.keys(this.reportKeys); const infoText = { @@ -139,6 +178,82 @@ export default { return options; }, + isDrilldownEnabled() { + return !!(this.from && this.to); + }, + onChartElementClick(metric, event) { + if (!this.isDrilldownEnabled()) return; + + const dataPoint = this.accountReport.data[metric.KEY]?.[event.dataIndex]; + if (!this.canOpenDrilldown(metric, dataPoint)) return; + if (!this.isAdmin) { + useAlert(this.$t('REPORT.DRILLDOWN.ADMIN_ONLY')); + return; + } + + this.openDrilldownAt(metric, event.dataIndex); + }, + openDrilldownAt(metric, dataIndex) { + const dataPoint = this.accountReport.data[metric.KEY]?.[dataIndex]; + if (!this.canOpenDrilldown(metric, dataPoint)) return; + + const labels = this.getCollection(metric).labels || []; + + this.drilldownMetric = metric; + this.drilldownIndex = dataIndex; + this.drilldownRequest = { + metric: metric.KEY, + metricName: metric.NAME, + bucketLabel: labels[dataIndex], + bucketTimestamp: dataPoint.timestamp, + bucketValue: dataPoint.value, + isAverageMetric: this.isAverageMetricType(metric.KEY), + from: this.from, + to: this.to, + type: this.reportType, + id: this.selectedItemId, + groupBy: this.groupBy?.period, + businessHours: this.businessHours, + }; + }, + navigateDrilldown(direction) { + const nextIndex = this.findDrillableIndex( + this.drilldownIndex + direction, + direction + ); + if (nextIndex === null) return; + + this.openDrilldownAt(this.drilldownMetric, nextIndex); + }, + findDrillableIndex(startIndex, step) { + if (!this.drilldownMetric) return null; + + const data = this.accountReport.data[this.drilldownMetric.KEY] || []; + for ( + let index = startIndex; + index >= 0 && index < data.length; + index += step + ) { + if (this.canOpenDrilldown(this.drilldownMetric, data[index])) + return index; + } + + return null; + }, + canOpenDrilldown(metric, dataPoint) { + if (!dataPoint) return false; + + if (this.isAverageMetricType(metric.KEY)) { + return dataPoint.count > 0; + } + + return dataPoint.value > 0; + }, + closeDrilldown() { + this.drilldownRequest = null; + this.drilldownMetric = null; + this.drilldownIndex = null; + }, }, }; @@ -168,6 +283,8 @@ export default { v-if="accountReport.data[metric.KEY].length" :collection="getCollection(metric)" :chart-options="getChartOptions(metric)" + :clickable="isDrilldownEnabled()" + @element-click="onChartElementClick(metric, $event)" /> {{ $t('REPORT.NO_ENOUGH_DATA') }} @@ -176,4 +293,23 @@ export default { + diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue new file mode 100644 index 000000000..b9df2e900 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue @@ -0,0 +1,279 @@ + + + diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownDrawer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownDrawer.vue new file mode 100644 index 000000000..f7c3bfd4b --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownDrawer.vue @@ -0,0 +1,315 @@ + + + diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue index e54c9f53e..7b30ee128 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue @@ -69,6 +69,9 @@ export default { isAgentType() { return this.type === 'agent'; }, + selectedFilterId() { + return this.selectedFilter?.id || null; + }, reportKeys() { return { CONVERSATIONS: 'conversations_count', @@ -181,5 +184,10 @@ export default { v-if="filterItemsList.length" :group-by="groupBy" :report-keys="reportKeys" + :from="from" + :to="to" + :report-type="type" + :selected-item-id="selectedFilterId" + :business-hours="businessHours" /> diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownCard.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownCard.spec.js new file mode 100644 index 000000000..7fda49a36 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownCard.spec.js @@ -0,0 +1,195 @@ +import { mount } from '@vue/test-utils'; +import ReportDrilldownCard from '../ReportDrilldownCard.vue'; + +vi.mock('vue-router', () => ({ + useRoute: () => ({ + params: { + accountId: 1, + }, + }), +})); + +vi.mock('vue-i18n', () => ({ + useI18n: () => ({ + t: (key, params = {}) => { + if (key === 'REPORT.DRILLDOWN.MESSAGE_CREATED_AT') { + return `Message created at ${params.time}`; + } + if (key === 'REPORT.DRILLDOWN.EVENT_OCCURRED_AT') { + return `Event occurred at ${params.time}`; + } + if (key === 'REPORT.DRILLDOWN.INCOMING_MESSAGE') { + return 'Incoming message'; + } + if (key === 'REPORT.DRILLDOWN.OUTGOING_MESSAGE') { + return 'Outgoing message'; + } + return key; + }, + }), +})); + +vi.mock('shared/helpers/timeHelper', () => ({ + dynamicTime: timestamp => { + const timestamps = { + 1621103500: '2 minutes ago', + 1621103400: '4 days ago', + 1621103700: '4 days ago', + }; + return timestamps[timestamp] || 'less than a minute ago'; + }, + shortTimestamp: time => { + const timestamps = { + '2 minutes ago': '2m', + '4 days ago': '4d', + }; + return timestamps[time] || 'now'; + }, + dateFormat: timestamp => `date-${timestamp}`, +})); + +describe('ReportDrilldownCard.vue', () => { + const record = { + record_type: 'message', + conversation: { + id: 10, + display_id: 42, + contact_id: 11, + contact_name: 'Jane', + inbox_id: 12, + inbox_name: 'Website', + assignee_id: 13, + assignee_name: 'Alex', + status: 'open', + created_at: 1621103400, + last_activity_at: 1621103700, + last_message: { + id: 100, + content: 'Latest reply', + message_type: 'outgoing', + created_at: 1621103600, + }, + }, + message: { + id: 99, + content: 'Need help', + message_type: 'incoming', + created_at: 1621103500, + }, + metric_value: null, + occurred_at: 1621103500, + }; + + const mountCard = (props = {}) => + mount(ReportDrilldownCard, { + props: { + record, + ...props, + }, + global: { + mocks: { + $t: key => key, + }, + }, + }); + + beforeEach(() => { + vi.spyOn(window, 'open').mockImplementation(() => {}); + }); + + afterEach(() => { + vi.clearAllMocks(); + vi.restoreAllMocks(); + }); + + it('opens the card conversation link in a new tab', async () => { + const wrapper = mountCard(); + + expect(wrapper.text()).toContain('#42'); + expect(wrapper.text()).toContain('Need help'); + expect(wrapper.find('.i-lucide-arrow-down-left').exists()).toBe(true); + expect(wrapper.find('[aria-label="Incoming message"]').exists()).toBe(true); + + await wrapper.find('[role="link"]').trigger('click'); + + expect(window.open).toHaveBeenCalledWith( + '/app/accounts/1/conversations/42?messageId=99', + '_blank', + 'noopener,noreferrer' + ); + }); + + it('renders only message created timestamp for message rows', () => { + const wrapper = mountCard(); + const messageCreatedLabel = wrapper + .findAll('[aria-label]') + .map(timestamp => timestamp.attributes('aria-label')) + .find(label => label.includes('Message created at')); + + expect(wrapper.text()).toContain('2m'); + expect(wrapper.text()).not.toContain('4d • 4d'); + expect(messageCreatedLabel).toContain('Message created at'); + }); + + it('renders separate contact, inbox, and agent links', async () => { + const wrapper = mountCard(); + const links = wrapper.findAll('a'); + + expect(links.map(link => link.attributes('href'))).toEqual([ + '/app/accounts/1/contacts/11', + '/app/accounts/1/inbox/12', + '/app/accounts/1/reports/agents/13', + ]); + expect(links.every(link => link.attributes('target') === '_blank')).toBe( + true + ); + expect( + links.every(link => link.classes().includes('text-n-slate-10')) + ).toBe(true); + expect( + links.every(link => !link.classes().includes('text-n-blue-11')) + ).toBe(true); + expect(wrapper.find('.i-lucide-contact').exists()).toBe(true); + expect(wrapper.find('.i-lucide-inbox').exists()).toBe(true); + expect(wrapper.find('.i-lucide-user-round').exists()).toBe(true); + + await links[0].trigger('click'); + + expect(window.open).not.toHaveBeenCalled(); + }); + + it('renders the last message for conversation rows', () => { + const wrapper = mountCard({ + record: { + ...record, + record_type: 'conversation', + message: null, + occurred_at: 1621103500, + }, + }); + + expect(wrapper.text()).toContain('Latest reply'); + expect(wrapper.text()).toContain('4d • 4d'); + }); + + it('renders event time alongside TimeAgo for event-backed conversation rows', () => { + const wrapper = mountCard({ + record: { + ...record, + record_type: 'conversation', + message: null, + event_name: 'conversation_bot_handoff', + occurred_at: 1621103500, + }, + }); + const eventOccurredLabel = wrapper + .findAll('[aria-label]') + .map(timestamp => timestamp.attributes('aria-label')) + .find(label => label.includes('Event occurred at')); + + expect(wrapper.text()).toContain('Latest reply'); + expect(wrapper.text()).toContain('4d • 4d'); + expect(wrapper.text()).toContain('2m'); + expect(eventOccurredLabel).toContain('Event occurred at'); + }); +}); diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js new file mode 100644 index 000000000..10bc38bee --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js @@ -0,0 +1,352 @@ +import { flushPromises, mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; +import { formatTime } from '@chatwoot/utils'; +import ReportsAPI from 'dashboard/api/reports'; +import ReportDrilldownDrawer from '../ReportDrilldownDrawer.vue'; + +vi.mock('dashboard/api/reports', () => ({ + default: { + getDrilldown: vi.fn(), + }, +})); + +vi.mock('vue-i18n', () => ({ + useI18n: () => ({ + t: (key, params = {}) => { + if (key === 'REPORT.DRILLDOWN.TITLE') { + return `${params.metric} details`; + } + if (key === 'REPORT.DRILLDOWN.RESULT_COUNT_CONVERSATION') { + return `${params.count} conversations`; + } + if (key === 'REPORT.DRILLDOWN.RESULT_COUNT_MESSAGE') { + return `${params.count} messages`; + } + return key; + }, + }), +})); + +describe('ReportDrilldownDrawer.vue', () => { + const request = { + metric: 'incoming_messages_count', + metricName: 'Messages received', + bucketLabel: '20-May', + bucketTimestamp: 1621103400, + from: 1621103400, + to: 1621621800, + type: 'account', + groupBy: 'day', + businessHours: false, + }; + + const payload = [ + { + record_type: 'message', + conversation: { + id: 10, + display_id: 42, + contact_id: 11, + contact_name: 'Jane', + inbox_id: 12, + inbox_name: 'Website', + assignee_id: 13, + assignee_name: 'Alex', + status: 'open', + created_at: 1621103400, + last_activity_at: 1621103700, + last_message: { + id: 100, + content: 'Latest reply', + message_type: 'outgoing', + created_at: 1621103600, + }, + }, + message: { + id: 99, + content: 'Need help', + message_type: 'incoming', + created_at: 1621103500, + }, + metric_value: null, + occurred_at: 1621103500, + }, + ]; + + const mountDrawer = options => + mount(ReportDrilldownDrawer, { + props: { open: true, ...request, ...options?.props }, + attachTo: options?.attachTo, + global: { + stubs: { + TeleportWithDirection: { + template: '
', + }, + Transition: false, + Spinner: true, + Button: { + props: ['label'], + emits: ['click'], + template: + '', + }, + ReportDrilldownCard: { + props: ['record'], + template: + '
#{{ record.conversation.display_id }}
', + }, + }, + mocks: { + $t: key => key, + }, + }, + }); + + beforeEach(() => { + ReportsAPI.getDrilldown.mockResolvedValue({ + data: { + meta: { + total_count: 1, + current_page: 1, + record_type: 'message', + conversation_count: 1, + }, + payload, + }, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + vi.restoreAllMocks(); + }); + + it('loads and renders drilldown cards for the request', async () => { + const wrapper = mountDrawer(); + await flushPromises(); + + expect(ReportsAPI.getDrilldown).toHaveBeenCalledWith( + expect.objectContaining({ + metric: 'incoming_messages_count', + bucketTimestamp: 1621103400, + page: 1, + }) + ); + expect(wrapper.text()).toContain('Messages received'); + expect(wrapper.text()).toContain('1 conversations'); + expect(wrapper.find('[data-testid="drilldown-card"]').text()).toBe('#42'); + }); + + it('shows the bucket aggregate value for average metrics', async () => { + const wrapper = mountDrawer({ + props: { + metric: 'avg_first_response_time', + metricName: 'First response time', + isAverageMetric: true, + bucketValue: 2580, + }, + }); + await flushPromises(); + + expect(wrapper.text()).toContain(formatTime(2580)); + }); + + it('shows both conversation and message counts when they differ (reply time)', async () => { + ReportsAPI.getDrilldown.mockResolvedValue({ + data: { + meta: { + total_count: 8, + current_page: 1, + record_type: 'message', + conversation_count: 5, + }, + payload, + }, + }); + const wrapper = mountDrawer({ + props: { + metric: 'reply_time', + isAverageMetric: true, + bucketValue: 2580, + }, + }); + await flushPromises(); + + expect(wrapper.text()).toContain('5 conversations'); + expect(wrapper.text()).toContain('8 messages'); + }); + + it('hides the message count when it matches the conversation count (first response time)', async () => { + ReportsAPI.getDrilldown.mockResolvedValue({ + data: { + meta: { + total_count: 5, + current_page: 1, + record_type: 'message', + conversation_count: 5, + }, + payload, + }, + }); + const wrapper = mountDrawer({ + props: { + metric: 'avg_first_response_time', + isAverageMetric: true, + bucketValue: 2580, + }, + }); + await flushPromises(); + + expect(wrapper.text()).toContain('5 conversations'); + expect(wrapper.text()).not.toContain('messages'); + }); + + it('shows the plain count as the bucket value for count metrics', async () => { + const wrapper = mountDrawer({ props: { bucketValue: 128 } }); + await flushPromises(); + + expect(wrapper.text()).toContain('128'); + expect(wrapper.text()).not.toContain(formatTime(128)); + }); + + it('hides the redundant subtitle count for conversation-count metrics', async () => { + ReportsAPI.getDrilldown.mockResolvedValue({ + data: { + meta: { + total_count: 5, + current_page: 1, + record_type: 'conversation', + conversation_count: 5, + }, + payload, + }, + }); + const wrapper = mountDrawer({ + props: { metric: 'conversations_count', bucketValue: 5 }, + }); + await flushPromises(); + + expect(wrapper.text()).toContain('5'); + expect(wrapper.text()).not.toContain('conversations'); + }); + + it('keeps the subtitle count when it differs from the stat value', async () => { + ReportsAPI.getDrilldown.mockResolvedValue({ + data: { + meta: { + total_count: 8, + current_page: 1, + record_type: 'conversation', + conversation_count: 5, + }, + payload, + }, + }); + const wrapper = mountDrawer({ + props: { metric: 'resolutions_count', bucketValue: 8 }, + }); + await flushPromises(); + + expect(wrapper.text()).toContain('5 conversations'); + }); + + it('anchors the drawer to the inline-end edge so it flips in RTL', async () => { + const wrapper = mountDrawer(); + await flushPromises(); + + const drawer = wrapper.get('[role="dialog"]'); + expect(drawer.classes()).toContain('end-0'); + expect(drawer.classes()).not.toContain('right-0'); + }); + + it('flips the navigation caret icons in RTL', async () => { + const wrapper = mountDrawer({ props: { canPrev: true, canNext: true } }); + await flushPromises(); + + expect( + wrapper.get('[aria-label="REPORT.DRILLDOWN.PREVIOUS_BUCKET"]').classes() + ).toContain('rtl:rotate-180'); + expect( + wrapper.get('[aria-label="REPORT.DRILLDOWN.NEXT_BUCKET"]').classes() + ).toContain('rtl:rotate-180'); + }); + + it('emits close when the drawer close button is clicked', async () => { + const wrapper = mountDrawer(); + await flushPromises(); + + await wrapper.get('[aria-label="REPORT.DRILLDOWN.CLOSE"]').trigger('click'); + + expect(wrapper.emitted('close')).toBeTruthy(); + }); + + it('emits navigate when the next button is clicked', async () => { + const wrapper = mountDrawer({ props: { canNext: true } }); + await flushPromises(); + + await wrapper + .get('[aria-label="REPORT.DRILLDOWN.NEXT_BUCKET"]') + .trigger('click'); + + expect(wrapper.emitted('navigate')).toStrictEqual([[1]]); + }); + + it('does not emit navigate past the available range', async () => { + const wrapper = mountDrawer({ props: { canPrev: false } }); + await flushPromises(); + + document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' })); + + expect(wrapper.emitted('navigate')).toBeUndefined(); + }); + + it('moves focus into the drawer when opened', async () => { + const target = document.createElement('div'); + document.body.appendChild(target); + const wrapper = mountDrawer({ attachTo: target }); + await flushPromises(); + await nextTick(); + + expect(document.activeElement).toBe( + wrapper.find('[role="dialog"]').element + ); + + wrapper.unmount(); + target.remove(); + }); + + it('closes on Escape even when focus is outside the drawer', async () => { + const target = document.createElement('div'); + document.body.appendChild(target); + const wrapper = mountDrawer({ attachTo: target }); + await flushPromises(); + + document.body.focus(); + document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' })); + + expect(wrapper.emitted('close')).toBeTruthy(); + + wrapper.unmount(); + target.remove(); + }); + + it('restores focus to the previously focused element when closed', async () => { + const opener = document.createElement('button'); + const target = document.createElement('div'); + document.body.appendChild(opener); + document.body.appendChild(target); + opener.focus(); + + const wrapper = mountDrawer({ attachTo: target }); + await flushPromises(); + await nextTick(); + + await wrapper.get('[aria-label="REPORT.DRILLDOWN.CLOSE"]').trigger('click'); + + expect(document.activeElement).toBe(opener); + + wrapper.unmount(); + target.remove(); + opener.remove(); + }); +}); diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/composables/specs/useReportDrilldown.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/specs/useReportDrilldown.spec.js new file mode 100644 index 000000000..b83742b9b --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/specs/useReportDrilldown.spec.js @@ -0,0 +1,124 @@ +import { flushPromises, mount } from '@vue/test-utils'; +import ReportsAPI from 'dashboard/api/reports'; +import { useReportDrilldown } from '../useReportDrilldown'; + +vi.mock('dashboard/api/reports', () => ({ + default: { + getDrilldown: vi.fn(), + }, +})); + +const deferredPromise = () => { + let resolve; + let reject; + const promise = new Promise((resolvePromise, rejectPromise) => { + resolve = resolvePromise; + reject = rejectPromise; + }); + + return { promise, resolve, reject }; +}; + +const drilldownRequest = overrides => ({ + metric: 'conversations_count', + bucketTimestamp: 1, + from: 1621103400, + to: 1621621800, + type: 'account', + groupBy: 'day', + businessHours: false, + ...overrides, +}); + +describe('useReportDrilldown', () => { + const mountComposable = () => + mount({ + setup() { + return useReportDrilldown(); + }, + template: '
', + }); + + afterEach(() => { + vi.clearAllMocks(); + }); + + it('does not request drilldown again for an identical active request', async () => { + const request = deferredPromise(); + ReportsAPI.getDrilldown.mockReturnValue(request.promise); + + const wrapper = mountComposable(); + wrapper.vm.open(drilldownRequest()); + wrapper.vm.open(drilldownRequest()); + + expect(ReportsAPI.getDrilldown).toHaveBeenCalledTimes(1); + }); + + it('aborts an in-flight request when a newer request is opened', async () => { + const firstRequest = deferredPromise(); + const secondRequest = deferredPromise(); + let firstSignal; + + ReportsAPI.getDrilldown + .mockImplementationOnce(({ signal }) => { + firstSignal = signal; + return firstRequest.promise; + }) + .mockReturnValueOnce(secondRequest.promise); + + const wrapper = mountComposable(); + wrapper.vm.open(drilldownRequest({ bucketTimestamp: 1 })); + wrapper.vm.open(drilldownRequest({ bucketTimestamp: 2 })); + + expect(firstSignal.aborted).toBe(true); + }); + + it('passes an abort signal to drilldown requests', async () => { + const request = deferredPromise(); + ReportsAPI.getDrilldown.mockReturnValue(request.promise); + + const wrapper = mountComposable(); + wrapper.vm.open(drilldownRequest()); + + expect(ReportsAPI.getDrilldown).toHaveBeenCalledWith( + expect.objectContaining({ + page: 1, + signal: expect.any(AbortSignal), + }) + ); + }); + + it('ignores stale responses when a newer request is opened first', async () => { + const firstRequest = deferredPromise(); + const secondRequest = deferredPromise(); + ReportsAPI.getDrilldown + .mockReturnValueOnce(firstRequest.promise) + .mockReturnValueOnce(secondRequest.promise); + + const wrapper = mountComposable(); + wrapper.vm.open(drilldownRequest({ bucketTimestamp: 1 })); + wrapper.vm.open(drilldownRequest({ bucketTimestamp: 2 })); + + secondRequest.resolve({ + data: { + meta: { current_page: 1, total_count: 1 }, + payload: [{ id: 'second' }], + }, + }); + await flushPromises(); + + expect(wrapper.vm.records).toEqual([{ id: 'second' }]); + expect(wrapper.vm.meta).toEqual({ current_page: 1, total_count: 1 }); + + firstRequest.resolve({ + data: { + meta: { current_page: 1, total_count: 1 }, + payload: [{ id: 'first' }], + }, + }); + await flushPromises(); + + expect(wrapper.vm.records).toEqual([{ id: 'second' }]); + expect(wrapper.vm.meta).toEqual({ current_page: 1, total_count: 1 }); + }); +}); diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js new file mode 100644 index 000000000..7c37cd9cc --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js @@ -0,0 +1,138 @@ +import { computed, ref } from 'vue'; +import ReportsAPI from 'dashboard/api/reports'; + +export function useReportDrilldown() { + const activeRequest = ref(null); + const records = ref([]); + const meta = ref({}); + const isFetching = ref(false); + const isFetchingMore = ref(false); + const hasError = ref(false); + let requestToken = 0; + let activeRequestController = null; + let activeRequestFingerprint = null; + + const hasRecords = computed(() => records.value.length > 0); + const hasMore = computed(() => { + return records.value.length < (meta.value.total_count || 0); + }); + + const isCurrentRequest = token => + token === requestToken && !!activeRequest.value; + + const requestFingerprint = request => + JSON.stringify({ + metric: request.metric, + bucketTimestamp: request.bucketTimestamp, + from: request.from, + to: request.to, + type: request.type, + id: request.id, + groupBy: request.groupBy, + businessHours: request.businessHours, + }); + + const abortActiveRequest = () => { + if (!activeRequestController) return; + + activeRequestController.abort(); + activeRequestController = null; + }; + + const isAbortError = error => + error?.name === 'AbortError' || + error?.name === 'CanceledError' || + error?.code === 'ERR_CANCELED'; + + const fetchPage = async (page, token = requestToken) => { + if (!activeRequest.value) return; + + const request = activeRequest.value; + const controller = new AbortController(); + const loadingState = page === 1 ? isFetching : isFetchingMore; + activeRequestController = controller; + loadingState.value = true; + hasError.value = false; + + try { + const response = await ReportsAPI.getDrilldown({ + ...request, + page, + signal: controller.signal, + }); + if (!isCurrentRequest(token)) return; + + meta.value = response.data.meta || {}; + records.value = + page === 1 + ? response.data.payload || [] + : [...records.value, ...(response.data.payload || [])]; + } catch (error) { + if (!isCurrentRequest(token) || isAbortError(error)) return; + + hasError.value = true; + } finally { + if (activeRequestController === controller) { + activeRequestController = null; + } + + if (isCurrentRequest(token)) { + loadingState.value = false; + } + } + }; + + const open = async request => { + const fingerprint = requestFingerprint(request); + if (activeRequestFingerprint === fingerprint) return; + + abortActiveRequest(); + requestToken += 1; + activeRequestFingerprint = fingerprint; + activeRequest.value = request; + records.value = []; + meta.value = {}; + hasError.value = false; + isFetchingMore.value = false; + await fetchPage(1, requestToken); + }; + + const close = () => { + abortActiveRequest(); + requestToken += 1; + activeRequestFingerprint = null; + activeRequest.value = null; + records.value = []; + meta.value = {}; + hasError.value = false; + isFetching.value = false; + isFetchingMore.value = false; + }; + + const loadMore = () => { + if ( + !activeRequest.value || + !hasMore.value || + isFetching.value || + isFetchingMore.value + ) { + return; + } + + fetchPage((meta.value.current_page || 1) + 1, requestToken); + }; + + return { + activeRequest, + records, + meta, + isFetching, + isFetchingMore, + hasError, + hasRecords, + hasMore, + open, + close, + loadMore, + }; +} diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/specs/ReportContainer.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/specs/ReportContainer.spec.js new file mode 100644 index 000000000..b45102611 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/specs/ReportContainer.spec.js @@ -0,0 +1,179 @@ +import { shallowMount } from '@vue/test-utils'; +import { useAlert } from 'dashboard/composables'; +import ReportContainer from '../ReportContainer.vue'; + +vi.mock('dashboard/composables', () => ({ + useAlert: vi.fn(), +})); + +vi.mock('dashboard/composables/useReportMetrics', () => ({ + useReportMetrics: () => ({ + calculateTrend: () => 0, + isAverageMetricType: key => + ['avg_first_response_time', 'avg_resolution_time', 'reply_time'].includes( + key + ), + }), +})); + +describe('ReportContainer.vue', () => { + const mountComponent = ({ + dataPoint = { value: 2, timestamp: 1621103400 }, + data, + reportKey = 'conversations_count', + role = 'administrator', + } = {}) => + shallowMount(ReportContainer, { + props: { + from: 1621103400, + to: 1621621800, + groupBy: { period: 'day' }, + reportType: 'inbox', + selectedItemId: 1, + businessHours: true, + reportKeys: { + CONVERSATIONS: reportKey, + }, + }, + global: { + mocks: { + $t: key => key, + $store: { + getters: { + getAccountReports: { + isFetching: { + [reportKey]: false, + }, + data: { + [reportKey]: data || [dataPoint], + }, + }, + getCurrentRole: role, + }, + }, + }, + stubs: { + ChartStats: true, + ReportDrilldownDrawer: { + name: 'ReportDrilldownDrawer', + props: [ + 'open', + 'metric', + 'metricName', + 'bucketLabel', + 'bucketTimestamp', + 'bucketValue', + 'isAverageMetric', + 'from', + 'to', + 'type', + 'id', + 'groupBy', + 'businessHours', + 'canPrev', + 'canNext', + ], + emits: ['navigate', 'close'], + template: '
', + }, + BarChart: { + name: 'BarChart', + props: ['collection', 'chartOptions', 'clickable'], + emits: ['elementClick'], + template: + '