feat: init AI chat widget

app/client/jest.config.js

@@ -20,6 +20,8 @@ module.exports = {
     "<rootDir>/node_modules/(?!codemirror|konva|react-dnd|dnd-core|@babel|(@blueprintjs)|@github|lodash-es|@draft-js-plugins|react-documents|linkedom|assert-never|axios)",
   ],
   moduleNameMapper: {
+    "react-markdown":
+      "<rootDir>/node_modules/react-markdown/react-markdown.min.js",
     "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
     "\\.svg$": "<rootDir>/test/__mocks__/svgMock.js",
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|txt)$":

app/client/package.json

@@ -95,6 +95,7 @@
     "@types/d3-geo": "^3.1.0",
     "@types/google.maps": "^3.51.0",
     "@types/react-page-visibility": "^6.4.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/web": "^0.0.99",
     "@uppy/core": "^1.16.0",
     "@uppy/dashboard": "^1.16.0",
@@ -161,6 +162,7 @@
     "nanoid": "^2.0.4",
     "node-forge": "^1.3.0",
     "object-hash": "^3.0.0",
+    "openai": "^4.64.0",
     "path-to-regexp": "^6.3.0",
     "popper.js": "^1.15.0",
     "prismjs": "^1.27.0",

app/client/packages/design-system/widgets/jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   preset: "ts-jest",
   roots: ["<rootDir>/src"],
