diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/AIChat.tsx b/app/client/packages/design-system/widgets/src/components/AIChat/src/AIChat.tsx index d6975d9750a..dd500478a9e 100644 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/AIChat.tsx +++ b/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) => { const { // assistantName, + chatDescription, chatTitle, isWaitingForResponse = false, onPromptChange, @@ -22,6 +24,8 @@ const _AIChat = (props: AIChatProps, ref: ForwardedRef) => { username, ...rest } = props; + const [isChatDescriptionModalOpen, setIsChatDescriptionModalOpen] = + React.useState(false); const handleFormSubmit = useCallback( (event: FormEvent) => { @@ -43,8 +47,24 @@ const _AIChat = (props: AIChatProps, ref: ForwardedRef) => { return (
+ + setIsChatDescriptionModalOpen(!isChatDescriptionModalOpen) + } + > + {chatDescription} + +
- +
+ +
diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/ChatDescriptionModal.tsx b/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/ChatDescriptionModal.tsx new file mode 100644 index 00000000000..06b983a1e32 --- /dev/null +++ b/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 ( + + + + {children} + + + ); +}; diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/index.ts b/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/index.ts new file mode 100644 index 00000000000..e16a07a5b8f --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/index.ts @@ -0,0 +1,2 @@ +export * from "./ChatDescriptionModal"; +export * from "./types"; diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/styles.module.css b/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/styles.module.css new file mode 100644 index 00000000000..a952c30dbf7 --- /dev/null +++ b/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; +} diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/types.ts b/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatDescriptionModal/types.ts new file mode 100644 index 00000000000..41e2f9c0436 --- /dev/null +++ b/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 {} diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/AIChat/src/styles.module.css index 3c0780cf620..bdee1492235 100644 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/styles.module.css +++ b/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; diff --git a/app/client/packages/design-system/widgets/src/components/Modal/src/index.ts b/app/client/packages/design-system/widgets/src/components/Modal/src/index.ts index 8f811e192d4..d92e4cafc9c 100644 --- a/app/client/packages/design-system/widgets/src/components/Modal/src/index.ts +++ b/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"; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/index.tsx index f94fb5935f7..d7361420642 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/index.tsx +++ b/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/index.tsx @@ -197,6 +197,7 @@ class WDSAIChatWidget extends BaseWidget { return (