feat: init AI chat widget

app/client/jest.config.js

@@ -5,7 +5,7 @@ const LOG_LEVELS = ["debug", "error"];
 const CONFIG_LOG_LEVEL_INDEX = 1;
 
 module.exports = {
-  setupFiles: ["jest-canvas-mock"],
+  setupFiles: ["jest-canvas-mock", "<rootDir>/test/__mocks__/reactMarkdown.tsx"],
   roots: ["<rootDir>/src"],
   transform: {
     "^.+\\.(png|js|ts|tsx)$": "ts-jest",

app/client/package.json

@@ -161,6 +161,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,10 +26,13 @@
     "@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",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "eslint-plugin-storybook": "^0.6.10"
   },
   "peerDependencies": {

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,85 @@
+import { Button, Spinner, Text, TextArea } from "@appsmith/wds";
+import type { FormEvent, ForwardedRef, KeyboardEvent } from "react";
+import React, { forwardRef, useCallback } from "react";
+import { ChatTitle } from "./ChatTitle";
+import styles from "./styles.module.css";
+import { ThreadMessage } from "./ThreadMessage";
+import type { AIChatProps, ChatMessage } from "./types";
+import { UserAvatar } from "./UserAvatar";
+
+const MIN_PROMPT_LENGTH = 3;
+
+const _AIChat = (props: AIChatProps, ref: ForwardedRef<HTMLDivElement>) => {
+  const {
+    // assistantName,
+    chatTitle,
+    description,
+    isWaitingForResponse = false,
+    onPromptChange,
+    onSubmit,
+    prompt,
+    promptInputPlaceholder,
+    thread,
+    username,
+    ...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}>
+        {chatTitle != null && <ChatTitle title={chatTitle} />}
+
+        {description ?? <Text size="body">{description}</Text>}
+        <div className={styles.username}>
+          <UserAvatar username={username} />
+          <Text size="body">{username}</Text>
+        </div>
+      </div>
+
+      <ul className={styles.thread}>
+        {thread.map((message: ChatMessage) => (
+          <ThreadMessage {...message} key={message.id} username={username} />
+        ))}
+
+        {isWaitingForResponse && (
+          <li>
+            <Spinner />
+          </li>
+        )}
+      </ul>
+
+      <form className={styles.promptForm} onSubmit={handleFormSubmit}>
+        <TextArea
+          name="prompt"
+          onChange={onPromptChange}
+          onKeyDown={handlePromptInputKeyDown}
+          placeholder={promptInputPlaceholder}
+          value={prompt}
+        />
+        <Button isDisabled={prompt.length < MIN_PROMPT_LENGTH} type="submit">
+          Send
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export const AIChat = forwardRef(_AIChat);

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

@@ -0,0 +1,13 @@
+import { clsx } from "clsx";
+import React from "react";
+import styles from "./styles.module.css";
+import type { ChatTitleProps } from "./types";
+
+export const ChatTitle = ({ className, title, ...rest }: ChatTitleProps) => {
+  return (
+    <div className={clsx(styles.root, className)} {...rest}>
+      <div className={styles.logo} />
+      {title}
+    </div>
+  );
+};

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

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

app/client/packages/design-system/widgets/src/components/AIChat/src/ChatTitle/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/ChatTitle/types.ts

@@ -0,0 +1,5 @@
+import type { HTMLProps } from "react";
+
+export interface ChatTitleProps extends HTMLProps<HTMLDivElement> {
+  title: string;
+}

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

@@ -0,0 +1,64 @@
+import { Text } from "@appsmith/wds";
+import { clsx } from "clsx";
+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 { UserAvatar } from "../UserAvatar";
+import styles from "./styles.module.css";
+import type { ThreadMessageProps } from "./types";
+
+export const ThreadMessage = ({
+  className,
+  content,
+  isAssistant,
+  username,
+  ...rest
+}: ThreadMessageProps) => {
+  return (
+    <li
+      className={clsx(styles.root, className)}
+      data-assistant={isAssistant}
+      {...rest}
+    >
+      {isAssistant ? (
+        <div>
+          <Text 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>
+          </Text>
+        </div>
+      ) : (
+        <>
+          <UserAvatar className={styles.userAvatar} username={username} />
+          <div>
+            <Text className={styles.content}>{content}</Text>
+          </div>
+        </>
+      )}
+    </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 {
+  display: flex;
+  gap: 16px;
+  padding: 12px 0;
+}
+
+@container (min-width: 700px) {
+  .root {
+    padding: 24px 0;
+  }
+}
+
+.root[data-assistant="false"] {
+  flex-direction: row-reverse;
+}
+
+.root[data-assistant="false"] .sentTime {
+  text-align: right;
+}
+
+.sentTime {
+  margin: 0 0 8px;
+  /* TODO: --type-caption doesn't exists. Define it */
+  font-size: var(--type-caption, 12.247px);
+  /* TODO: --type-caption-lineheight doesn't exists. Define it */
+  line-height: var(--type-caption-lineheight, 17.25px);
+}

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

@@ -0,0 +1,7 @@
+import type { HTMLProps } from "react";
+
+export interface ThreadMessageProps extends HTMLProps<HTMLLIElement> {
+  content: string;
+  isAssistant: boolean;
+  username: string;
+}

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

@@ -0,0 +1,27 @@
+import { clsx } from "clsx";
+import React from "react";
+import styles from "./styles.module.css";
+import type { UserAvatarProps } from "./types";
+
+export const UserAvatar = ({
+  className,
+  username,
+  ...rest
+}: UserAvatarProps) => {
+  const getNameInitials = (username: string) => {
+    const names = username.split(" ");
+
+    // If there is only one name, return the first character of the name.
+    if (names.length === 1) {
+      return `${names[0].charAt(0)}`;
+    }
+
+    return `${names[0].charAt(0)}${names[1]?.charAt(0)}`;
+  };
+
+  return (
+    <span className={clsx(styles.root, className)} {...rest}>
+      {getNameInitials(username)}
+    </span>
+  );
+};

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

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

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

@@ -0,0 +1,13 @@
+.root {
+  display: inline-block;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  color: var(--bg-elevation-2, #fff);
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 28px;
+  border-radius: var(--inner-spacing-1, 4px);
+  background: #000;
+}

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

@@ -0,0 +1,5 @@
+import type { HTMLProps } from "react";
+
+export interface UserAvatarProps extends HTMLProps<HTMLSpanElement> {
+  username: string;
+}

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,48 @@
+.root {
+  width: 100%;
+  border-radius: var(--border-radius-elevation-1);
+  border: 1px solid var(--color-bd-elevation-1);
+  /* TODO: --bg-elevation-1 doesn't exists. Define it */
+  background: var(--bg-elevation-1, #fbfcfd);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 22px 40px;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--color-bd-elevation-1);
+  background: rgba(255, 255, 255, 0.45);
+}
+
+@container (min-width: 700px) {
+  .header {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.username {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.thread {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-self: stretch;
+  padding: 0px 40px var(--inner-spacing-5) 40px;
+}
+
+.promptForm {
+  display: flex;
+  align-items: flex-start;
+  margin: var(--outer-spacing-4) 0 0 0;
+  padding: 0 var(--inner-spacing-5) var(--inner-spacing-5)
+    var(--inner-spacing-5);
+  gap: var(--outer-spacing-3);
+}

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

@@ -0,0 +1,18 @@
+export interface ChatMessage {
+  id: string;
+  content: string;
+  isAssistant: boolean;
+}
+
+export interface AIChatProps {
+  thread: ChatMessage[];
+  prompt: string;
+  username: string;
+  promptInputPlaceholder?: string;
+  chatTitle?: string;
+  description?: string;
+  assistantName?: string;
+  isWaitingForResponse?: boolean;
+  onPromptChange: (prompt: string) => void;
+  onSubmit?: () => void;
+}