@stainless-api/docs-ai-chat 0.1.0-beta.4 → 0.1.0-beta.41

package/CHANGELOG.md

@@ -1,44 +1,132 @@
 # @stainless-api/docs-ai-chat
 
-## 0.1.0-beta.4
+## 0.1.0-beta.41
 
 ### Patch Changes
 
-- Updated dependencies [3c4a030]
-- Updated dependencies [cd86726]
-- Updated dependencies [aa9d333]
-- Updated dependencies [07a2c87]
-  - @stainless-api/docs@0.1.0-beta.62
-  - @stainless-api/docs-ui@0.1.0-beta.51
-  - @stainless-api/ui-primitives@0.1.0-beta.38
+- 6e762e2: fix steelie for multi-turn conversations
 
-## 0.1.0-beta.3
+## 1.0.0-beta.40
 
 ### Patch Changes
 
-- 77c0d47: steelie: submit on enter
+- Updated dependencies [2919b0a]
+- Updated dependencies [e005e5c]
+  - @stainless-api/docs-ui@0.1.0-beta.75
 
-## 0.1.0-beta.2
+## 0.1.0-beta.39
 
 ### Patch Changes
 
-- a1502cf: fix: close AIChat when clicking on SVG elements outside its bounds
-- 88a9894: patch vite optimizeDeps for docs-ai-chat
-- Updated dependencies [2a79bae]
-- Updated dependencies [88a9894]
-  - @stainless-api/ui-primitives@0.1.0-beta.38
-  - @stainless-api/docs@0.1.0-beta.61
-  - @stainless-api/docs-ui@0.1.0-beta.51
+- Updated dependencies [415629f]
+  - @stainless-api/docs-ui@0.1.0-beta.74
 
-## 0.1.0-beta.1
+## 0.1.0-beta.38
 
-### Minor Changes
+### Patch Changes
+
+- Updated dependencies [5c36876]
+  - @stainless-api/docs-ui@0.1.0-beta.73
+
+## 0.1.0-beta.37
+
+### Patch Changes
+
+- Updated dependencies [6b86a8b]
+  - @stainless-api/docs-ui@0.1.0-beta.72
+
+## 0.1.0-beta.36
+
+### Patch Changes
+
+- Updated dependencies [cd578b7]
+  - @stainless-api/docs-ui@0.1.0-beta.71
+
+## 0.1.0-beta.35
+
+### Patch Changes
+
+- Updated dependencies [93c8f94]
+  - @stainless-api/docs-ui@0.1.0-beta.70
+
+## 0.1.0-beta.34
+
+### Patch Changes
+
+- Updated dependencies [61ba36f]
+  - @stainless-api/docs-ui@0.1.0-beta.69
+
+## 0.1.0-beta.33
+
+### Patch Changes
+
+- Updated dependencies [a3f1ede]
+  - @stainless-api/docs-ui@0.1.0-beta.68
+
+## 0.1.0-beta.32
+
+### Patch Changes
+
+- @stainless-api/ai-chat@0.1.0-beta.5
+- @stainless-api/docs-ui@0.1.0-beta.67
+
+## 0.1.0-beta.31
+
+### Patch Changes
+
+- Updated dependencies [65a1c9b]
+- Updated dependencies [4f1cee7]
+- Updated dependencies [4c72a83]
+- Updated dependencies [068469b]
+  - @stainless-api/docs-ui@0.1.0-beta.66
+
+## 0.1.0-beta.30
+
+### Patch Changes
+
+- Updated dependencies [b62eb05]
+  - @stainless-api/docs-ui@0.1.0-beta.65
+  - @stainless-api/ai-chat@0.1.0-beta.4
+
+## 0.1.0-beta.29
+
+### Patch Changes
+
+- Updated dependencies [52ece13]
+- Updated dependencies [3411ffe]
+- Updated dependencies [7439be7]
+  - @stainless-api/ai-chat@0.1.0-beta.3
+  - @stainless-api/docs-ui@0.1.0-beta.64
+
+## 0.1.0-beta.28
+
+### Patch Changes
+
+- Updated dependencies [274cefc]
+  - @stainless-api/docs-ui@0.1.0-beta.63
+
+## 0.1.0-beta.27
+
+### Patch Changes
+
+- Updated dependencies [6ef241e]
+- Updated dependencies [d3a85b5]
+- Updated dependencies [d3a85b5]
+- Updated dependencies [2dcb5fb]
+  - @stainless-api/docs-ui@0.1.0-beta.62
+
+## 0.1.0-beta.26
+
+### Patch Changes
+
+- Updated dependencies [7155fae]
+  - @stainless-api/ai-chat@0.1.0-beta.2
+  - @stainless-api/docs-ui@0.1.0-beta.61
 
-- 2d00f0d: first version of docs-ai-chat
+## 0.1.0-beta.25
 
 ### Patch Changes
 
-- Updated dependencies [2d00f0d]
-  - @stainless-api/docs@0.1.0-beta.60
-  - @stainless-api/docs-ui@0.1.0-beta.50
-  - @stainless-api/ui-primitives@0.1.0-beta.37
+- 5c257e2: separate steelie into separate packages
+- Updated dependencies [9dda4cf]
+  - @stainless-api/ai-chat@0.1.0-beta.1

package/eslint.config.js

