feat(assistant): add suggested prompts COMPASS-10141 (#7667)

Author: gagik

package-lock.json

@@ -106,7 +106,7 @@ export const CompassAssistantDrawer: React.FunctionComponent<{
 export const ClearChatButton: React.FunctionComponent<{
   chat: Chat<AssistantMessage>;
 }> = ({ chat }) => {
-  const { clearError, stop } = useChat({ chat });
+  const { clearError, stop, setMessages } = useChat({ chat });
 
   const handleClearChat = useCallback(async () => {
     const confirmed = await showConfirmation({
@@ -120,15 +120,19 @@ export const ClearChatButton: React.FunctionComponent<{
     if (confirmed) {
       await stop();
       clearError();
-      // Instead of breaking React rules, we should probably expose the "clear"
-      // as an interface on the chat class. Otherwise it's kinda expected taht
-      // we "mutate" messages directly to update the state
+
+      // TODO: We use one chat instance for the entire Assistant service but when a conversation is cleared,
+      // we need to treat it as a new chat. So, we override the ID to a newly generated one.
+      // This is used by e.g. SuggestedPrompts to reset the state of the selected index.
+      // @ts-expect-error This is a readonly property but we need to mutate it to generate a new ID
       // eslint-disable-next-line react-hooks/immutability
-      chat.messages = chat.messages.filter(
-        (message) => message.metadata?.isPermanent
+      chat.id = chat.generateId();
+
+      setMessages(
+        chat.messages.filter((message) => message.metadata?.isPermanent)
       );
     }
-  }, [stop, clearError, chat]);
+  }, [stop, clearError, chat, setMessages]);
 
   const isChatEmpty =
     chat.messages.filter((message) => !message.metadata?.isPermanent).length ===

packages/compass-assistant/src/compass-assistant-drawer.tsx

@@ -20,6 +20,7 @@ import {
 import { ConfirmationMessage } from './confirmation-message';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import { NON_GENUINE_WARNING_MESSAGE } from '../preset-messages';
+import { SuggestedPrompts } from './suggested-prompts';
 
 const { ChatWindow } = LgChatChatWindow;
 const { LeafyGreenChatProvider } = LgChatLeafygreenChatProvider;
@@ -31,6 +32,11 @@ interface AssistantChatProps {
   hasNonGenuineConnections: boolean;
 }
 
+export type SendMessageOptions = {
+  text: string;
+  metadata?: AssistantMessage['metadata'];
+};
+
 // TODO(COMPASS-9751): These are temporary patches to make the Assistant chat take the entire
 // width and height of the drawer since Leafygreen doesn't support this yet.
 const assistantChatFixesStyles = css({
@@ -239,12 +245,15 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
   }, [hasNonGenuineConnections, chat, setMessages]);
 
   const handleMessageSend = useCallback(
-    async (messageBody: string) => {
-      const trimmedMessageBody = messageBody.trim();
+    async ({ text, metadata }: SendMessageOptions) => {
+      const trimmedMessageBody = text.trim();
       if (trimmedMessageBody) {
         await chat.stop();
         void ensureOptInAndSend?.(
-          { text: trimmedMessageBody, metadata: { sendContext: true } },
+          {
+            text: trimmedMessageBody,
+            metadata: { sendContext: true, ...metadata },
+          },
           {},
           () => {
             track('Assistant Prompt Submitted', {
@@ -466,9 +475,10 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
               </p>
             </div>
           )}
+          <SuggestedPrompts chat={chat} onMessageSend={handleMessageSend} />
           <InputBar
             data-testid="assistant-chat-input"
-            onMessageSend={(messageBody) => void handleMessageSend(messageBody)}
+            onMessageSend={(text) => void handleMessageSend({ text })}
             state={status === 'submitted' ? 'loading' : undefined}
             textareaProps={inputBarTextareaProps}
           />