DEV: Group PMs by date

Author: janzenisaac

app/controllers/discourse_ai/ai_bot/conversations_controller.rb

@@ -10,7 +10,6 @@ def index
         page = params[:page].to_i
         per_page = params[:per_page]&.to_i || 40
 
-        bot_user_ids = EntryPoint.all_bot_ids
         base_query =
           Topic
             .private_messages_for_user(current_user)
@@ -26,7 +25,7 @@ def index
         pms = base_query.order(last_posted_at: :desc).offset(page * per_page).limit(per_page)
 
         render json: {
-                 conversations: serialize_data(pms, BasicTopicSerializer),
+                 conversations: serialize_data(pms, ListableTopicSerializer),
                  meta: {
                    total: total,
                    page: page,

assets/javascripts/initializers/ai-conversations-sidebar.js

@@ -1,7 +1,9 @@
 import { tracked } from "@glimmer/tracking";
+import { htmlSafe } from "@ember/template";
 import { TrackedArray } from "@ember-compat/tracked-built-ins";
 import { ajax } from "discourse/lib/ajax";
 import { bind } from "discourse/lib/decorators";
+import { autoUpdatingRelativeAge } from "discourse/lib/formatter";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { i18n } from "discourse-i18n";
 import AiBotSidebarNewConversation from "../discourse/components/ai-bot-sidebar-new-conversation";
@@ -85,6 +87,9 @@ export default {
             @tracked links = new TrackedArray();
             @tracked topics = [];
             @tracked hasMore = [];
+            @tracked loadedSevenDayLabel = false;
+            @tracked loadedThirtyDayLabel = false;
+            @tracked loadedMonthLabels = new Set();
             page = 0;
             isFetching = false;
             totalTopicsCount = 0;
@@ -127,7 +132,16 @@ export default {
             }
 
             addNewPMToSidebar(topic) {
-              this.links = [new AiConversationLink(topic), ...this.links];
+              // Reset category labels since we're adding a new topic
+              this.loadedSevenDayLabel = false;
+              this.loadedThirtyDayLabel = false;
+              this.loadedMonthLabels.clear();
+
+              // Build links again with the new topic
+              const allTopics = [topic, ...this.topics];
+              this.topics = allTopics;
+              this.buildSidebarLinks();
+
               this.watchForTitleUpdate(topic);
             }
 
@@ -206,10 +220,71 @@ export default {
               this.fetchMessages(true);
             }
 
-            buildSidebarLinks() {
-              this.links = this.topics.map(
-                (topic) => new AiConversationLink(topic)
+            groupByDate(topic) {
+              const now = new Date();
+              const lastPostedAt = new Date(topic.last_posted_at);
+              const daysDiff = Math.round(
+                (now - lastPostedAt) / (1000 * 60 * 60 * 24)
               );
+
+              // Last 7 days group
+              if (daysDiff <= 7) {
+                if (!this.loadedSevenDayLabel) {
+                  this.loadedSevenDayLabel = true;
+                  return {
+                    text: i18n("discourse_ai.ai_bot.conversations.last_7_days"),
+                    classNames: "date-heading",
+                    name: "date-heading-last-7-days",
+                  };
+                }
+              }
+              // Last 30 days group
+              else if (daysDiff <= 30) {
+                if (!this.loadedThirtyDayLabel) {
+                  this.loadedThirtyDayLabel = true;
+                  return {
+                    text: i18n(
+                      "discourse_ai.ai_bot.conversations.last_30_days"
+                    ),
+                    classNames: "date-heading",
+                    name: "date-heading-last-30-days",
+                  };
+                }
+              }
+              // Group by month for older conversations
+              else {
+                const month = lastPostedAt.getMonth();
+                const year = lastPostedAt.getFullYear();
+                const monthKey = `${year}-${month}`;
+
+                if (!this.loadedMonthLabels.has(monthKey)) {
+                  this.loadedMonthLabels.add(monthKey);
+
+                  const formattedDate = autoUpdatingRelativeAge(
+                    new Date(topic.last_posted_at)
+                  );
+
+                  return {
+                    text: htmlSafe(formattedDate),
+                    classNames: "date-heading",
+                    name: `date-heading-${monthKey}`,
+                  };
+                }
+              }
+            }
+
+            buildSidebarLinks() {
+              // Reset date header tracking
+              this.loadedSevenDayLabel = false;
+              this.loadedThirtyDayLabel = false;
+              this.loadedMonthLabels.clear();
+
+              this.links = [...this.topics].flatMap((topic) => {
+                const dateLabel = this.groupByDate(topic);
+                return dateLabel
+                  ? [dateLabel, new AiConversationLink(topic)]
+                  : [new AiConversationLink(topic)];
+              });
             }
 
             watchForTitleUpdate(topic) {

assets/stylesheets/modules/ai-bot-conversations/common.scss

@@ -10,6 +10,10 @@ body.has-ai-conversations-sidebar {
     margin: 1.8em 1rem 0;
   }
 
+  .sidebar-toggle-all-sections {
+    display: none;
+  }
+
   .sidebar-wrapper {
     .ai-conversations-panel {
       padding-top: 1em;
@@ -18,19 +22,24 @@ body.has-ai-conversations-sidebar {
     // ai related sidebar content
     [data-section-name="ai-conversations-history"] {
       .sidebar-section-header-wrapper {
-        pointer-events: none;
-        font-size: var(--font-down-1);
-
-        .sidebar-section-header-caret {
-          display: none;
-        }
-
-        .sidebar-section-header-text {
-          letter-spacing: 0.5px;
-        }
+        display: none;
       }
 
       .sidebar-section-link-wrapper {
+        .sidebar-section-link.date-heading {
+          pointer-events: none;
+          cursor: default;
+          color: var(--primary-medium);
+          font-weight: normal;
+          opacity: 0.8;
+          font-weight: 700;
+          margin-top: 1em;
+
+          &[data-link-name="date-heading-last-7-days"] {
+            margin-top: 0;
+          }
+        }
+
         .sidebar-section-link {
           height: unset;
           padding-block: 0.65em;

config/locales/client.en.yml

@@ -727,6 +727,8 @@ en:
           new: "New Question"
           min_input_length_message: "Message must be longer than 10 characters"
           messages_sidebar_title: "Conversations"
+          last_7_days: "Last 7 days"
+          last_30_days: "Last 30 days"
       sentiments:
         dashboard:
           title: "Sentiment"