(EAI-1083) [UI] Update "experimental" language and pill on chatbot (#767)

* (EAI-1083) [UI] Update "experimental" language and pill on chatbot

* (EAI-1083) update verify information text

Author: nlarew

docs/docs/ui.md

@@ -79,7 +79,6 @@ The `<Chatbot />` component is effectively a React context provider that wraps y
 | `darkMode`              | `boolean?`                                      | If `true`, the UI renders in dark mode. This overrides any theme `darkMode` setting.                                                                                                                                                                                                                    | The user's OS preference or theme value of `darkMode`. |
 | `fetchOptions`          | `ConversationFetchOptions?`                     | If set, the provided options are included with every fetch request to the server. For more information on the available fetch options, refer to [Supplying request options](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options) in the MDN documentation. |                                                        |
 | `getClientContext`      | `(() => Record<string, unknown>)?`              | A function that returns an object with client-side context data to be sent with each message. This context is included in message requests to help the server understand the client's state.                                                                                                            |                                                        |
-| `isExperimental`        | `boolean?`                                      | If `true`, the UI includes EXPERIMENTAL badges throughout.                                                                                                                                                                                                                                              | `true`                                                 |
 | `maxCommentCharacters`  | `number?`                                       | The maximum number of characters allowed in a user's comment on an assistant message.                                                                                                                                                                                                                   | `500`                                                  |
 | `maxInputCharacters`    | `number?`                                       | The maximum number of characters allowed in a user message.                                                                                                                                                                                                                                             | `300`                                                  |
 | `name`                  | `string?`                                       | The name of the chatbot. Used as the default in text throughout the UI.                                                                                                                                                                                                                                 | If unspecified, the chatbot is anonymous.              |

packages/mongodb-chatbot-ui/src/App.tsx

@@ -87,7 +87,7 @@ function App() {
           <DocsChatbot suggestedPrompts={SUGGESTED_PROMPTS} />
         </Chatbot>
         <Chatbot
-          name="MongoDB AI (Dev Center)"
+          name="MongoDB AI"
           serverBaseUrl={serverBaseUrl}
           shouldStream={shouldStream}
           darkMode={darkMode}

packages/mongodb-chatbot-ui/src/ChatWindow.tsx

@@ -36,7 +36,7 @@ export function ChatWindow(props: ChatWindowProps) {
     windowTitle,
   } = props;
 
-  const { chatbotName, isExperimental } = useChatbotContext();
+  const { chatbotName } = useChatbotContext();
 
   const initialMessage: MessageData | null = useMemo(() => {
     if (!initialMessageText) {
@@ -61,7 +61,6 @@ export function ChatWindow(props: ChatWindowProps) {
     <LeafyGreenChatProvider>
       <LGChatWindow
         className={cx(css`border-radius: 24px;`, className)}
-        badgeText={isExperimental ? "Experimental" : undefined}
         title={windowTitle ?? chatbotName ?? ""}
         darkMode={darkMode}
       >

packages/mongodb-chatbot-ui/src/Chatbot.tsx

@@ -25,7 +25,6 @@ export function Chatbot({
   user,
   name,
   fetchOptions,
-  isExperimental,
   onOpen,
   onClose,
   onSuggestedPromptClick,
@@ -53,7 +52,6 @@ export function Chatbot({
             <InnerChatbot
               fetchOptions={fetchOptions}
               getClientContext={getClientContext}
-              isExperimental={isExperimental}
               maxCommentCharacters={maxCommentCharacters}
               maxInputCharacters={maxInputCharacters}
               name={name}
@@ -78,7 +76,6 @@ type InnerChatbotProps = Pick<
   | "children"
   | "fetchOptions"
   | "getClientContext"
-  | "isExperimental"
   | "maxCommentCharacters"
   | "maxInputCharacters"
   | "name"
@@ -90,8 +87,9 @@ type InnerChatbotProps = Pick<
   | "sortMessageReferences"
 >;
 
-function InnerChatbot({ children, ...props }: InnerChatbotProps) {
+function InnerChatbot({ children, name, ...props }: InnerChatbotProps) {
   const chatbotData = useChatbot({
+    chatbotName: name,
     ...props,
   });
 

packages/mongodb-chatbot-ui/src/InputBarTrigger.tsx

@@ -57,15 +57,13 @@ export function InputBarTrigger({
 
   const {
     conversation,
-    isExperimental,
     inputText,
     inputPlaceholder,
     setInputText,
     inputTextError,
     canSubmit,
     awaitingReply,
     openChat,
-    focused,
     setFocused,
     handleSubmit,
     hasError,
@@ -93,11 +91,6 @@ export function InputBarTrigger({
           key={"inputBarTrigger"}
           darkMode={darkMode}
           hasError={hasError ?? false}
-          badgeText={
-            !focused && inputText.length === 0 && isExperimental
-              ? "Experimental"
-              : undefined
-          }
           dropdownProps={{
             usePortal: false,
           }}

packages/mongodb-chatbot-ui/src/ModalView.tsx

@@ -65,8 +65,6 @@ export function ModalView(props: ModalViewProps) {
 
   const chatWindowInputBarId = inputBarId ?? "chatbot-modal-input-bar";
 
-  console.log("chatWindowInputBarId", chatWindowInputBarId);
-
   return (
     <Suspense fallback={null}>
       {open ? (

packages/mongodb-chatbot-ui/src/ui-text.ts

@@ -1,5 +1,5 @@
 export const mongoDbVerifyInformationMessage =
-  "This is an experimental generative AI chatbot. All information should be verified prior to use.";
+  "Our chatbot can make mistakes, so double-check important info.";
 
 export const defaultChatbotFatalErrorMessage =
   "Something went wrong. Try reloading the page and starting a new conversation.";

packages/mongodb-chatbot-ui/src/useChatbot.tsx

@@ -9,7 +9,6 @@ export type OpenCloseHandlers = {
 export type UseChatbotProps = OpenCloseHandlers &
   UseConversationParams & {
     chatbotName?: string;
-    isExperimental?: boolean;
     maxInputCharacters?: number;
     maxCommentCharacters?: number;
     onSuggestedPromptClick?: (prompt: string) => void;
@@ -25,7 +24,6 @@ export type ChatbotData = {
   inputText: string;
   inputTextError: string;
   chatbotName?: string;
-  isExperimental: boolean;
   maxInputCharacters?: number;
   maxCommentCharacters?: number;
   open: boolean;
@@ -38,7 +36,6 @@ export function useChatbot({
   onOpen,
   onClose,
   chatbotName,
-  isExperimental = true,
   maxInputCharacters,
   maxCommentCharacters,
   onSuggestedPromptClick,
@@ -129,7 +126,6 @@ export function useChatbot({
     inputBarRef,
     inputText,
     inputTextError,
-    isExperimental,
     maxInputCharacters,
     maxCommentCharacters,
     open,

packages/mongodb-chatbot-ui/src/useTextInputTrigger.ts

@@ -45,7 +45,6 @@ export function useTextInputTrigger({
     awaitingReply,
     handleSubmit,
     conversation,
-    isExperimental,
     onSuggestedPromptClick,
   } = useChatbotContext();
 
@@ -60,7 +59,6 @@ export function useTextInputTrigger({
 
   return {
     conversation,
-    isExperimental,
     inputText,
     setInputText,
     inputTextError,