@@ -1,2 +1,2 @@
-import { config } from '@stainless/eslint-config/react-internal';
+import { config } from '@stainless/eslint-config/react';
 export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/docs-ai-chat",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.0-beta.41",
   "publishConfig": {
     "access": "public"
   },
@@ -8,25 +8,16 @@
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@stainless-api/docs": "0.1.0-beta.62",
-    "@stainless-api/docs-ui": "0.1.0-beta.51",
-    "@stainless-api/ui-primitives": "0.1.0-beta.38"
+    "@stainless-api/docs-ui": "0.1.0-beta.75"
   },
   "dependencies": {
     "@streamparser/json-whatwg": "^0.0.22",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.561.0",
-    "motion": "^12.23.25",
-    "react": "^19.2.3",
-    "react-markdown": "^10.1.0",
-    "react-syntax-highlighter": "^16.1.0",
-    "remend": "^1.0.1",
-    "zod": "^4.1.13"
+    "zod": "^4.3.5",
+    "@stainless-api/ai-chat": "0.1.0-beta.5"
   },
   "devDependencies": {
-    "@types/react": "19.2.7",
+    "@types/react": "19.2.10",
     "@types/react-dom": "^19.2.3",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "typescript": "5.9.3",
     "@stainless/eslint-config": "0.1.0-beta.1"
   },
@@ -34,8 +25,8 @@
     "./plugin": {
       "import": "./plugin.tsx"
     },
-    "./src/AiChat.tsx": {
-      "import": "./src/AiChat.tsx"
+    "./src/DocsChat.tsx": {
+      "import": "./src/DocsChat.tsx"
     }
   },
   "scripts": {

package/plugin.tsx

@@ -1,3 +1,3 @@
-export default function aiChatPlugin() {
-  return { chatComponentPath: '@stainless-api/docs-ai-chat/src/AiChat.tsx' };
+export default function docsChatPlugin() {
+  return { chatComponentPath: '@stainless-api/docs-ai-chat/src/DocsChat.tsx' };
 }

package/src/DocsChat.tsx

@@ -0,0 +1,42 @@
+import AiChat from '@stainless-api/ai-chat/src/AiChat.tsx';
+import type { DocsLanguage } from '@stainless-api/docs-ui/routing';
+import { setResponseMetadata, submitResponseFeedback } from './api';
+import { useChat } from './hook';
+
+export default function DocsChat({
+  projectId,
+  language,
+  siteTitle,
+}: {
+  projectId: string;
+  language: DocsLanguage | undefined;
+  siteTitle: string | undefined;
+}) {
+  const { chatMessages, sendMessage } = useChat({
+    projectId,
+    language: language ?? 'http',
+    siteTitle,
+  });
+
+  const rateMessage = async (spanId: string, rating: 'up' | 'down'): Promise<boolean> => {
+    try {
+      const { success } = await submitResponseFeedback(spanId, { up: 1 as const, down: 0 as const }[rating]);
+      return success;
+    } catch {
+      return false;
+    }
+  };
+
+  const onCopyMessage = (spanId: string) => {
+    setResponseMetadata(spanId, { copied_to_clipboard: 'true' }).catch(() => {});
+  };
+
+  return (
+    <AiChat
+      chatMessages={chatMessages}
+      sendMessage={sendMessage}
+      rateMessage={rateMessage}
+      onCopyMessage={onCopyMessage}
+    />
+  );
+}

package/src/api/client-id.ts

@@ -0,0 +1,11 @@
+/**
+ * Identifier for tracking unique users in braintrust
+ */
+export function getClientId() {
+  let clientId = localStorage.getItem('stainless-client-id');
+  if (!clientId) {
+    clientId = crypto.randomUUID();
+    localStorage.setItem('stainless-client-id', clientId);
+  }
+  return clientId;
+}

package/src/api/index.ts

@@ -1,9 +1,37 @@
 import type { DocsLanguage } from '@stainless-api/docs-ui/routing';
 import { JSONParser } from '@streamparser/json-whatwg';
-import { type RequestBody, responseChunk } from './schemas';
+import {
+  type RequestBody,
+  responseChunk,
+  type FeedbackRequestBody,
+  feedbackResponseBody,
+  type MetadataRequestBody,
+  metadataResponseBody,
+} from './schemas';
 import { streamAsyncIterator } from './util';
+import { getClientId } from './client-id';
 
-export const CHAT_ENDPOINT = 'https://app.stainless.com/api/ai/get-agentic-help';
+export const API_URL = new URL('https://app.stainless.com/api/');
+export const CHAT_ENDPOINT = new URL('ai/get-agentic-help', API_URL);
+
+export const FEEDBACK_ENDPOINT = (spanId: string) => new URL(`ai/agentic-help/${spanId}/score`, API_URL);
+export const METADATA_ENDPOINT = (spanId: string) => new URL(`ai/agentic-help/${spanId}/metadata`, API_URL);
+
+/** Context on what the user is currently viewing to pass to the agent */
+function getPageContext({ siteTitle }: { siteTitle: string | undefined }) {
+  const { href } = window.location;
+  const markdownUrl = `${href.replace(/\/$/, '')}/index.md`;
+  const pageTitle = document.querySelector('h1')?.textContent;
+  return [
+    `The user is viewing a documentation page${siteTitle ? ` for ${siteTitle}` : ''}.`,
+    `- Content URL: ${markdownUrl}`,
+    pageTitle && `- Page title: “${pageTitle}”`,
+    // TODO: include stainless path here? does the agent know how to use it?
+    // TODO: pass more of the page content into context without the agent having to retrieve it
+  ]
+    .filter(Boolean)
+    .join('\n');
+}
 
 /**
  * Stream chat response from the server
@@ -14,15 +42,17 @@ export async function* getChatResponse(
     project,
     language,
     priorMessages,
+    siteTitle,
   }: {
     query: string;
     project: string;
     language: DocsLanguage;
     priorMessages: NonNullable<RequestBody['additionalContext']>['prior_messages'];
+    siteTitle: string | undefined;
   },
   abortSignal: AbortSignal,
 ) {
-  const req = await fetch(CHAT_ENDPOINT, {
+  const res = await fetch(CHAT_ENDPOINT, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -31,17 +61,53 @@ export async function* getChatResponse(
       query,
       sdk: { project, language },
       stream: true,
-      additionalContext: { prior_messages: priorMessages },
+      additionalContext: {
+        prior_messages: priorMessages,
+        intent: getPageContext({ siteTitle }),
+      },
+      browser_id: getClientId(),
     } satisfies RequestBody),
 
     signal: abortSignal,
   });
 
-  if (!req.ok || !req.body) throw new Error(`Chat request failed with status ${req.status}`);
+  if (!res.ok || !res.body) throw new Error(`Chat request failed with status ${res.status}`);
 
   const parser = new JSONParser({ separator: '\n', paths: ['$'] });
-  for await (const chunk of streamAsyncIterator(req.body.pipeThrough(parser))) {
+  for await (const chunk of streamAsyncIterator(res.body.pipeThrough(parser))) {
     const chunkParsed = responseChunk.safeParse(chunk.value);
     if (chunkParsed.success) yield chunkParsed.data;
   }
 }
+
+/**
+ * Attach a score to a response
+ */
+export async function submitResponseFeedback(spanId: string, score: 0 | 1) {
+  const res = await fetch(FEEDBACK_ENDPOINT(spanId), {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ score } satisfies FeedbackRequestBody),
+  });
+
+  if (!res.ok) throw new Error(`Feedback request failed with status ${res.status}`);
+  return feedbackResponseBody.parse(await res.json());
+}
+
+/**
+ * Attach a score to a response
+ */
+export async function setResponseMetadata(spanId: string, metadata: Record<string, string>) {
+  const res = await fetch(METADATA_ENDPOINT(spanId), {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ metadata } satisfies MetadataRequestBody),
+  });
+
+  if (!res.ok) throw new Error(`Metadata request failed with status ${res.status}`);
+  return metadataResponseBody.parse(await res.json());
+}

