From c4d60ea1d80269460956899afcb7b2ad537c27a4 Mon Sep 17 00:00:00 2001
From: rawagner <rawagner@redhat.com>
Date: Mon, 25 Aug 2025 08:54:49 +0200
Subject: [PATCH 1/2] Chatbot conversation history

---
 .../lib/components/ChatBot/ChatBotHistory.tsx | 101 +++++++
 .../lib/components/ChatBot/ChatBotWindow.tsx  | 259 +++++++++---------
 .../ChatBot/ConfirmNewChatModal.tsx           |  43 ---
 libs/chatbot/lib/hooks/use-message.ts         |  51 +++-
 4 files changed, 279 insertions(+), 175 deletions(-)
 create mode 100644 libs/chatbot/lib/components/ChatBot/ChatBotHistory.tsx
 delete mode 100644 libs/chatbot/lib/components/ChatBot/ConfirmNewChatModal.tsx

diff --git a/libs/chatbot/lib/components/ChatBot/ChatBotHistory.tsx b/libs/chatbot/lib/components/ChatBot/ChatBotHistory.tsx
new file mode 100644
index 0000000000..05274a2e21
--- /dev/null
+++ b/libs/chatbot/lib/components/ChatBot/ChatBotHistory.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import {
+  ChatbotConversationHistoryNav,
+  ChatbotDisplayMode,
+  Conversation,
+} from '@patternfly-6/chatbot';
+import { Alert } from '@patternfly-6/react-core';
+import { getErrorMessage } from './helpers';
+
+type ConversationHistory = { conversations: { conversation_id: string; created_at: string }[] };
+
+type ChatBotHistoryProps = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  onApiCall: typeof fetch;
+  startNewConversation: VoidFunction;
+  loadConversation: (id: string) => Promise<unknown>;
+  conversationId?: string;
+};
+
+const ChatBotHistory = ({
+  isOpen,
+  setIsOpen,
+  children,
+  onApiCall,
+  conversationId,
+  startNewConversation,
+  loadConversation,
+}: React.PropsWithChildren<ChatBotHistoryProps>) => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [conversations, setConversations] = React.useState<Conversation[]>([]);
+  const [error, setError] = React.useState<string>();
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setIsLoading(true);
+      setError(undefined);
+      void (async () => {
+        try {
+          const resp = await onApiCall('/v1/conversations');
+          if (!resp.ok) {
+            throw Error(`Unexpected response code: ${resp.status}`);
+          }
+          const cnvs = (await resp.json()) as ConversationHistory;
+          setConversations(
+            cnvs.conversations
+              .sort((a, b) => Date.parse(b.created_at) - Date.parse(a.created_at))
+              .map(({ conversation_id, created_at }) => ({
+                id: conversation_id,
+                text: new Date(created_at).toLocaleString(),
+              })),
+          );
+        } catch (e) {
+          setError(getErrorMessage(e));
+        } finally {
+          setIsLoading(false);
+        }
+      })();
+    }
+  }, [isOpen, onApiCall]);
+
+  return (
+    <ChatbotConversationHistoryNav
+      setIsDrawerOpen={setIsOpen}
+      isDrawerOpen={isOpen}
+      drawerContent={children}
+      displayMode={ChatbotDisplayMode.default}
+      onDrawerToggle={() => {
+        setIsOpen(!isOpen);
+      }}
+      isLoading={isLoading}
+      conversations={conversations}
+      onNewChat={startNewConversation}
+      onSelectActiveItem={(_, itemId) => {
+        itemId !== undefined && void loadConversation(`${itemId}`);
+        setIsOpen(!isOpen);
+      }}
+      activeItemId={conversationId}
+      errorState={
+        error
+          ? {
+              bodyText: (
+                <Alert variant="danger" isInline title="Failed to load conversation history">
+                  {error}
+                </Alert>
+              ),
+            }
+          : undefined
+      }
+      emptyState={
+        !isLoading && !conversations.length
+          ? {
+              bodyText: 'No conversation history',
+            }
+          : undefined
+      }
+    />
+  );
+};
+
+export default ChatBotHistory;
diff --git a/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx b/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx
index 54c1a25407..7b9a7c72be 100644
--- a/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx
+++ b/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx
@@ -7,6 +7,10 @@ import {
   ChatbotFooter,
   ChatbotFootnote,
   ChatbotHeader,
+  ChatbotHeaderActions,
+  ChatbotHeaderCloseButton,
+  ChatbotHeaderMain,
+  ChatbotHeaderMenu,
   ChatbotHeaderTitle,
   ChatbotWelcomePrompt,
   Message,
@@ -14,17 +18,15 @@ import {
   MessageBox,
   MessageBoxHandle,
 } from '@patternfly-6/chatbot';
-import { Brand, Button, Flex, FlexItem, Tooltip } from '@patternfly-6/react-core';
-import { PlusIcon } from '@patternfly-6/react-icons/dist/js/icons/plus-icon';
-import { TimesIcon } from '@patternfly-6/react-icons/dist/js/icons/times-icon';
+import { Brand, EmptyState, Spinner } from '@patternfly-6/react-core';
 
 import BotMessage from './BotMessage';
-import ConfirmNewChatModal from './ConfirmNewChatModal';
 import { MESSAGE_BAR_ID, botRole, userRole, MsgProps } from './helpers';
 import AIAlert from './AIAlert';
 
 import LightSpeedLogo from '../../assets/lightspeed-logo.svg';
 import UserAvatar from '../../assets/avatarimg.svg';
+import ChatBotHistory from './ChatBotHistory';
 
 export type ChatBotWindowProps = {
   error?: string;
@@ -39,6 +41,8 @@ export type ChatBotWindowProps = {
   isStreaming: boolean;
   announcement: string | undefined;
   openClusterDetails: (clusterId: string) => void;
+  isLoading: boolean;
+  loadConversation: (convId: string) => Promise<unknown>;
 };
 
 const ChatBotWindow = ({
@@ -54,20 +58,22 @@ const ChatBotWindow = ({
   error,
   resetError,
   openClusterDetails,
+  isLoading,
+  loadConversation,
 }: ChatBotWindowProps) => {
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
   const [triggerScroll, setTriggerScroll] = React.useState(0);
   const [msg, setMsg] = React.useState('');
-  const [isConfirmModalOpen, setIsConfirmModalOpen] = React.useState(false);
   const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
   const lastUserMsgRef = React.useRef<HTMLDivElement>(null);
   const msgBoxRef = React.useRef<MessageBoxHandle>(null);
   const msgBarRef = React.useRef<HTMLTextAreaElement>(null);
 
   React.useLayoutEffect(() => {
-    if (!isConfirmModalOpen) {
-      msgBarRef.current?.focus();
+    if (!isDrawerOpen) {
+      requestAnimationFrame(() => msgBarRef.current?.focus());
     }
-  }, [isConfirmModalOpen]);
+  }, [isDrawerOpen, isLoading]);
 
   React.useEffect(() => {
     if (triggerScroll === 0) {
@@ -81,7 +87,7 @@ const ChatBotWindow = ({
         });
       }
     }
-  }, [triggerScroll]);
+  }, [triggerScroll, isLoading]);
 
   const getVisibleHeight = () => {
     if (lastUserMsgRef.current && msgBoxRef.current) {
@@ -94,131 +100,122 @@ const ChatBotWindow = ({
 
   return (
     <Chatbot displayMode={ChatbotDisplayMode.default}>
-      <ChatbotHeader>
-        <ChatbotHeaderTitle>
-          <Flex
-            justifyContent={{ default: 'justifyContentSpaceBetween' }}
-            className="pf-v6-u-w-100"
-          >
-            <FlexItem>
-              <Tooltip content="New chat">
-                <Button
-                  variant="plain"
-                  aria-label="New chat"
-                  id="new-chat-button"
-                  icon={<PlusIcon size={40} />}
-                  onClick={() => setIsConfirmModalOpen(true)}
-                  isDisabled={messages.length === 0}
-                />
-              </Tooltip>
-            </FlexItem>
-            <FlexItem>
-              <Brand
-                src={LightSpeedLogo}
-                alt="Red Hat Lightspeed"
-                style={{ height: 40, width: 40 }}
+      <ChatBotHistory
+        isOpen={isDrawerOpen}
+        setIsOpen={setIsDrawerOpen}
+        onApiCall={onApiCall}
+        startNewConversation={() => {
+          startNewConversation();
+          setIsDrawerOpen(false);
+        }}
+        loadConversation={(id) => {
+          setTriggerScroll(0);
+          return loadConversation(id);
+        }}
+        conversationId={conversationId}
+      >
+        <>
+          <ChatbotHeader>
+            <ChatbotHeaderMain>
+              <ChatbotHeaderMenu
+                aria-expanded={isDrawerOpen}
+                onMenuToggle={() => setIsDrawerOpen(!isDrawerOpen)}
               />
-            </FlexItem>
-            <FlexItem>
-              <Tooltip content="Close chat">
-                <Button
-                  variant="plain"
-                  aria-label="Close chat"
-                  id="close-chat-button"
-                  icon={<TimesIcon size={40} />}
-                  onClick={onClose}
-                />
-              </Tooltip>
-            </FlexItem>
-          </Flex>
-        </ChatbotHeaderTitle>
-      </ChatbotHeader>
-      <ChatbotContent>
-        <MessageBox announcement={announcement} position={'top'} ref={msgBoxRef}>
-          <AIAlert />
-          {messages.length === 0 && (
-            <ChatbotWelcomePrompt
-              title={`Hi, ${username}!`}
-              description="How can I help you today?"
-            />
-          )}
-          {messages.map((message, index) => {
-            const isLastMsg = index === messages.length - 1;
-            const messageKey = conversationId ? `${conversationId}-${index}` : index;
-            const isBotMessage = message.pfProps.role === botRole;
-            if (isBotMessage) {
-              return (
-                <BotMessage
-                  key={messageKey}
-                  message={message}
-                  onApiCall={onApiCall}
-                  conversationId={conversationId}
-                  userMsg={index > 0 ? messages[index - 1].pfProps.content || '' : ''}
-                  isLoading={index === messages.length - 1 && isStreaming}
-                  initHeight={isLastMsg ? getVisibleHeight() : undefined}
-                  isLastMsg={isLastMsg}
-                  openClusterDetails={openClusterDetails}
+              <ChatbotHeaderTitle>
+                <Brand
+                  src={LightSpeedLogo}
+                  alt="Red Hat Lightspeed"
+                  style={{ height: 40, width: 40 }}
                 />
-              );
-            }
+              </ChatbotHeaderTitle>
+            </ChatbotHeaderMain>
+            <ChatbotHeaderActions>
+              <ChatbotHeaderCloseButton onClick={onClose} />
+            </ChatbotHeaderActions>
+          </ChatbotHeader>
+          <ChatbotContent>
+            {isLoading ? (
+              <EmptyState titleText="Loading conversation" headingLevel="h4" icon={Spinner} />
+            ) : (
+              <MessageBox announcement={announcement} position={'top'} ref={msgBoxRef}>
+                <AIAlert />
+                {messages.length === 0 && (
+                  <ChatbotWelcomePrompt
+                    title={`Hi, ${username}!`}
+                    description="How can I help you today?"
+                  />
+                )}
+                {messages.map((message, index) => {
+                  const isLastMsg = index === messages.length - 1;
+                  const messageKey = conversationId ? `${conversationId}-${index}` : index;
+                  const isBotMessage = message.pfProps.role === botRole;
+                  if (isBotMessage) {
+                    return (
+                      <BotMessage
+                        key={messageKey}
+                        message={message}
+                        onApiCall={onApiCall}
+                        conversationId={conversationId}
+                        userMsg={index > 0 ? messages[index - 1].pfProps.content || '' : ''}
+                        isLoading={index === messages.length - 1 && isStreaming}
+                        initHeight={isLastMsg ? getVisibleHeight() : undefined}
+                        isLastMsg={isLastMsg}
+                        openClusterDetails={openClusterDetails}
+                      />
+                    );
+                  }
 
-            return (
-              <Message
-                key={messageKey}
-                {...message.pfProps}
-                innerRef={index === messages.length - 1 - lastUserMsg ? lastUserMsgRef : undefined}
-                avatar={UserAvatar}
-                name={username}
-                hasRoundAvatar={false}
-                avatarProps={{
-                  style: {
-                    height: 48,
-                    width: 48,
-                  },
-                }}
-              />
-            );
-          })}
-          {error && (
-            <ChatbotAlert variant="danger" onClose={resetError} title="An error occurred">
-              {error}
-            </ChatbotAlert>
-          )}
-          <div ref={scrollToBottomRef} />
-        </MessageBox>
-      </ChatbotContent>
-      <ChatbotFooter>
-        <MessageBar
-          id={MESSAGE_BAR_ID}
-          onSendMessage={() => {
-            void sentMessage(msg);
-            setTriggerScroll(triggerScroll + 1);
-            setMsg('');
-          }}
-          isSendButtonDisabled={isStreaming || !msg.trim()}
-          hasAttachButton={false}
-          onChange={(_, value) => setMsg(`${value}`)}
-          ref={msgBarRef}
-        />
-        <ChatbotFootnote
-          label="Always review AI generated content prior to use"
-          popover={{
-            title: 'Feature preview',
-            description: `This tool is a preview, and while we strive for accuracy, there's always a possibility of errors. We recommend that you review AI generated content prior to use.`,
-          }}
-        />
-      </ChatbotFooter>
-      {isConfirmModalOpen && (
-        <ConfirmNewChatModal
-          onConfirm={() => {
-            startNewConversation();
-            setIsConfirmModalOpen(false);
-          }}
-          onCancel={() => {
-            setIsConfirmModalOpen(false);
-          }}
-        />
-      )}
+                  return (
+                    <Message
+                      key={messageKey}
+                      {...message.pfProps}
+                      innerRef={
+                        index === messages.length - 1 - lastUserMsg ? lastUserMsgRef : undefined
+                      }
+                      avatar={UserAvatar}
+                      name={username}
+                      hasRoundAvatar={false}
+                      avatarProps={{
+                        style: {
+                          height: 48,
+                          width: 48,
+                        },
+                      }}
+                    />
+                  );
+                })}
+                {error && (
+                  <ChatbotAlert variant="danger" onClose={resetError} title="An error occurred">
+                    {error}
+                  </ChatbotAlert>
+                )}
+                <div ref={scrollToBottomRef} />
+              </MessageBox>
+            )}
+          </ChatbotContent>
+          <ChatbotFooter>
+            <MessageBar
+              id={MESSAGE_BAR_ID}
+              onSendMessage={() => {
+                void sentMessage(msg);
+                setTriggerScroll(triggerScroll + 1);
+                setMsg('');
+              }}
+              isSendButtonDisabled={isStreaming || !msg.trim() || isLoading}
+              hasAttachButton={false}
+              onChange={(_, value) => setMsg(`${value}`)}
+              ref={msgBarRef}
+            />
+            <ChatbotFootnote
+              label="Always review AI generated content prior to use"
+              popover={{
+                title: 'Feature preview',
+                description: `This tool is a preview, and while we strive for accuracy, there's always a possibility of errors. We recommend that you review AI generated content prior to use.`,
+              }}
+            />
+          </ChatbotFooter>
+        </>
+      </ChatBotHistory>
     </Chatbot>
   );
 };
diff --git a/libs/chatbot/lib/components/ChatBot/ConfirmNewChatModal.tsx b/libs/chatbot/lib/components/ChatBot/ConfirmNewChatModal.tsx
deleted file mode 100644
index c95d202b5f..0000000000
--- a/libs/chatbot/lib/components/ChatBot/ConfirmNewChatModal.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalVariant,
-} from '@patternfly-6/react-core';
-
-const ConfirmNewChatModal = ({
-  onConfirm,
-  onCancel,
-}: {
-  onConfirm: VoidFunction;
-  onCancel: VoidFunction;
-}) => {
-  const btnRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    btnRef.current?.focus();
-  }, []);
-
-  return (
-    <Modal variant={ModalVariant.small} isOpen onClose={onCancel}>
-      <ModalHeader title="Start a new chat?" />
-      <ModalBody>
-        Starting a new chat will permanently erase your current conversation. If you want to save
-        any information, please copy it before proceeding.
-      </ModalBody>
-      <ModalFooter>
-        <Button variant="link" onClick={onCancel}>
-          Cancel
-        </Button>
-        <Button variant="danger" onClick={onConfirm} ref={btnRef}>
-          Erase and start a new chat
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-};
-
-export default ConfirmNewChatModal;
diff --git a/libs/chatbot/lib/hooks/use-message.ts b/libs/chatbot/lib/hooks/use-message.ts
index b51fc465eb..26fc9aeb2d 100644
--- a/libs/chatbot/lib/hooks/use-message.ts
+++ b/libs/chatbot/lib/hooks/use-message.ts
@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { ChatBotWindowProps } from '../components/ChatBot/ChatBotWindow';
-import { botRole, getErrorMessage, getToolAction, userRole } from '../components/ChatBot/helpers';
+import {
+  botRole,
+  getErrorMessage,
+  getToolAction,
+  MsgProps,
+  userRole,
+} from '../components/ChatBot/helpers';
 
 import {
   isEndStreamEvent,
@@ -11,12 +17,53 @@ import {
   StreamEvent,
 } from '../components/ChatBot/types';
 
+type Conversation = {
+  chat_history: {
+    messages: { content: string; type: 'user' | 'assistant' }[];
+    completed_at: string;
+  }[];
+};
+
 export const useMessages = ({ onApiCall }: { onApiCall: typeof fetch }) => {
   const [error, setError] = React.useState<string>();
   const [isStreaming, setIsStreaming] = React.useState(false);
   const [announcement, setAnnouncement] = React.useState<string>();
   const [messages, setMessages] = React.useState<ChatBotWindowProps['messages']>([]);
   const [conversationId, setConversationId] = React.useState<string>();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const loadConversation = React.useCallback(
+    async (convId: string) => {
+      setIsLoading(true);
+      setError(undefined);
+      setConversationId(convId);
+      setMessages([]);
+      try {
+        const resp = await onApiCall(`/v1/conversations/${convId}`);
+        if (!resp.ok) {
+          throw Error(`Unexpected response code: ${resp.status}`);
+        }
+        const conv = (await resp.json()) as Conversation;
+
+        const msgs = conv.chat_history.flatMap(({ messages, completed_at }) => {
+          const timestamp = new Date(completed_at).toLocaleString();
+          return messages.map<MsgProps>(({ content, type }) => ({
+            pfProps: {
+              content,
+              role: type === 'assistant' ? botRole : userRole,
+              timestamp,
+            },
+          }));
+        });
+        setMessages(msgs);
+      } catch (e) {
+        setError(getErrorMessage(e));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [onApiCall],
+  );
 
   const sentMessage = React.useCallback(
     async (message: string) => {
@@ -178,5 +225,7 @@ export const useMessages = ({ onApiCall }: { onApiCall: typeof fetch }) => {
     announcement,
     error,
     resetError,
+    isLoading,
+    loadConversation,
   };
 };

From 4e41f0dbab9b5a5fe20b2096ef03a1bf27c0a4fb Mon Sep 17 00:00:00 2001
From: rawagner <rawagner@redhat.com>
Date: Mon, 25 Aug 2025 11:03:54 +0200
Subject: [PATCH 2/2] Add abort controller & improve type naming

---
 .../lib/components/ChatBot/ChatBotHistory.tsx | 55 +++++++++++--------
 .../lib/components/ChatBot/ChatBotWindow.tsx  |  2 +-
 libs/chatbot/lib/hooks/use-message.ts         |  4 +-
 3 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/libs/chatbot/lib/components/ChatBot/ChatBotHistory.tsx b/libs/chatbot/lib/components/ChatBot/ChatBotHistory.tsx
index 05274a2e21..0895abfe6e 100644
--- a/libs/chatbot/lib/components/ChatBot/ChatBotHistory.tsx
+++ b/libs/chatbot/lib/components/ChatBot/ChatBotHistory.tsx
@@ -32,31 +32,38 @@ const ChatBotHistory = ({
   const [error, setError] = React.useState<string>();
 
   React.useEffect(() => {
-    if (isOpen) {
-      setIsLoading(true);
-      setError(undefined);
-      void (async () => {
-        try {
-          const resp = await onApiCall('/v1/conversations');
-          if (!resp.ok) {
-            throw Error(`Unexpected response code: ${resp.status}`);
-          }
-          const cnvs = (await resp.json()) as ConversationHistory;
-          setConversations(
-            cnvs.conversations
-              .sort((a, b) => Date.parse(b.created_at) - Date.parse(a.created_at))
-              .map(({ conversation_id, created_at }) => ({
-                id: conversation_id,
-                text: new Date(created_at).toLocaleString(),
-              })),
-          );
-        } catch (e) {
-          setError(getErrorMessage(e));
-        } finally {
-          setIsLoading(false);
-        }
-      })();
+    if (!isOpen) {
+      return;
     }
+    const abortController = new AbortController();
+    setIsLoading(true);
+    setError(undefined);
+    void (async () => {
+      try {
+        const resp = await onApiCall('/v1/conversations');
+        if (!resp.ok) {
+          throw Error(`Unexpected response code: ${resp.status}`);
+        }
+        const cnvs = (await resp.json()) as ConversationHistory;
+        setConversations(
+          cnvs.conversations
+            .sort((a, b) => Date.parse(b.created_at) - Date.parse(a.created_at))
+            .map(({ conversation_id, created_at }) => ({
+              id: conversation_id,
+              text: new Date(created_at).toLocaleString(),
+            })),
+        );
+      } catch (e) {
+        // aborting fetch trows 'AbortError', we can ignore it
+        if (abortController.signal.aborted) {
+          return;
+        }
+        setError(getErrorMessage(e));
+      } finally {
+        setIsLoading(false);
+      }
+    })();
+    return () => abortController.abort();
   }, [isOpen, onApiCall]);
 
   return (
diff --git a/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx b/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx
index 7b9a7c72be..b8841f1c04 100644
--- a/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx
+++ b/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx
@@ -198,7 +198,7 @@ const ChatBotWindow = ({
               id={MESSAGE_BAR_ID}
               onSendMessage={() => {
                 void sentMessage(msg);
-                setTriggerScroll(triggerScroll + 1);
+                setTriggerScroll((prev) => prev + 1);
                 setMsg('');
               }}
               isSendButtonDisabled={isStreaming || !msg.trim() || isLoading}
diff --git a/libs/chatbot/lib/hooks/use-message.ts b/libs/chatbot/lib/hooks/use-message.ts
index 26fc9aeb2d..aeb44178c7 100644
--- a/libs/chatbot/lib/hooks/use-message.ts
+++ b/libs/chatbot/lib/hooks/use-message.ts
@@ -17,7 +17,7 @@ import {
   StreamEvent,
 } from '../components/ChatBot/types';
 
-type Conversation = {
+type ConversationHistory = {
   chat_history: {
     messages: { content: string; type: 'user' | 'assistant' }[];
     completed_at: string;
@@ -43,7 +43,7 @@ export const useMessages = ({ onApiCall }: { onApiCall: typeof fetch }) => {
         if (!resp.ok) {
           throw Error(`Unexpected response code: ${resp.status}`);
         }
-        const conv = (await resp.json()) as Conversation;
+        const conv = (await resp.json()) as ConversationHistory;
 
         const msgs = conv.chat_history.flatMap(({ messages, completed_at }) => {
           const timestamp = new Date(completed_at).toLocaleString();