show chat description

app/client/packages/design-system/widgets/src/components/AIChat/src/AIChat.tsx

@@ -1,6 +1,7 @@
 import { Button, Text, TextArea } from "@appsmith/wds";
 import type { FormEvent, ForwardedRef, KeyboardEvent } from "react";
 import React, { forwardRef, useCallback } from "react";
+import { ChatDescriptionModal } from "./ChatDescriptionModal";
 import { ChatTitle } from "./ChatTitle";
 import styles from "./styles.module.css";
 import { ThreadMessage } from "./ThreadMessage";
@@ -12,6 +13,7 @@ const MIN_PROMPT_LENGTH = 3;
 const _AIChat = (props: AIChatProps, ref: ForwardedRef<HTMLDivElement>) => {
   const {
     // assistantName,
+    chatDescription,
     chatTitle,
     isWaitingForResponse = false,
     onPromptChange,
@@ -22,6 +24,8 @@ const _AIChat = (props: AIChatProps, ref: ForwardedRef<HTMLDivElement>) => {
     username,
     ...rest
   } = props;
+  const [isChatDescriptionModalOpen, setIsChatDescriptionModalOpen] =
+    React.useState(false);
 
   const handleFormSubmit = useCallback(
     (event: FormEvent<HTMLFormElement>) => {
@@ -43,8 +47,24 @@ const _AIChat = (props: AIChatProps, ref: ForwardedRef<HTMLDivElement>) => {
 
   return (
     <div className={styles.root} ref={ref} {...rest}>
+      <ChatDescriptionModal
+        isOpen={isChatDescriptionModalOpen}
+        setOpen={() =>
+          setIsChatDescriptionModalOpen(!isChatDescriptionModalOpen)
+        }
+      >
+        {chatDescription}
+      </ChatDescriptionModal>
+
       <div className={styles.header}>
-        <ChatTitle title={chatTitle} />
+        <div className={styles.chatInfo}>
+          <ChatTitle title={chatTitle} />
+          <Button
+            icon="info-square-rounded"
+            onPress={() => setIsChatDescriptionModalOpen(true)}
+            variant="ghost"
+          />
+        </div>
 
         <div className={styles.username}>
           <UserAvatar username={username} />

app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/ChatDescriptionModal.tsx

@@ -0,0 +1,17 @@
+import { Modal, ModalBody, ModalContent, ModalHeader } from "@appsmith/wds";
+import React from "react";
+import type { ChatDescriptionModalProps } from "./types";
+
+export const ChatDescriptionModal = ({
+  children,
+  ...rest
+}: ChatDescriptionModalProps) => {
+  return (
+    <Modal {...rest}>
+      <ModalContent>
+        <ModalHeader title="Information about the bot" />
+        <ModalBody>{children}</ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};

app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/index.ts

@@ -0,0 +1,2 @@
+export * from "./ChatDescriptionModal";
+export * from "./types";

app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/styles.module.css

@@ -0,0 +1,22 @@
+.root {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  /* TODO: --type-title doesn't exists. Define it */
+  font-size: var(--type-title, 22.499px);
+  font-style: normal;
+  font-weight: 500;
+  /* TODO: --type-title-lineheight doesn't exists. Define it */
+  line-height: var(--type-title-lineheight, 31.7px);
+}
+
+.logo {
+  display: inline-block;
+  width: 48px;
+  min-width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  /* TODO: --bd-neutral doesn't exists. Define it */
+  border: 1px solid var(--bd-neutral, #81858b);
+  background: #f8f8f8;
+}

app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/types.ts

@@ -0,0 +1,3 @@
+import type { ModalProps } from "@appsmith/wds";
+
+export interface ChatDescriptionModalProps extends ModalProps {}

app/client/packages/design-system/widgets/src/components/AIChat/src/styles.module.css

@@ -24,6 +24,12 @@
   }
 }
 
+.chatInfo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .username {
   display: flex;
   align-items: center;

app/client/packages/design-system/widgets/src/components/Modal/src/index.ts

@@ -3,3 +3,4 @@ export * from "./ModalHeader";
 export * from "./ModalFooter";
 export * from "./ModalBody";
 export * from "./ModalContent";
+export * from "./types";

app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/index.tsx

@@ -197,6 +197,7 @@ class WDSAIChatWidget extends BaseWidget<WDSAIChatWidgetProps, State> {
     return (
       <AIChat
         assistantName={this.props.assistantName}
+        chatDescription={this.props.chatDescription}
         chatTitle={this.props.chatTitle}
         isWaitingForResponse={this.state.isWaitingForResponse}
         onPromptChange={this.handlePromptChange}