package/src/api/schemas.ts

@@ -14,6 +14,7 @@ export const requestBody = z.object({
       maxTokens: z.number().optional(),
     })
     .optional(),
+  session_id: z.string().optional(),
   additionalContext: z
     .object({
       prior_messages: z.array(
@@ -28,6 +29,7 @@ export const requestBody = z.object({
       errors: z.string().optional(),
     })
     .optional(),
+  browser_id: z.string().optional(),
 });
 export type RequestBody = z.input<typeof requestBody>;
 
@@ -48,6 +50,19 @@ export const responseChunk = z.discriminatedUnion('type', [
   }),
   z.object({
     type: z.literal('done'),
+    span_id: z.string(),
+  }),
+  z.object({
+    type: z.literal('start_session'),
+    session_id: z.string(),
   }),
 ]);
 export type ResponseChunk = z.infer<typeof responseChunk>;
+
+export const feedbackRequestBody = z.object({ score: z.number().min(0).max(1) });
+export type FeedbackRequestBody = z.infer<typeof feedbackRequestBody>;
+export const feedbackResponseBody = z.object({ success: z.boolean() });
+
+export const metadataRequestBody = z.object({ metadata: z.record(z.string(), z.string()) });
+export type MetadataRequestBody = z.infer<typeof metadataRequestBody>;
+export const metadataResponseBody = z.object({ success: z.boolean() });

package/src/hook.ts

@@ -1,31 +1,14 @@
+import type {
+  AssistantTextMessage,
+  AssistantToolCallMessage,
+  ChatMessage,
+  UserMessage,
+} from '@stainless-api/ai-chat/src/types';
+import type { DocsLanguage } from '@stainless-api/docs-ui/routing';
 import { useCallback, useEffect, useReducer, useRef } from 'react';
 import { getChatResponse } from './api';
-import type { DocsLanguage } from '@stainless-api/docs-ui/routing';
 import type { ResponseChunk } from './api/schemas';
 
-// Base
-type BaseMessage = { id: string };
-type BaseTextMessage = BaseMessage & { content: string };
-// User
-type UserMessage = BaseTextMessage & { role: 'user' };
-// Assistant
-type BaseAssistantMessage = BaseMessage & {
-  role: 'assistant';
-  respondingTo: UserMessage['id'];
-  messageType: ResponseChunk['type'];
-};
-type AssistantTextMessage = (BaseAssistantMessage & BaseTextMessage) & {
-  messageType: Extract<BaseAssistantMessage['messageType'], 'text'>;
-  isComplete: boolean;
-};
-type AssistantToolCallMessage = BaseAssistantMessage & {
-  messageType: Extract<BaseAssistantMessage['messageType'], 'tool_use'>;
-  toolName: string;
-  input: Record<string, unknown> | undefined;
-};
-// All
-export type ChatMessage = UserMessage | AssistantTextMessage | AssistantToolCallMessage;
-
 //
 // Reducer
 //
