feat: add AIChat stories and tests

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

@@ -1,4 +1,4 @@
-import { Button, Spinner, Text, TextArea } from "@appsmith/wds";
+import { Button, Text, TextArea } from "@appsmith/wds";
 import type { FormEvent, ForwardedRef, KeyboardEvent } from "react";
 import React, { forwardRef, useCallback } from "react";
 import { ChatTitle } from "./ChatTitle";
@@ -13,7 +13,6 @@ const _AIChat = (props: AIChatProps, ref: ForwardedRef<HTMLDivElement>) => {
   const {
     // assistantName,
     chatTitle,
-    description,
     isWaitingForResponse = false,
     onPromptChange,
     onSubmit,
@@ -45,29 +44,26 @@ const _AIChat = (props: AIChatProps, ref: ForwardedRef<HTMLDivElement>) => {
   return (
     <div className={styles.root} ref={ref} {...rest}>
       <div className={styles.header}>
-        {chatTitle != null && <ChatTitle title={chatTitle} />}
+        <ChatTitle title={chatTitle} />
 
-        {description ?? <Text size="body">{description}</Text>}
         <div className={styles.username}>
           <UserAvatar username={username} />
-          <Text size="body">{username}</Text>
+          <Text data-testid="t--aichat-username" size="body">
+            {username}
+          </Text>
         </div>
       </div>
 
-      <ul className={styles.thread}>
+      <ul className={styles.thread} data-testid="t--aichat-thread">
         {thread.map((message: ChatMessage) => (
           <ThreadMessage {...message} key={message.id} username={username} />
         ))}
-
-        {isWaitingForResponse && (
-          <li>
-            <Spinner />
-          </li>
-        )}
       </ul>
 
       <form className={styles.promptForm} onSubmit={handleFormSubmit}>
         <TextArea
+          // TODO: Handle isWaitingForResponse: true state
+          isDisabled={isWaitingForResponse}
           name="prompt"
           onChange={onPromptChange}
           onKeyDown={handlePromptInputKeyDown}

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

@@ -5,7 +5,11 @@ import type { ChatTitleProps } from "./types";
 
 export const ChatTitle = ({ className, title, ...rest }: ChatTitleProps) => {
   return (
-    <div className={clsx(styles.root, className)} {...rest}>
+    <div
+      className={clsx(styles.root, className)}
+      {...rest}
+      data-testid="t--aichat-chat-title"
+    >
       <div className={styles.logo} />
       {title}
     </div>

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

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

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

@@ -10,7 +10,7 @@ export interface AIChatProps {
   username: string;
   promptInputPlaceholder?: string;
   chatTitle?: string;
-  description?: string;
+  chatDescription?: string;
   assistantName?: string;
   isWaitingForResponse?: boolean;
   onPromptChange: (prompt: string) => void;

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

@@ -0,0 +1,78 @@
+import { AIChat } from "@appsmith/wds";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AIChat> = {
+  component: AIChat,
+  title: "WDS/Widgets/AIChat",
+};
+
+export default meta;
+type Story = StoryObj<typeof AIChat>;
+
+export const Main: Story = {
+  args: {
+    thread: [],
+    prompt: "",
+    username: "John Doe",
+    promptInputPlaceholder: "Type your message here",
+    chatTitle: "Chat with Assistant",
+    assistantName: "",
+    isWaitingForResponse: false,
+  },
+};
+
+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,
+      },
+    ],
+    prompt: "",
+    username: "John Doe",
+    promptInputPlaceholder: "Type your message here",
+    chatTitle: "Chat with Assistant",
+  },
+};

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

@@ -0,0 +1,113 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen, within } from "@testing-library/react";
+import { faker } from "@faker-js/faker";
+
+import { AIChat, type AIChatProps } from "..";
+import userEvent from "@testing-library/user-event";
+
+const renderComponent = (props: Partial<AIChatProps> = {}) => {
+  const defaultProps: AIChatProps = {
+    username: "",
+    thread: [],
+    prompt: "",
+    onPromptChange: jest.fn(),
+  };
+
+  return render(<AIChat {...defaultProps} {...props} />);
+};
+
+describe("@appsmith/wds/AIChat", () => {
+  it("should render chat's title", () => {
+    const chatTitle = faker.lorem.words(2);
+
+    renderComponent({ chatTitle });
+
+    expect(screen.getByTestId("t--aichat-chat-title")).toHaveTextContent(
+      chatTitle,
+    );
+  });
+
+  it("should render username", () => {
+    const username = faker.name.firstName();
+
+    renderComponent({ username });
+
+    expect(screen.getByTestId("t--aichat-username")).toHaveTextContent(
+      username,
+    );
+  });
+
+  it("should render thread", () => {
+    const thread = [
+      {
+        id: faker.datatype.uuid(),
+        content: faker.lorem.paragraph(1),
+        isAssistant: false,
+      },
+      {
+        id: faker.datatype.uuid(),
+        content: faker.lorem.paragraph(2),
+        isAssistant: true,
+      },
+    ];
+
+    renderComponent({ thread });
+
+    const messages = within(
+      screen.getByTestId("t--aichat-thread"),
+    ).getAllByRole("listitem");
+
+    expect(messages).toHaveLength(thread.length);
+    expect(messages[0]).toHaveTextContent(thread[0].content);
+    expect(messages[1]).toHaveTextContent(thread[1].content);
+  });
+
+  it("should render prompt input placeholder", () => {
+    const promptInputPlaceholder = faker.lorem.words(3);
+
+    renderComponent({
+      promptInputPlaceholder,
+    });
+
+    expect(screen.getByRole("textbox")).toHaveAttribute(
+      "placeholder",
+      promptInputPlaceholder,
+    );
+  });
+
+  it("should render prompt input value", () => {
+    const prompt = faker.lorem.words(3);
+
+    renderComponent({
+      prompt,
+    });
+
+    expect(screen.getByRole("textbox")).toHaveValue(prompt);
+  });
+
+  it("should trigger user's prompt", async () => {
+    const onPromptChange = jest.fn();
+
+    renderComponent({
+      onPromptChange,
+    });
+
+    await userEvent.type(screen.getByRole("textbox"), "A");
+
+    expect(onPromptChange).toHaveBeenCalledWith("A");
+  });
+
+  it("should submit user's prompt", async () => {
+    const onSubmit = jest.fn();
+
+    renderComponent({
+      prompt: "ABCD",
+      onSubmit,
+    });
+
+    await userEvent.click(screen.getByRole("button", { name: "Send" }));
+
+    expect(onSubmit).toHaveBeenCalled();
+  });
+});

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

@@ -198,14 +198,13 @@ class WDSAIChatWidget extends BaseWidget<WDSAIChatWidgetProps, State> {
       <AIChat
         assistantName={this.props.assistantName}
         chatTitle={this.props.chatTitle}
-        description={this.props.description}
         isWaitingForResponse={this.state.isWaitingForResponse}
         onPromptChange={this.handlePromptChange}
         onSubmit={this.handleMessageSubmit}
         prompt={this.state.prompt}
         promptInputPlaceholder={this.props.promptInputPlaceholder}
         thread={this.adaptMessages(this.state.messages)}
-        username={this.props.username}
+        username={this.props.username || ""}
       />
     );
   }

app/client/test/__mocks__/reactMarkdown.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 jest.mock("react-markdown", () => (props: { children: unknown }) => {
   return <>{props.children}</>;
 });