diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/index.ts b/app/client/packages/design-system/widgets/src/components/AIChat/index.ts deleted file mode 100644 index 3bd16e178a03..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./src"; 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 deleted file mode 100644 index f952bec2329f..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/AIChat.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import type { ForwardedRef } from "react"; -import React, { forwardRef } from "react"; - -import styles from "./styles.module.css"; -import { ChatHeader } from "./ChatHeader"; -import { ChatThread } from "./ChatThread"; -import type { AIChatProps } from "./types"; -import { ChatInputSection } from "./ChatInputSection"; - -const _AIChat = (props: AIChatProps, ref: ForwardedRef) => { - const { - // assistantName, - chatDescription, - chatTitle, - isWaitingForResponse = false, - onApplyAssistantSuggestion, - onPromptChange, - onSubmit, - prompt, - promptInputPlaceholder, - thread, - username, - ...rest - } = props; - - return ( -
- - - - - -
- ); -}; - -export const AIChat = forwardRef(_AIChat); diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/AssistantSuggestionButton.tsx b/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/AssistantSuggestionButton.tsx deleted file mode 100644 index e28f98c1228e..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/AssistantSuggestionButton.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Text } from "@appsmith/wds"; -import { clsx } from "clsx"; -import React from "react"; -import { Button as HeadlessButton } from "react-aria-components"; -import styles from "./styles.module.css"; -import type { AssistantSuggestionButtonProps } from "./types"; - -export const AssistantSuggestionButton = ({ - children, - className, - ...rest -}: AssistantSuggestionButtonProps) => { - return ( - - {children} - - ); -}; diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/index.ts b/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/index.ts deleted file mode 100644 index c9075961d613..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./AssistantSuggestionButton"; -export * from "./types"; diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/styles.module.css b/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/styles.module.css deleted file mode 100644 index 6aa30119ff76..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/styles.module.css +++ /dev/null @@ -1,20 +0,0 @@ -.root { - height: 30px; - padding: 0 var(--inner-spacing-4); - background-color: var(--bg-neutral-subtle-alt, #e7e8e8); - border-radius: var(--radius-inner-button, 1.8px); - - &:hover { - background-color: var(--bg-neutral-subtle-alt-hover, #f0f1f1); - } - - &:focus-visible { - box-shadow: - 0 0 0 2px var(--color-bg), - 0 0 0 4px var(--color-bd-focus); - } - - &:active { - background-color: var(--bg-neutral-subtle-alt-active, #e1e2e2); - } -} diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/types.ts b/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/types.ts deleted file mode 100644 index 20186f75d246..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/AssistantSuggestionButton/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { PropsWithChildren } from "react"; -import type { ButtonProps as HeadlessButtonProps } from "react-aria-components"; - -export interface AssistantSuggestionButtonProps - extends PropsWithChildren {} diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatHeader.tsx b/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatHeader.tsx deleted file mode 100644 index b05f513782b6..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatHeader.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { useState } from "react"; -import { - Avatar, - Button, - Flex, - Modal, - ModalBody, - ModalContent, - ModalHeader, - Text, -} from "@appsmith/wds"; - -import styles from "./styles.module.css"; - -// this value might come from props in future. So keeping a temporary value here. -const LOGO = - "https://app.appsmith.com/static/media/appsmith_logo_square.3867b1959653dabff8dc.png"; - -export const ChatHeader: React.FC<{ - chatTitle?: string; - username: string; - chatDescription?: string; -}> = ({ chatDescription, chatTitle, username }) => { - const [isChatDescriptionModalOpen, setIsChatDescriptionModalOpen] = - useState(false); - - return ( - <> -
- - - - - {chatTitle} - - -
- - - - - {chatDescription} - - - - ); -}; diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatInputSection.tsx b/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatInputSection.tsx deleted file mode 100644 index fbc0183c1ce9..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatInputSection.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from "react"; -import { Flex, ChatInput, Icon, Text } from "@appsmith/wds"; - -const MIN_PROMPT_LENGTH = 3; - -export const ChatInputSection: React.FC<{ - isWaitingForResponse: boolean; - prompt: string; - promptInputPlaceholder?: string; - onPromptChange: (value: string) => void; - onSubmit?: () => void; -}> = ({ - isWaitingForResponse, - onPromptChange, - onSubmit, - prompt, - promptInputPlaceholder, -}) => ( - - - - - - LLM assistant can make mistakes. Answers should be verified before they - are trusted. - - - -); diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatThread.tsx b/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatThread.tsx deleted file mode 100644 index 82ab94e2b0c4..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/ChatThread.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from "react"; -import { Avatar, Flex, Markdown } from "@appsmith/wds"; - -import styles from "./styles.module.css"; -import type { ChatMessage } from "./types"; -import { AssistantSuggestionButton } from "./AssistantSuggestionButton"; - -export const ChatThread: React.FC<{ - thread: ChatMessage[]; - onApplyAssistantSuggestion?: (suggestion: string) => void; - username: string; -}> = ({ onApplyAssistantSuggestion, thread, username }) => ( - - {thread.map((message: ChatMessage) => { - const { content, isAssistant, promptSuggestions = [] } = message; - - return ( - - {isAssistant && ( -
- {content} - - {promptSuggestions.length > 0 && ( - - {promptSuggestions.map((suggestion) => ( - onApplyAssistantSuggestion?.(suggestion)} - > - {suggestion} - - ))} - - )} -
- )} - {!isAssistant && ( - - -
{content}
- - )} - - ); - })} - -); diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/index.ts b/app/client/packages/design-system/widgets/src/components/AIChat/src/index.ts deleted file mode 100644 index a2b07d66147a..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./types"; -export { AIChat } from "./AIChat"; 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 deleted file mode 100644 index ae94ae2d1f91..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/styles.module.css +++ /dev/null @@ -1,24 +0,0 @@ -.root { - width: 100%; - background-color: var(--color-bg-elevation-3); - border-radius: var(--border-radius-elevation-3); - outline: var(--border-width-1) solid var(--color-bd-elevation-3); - overflow: hidden; -} - -.header { - display: flex; - flex-direction: column; - gap: var(--inner-spacing-2); - padding: var(--inner-spacing-5) var(--inner-spacing-6); - align-items: flex-start; - border-bottom: 1px solid var(--color-bd-elevation-1); -} - -@container (min-width: 700px) { - .header { - flex-direction: row; - justify-content: space-between; - align-items: center; - } -} diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/src/types.ts b/app/client/packages/design-system/widgets/src/components/AIChat/src/types.ts deleted file mode 100644 index e27a804b91cf..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/src/types.ts +++ /dev/null @@ -1,20 +0,0 @@ -export interface ChatMessage { - id: string; - content: string; - isAssistant: boolean; - promptSuggestions?: string[]; -} - -export interface AIChatProps { - thread: ChatMessage[]; - prompt: string; - username: string; - promptInputPlaceholder?: string; - chatTitle?: string; - chatDescription?: string; - assistantName?: string; - isWaitingForResponse?: boolean; - onPromptChange: (prompt: string) => void; - onSubmit?: () => void; - onApplyAssistantSuggestion?: (suggestion: string) => void; -} diff --git a/app/client/packages/design-system/widgets/src/components/AIChat/stories/AIChat.stories.tsx b/app/client/packages/design-system/widgets/src/components/AIChat/stories/AIChat.stories.tsx deleted file mode 100644 index 6026959f0a84..000000000000 --- a/app/client/packages/design-system/widgets/src/components/AIChat/stories/AIChat.stories.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React from "react"; -import { AIChat } from "@appsmith/wds"; -import { useState } from "react"; -import type { Meta, StoryObj } from "@storybook/react"; - -const meta: Meta = { - component: AIChat, - title: "WDS/Widgets/AIChat", -}; - -export default meta; -type Story = StoryObj; - -export const Main: Story = { - args: { - thread: [], - prompt: "", - username: "John Doe", - promptInputPlaceholder: "Type your message here", - chatTitle: "Chat with Assistant", - assistantName: "", - isWaitingForResponse: false, - }, - render: (args) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [prompt, setPrompt] = useState(args.prompt); - - return ; - }, -}; - -export const EmptyHistory: Story = { - args: { - thread: [], - prompt: "", - username: "John Doe", - promptInputPlaceholder: "Type your message here", - chatTitle: "Chat with Assistant", - }, -}; - -export const Loading: Story = { - args: { - thread: [], - prompt: "", - username: "John Doe", - promptInputPlaceholder: "Type your message here", - chatTitle: "Chat with Assistant", - isWaitingForResponse: true, - }, -}; - -export const WithHistory: Story = { - args: { - thread: [ - { - id: "1", - content: "Hi, how can I help you?", - isAssistant: true, - }, - { - id: "2", - content: "Find stuck support requests", - isAssistant: false, - }, - { - id: "3", - content: `Certainly! Here's what I can do to help you: -* Search our customers database -* Find stuck support requests -* Provide advice on how to resolve customer issues -`, - isAssistant: true, - }, - { - id: "4", - content: "Thank you", - isAssistant: false, - }, - { - id: "5", - content: `Here's an example of markdown code: - -\`\`\`javascript -function greet(name) { - console.log(\`Hello, \${name}!\`); -} - -greet('World'); -\`\`\` - -This code defines a function that greets the given name.`, - isAssistant: true, - }, - ], - prompt: "", - username: "John Doe", - promptInputPlaceholder: "Type your message here", - chatTitle: "Chat with Assistant", - }, -}; diff --git a/app/client/packages/design-system/widgets/src/components/ChatInput/index.ts b/app/client/packages/design-system/widgets/src/components/ChatInput/index.ts deleted file mode 100644 index 3bd16e178a03..000000000000 --- a/app/client/packages/design-system/widgets/src/components/ChatInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./src"; diff --git a/app/client/packages/design-system/widgets/src/components/ChatInput/src/index.ts b/app/client/packages/design-system/widgets/src/components/ChatInput/src/index.ts deleted file mode 100644 index 6499ef6fdf5d..000000000000 --- a/app/client/packages/design-system/widgets/src/components/ChatInput/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ChatInput } from "./ChatInput"; diff --git a/app/client/packages/design-system/widgets/src/components/ChatInput/stories/ChatInput.stories.tsx b/app/client/packages/design-system/widgets/src/components/ChatInput/stories/ChatInput.stories.tsx deleted file mode 100644 index 3ac580744e65..000000000000 --- a/app/client/packages/design-system/widgets/src/components/ChatInput/stories/ChatInput.stories.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from "react"; -import { Form } from "react-aria-components"; -import type { Meta, StoryObj } from "@storybook/react"; -import { Flex, ChatInput, Button } from "@appsmith/wds"; - -const meta: Meta = { - title: "WDS/Widgets/ChatInput", - component: ChatInput, - tags: ["autodocs"], - args: { - placeholder: "Write something...", - onSubmit: () => alert("Action triggered"), - }, -}; - -export default meta; -type Story = StoryObj; - -export const Main: Story = { - args: { - label: "Description", - placeholder: "Write something...", - }, -}; - -export const WithLabel: Story = { - args: { - label: "Description", - }, -}; - -export const WithContextualHelp: Story = { - args: { - label: "Description", - contextualHelp: "This is a contextual help", - }, -}; - -export const Disabled: Story = { - args: { - isDisabled: true, - label: "Disabled", - }, -}; - -export const Loading: Story = { - args: { - isLoading: true, - label: "Loading", - placeholder: "Loading...", - }, -}; - -export const Validation: Story = { - render: (args) => ( -
- - - - -
- ), -}; - -export const SubmitDisabled: Story = { - args: { - isSubmitDisabled: true, - }, -}; diff --git a/app/client/packages/design-system/widgets/src/index.ts b/app/client/packages/design-system/widgets/src/index.ts index b37081c4ecde..911e15b14c13 100644 --- a/app/client/packages/design-system/widgets/src/index.ts +++ b/app/client/packages/design-system/widgets/src/index.ts @@ -1,4 +1,3 @@ -export * from "./components/AIChat"; export * from "./components/Icon"; export * from "./components/Button"; export * from "./components/IconButton"; @@ -30,7 +29,6 @@ export * from "./components/Radio"; export * from "./components/ListBox"; export * from "./components/ListBoxItem"; export * from "./components/MenuItem"; -export * from "./components/ChatInput"; export * from "./components/Avatar"; export * from "./components/Markdown"; diff --git a/app/client/src/ee/modules/ui-builder/ui/wds/constants.ts b/app/client/src/ee/modules/ui-builder/ui/wds/constants.ts new file mode 100644 index 000000000000..a04bb6dada97 --- /dev/null +++ b/app/client/src/ee/modules/ui-builder/ui/wds/constants.ts @@ -0,0 +1 @@ +export const WDS_EE_WIDGET_MAP = {}; diff --git a/app/client/src/ee/modules/ui-builder/ui/wds/index.ts b/app/client/src/ee/modules/ui-builder/ui/wds/index.ts new file mode 100644 index 000000000000..6cb9e7159f47 --- /dev/null +++ b/app/client/src/ee/modules/ui-builder/ui/wds/index.ts @@ -0,0 +1 @@ +export const EEWDSWidgets = []; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/index.tsx deleted file mode 100644 index 99a42a9692a5..000000000000 --- a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import WDSAIChatWidget from "./widget"; - -export { WDSAIChatWidget }; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/anvilConfig.ts b/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/anvilConfig.ts deleted file mode 100644 index dc7fe21e103c..000000000000 --- a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/anvilConfig.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { AnvilConfig } from "WidgetProvider/constants"; - -export const anvilConfig: AnvilConfig = { - isLargeWidget: false, - widgetSize: { - minWidth: { - base: "100%", - "180px": "sizing-30", - }, - }, -}; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/autocompleteConfig.ts b/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/autocompleteConfig.ts deleted file mode 100644 index 26579c80b836..000000000000 --- a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/autocompleteConfig.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils"; - -export const autocompleteConfig = { - isVisible: DefaultAutocompleteDefinitions.isVisible, -}; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/defaultConfig.ts b/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/defaultConfig.ts deleted file mode 100644 index 77e0374f4092..000000000000 --- a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/defaultConfig.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ResponsiveBehavior } from "layoutSystems/common/utils/constants"; -import type { WidgetDefaultProps } from "WidgetProvider/constants"; - -export const defaultsConfig = { - isVisible: true, - widgetName: "AIChat", - widgetType: "AI_CHAT", - version: 1, - responsiveBehavior: ResponsiveBehavior.Fill, - initialAssistantMessage: "", - initialAssistantSuggestions: [], -} as unknown as WidgetDefaultProps; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/index.ts b/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/index.ts deleted file mode 100644 index fdf9289d5f4d..000000000000 --- a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { anvilConfig } from "./anvilConfig"; -import { metaConfig } from "./metaConfig"; -import { defaultsConfig } from "./defaultConfig"; -import { propertyPaneContent } from "./propertyPaneContent"; -import { propertyPaneStyle } from "./propertyPaneStyle"; -import { methodsConfig } from "./methodsConfig"; -import { autocompleteConfig } from "./autocompleteConfig"; - -export { - anvilConfig, - metaConfig, - defaultsConfig, - propertyPaneContent, - propertyPaneStyle, - methodsConfig, - autocompleteConfig, -}; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/metaConfig.ts b/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/metaConfig.ts deleted file mode 100644 index 1b94379578db..000000000000 --- a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/metaConfig.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { WIDGET_TAGS } from "constants/WidgetConstants"; -import type { WidgetBaseConfiguration } from "WidgetProvider/constants"; - -export const metaConfig: WidgetBaseConfiguration = { - name: "AIChat", - tags: [WIDGET_TAGS.CONTENT], - needsMeta: true, - searchTags: ["chat"], -}; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/methodsConfig.ts b/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/methodsConfig.ts deleted file mode 100644 index 71de829ef47b..000000000000 --- a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/methodsConfig.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { AIChatIcon, AIChatThumbnail } from "appsmith-icons"; - -export const methodsConfig = { - IconCmp: AIChatIcon, - ThumbnailCmp: AIChatThumbnail, -}; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/propertyPaneContent.ts b/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/propertyPaneContent.ts deleted file mode 100644 index 8fff6583b8d7..000000000000 --- a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/propertyPaneContent.ts +++ /dev/null @@ -1,151 +0,0 @@ -import { ValidationTypes } from "constants/WidgetValidation"; - -export const propertyPaneContent = [ - { - sectionName: "General", - children: [ - { - helpText: "Select a query to submit when a chat message is sent.", - propertyName: "query", - label: "Query to trigger", - controlType: "INPUT_TEXT", - placeholderText: "Value", - isJSConvertible: false, - isBindProperty: false, - isTriggerProperty: false, - dependencies: ["queryData", "queryRun"], - updateHook: ( - _props: unknown, - propertyPath: string, - propertyValue: string, - ) => { - const propertiesToUpdate = [{ propertyPath, propertyValue }]; - - propertiesToUpdate.push({ - propertyPath: "queryData", - propertyValue: `{{${propertyValue}.data}}`, - }); - propertiesToUpdate.push({ - propertyPath: "queryRun", - propertyValue: propertyValue, - }); - - return propertiesToUpdate; - }, - }, - { - helpText: "Adds a header to the chat", - propertyName: "chatTitle", - label: "Title", - controlType: "INPUT_TEXT", - isJSConvertible: false, - isBindProperty: false, - isTriggerProperty: false, - validation: { type: ValidationTypes.TEXT }, - defaultValue: "", - }, - { - helpText: - "Adds a description to help users understand how to use the chat", - propertyName: "chatDescription", - label: "Description", - controlType: "INPUT_TEXT", - isJSConvertible: false, - isBindProperty: false, - isTriggerProperty: false, - validation: { type: ValidationTypes.TEXT }, - defaultValue: "", - }, - { - helpText: "Adds a placeholder text to the message input box", - propertyName: "promptInputPlaceholder", - label: "Placeholder", - controlType: "INPUT_TEXT", - isJSConvertible: false, - isBindProperty: false, - isTriggerProperty: false, - validation: { type: ValidationTypes.TEXT }, - defaultValue: "", - }, - { - helpText: "Gives the open AI Assistant a name to be displayed in chat", - propertyName: "assistantName", - label: "Assistant Name", - controlType: "INPUT_TEXT", - isJSConvertible: false, - isBindProperty: false, - isTriggerProperty: false, - validation: { type: ValidationTypes.TEXT }, - defaultValue: "", - }, - { - helpText: "Configures an initial assistant message", - propertyName: "initialAssistantMessage", - label: "Initial Assistant Message", - controlType: "INPUT_TEXT", - isJSConvertible: true, - isBindProperty: true, - isTriggerProperty: false, - validation: { type: ValidationTypes.TEXT }, - defaultValue: "", - }, - { - helpText: "Configures initial assistant suggestions", - propertyName: "initialAssistantSuggestions", - label: "Initial Assistant Suggestions", - controlType: "ARRAY_INPUT", - isJSConvertible: true, - isBindProperty: true, - isTriggerProperty: false, - validation: { type: ValidationTypes.ARRAY }, - defaultValue: [], - }, - { - helpText: "Controls the visibility of the widget", - propertyName: "isVisible", - label: "Visible", - controlType: "SWITCH", - isJSConvertible: true, - isBindProperty: true, - isTriggerProperty: false, - validation: { type: ValidationTypes.BOOLEAN }, - defaultValue: true, - }, - ], - }, - { - sectionName: "Hidden props", - children: [ - { - propertyName: "queryData", - label: "", - controlType: "INPUT_TEXT", - isJSConvertible: true, - isBindProperty: true, - isTriggerProperty: false, - hidden: () => true, - }, - { - propertyName: "queryRun", - label: "", - controlType: "INPUT_TEXT", - isJSConvertible: true, - isBindProperty: true, - isTriggerProperty: false, - hidden: () => true, - }, - // Fake hidden prop to pass the username to the widget - { - propertyName: "username", - label: "", - controlType: "INPUT_TEXT", - defaultValue: "{{appsmith.user.username}}", - isJSConvertible: true, - isBindProperty: true, - isTriggerProperty: false, - hidden: () => true, - invisible: true, - }, - ], - }, -]; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/propertyPaneStyle.ts b/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/propertyPaneStyle.ts deleted file mode 100644 index 090b16597cfa..000000000000 --- a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/propertyPaneStyle.ts +++ /dev/null @@ -1 +0,0 @@ -export const propertyPaneStyle = []; 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 deleted file mode 100644 index 99126ca71667..000000000000 --- a/app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/index.tsx +++ /dev/null @@ -1,267 +0,0 @@ -import { AIChat, type ChatMessage } from "@appsmith/wds"; -import { - EventType, - type ExecutionResult, -} from "constants/AppsmithActionConstants/ActionConstants"; -import type { SetterConfig, Stylesheet } from "entities/AppTheming"; -import React, { type FormEvent, type ReactNode } from "react"; -import type { - AnvilConfig, - AutocompletionDefinitions, - WidgetBaseConfiguration, - WidgetDefaultProps, -} from "WidgetProvider/constants"; -import type { DerivedPropertiesMap } from "WidgetProvider/factory"; -import type { WidgetProps, WidgetState } from "widgets/BaseWidget"; -import BaseWidget from "widgets/BaseWidget"; -import type { ContainerWidgetProps } from "widgets/ContainerWidget/widget"; -import { - anvilConfig, - autocompleteConfig, - defaultsConfig, - metaConfig, - methodsConfig, - propertyPaneContent, - propertyPaneStyle, -} from "./config"; - -export interface WDSAIChatWidgetProps - extends ContainerWidgetProps {} - -export interface Message { - id: string; - content: string; - role: "assistant" | "user" | "system"; - promptSuggestions?: string[]; -} - -interface State extends WidgetState { - messages: Message[]; - prompt: string; - isWaitingForResponse: boolean; -} - -class WDSAIChatWidget extends BaseWidget { - static type = "WDS_AI_CHAT_WIDGET"; - - state = { - messages: [] as Message[], - prompt: "", - isWaitingForResponse: false, - }; - - static getConfig(): WidgetBaseConfiguration { - return metaConfig; - } - - static getDefaults(): WidgetDefaultProps { - return defaultsConfig; - } - - static getPropertyPaneConfig() { - return []; - } - static getPropertyPaneContentConfig() { - return propertyPaneContent; - } - - static getPropertyPaneStyleConfig() { - return propertyPaneStyle; - } - - static getMethods() { - return methodsConfig; - } - - static getAutocompleteDefinitions(): AutocompletionDefinitions { - return autocompleteConfig; - } - - static getSetterConfig(): SetterConfig | null { - return { - __setters: { - setVisibility: { - path: "isVisible", - type: "boolean", - }, - }, - }; - } - - static getDerivedPropertiesMap(): DerivedPropertiesMap { - return {}; - } - - static getDefaultPropertiesMap(): Record { - return {}; - } - - static getMetaPropertiesMap(): Record { - return {}; - } - - static getAnvilConfig(): AnvilConfig | null { - return anvilConfig; - } - - static getStylesheetConfig(): Stylesheet { - return {}; - } - - componentDidMount() { - // Add initial assistant message with suggestions if they were configured - if (this.props.initialAssistantMessage.length > 0) { - this.setState((state) => ({ - ...state, - messages: [ - { - id: Math.random().toString(), - content: this.props.initialAssistantMessage, - role: "assistant", - promptSuggestions: this.props.initialAssistantSuggestions || [], - }, - ], - })); - } - } - - componentDidUpdate(prevProps: WDSAIChatWidgetProps): void { - // Track changes in the widget's properties and update the local state accordingly - - // Update the initial assistant message - if ( - prevProps.initialAssistantMessage !== - this.props.initialAssistantMessage || - prevProps.initialAssistantSuggestions !== - this.props.initialAssistantSuggestions - ) { - let updatedMessage: Message | null; - - // - if (this.props.initialAssistantMessage.length > 0) { - const currentMessage = this.state.messages[0]; - - updatedMessage = { - // If the initial assistant message is set, update it - // Otherwise, create a new one - ...(currentMessage || { - id: Math.random().toString(), - role: "assistant", - }), - content: this.props.initialAssistantMessage, - promptSuggestions: this.props.initialAssistantSuggestions, - }; - } else { - updatedMessage = null; - } - - this.setState((state) => ({ - ...state, - messages: updatedMessage ? [updatedMessage] : [], - })); - } - } - - updatePrompt = (prompt: string) => { - this.setState({ prompt }); - }; - - adaptMessages = (messages: Message[]): ChatMessage[] => { - const chatMessages: ChatMessage[] = messages.map((message) => { - if (message.role === "assistant") { - return { - id: message.id, - content: message.content, - isAssistant: true, - promptSuggestions: message.promptSuggestions || [], - }; - } - - return { - id: message.id, - content: message.content, - isAssistant: false, - }; - }); - - return chatMessages; - }; - - handleMessageSubmit = (event?: FormEvent) => { - event?.preventDefault(); - - this.setState( - (state) => ({ - messages: [ - ...state.messages, - { - id: String(Date.now()), - content: this.state.prompt, - role: "user", - }, - ], - prompt: "", - isWaitingForResponse: true, - }), - () => { - const messages: Message[] = [...this.state.messages]; - const params = { messages }; - - this.executeAction({ - triggerPropertyName: "onClick", - dynamicString: `{{${this.props.queryRun}.run(${JSON.stringify(params)})}}`, - event: { - type: EventType.ON_CLICK, - callback: this.handleActionComplete, - }, - }); - }, - ); - }; - - handleActionComplete = (result: ExecutionResult) => { - if (result.success) { - this.setState((state) => ({ - messages: [ - ...state.messages, - { - id: Math.random().toString(), - content: this.props.queryData.choices[0].message.content, - role: "assistant", - // TODO: Add prompt suggestions from the query data, if any - promptSuggestions: [], - }, - ], - isWaitingForResponse: false, - })); - } - }; - - handlePromptChange = (prompt: string) => { - this.updatePrompt(prompt); - }; - - handleApplyAssistantSuggestion = (suggestion: string) => { - this.updatePrompt(suggestion); - }; - - getWidgetView(): ReactNode { - return ( - - ); - } -} - -export default WDSAIChatWidget; diff --git a/app/client/src/modules/ui-builder/ui/wds/constants.ts b/app/client/src/modules/ui-builder/ui/wds/constants.ts index f769115a3c62..8f897732e6b0 100644 --- a/app/client/src/modules/ui-builder/ui/wds/constants.ts +++ b/app/client/src/modules/ui-builder/ui/wds/constants.ts @@ -1,4 +1,6 @@ +// use a relative path since the constants is used in cypress that does not support aliases import { getCanvasClassName } from "../../../../utils/generators"; +import { WDS_EE_WIDGET_MAP } from "../../../../ee/modules/ui-builder/ui/wds/constants"; export const anvilWidgets = { SECTION_WIDGET: "SECTION_WIDGET", @@ -59,10 +61,11 @@ export const WDS_V2_WIDGET_MAP = { MULTILINE_INPUT_WIDGET: "WDS_MULTILINE_INPUT_WIDGET", WDS_SELECT_WIDGET: "WDS_SELECT_WIDGET", WDS_COMBOBOX_WIDGET: "WDS_COMBOBOX_WIDGET", - WDS_AI_CHAT_WIDGET: "WDS_AI_CHAT_WIDGET", // Anvil layout widgets ZONE_WIDGET: anvilWidgets.ZONE_WIDGET, + + ...WDS_EE_WIDGET_MAP, }; // getCanvasClassName adds class name to denote that this is scrollable canvas export const WDS_MODAL_WIDGET_CLASSNAME = `appsmith-modal-body ${getCanvasClassName()}`; diff --git a/app/client/src/widgets/index.ts b/app/client/src/widgets/index.ts index 23ca19c69347..c1e4cb2e52ca 100644 --- a/app/client/src/widgets/index.ts +++ b/app/client/src/widgets/index.ts @@ -57,7 +57,6 @@ import RangeSliderWidget from "./RangeSliderWidget"; import CategorySliderWidget from "./CategorySliderWidget"; import CodeScannerWidget from "./CodeScannerWidget"; import ListWidgetV2 from "./ListWidgetV2"; -import { WDSAIChatWidget } from "modules/ui-builder/ui/wds/WDSAIChatWidget"; import { WDSButtonWidget } from "modules/ui-builder/ui/wds/WDSButtonWidget"; import { WDSInputWidget } from "modules/ui-builder/ui/wds/WDSInputWidget"; import { WDSCheckboxWidget } from "modules/ui-builder/ui/wds/WDSCheckboxWidget"; @@ -88,6 +87,7 @@ import { WDSPasswordInputWidget } from "modules/ui-builder/ui/wds/WDSPasswordInp import { WDSNumberInputWidget } from "modules/ui-builder/ui/wds/WDSNumberInputWidget"; import { WDSMultilineInputWidget } from "modules/ui-builder/ui/wds/WDSMultilineInputWidget"; import { WDSSelectWidget } from "modules/ui-builder/ui/wds/WDSSelectWidget"; +import { EEWDSWidgets } from "ee/modules/ui-builder/ui/wds"; const LegacyWidgets = [ CanvasWidget, @@ -157,8 +157,6 @@ const DeprecatedWidgets = [ ]; const WDSWidgets = [ - // WDS Widgets - WDSAIChatWidget, WDSButtonWidget, WDSInputWidget, WDSCheckboxWidget, @@ -193,6 +191,7 @@ const Widgets = [ ...WDSWidgets, ...DeprecatedWidgets, ...LegacyWidgets, + ...EEWDSWidgets, ] as (typeof BaseWidget)[]; export default Widgets;