@@ -53,7 +36,10 @@ type ChatReducerAction =
   | { type: 'beginAssistantMessage'; message: Omit<AssistantTextMessage, 'role' | 'isComplete'> }
   | { type: 'streamMessage'; id: string; newContent: string }
   | { type: 'completeMessage'; id: string }
-  | { type: 'addAssistantToolCall'; message: Omit<AssistantToolCallMessage, 'role' | 'id'> };
+  | { type: 'addAssistantToolCall'; message: Omit<AssistantToolCallMessage, 'role' | 'id'> }
+  // a response potentially contains multiple messages / tool calls
+  | { type: 'completeResponse'; respondingTo: UserMessage['id']; spanId: string }
+  | { type: 'addError'; respondingTo: UserMessage['id']; errorMessage: string };
 
 function chatReducer(state: ChatMessage[], action: ChatReducerAction) {
   if (action.type === 'addUserMessage') {
@@ -98,6 +84,26 @@ function chatReducer(state: ChatMessage[], action: ChatReducerAction) {
     });
   }
 
+  if (action.type === 'completeResponse') {
+    return spliceNewMessage(state, {
+      role: 'assistant',
+      id: crypto.randomUUID(),
+      messageType: 'done',
+      respondingTo: action.respondingTo,
+      spanId: action.spanId,
+    } satisfies Extract<ChatMessage, { role: 'assistant' }>);
+  }
+
+  if (action.type === 'addError') {
+    return spliceNewMessage(state, {
+      role: 'assistant',
+      id: crypto.randomUUID(),
+      messageType: 'error',
+      respondingTo: action.respondingTo,
+      errorMessage: action.errorMessage,
+    });
+  }
+
   return state;
 }
 