+  setupFiles: ["<rootDir>../../../test/__mocks__/reactMarkdown.tsx"],
   testEnvironment: "jsdom",
   moduleNameMapper: {
     "\\.(css)$": "<rootDir>../../../test/__mocks__/styleMock.js",

app/client/packages/design-system/widgets/package.json

@@ -26,7 +26,9 @@
     "@tabler/icons-react": "^3.10.0",
     "clsx": "^2.0.0",
     "lodash": "*",
-    "react-aria-components": "^1.2.1"
+    "react-aria-components": "^1.2.1",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

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

@@ -0,0 +1 @@
+export * from "./src";

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

@@ -0,0 +1,79 @@
+import { Button, Spinner, TextArea } from "@appsmith/wds";
+import type { FormEvent, ForwardedRef, KeyboardEvent } from "react";
+import React, { forwardRef, useCallback } from "react";
+import { Text } from "../../Text";
+import { ThreadMessage } from "./ThreadMessage";
+import styles from "./styles.module.css";
+import type { AIChatProps, Message } from "./types";
+
+const _AIChat = (props: AIChatProps, ref: ForwardedRef<HTMLDivElement>) => {
+  const {
+    // assistantName,
+    description,
+    isWaitingForResponse = false,
+    onPromptChange,
+    onSubmit,
+    prompt,
+    promptInputPlaceholder,
+    thread,
+    title,
+    ...rest
+  } = props;
+
+  const handleFormSubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      onSubmit?.();
+    },
+    [onSubmit],
+  );
+
+  const handlePromptInputKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key === "Enter" && event.shiftKey) {
+        event.preventDefault();
+        onSubmit?.();
+      }
+    },
+    [onSubmit],
+  );
+
+  return (
+    <div className={styles.root} ref={ref} {...rest}>
+      <div className={styles.header}>
+        {title ?? <Text size="heading">{title}</Text>}
+
+        {description ?? <Text size="body">{description}</Text>}
+      </div>
+
+      <div className={styles.body}>
+        <ul className={styles.thread}>
+          {thread.map((message: Message) => (
+            <ThreadMessage {...message} key={message.id} />
+          ))}
+
+          {isWaitingForResponse && (
+            <li>
+              <Spinner />
+            </li>
+          )}
+        </ul>
+      </div>
+
+      <form className={styles.promptForm} onSubmit={handleFormSubmit}>
+        <TextArea
+          name="prompt"
+          onChange={onPromptChange}
+          onKeyDown={handlePromptInputKeyDown}
+          placeholder={promptInputPlaceholder}
+          value={prompt}
+        />
+        <Button isDisabled={prompt.length < 3} type="submit">
+          Send
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export const AIChat = forwardRef(_AIChat);

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

@@ -0,0 +1,44 @@
+import React from "react";
+import Markdown from "react-markdown";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { monokai } from "react-syntax-highlighter/dist/cjs/styles/hljs";
+import type { ThreadMessageProps } from "./types";
+import styles from "./styles.module.css";
+
+export const ThreadMessage = ({ content, id, role }: ThreadMessageProps) => {
+  return (
+    <li className={styles.root} data-role={role} key={id}>
+      {role === "assistant" ? (
+        <p className={styles.content}>
+          <Markdown
+            // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
+            components={{
+              code(props) {
+                const { children, className, ...rest } = props;
+                const match = /language-(\w+)/.exec(className ?? "");
+
+                return match ? (
+                  <SyntaxHighlighter
+                    PreTag="div"
+                    language={match[1]}
+                    style={monokai}
+                  >
+                    {String(children).replace(/\n$/, "")}
+                  </SyntaxHighlighter>
+                ) : (
+                  <code {...rest} className={className}>
+                    {children}
+                  </code>
+                );
+              },
+            }}
+          >
+            {content}
+          </Markdown>
+        </p>
+      ) : (
+        <p className={styles.content}>{content}</p>
+      )}
+    </li>
+  );
+};

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

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

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

@@ -0,0 +1,27 @@
+.root {
+  position: relative;
+  padding: 24px 0 24px 40px;
+
+  ul {
+    margin: var(--outer-spacing-3) 0 var(--outer-spacing-5);
+    padding: 0 0 0 var(--inner-spacing-4);
+    list-style-type: disc;
+  }
+
+  li {
+    margin: var(--outer-spacing-3) 0;
+  }
+}
+
+.message[data-role="user"] {
+  align-self: flex-end;
+  background-color: rgba(from var(--color-bg-neutral) r g b / 0.1);
+}
+
+.message[data-role="bot"] {
+  align-self: flex-start;
+}
+
+.content {
+  margin: 0;
+}

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

@@ -0,0 +1,5 @@
+export interface ThreadMessageProps {
+  id: string;
+  content: string;
+  role: "assistant" | "user" | "system";
+}

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

@@ -0,0 +1,2 @@
+export * from "./types";
+export { AIChat } from "./AIChat";

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

@@ -0,0 +1,28 @@
+.root {
+  width: 100%;
+  border-radius: var(--border-radius-elevation-1);
+  border: 1px solid var(--color-bd-elevation-1);
+}
+
+.header {
+  /* display: flex; */
+  padding: 22px 40px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.thread {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-self: stretch;
+  padding: 0px var(--inner-spacing-5) var(--inner-spacing-5)
+    var(--inner-spacing-5);
+}
+
+.promptForm {
+  display: flex;
+  align-items: flex-start;
+  margin: var(--outer-spacing-4) 0 0 0;
+  gap: var(--outer-spacing-3);
+}

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

@@ -0,0 +1,17 @@
+export interface Message {
+  id: string;
+  content: string;
+  role: "assistant" | "user" | "system";
+}
+
+export interface AIChatProps {
+  thread: Message[];
+  prompt: string;
+  promptInputPlaceholder?: string;
+  title?: string;
+  description?: string;
+  assistantName?: string;
+  isWaitingForResponse?: boolean;
+  onPromptChange: (prompt: string) => void;
+  onSubmit?: () => void;
+}

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

@@ -1,3 +1,4 @@
+export * from "./components/AIChat";
 export * from "./components/Icon";
 export * from "./components/Button";
 export * from "./components/IconButton";

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

@@ -0,0 +1,3 @@
+import WDSAIChatWidget from "./widget";
+
+export { WDSAIChatWidget };

app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/anvilConfig.ts

@@ -0,0 +1,11 @@
+import type { AnvilConfig } from "WidgetProvider/constants";
+
+export const anvilConfig: AnvilConfig = {
+  isLargeWidget: false,
+  widgetSize: {
+    minWidth: {
+      base: "100%",
+      "180px": "sizing-30",
+    },
+  },
+};

app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/autocompleteConfig.ts

@@ -0,0 +1,6 @@
+import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils";
+
+export const autocompleteConfig = {
+  isVisible: DefaultAutocompleteDefinitions.isVisible,
+  messages: "string",
+};

app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/defaultConfig.ts

@@ -0,0 +1,10 @@
+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,
+} as unknown as WidgetDefaultProps;

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

@@ -0,0 +1,17 @@
+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,
+};

app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/metaConfig.ts

@@ -0,0 +1,9 @@
+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"],
+};

app/client/src/modules/ui-builder/ui/wds/WDSAIChatWidget/widget/config/methodsConfig.ts

@@ -0,0 +1,6 @@
+import { ZoneIcon, ZoneThumbnail } from "appsmith-icons";
+
+export const methodsConfig = {
+  IconCmp: ZoneIcon,
+  ThumbnailCmp: ZoneThumbnail,
+};