add conversation ID

mongodben · mongodben · commit 10df80bf7a8e · 2023-07-27T16:21:55.000-04:00
diff --git a/chat-ui/.env.qa b/chat-ui/.env.qa
@@ -1 +1,2 @@
 VITE_SERVER_BASE_URL=https://chat-qa.docs.staging.corp.mongodb.com/api/v1
+VITE_QA=true
diff --git a/chat-ui/src/Chatbot.tsx b/chat-ui/src/Chatbot.tsx
@@ -4,7 +4,7 @@ import Badge from "@leafygreen-ui/badge";
 import Banner from "@leafygreen-ui/banner";
 // import Card from "@leafygreen-ui/card";
 import Box from "@leafygreen-ui/box";
-import { Subtitle, Body, Link } from "@leafygreen-ui/typography";
+import { Subtitle, Body, Link, InlineCode } from "@leafygreen-ui/typography";
 import useConversation, { Conversation } from "./useConversation";
 import { CSSTransition } from "react-transition-group";
 import { useClickAway } from "@uidotdev/usehooks";
@@ -44,7 +44,7 @@ function ErrorBanner() {
   return (
     <Banner className={styles.lg_banner} variant="danger">
       Something went wrong. Try reloading the page and starting a new
-      conversation.     
+      conversation.
     </Banner>
   );
 }
@@ -58,6 +58,16 @@ function VerifyInformationBanner() {
   );
 }
 
+function ConversationIdInfo({ conversation }: { conversation: Conversation }) {
+  return import.meta.env.VITE_QA ? (
+    <div>
+      <Body>
+        Conversation ID: <InlineCode>{conversation.conversationId}</InlineCode>
+      </Body>
+    </div>
+  ) : null;
+}
+
 type CTACardProps = {
   active: boolean;
   cardRef: React.RefObject<HTMLDivElement>;
@@ -96,6 +106,7 @@ function CTACard({
     <Box ref={cardRef} className={styles.card}>
       {active && !isEmptyConversation ? (
         <>
+          <ConversationIdInfo conversation={conversation} />
           <div className={styles.card_content_title}>
             <Subtitle>MongoDB AI</Subtitle>
             <Badge variant="blue">Experimental</Badge>
@@ -112,7 +123,8 @@ function CTACard({
           <MessageList>
             {conversation.messages.map((message) => {
               const showLoadingSkeleton = conversation.isStreamingMessage
-                ? message.id === conversation.streamingMessage?.id && conversation.streamingMessage?.content === ""
+                ? message.id === conversation.streamingMessage?.id &&
+                  conversation.streamingMessage?.content === ""
                 : awaitingReply;
               return showLoadingSkeleton ? (
                 <Message key={message.id} role="assistant">
@@ -131,7 +143,7 @@ function CTACard({
       ) : null}
 
       {active && conversation.error ? <ErrorBanner /> : null}
-        
+
       {active ? <VerifyInformationBanner /> : null}
 
       {!active || !conversation.error ? (
diff --git a/chat-ui/src/vite-env.d.ts b/chat-ui/src/vite-env.d.ts
@@ -1,6 +1,7 @@
 /// <reference types="vite/client" />
 interface ImportMetaEnv {
   readonly VITE_SERVER_BASE_URL: string;
+  readonly VITE_QA: string?;
   // more env variables...
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`VITE_SERVER_BASE_URL=https://chat-qa.docs.staging.corp.mongodb.com/api/v1`
	`2`	`+VITE_QA=true`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`/// <reference types="vite/client" />`
`2`	`2`	`interface ImportMetaEnv {`
`3`	`3`	`readonly VITE_SERVER_BASE_URL: string;`
	`4`	`+ readonly VITE_QA: string?;`
`4`	`5`	`// more env variables...`
`5`	`6`	`}`
`6`	`7`