@@ -105,7 +111,15 @@ function chatReducer(state: ChatMessage[], action: ChatReducerAction) {
 // Consumable hook
 //
 
-export function useChat({ projectId, language }: { projectId: string; language: DocsLanguage }) {
+export function useChat({
+  projectId,
+  language,
+  siteTitle,
+}: {
+  projectId: string;
+  language: DocsLanguage;
+  siteTitle: string | undefined;
+}) {
   // Used to clean up stray streaming requests on unmount (prevent setState on unmounted component)
   const abortController = useRef(new AbortController());
   useEffect(() => {
@@ -127,66 +141,83 @@ export function useChat({ projectId, language }: { projectId: string; language:
       let currentResponseId = crypto.randomUUID(); // for streaming text messages
       let lastChunkType: ResponseChunk['type'] | undefined = undefined;
 
-      for await (const chunk of getChatResponse(
-        {
-          query: question,
-          project: projectId,
-          language,
-          priorMessages: chatMessages.filter(
-            (msg) => msg.role === 'user' || (msg.role === 'assistant' && msg.messageType === 'text'),
-          ),
-        },
-        abortController.current.signal,
-      )) {
-        if (abortController.current.signal.aborted) break;
-
-        // mark complete when text messages finish streaming
-        if (lastChunkType === 'text' && chunk.type !== 'text') {
-          dispatch({ type: 'completeMessage', id: currentResponseId });
-        }
+      try {
+        let chunk: ResponseChunk | undefined = undefined;
+        for await (chunk of getChatResponse(
+          {
+            query: question,
+            project: projectId,
+            language,
+            priorMessages: chatMessages.filter(
+              (msg) => msg.role === 'user' || (msg.role === 'assistant' && msg.messageType === 'text'),
+            ),
+            siteTitle,
+          },
+          abortController.current.signal,
+        )) {
+          if (abortController.current.signal.aborted) break;
+
+          // mark complete when text messages finish streaming
+          if (lastChunkType === 'text' && chunk.type !== 'text') {
+            dispatch({ type: 'completeMessage', id: currentResponseId });
+          }
 
-        // stop reading from the stream on done
-        // TODO: record 'done' in the state so that we can render feedback buttons
-        if (chunk.type === 'done') break;
+          if (chunk.type === 'done') {
+            dispatch({ type: 'completeResponse', respondingTo: userMessageId, spanId: chunk.span_id });
+            // stop reading from the stream on done
+            break;
+          }
+
+          if (chunk.type === 'text') {
+            if (lastChunkType !== 'text') {
+              // start a new text message
+              currentResponseId = crypto.randomUUID();
+              dispatch({
+                type: 'beginAssistantMessage',
+                message: {
+                  content: chunk.text,
+                  id: currentResponseId,
+                  messageType: chunk.type,
+                  respondingTo: userMessageId,
+                },
+              });
+            } else {
+              // continue the current message with the new content
+              dispatch({ type: 'streamMessage', id: currentResponseId, newContent: chunk.text });
+            }
+          }
 
-        if (chunk.type === 'text') {
-          if (lastChunkType !== 'text') {
-            // start a new text message
-            currentResponseId = crypto.randomUUID();
+          if (chunk.type === 'tool_use') {
             dispatch({
-              type: 'beginAssistantMessage',
+              type: 'addAssistantToolCall',
               message: {
-                content: chunk.text,
-                id: currentResponseId,
-                messageType: chunk.type,
                 respondingTo: userMessageId,
+                messageType: chunk.type,
+                toolName: chunk.name,
+                input: chunk.input,
               },
             });
-          } else {
-            // continue the current message with the new content
-            dispatch({ type: 'streamMessage', id: currentResponseId, newContent: chunk.text });
           }
-        }
 
-        if (chunk.type === 'tool_use') {
+          lastChunkType = chunk.type;
+        }
+        if (!chunk) {
           dispatch({
-            type: 'addAssistantToolCall',
-            message: {
-              respondingTo: userMessageId,
-              messageType: chunk.type,
-              toolName: chunk.name,
-              input: chunk.input,
-            },
+            type: 'addError',
+            respondingTo: userMessageId,
+            errorMessage: 'No response received. Please try again.',
           });
         }
-
-        lastChunkType = chunk.type;
+      } catch {
+        dispatch({
+          type: 'addError',
+          respondingTo: userMessageId,
+          errorMessage: 'Something went wrong. Please try again.',
+        });
       }
     },
-    [language, projectId, chatMessages],
+    [language, projectId, siteTitle, chatMessages],
   );
 
-  // TODO: error handling
-
   return { chatMessages, sendMessage };
 }

package/tsconfig.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "jsx": "react-jsx"
   },
-  "include": ["src", "*.d.ts", "plugin.tsx"]
+  "include": ["src", "*.d.ts", "plugin.tsx", "*.config.*"]
 }

package/ambient-modules.d.ts

@@ -1,7 +0,0 @@
-import 'react';
-
-declare module 'react' {
-  interface CSSProperties {
-    [key: `--${string}`]: string | number;
-  }
-}

package/src/AiChat.module.css

@@ -1,221 +0,0 @@
-.outer-wrapper {
-  display: contents;
-  font-size: var(--stl-typography-scale-sm);
-
-  --shadow-color: light-dark(rgb(0 0 0 / 0.15), var(--stl-color-background));
-  --trigger-size: 3rem;
-  --fixed-inset-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
-  --fixed-inset-right: calc(env(safe-area-inset-right, 0px) + 1rem);
-}
-
-.trigger-border {
-  position: fixed;
-  bottom: var(--fixed-inset-bottom);
-  right: var(--fixed-inset-right);
-  z-index: 51;
-
-  padding: 1px;
-  background-color: var(--stl-color-border);
-  display: block;
-  transition: background-color 0.1s ease;
-
-  &:hover {
-    background-color: var(--stl-color-border-strong);
-  }
-
-  &:has(textarea:focus-visible) {
-    background-color: var(--stl-color-blue-border-strong);
-    transition: background-color 0.25s ease;
-  }
-
-  &:not(:has(.trigger.expanded)) {
-    cursor: pointer;
-  }
-}
-
-.trigger {
-  display: flex;
-  align-items: stretch;
-  min-height: var(--trigger-size);
-  min-width: var(--trigger-size);
-  position: relative;
-
-  background-color: var(--stl-color-background);
-  color: var(--stl-color-foreground);
-  --padding: 0.5rem;
-  padding: var(--padding);
-
-  overflow: clip;
-
-  .bot-icon {
-    position: absolute;
-    --icon-size: 1.5rem;
-    top: calc(var(--trigger-size) / 2 - var(--icon-size) / 2);
-    left: calc(var(--trigger-size) / 2 - var(--icon-size) / 2);
-    width: var(--icon-size);
-    height: var(--icon-size);
-    pointer-events: none;
-  }
-
-  .focused-contents {
-    display: flex;
-    gap: 0.2rem;
-    align-items: center;
-    user-select: none;
-  }
-  &:not(.expanded) .focused-contents {
-    position: absolute;
-    pointer-events: none;
-    textarea {
-      user-select: none;
-    }
-  }
-
-  textarea {
-    display: block;
-    resize: none;
-    width: 24ch;
-    height: auto;
-
-    font-size: var(--stl-typography-scale-base);
-    line-height: 1.35;
-    padding: 0.25em 0.25em 0.25em 0.5em;
-
-    color: inherit;
-    background: none;
-
-    border: none;
-    user-select: initial;
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  button[type='submit'] {
-    align-self: flex-end;
-
-    width: calc(var(--trigger-size) - var(--padding) * 2);
-    height: calc(var(--trigger-size) - var(--padding) * 2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border: none;
-    border-radius: calc(var(--border-radius) - var(--padding));
-
-    background-color: var(--stl-color-accent-inverse-background);
-    color: var(--stl-color-accent-inverse-foreground);
-
-    cursor: pointer;
-
-    svg {
-      width: 1.15rem;
-      height: 1.15rem;
-      * {
-        stroke-width: 2.25px;
-      }
-    }
-
-    &:disabled {
-      background-color: var(--stl-color-muted-background);
-      color: var(--stl-color-foreground);
-      opacity: 0.6;
-      cursor: default;
-    }
-  }
-}
-
-.chat-area-border {
-  position: fixed;
-  --chat-area-inset-bottom: calc(var(--fixed-inset-bottom) + var(--trigger-size) + 0.5rem);
-  bottom: var(--chat-area-inset-bottom);
-  right: var(--fixed-inset-right);
-  z-index: 50;
-}
-
-.chat-area {
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: center;
-
-  max-width: 48ch;
-  max-height: calc(75svh - var(--chat-area-inset-bottom) - 1rem);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-
-  padding: 1em;
-
-  background-color: var(--stl-color-background);
-  background-image: linear-gradient(
-    to bottom,
-    var(--stl-color-ui-background),
-    var(--stl-color-ui-background)
-  );
-}
-
-.message-log {
-  padding: 0;
-  list-style-type: none;
-
-  flex: 0;
-  position: relative;
-  z-index: 1;
-
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-
-  width: calc(100vw - 2rem);
-  max-width: 100%;
-
-  &:not(:has(.chat-message)) {
-    display: none;
-  }
-}
-
-.chat-message {
-  list-style-type: none;
-  text-wrap: pretty;
-  font-size: 15px;
-  line-height: 1.4;
-
-  &[data-message-role='user'] {
-    max-width: 40ch;
-    align-self: flex-end;
-    padding: 0.5em 0.75em;
-    background-color: var(--stl-color-accent-inverse-background);
-    color: var(--stl-color-accent-inverse-foreground);
-    overflow: clip;
-
-    ::selection {
-      background-color: rgb(from var(--stl-color-accent-inverse-foreground) r g b / 0.25);
-    }
-  }
-
-  &[data-message-role='assistant'] {
-    align-self: stretch;
-    padding: 0.25em 0;
-    color: var(--stl-color-foreground-reduced);
-  }
-
-  pre {
-    padding: 0.25em 0.65em;
-    font-size: var(--stl-typography-scale-sm);
-    line-height: 1.5;
-  }
-
-  &.tool-use {
-    color: var(--stl-color-foreground-muted);
-    opacity: 0.8;
-
-    strong,
-    em {
-      font-weight: 500;
-      color: var(--stl-color-foreground-reduced);
-    }
-
-    & + .tool-use {
-      margin-top: -0.75em;
-    }
-  }
-}

package/src/AiChat.tsx

@@ -1,84 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useChat } from './hook';
-import { motion } from 'motion/react';
-
-import type { DocsLanguage } from '@stainless-api/docs-ui/routing';
-
-import styles from './AiChat.module.css';
-import ChatLog from './components/ChatLog';
-import AiChatTrigger from './Trigger';
-
-const borderRadius = 16;
-
-export default function DocsChat({
-  projectId,
-  language,
-}: {
-  projectId: string;
-  language: DocsLanguage | undefined;
-}) {
-  const { chatMessages, sendMessage } = useChat({ projectId, language: language ?? 'typescript' });
-
-  const baseRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [focused, setFocused] = useState(false);
-  const chatExpanded = focused && chatMessages.length > 0;
-
-  // Manage “focus” state
-  // prettier-ignore
-  useEffect(() => {
-    const ac = new AbortController();
-    // “focus” in/out with click
-    window.addEventListener('click', (e) => {
-      if (!(e.target instanceof Element)) return;
-      if (baseRef.current?.contains(e.target)) { setFocused(true); }
-      else { setFocused(false); }
-    }, { signal: ac.signal });
-    // leave with escape
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        setFocused(false);
-        inputRef.current?.blur(); // this is the one case where the input won’t have already lost focus
-      }
-    }, { signal: ac.signal });
-
-    // record focus state when our chat elements receive focus
-    // unfocus when another element outside of our component gets focus (incl. by keyboard)
-    document.addEventListener('focusin', (e) => {
-      if (!(e.target instanceof HTMLElement) || !baseRef.current) return;
-      setFocused(baseRef.current.contains(e.target) ?? false);
-    }, { signal: ac.signal });
-    return () => ac.abort();
-  }, []);
-
-  return (
-    <div className={styles['outer-wrapper']} ref={baseRef}>
-      <AiChatTrigger
-        focused={focused}
-        updateFocused={setFocused}
-        sendMessage={sendMessage}
-        inputRef={inputRef}
-        borderRadius={borderRadius}
-      />
-
-      {/* TODO: enter and leave animations */}
-      <motion.div
-        layout
-        className={styles['chat-area-border']}
-        style={{
-          display: chatExpanded ? 'block' : 'none', // Activity doesn’t play nice with framer-motion layout animations
-          borderRadius,
-          boxShadow: '0 8px 20px -6px var(--shadow-color)',
-        }}
-      >
-        <motion.div
-          layout
-          className={styles['chat-area']}
-          style={{ borderRadius, boxShadow: 'inset 0 0 0 1px var(--stl-color-border)' }}
-        >
-          <ChatLog messages={chatMessages} />
-        </motion.div>
-      </motion.div>
-    </div>
-  );
-}

package/src/Trigger.tsx

@@ -1,135 +0,0 @@
-import React, { useState } from 'react';
-import { ArrowUpIcon, BotMessageSquareIcon } from 'lucide-react';
-import clsx from 'clsx';
-import { Transition } from 'motion';
-import styles from './AiChat.module.css';
-import { motion } from 'motion/react';
-
-const MotionBotIcon = motion.create(BotMessageSquareIcon);
-
-export default function AiChatTrigger({
-  focused,
-  updateFocused,
-  sendMessage,
-  inputRef,
-  borderRadius,
-}: {
-  focused: boolean;
-  updateFocused: (focused: boolean) => void;
-  sendMessage: (question: string) => void;
-  inputRef: React.RefObject<HTMLTextAreaElement | null>;
-  borderRadius: number;
-}) {
-  const [empty, setEmpty] = useState(true);
-  const [resetKey, setResetKey] = useState(0);
-
-  const layoutTransition = {
-    type: 'spring',
-    mass: 0.7,
-    stiffness: 275,
-    damping: 20,
-  } satisfies Transition;
-
-  const crossBlurTransition = {
-    delay: focused ? 0.07 : 0,
-    duration: 0.1,
-    ease: 'easeInOut',
-  } satisfies Transition;
-
-  return (
-    <form
-      style={{ display: 'contents' }}
-      action={(formData) => {
-        const question = formData.get('question');
-        if (typeof question === 'string' && question.trim().length) {
-          sendMessage(question);
-          setResetKey((k) => k + 1);
-          setEmpty(true);
-        }
-      }}
-    >
-      <motion.label
-        layout
-        transition={layoutTransition}
-        className={styles['trigger-border']}
-        style={{
-          borderRadius: borderRadius + 1,
-          boxShadow: '0 4px 12px -4px var(--shadow-color)',
-        }}
-      >
-        <motion.div
-          layout
-          transition={layoutTransition}
-          className={clsx(styles.trigger, focused && styles.expanded)}
-          style={{ borderRadius: borderRadius, '--border-radius': `${borderRadius}px` }}
-        >
-          {/* Bot icon is visible while closed */}
-          <MotionBotIcon
-            layout
-            className={styles['bot-icon']}
-            animate={{
-              opacity: focused ? 0 : 1,
-              scale: focused ? 0.75 : 1,
-              filter: focused ? 'blur(4px)' : 'blur(0px)',
-            }}
-            style={{ willChange: 'filter, transform' }}
-            transition={crossBlurTransition}
-            aria-label="AI chat"
-          />
-
-          {/* Input & send button are visible while open */}
-          <motion.div
-            layout
-            className={styles['focused-contents']}
-            initial={{ opacity: 0 }}
-            animate={{
-              opacity: focused ? 1 : 0,
-              filter: focused ? 'blur(0px)' : 'blur(4px)',
-            }}
-            style={{ willChange: 'filter, transform' }}
-            transition={crossBlurTransition}
-          >
-            <motion.textarea
-              layout
-              transition={layoutTransition}
-              name="question"
-              rows={1}
-              placeholder="Ask a question"
-              // Keep track of whether the question is submittable
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-                setEmpty(e.target.value.trim().length === 0);
-              }}
-              // Submit on Cmd+Enter
-              onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                  e.preventDefault();
-                  e.currentTarget.form?.requestSubmit();
-                }
-              }}
-              // Update textarea height to fit content as user types
-              ref={(el: HTMLTextAreaElement | null) => {
-                inputRef.current = el;
-                if (!el) return;
-                const updateSize = () => {
-                  el.style.height = 'auto';
-                  el.style.height = `${el.scrollHeight}px`;
-                };
-                const ac = new AbortController();
-                el.addEventListener('input', updateSize, { signal: ac.signal });
-                updateSize();
-                // in case the user focused it before we mounted
-                if (document.activeElement === el) updateFocused(true);
-                return () => ac.abort();
-              }}
-              // make the ref re-mount so we get a fresh height measurement after reset
-              key={resetKey}
-            />
-            <motion.button layout type="submit" disabled={empty} transition={layoutTransition}>
-              <ArrowUpIcon aria-label="Send" />
-            </motion.button>
-          </motion.div>
-        </motion.div>
-      </motion.label>
-    </form>
-  );
-}

