feat: AiChat component styles (#49)

Author: jonkafton

package.json

@@ -17,7 +17,6 @@
     "typecheck": "tsc --noEmit",
     "build:esm": "tsc",
     "build:cjs": "tsc --module commonjs --outDir dist/cjs",
-    "build:static": "cp -r ./static dist/static",
     "build:bundles": "vite build --outDir dist/bundles",
     "build:type-augmentation": "cp -r src/type-augmentation dist/type-augmentation",
     "build": "./scripts/build.sh",
@@ -99,6 +98,7 @@
     "@testing-library/user-event": "14.6.1",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.13",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
     "@typescript-eslint/typescript-estree": "^8.13.0",

scripts/build.sh

@@ -6,5 +6,4 @@ rm -rf dist &&
 	npm run build:esm &&
 	npm run build:cjs &&
 	npm run build:type-augmentation &&
-	npm run build:static &&
 	npm run build:bundles

src/ai.ts

@@ -1,2 +1,3 @@
 export { AiChat } from "./components/AiChat/AiChat"
 export type { AiChatProps } from "./components/AiChat/AiChat"
+export type { AiChatMessage } from "./components/AiChat/types"

src/components/AiChat/AiChat.stories.tsx

@@ -14,6 +14,15 @@ const INITIAL_MESSAGES: AiChatProps["initialMessages"] = [
     content: "Hi! What are you interested in learning about?",
     role: "assistant",
   },
+  {
+    content: "I need to brush up on my Calculus",
+    role: "user",
+  },
+  {
+    content:
+      "Great! Do you want to start with the basics, like limits and derivatives, or jump into more advanced topics like integrals and series? Let me know how I can help!",
+    role: "assistant",
+  },
 ]
 
 const STARTERS = [
@@ -24,7 +33,7 @@ const STARTERS = [
 
 const Container = styled.div({
   width: "100%",
-  height: "500px",
+  height: "800px",
 })
 
 const meta: Meta<typeof AiChat> = {
@@ -42,7 +51,7 @@ const meta: Meta<typeof AiChat> = {
     initialMessages: INITIAL_MESSAGES,
     requestOpts: { apiUrl: TEST_API_STREAMING },
     conversationStarters: STARTERS,
-    title: "Chat with AI",
+    askTimTitle: "to recommend a course",
     onClose: fn(),
   },
   argTypes: {
@@ -82,6 +91,7 @@ export const StreamingResponses: Story = {}
  */
 export const JsonResponses: Story = {
   args: {
+    title: "Chat with AI",
     requestOpts: { apiUrl: TEST_API_JSON },
     parseContent: (content: unknown) => {
       return JSON.parse(content as string).message

src/components/AiChat/AiChat.test.tsx

@@ -66,6 +66,7 @@ describe("AiChat", () => {
         initialMessages={initialMessages}
         conversationStarters={conversationStarters}
         requestOpts={{ apiUrl: "http://localhost:4567/test" }}
+        placeholder="Type a message..."
         {...props}
       />,
       { wrapper: ThemeProvider },