package/src/components/ChatLog.tsx

@@ -1,42 +0,0 @@
-import type { ChatMessage } from '../hook';
-import Message from './ChatMessage';
-import ToolCall from './ToolCall';
-
-import { motion } from 'motion/react';
-
-import styles from '../AiChat.module.css';
-
-export default function ChatLog({ messages }: { messages: ChatMessage[] }) {
-  return (
-    <motion.ul
-      layout
-      role="log"
-      aria-live="polite"
-      className={styles['message-log']}
-      initial={{ opacity: 0, filter: `blur(4px)` }}
-      animate={{ opacity: 1, filter: `blur(0px)` }}
-    >
-      {messages.map((msg) => {
-        if (msg.role === 'user') {
-          return (
-            <Message key={msg.id} role="user">
-              {msg.content}
-            </Message>
-          );
-        }
-
-        if (msg.role === 'assistant' && msg.messageType === 'text') {
-          return (
-            <Message key={msg.id} role={msg.role} isMarkdown isStreaming={!msg.isComplete}>
-              {msg.content}
-            </Message>
-          );
-        }
-
-        if (msg.role === 'assistant' && msg.messageType === 'tool_use') {
-          return <ToolCall key={msg.id} message={msg} />;
-        }
-      })}
-    </motion.ul>
-  );
-}

package/src/components/ChatMessage.tsx

@@ -1,43 +0,0 @@
-import remend from 'remend';
-import Markdown from 'react-markdown';
-import { motion } from 'motion/react';
-
-import highlightCodeComponent from './CodeBlock';
-
-import clsx from 'clsx';
-import styles from '../AiChat.module.css';
-
-export default function ChatMessage({
-  children,
-  role,
-  isStreaming = false,
-  isMarkdown = false,
-}: {
-  children: string;
-  role: 'user' | 'assistant';
-  isStreaming?: boolean;
-  isMarkdown?: boolean;
-}) {
-  return (
-    <motion.li
-      layout="position"
-      data-message-role={role}
-      className={clsx(styles['chat-message'], 'stl-ui-prose', 'smaller-headings')}
-      style={{ borderRadius: 16 }}
-    >
-      {/* inner div provides scale correction while outer container transforms */}
-      {isMarkdown ? (
-        <Markdown
-          components={{
-            ...highlightCodeComponent,
-          }}
-        >
-          {/* repair incomplete markdown syntax during streaming to ensure proper rendering */}
-          {isStreaming ? remend(children) : children}
-        </Markdown>
-      ) : (
-        <p>{children}</p>
-      )}
-    </motion.li>
-  );
-}

package/src/components/CodeBlock.tsx

@@ -1,29 +0,0 @@
-import { Fragment } from 'react';
-
-import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
-
-import type { Components } from 'react-markdown';
-import clsx from 'clsx';
-import './hljs-github.css';
-
-export default {
-  code(props) {
-    const { children, className, ref, style, ...rest } = props;
-    const match = /language-(\w+)/.exec(className || '');
-    return match ? (
-      <SyntaxHighlighter
-        {...rest}
-        PreTag={Fragment}
-        language={match[1]}
-        useInlineStyles
-        codeTagProps={{ className: clsx(className, 'hljs-github') }}
-      >
-        {String(children).replace(/\n$/, '')}
-      </SyntaxHighlighter>
-    ) : (
-      <code {...rest} className={className}>
-        {children}
-      </code>
-    );
-  },
-} satisfies Components;

package/src/components/ToolCall.tsx

@@ -1,36 +0,0 @@
-import { motion } from 'motion/react';
-import z from 'zod';
-
-import type { ChatMessage } from '../hook';
-
-import styles from '../AiChat.module.css';
-import clsx from 'clsx';
-
-type ToolUseMessage = Extract<ChatMessage, { role: 'assistant'; messageType: 'tool_use' }>;
-
-export default function ToolCall({
-  message,
-}: {
-  message: Pick<ToolUseMessage, 'id' | 'toolName' | 'input'>;
-}) {
-  // Render docs searches
-  if (message.toolName.endsWith('search_docs')) {
-    const parsed = z.object({ query: z.string() }).safeParse(message.input);
-    if (parsed.success) {
-      return (
-        <motion.li
-          layout="position"
-          data-message-role="assistant"
-          className={clsx(styles['chat-message'], styles['tool-use'])}
-        >
-          <p>
-            Searched for <em>{parsed.data.query}</em>
-          </p>
-        </motion.li>
-      );
-    }
-  }
-
-  // No other tool renderers yet
-  return null;
-}

package/src/components/hljs-github.css

@@ -1,81 +0,0 @@
-.hljs-github {
-  /* color: light-dark(#24292e, #c9d1d9); */
-  /* background: light-dark(#ffffff, #0d1117); */
-
-  .hljs-doctag,
-  .hljs-keyword,
-  .hljs-meta .hljs-keyword,
-  .hljs-template-tag,
-  .hljs-template-variable,
-  .hljs-type,
-  .hljs-variable.language_ {
-    color: light-dark(#d73a49, #ff7b72);
-  }
-
-  .hljs-title,
-  .hljs-title.class_,
-  .hljs-title.class_.inherited__,
-  .hljs-title.function_ {
-    color: light-dark(#6f42c1, #d2a8ff);
-  }
-
-  .hljs-attr,
-  .hljs-attribute,
-  .hljs-literal,
-  .hljs-meta,
-  .hljs-number,
-  .hljs-operator,
-  .hljs-variable,
-  .hljs-selector-attr,
-  .hljs-selector-class,
-  .hljs-selector-id {
-    color: light-dark(#005cc5, #79c0ff);
-  }
-
-  .hljs-regexp,
-  .hljs-string,
-  .hljs-meta .hljs-string {
-    color: light-dark(#032f62, #a5d6ff);
-  }
-
-  .hljs-built_in,
-  .hljs-symbol {
-    color: light-dark(#e36209, #ffa657);
-  }
-
-  .hljs-comment,
-  .hljs-code,
-  .hljs-formula {
-    color: light-dark(#6a737d, #8b949e);
-  }
-
-  .hljs-name,
-  .hljs-quote,
-  .hljs-selector-tag,
-  .hljs-selector-pseudo {
-    color: light-dark(#22863a, #7ee787);
-  }
-
-  .hljs-subst {
-    color: light-dark(#24292e, #c9d1d9);
-  }
-
-  .hljs-section {
-    color: light-dark(#005cc5, #1f6feb);
-    font-weight: bold;
-  }
-
-  .hljs-bullet {
-    color: light-dark(#735c0f, #f2cc60);
-  }
-
-  .hljs-emphasis {
-    color: light-dark(#24292e, #c9d1d9);
-    font-style: italic;
-  }
-
-  .hljs-strong {
-    color: light-dark(#24292e, #c9d1d9);
-    font-weight: bold;
-  }
-}