dependencies

packages/ui/app/package.json

@@ -50,13 +50,14 @@
     "@emotion/is-prop-valid": "^1.2.2",
     "@fern-api/fdr-sdk": "workspace:*",
     "@fern-api/template-resolver": "workspace:*",
+    "@fern-ui/chatbot": "workspace:*",
     "@fern-ui/components": "workspace:*",
     "@fern-ui/core-utils": "workspace:*",
     "@fern-ui/fdr-utils": "workspace:*",
     "@fern-ui/loadable": "workspace:*",
     "@fern-ui/next-seo": "workspace:*",
     "@fern-ui/react-commons": "workspace:*",
-    "@fern-ui/search-utils": "workspace:^",
+    "@fern-ui/search-utils": "workspace:*",
     "@headlessui/react": "^1.7.18",
     "@inkeep/widgets": "^0.2.288",
     "@next/third-parties": "^14.2.4",

packages/ui/app/tailwind.config.cjs

@@ -7,6 +7,7 @@ module.exports = {
     content: [
         "./src/**/*.{ts,tsx}",
         "../tailwind.config.cjs",
-        path.join(path.dirname(require.resolve("@fern-ui/components")), "**/*.{ts,tsx}")
+        path.join(path.dirname(require.resolve("@fern-ui/components")), "**/*.{ts,tsx}"),
+        path.join(path.dirname(require.resolve("@fern-ui/chatbot")), "**/*.{ts,tsx}")
     ]
 };

packages/ui/chatbot/package.json

@@ -1,7 +1,12 @@
 {
-  "name": "chatbot",
+  "name": "@fern-ui/chatbot",
   "private": true,
   "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fern-api/fern-platform.git",
+    "directory": "packages/ui/chatbot"
+  },
   "files": [
     "dist"
   ],

packages/ui/chatbot/src/App.tsx

@@ -57,7 +57,10 @@ function App() {
     };
     return (
         <div className="max-w-[40rem] w-screen dark max-h-screen flex">
-            <ChatbotModal chatStream={handleChatStream} />
+            <ChatbotModal
+                chatStream={handleChatStream}
+                className="bg-grayscale-2 rounded-lg w-full text-black dark:text-white"
+            />
         </div>
     );
 }

packages/ui/chatbot/src/components/AskInput.tsx

@@ -13,13 +13,13 @@ export function AskInput({ onSend, className }: AskInputProps): ReactElement {
 
     return (
         <div className={clsx("flex w-full items-center", className)}>
-            <div className="flex w-full flex-col gap-1.5 rounded-[26px] p-1.5 transition-colors bg-gray-a3">
+            <div className="flex w-full flex-col gap-1.5 rounded-[26px] p-1.5 transition-colors bg-grayscale-a3">
                 <div className="flex items-end gap-1.5 md:gap-2">
                     <div className="flex min-w-0 flex-1 flex-col pl-4">
                         <TextArea
                             style={{ height: 40 }}
                             placeholder="Ask me a question about Cohere"
-                            className="px-0 py-2 m-0 resize-none text-gray-12 placeholder:text-gray-a10 border-0 bg-transparent focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 max-h-52"
+                            className="px-0 py-2 m-0 resize-none text-grayscale-12 placeholder:text-grayscale-a10 border-0 bg-transparent focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 max-h-52"
                             value={value}
                             onChange={(e) => setValue(e.target.value)}
                             onKeyDownCapture={(e) => {

packages/ui/chatbot/src/components/ChatbotModal.tsx

@@ -1,9 +1,8 @@
 import { FernScrollArea } from "@fern-ui/components";
 import { useResizeObserver } from "@fern-ui/react-commons";
-import { useAtom } from "jotai";
+import clsx from "clsx";
 import { debounce, uniqueId } from "lodash-es";
 import { ReactElement, useRef, useState } from "react";
-import { atomWithSessionStorage } from "../atoms/atomWithSessionStorage";
 import { ChatbotMessage, Citation, Message } from "../types";
 import { AskInput } from "./AskInput";
 import { ChatConversation } from "./ChatConversation";
@@ -14,30 +13,26 @@ interface ChatHistory {
     messages: Message[];
 }
 
-const CHAT_HISTORY = atomWithSessionStorage<ChatHistory>("chat-history", {
-    conversationId: uniqueId(),
-    messages: [
-        { role: "AI", message: "Hello! How can I help you?", citations: [] },
-        { role: "USER", message: "What is the meaning of life?" },
-        { role: "AI", message: "The meaning of life is 42.", citations: [] },
-        { role: "USER", message: "Thank you." },
-    ],
-});
-
 interface ChatbotModalProps {
     chatStream: (message: string) => Promise<readonly [stream: ReadableStream<ChatbotMessage>, abort: AbortController]>;
+    className?: string;
 }
 
-export function ChatbotModal({ chatStream }: ChatbotModalProps): ReactElement {
-    const [chatHistory, setChatHistory] = useAtom(CHAT_HISTORY);
+export function ChatbotModal({ chatStream, className }: ChatbotModalProps): ReactElement {
+    const [chatHistory, setChatHistory] = useState<ChatHistory>(() => ({
+        conversationId: uniqueId(),
+        messages: [],
+    }));
     const [isStreaming, setIsStreaming] = useState(false);
-    const [message, setMessage] = useState<string>("");
+    const [responseMessage, setResponseMessage] = useState<string>("");
     const [citations, setCitations] = useState<Citation[]>([]);
 
     const abortRef = useRef<AbortController>();
     const scrollRef = useRef<HTMLDivElement>(null);
     const scrollContentRef = useRef<HTMLDivElement>(null);
 
+    const shouldShowConversation = chatHistory.messages.length > 0 || isStreaming || responseMessage.length > 0;
+
     const scrollToBottom = useRef(
         debounce(
             (smooth: boolean = false) => {
@@ -59,14 +54,14 @@ export function ChatbotModal({ chatStream }: ChatbotModalProps): ReactElement {
         abortRef.current?.abort();
         setChatHistory((prev) => {
             const messages = [...prev.messages];
-            if (message.length > 0) {
-                messages.push({ role: "AI", message, citations });
+            if (responseMessage.length > 0) {
+                messages.push({ role: "AI", message: responseMessage, citations });
             }
             messages.push({ role: "USER", message });
             return { ...prev, messages };
         });
         setIsStreaming(true);
-        setMessage("");
+        setResponseMessage("");
         setCitations([]);
         scrollToBottom.current();
         void chatStream(message)
@@ -81,7 +76,7 @@ export function ChatbotModal({ chatStream }: ChatbotModalProps): ReactElement {
                                     return resolve(true);
                                 }
                                 const { message, citations } = value;
-                                setMessage(message);
+                                setResponseMessage(message);
                                 setCitations(citations);
                                 read();
                             });
@@ -94,38 +89,45 @@ export function ChatbotModal({ chatStream }: ChatbotModalProps): ReactElement {
             });
     };
 
+    const reset = () => {
+        setChatHistory({
+            conversationId: uniqueId(),
+            messages: [],
+        });
+        setResponseMessage("");
+        setCitations([]);
+    };
+
     useResizeObserver(scrollContentRef, () => {
         scrollToBottom.current(true);
     });
 
     return (
-        <section className="bg-gray-2 rounded-lg w-full text-black dark:text-white flex flex-col">
+        <section className={clsx("flex flex-col", className)}>
             <div className="px-4 py-2">
-                <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-a11">Ask AI</span>
-                    <button
-                        className="text-xs text-gray-a11 hover:text-gray-a12"
-                        onClick={() => {
-                            setChatHistory({
-                                conversationId: uniqueId(),
-                                messages: [],
-                            });
-                            setMessage("");
-                            setCitations([]);
-                        }}
-                    >
-                        Clear Chat
-                    </button>
-                </div>
+                {shouldShowConversation && (
+                    <div className="flex justify-between items-center">
+                        <span className="text-sm text-grayscale-a11">Ask AI</span>
+                        <button className="text-xs text-grayscale-a11 hover:text-grayscale-a12" onClick={reset}>
+                            Clear Chat
+                        </button>
+                    </div>
+                )}
             </div>
-            <FernScrollArea scrollbars="vertical" className="px-4 py-6 mask-grad-y-6" ref={scrollRef}>
-                <ChatConversation messages={chatHistory.messages} ref={scrollContentRef}>
-                    <ResponseMessageWithCitations isStreaming={isStreaming} message={message} citations={citations} />
-                </ChatConversation>
-            </FernScrollArea>
+            {shouldShowConversation && (
+                <FernScrollArea scrollbars="vertical" className="px-4 py-6 mask-grad-y-6" ref={scrollRef}>
+                    <ChatConversation messages={chatHistory.messages} ref={scrollContentRef}>
+                        <ResponseMessageWithCitations
+                            isStreaming={isStreaming}
+                            message={responseMessage}
+                            citations={citations}
+                        />
+                    </ChatConversation>
+                </FernScrollArea>
+            )}
             <div className="p-4 pt-0">
                 <AskInput onSend={sendMessage} />
-                <div className="mt-1 px-5 text-gray-10 text-center">
+                <div className="mt-1 px-5 text-grayscale-a10 text-center">
                     <span className="text-xs font-medium">Powered by Fern and Cohere (command-r-plus)</span>
                 </div>
             </div>

packages/ui/chatbot/src/components/FernAvatar.tsx

@@ -3,7 +3,7 @@ import { FernIcon } from "../icons/FernIcon";
 
 export function FernAvatar(): ReactElement {
     return (
-        <div className="flex items-center justify-center h-8 w-8 rounded-full overflow-hidden outline-1 outline outline-gray-a6">
+        <div className="flex items-center justify-center h-8 w-8 rounded-full overflow-hidden outline-1 outline outline-grayscale-a6">
             <FernIcon className="size-5 text-[#4CAF50]" />
         </div>
     );

packages/ui/chatbot/src/components/SendButton.tsx

@@ -7,7 +7,7 @@ export function SendButton(props: ComponentPropsWithRef<"button">): ReactElement
         <button
             {...props}
             className={clsx(
-                "mb-1 me-1 flex h-8 w-8 items-center justify-center rounded-full bg-black text-white transition-colors hover:opacity-70 focus-visible:outline-none focus-visible:outline-black dark:bg-white dark:text-black dark:focus-visible:outline-white disabled:bg-gray-a6 disabled:text-gray-3 dark:disabled:bg-gray-a6 dark:disabled:text-gray-5 disabled:hover:opacity-100",
+                "mb-1 me-1 flex h-8 w-8 items-center justify-center rounded-full bg-black text-white transition-colors hover:opacity-70 focus-visible:outline-none focus-visible:outline-black dark:bg-white dark:text-black dark:focus-visible:outline-white disabled:bg-grayscale-a6 disabled:text-grayscale-3 dark:disabled:bg-grayscale-a6 dark:disabled:text-grayscale-5 disabled:hover:opacity-100",
                 props.className,
             )}
         >

packages/ui/chatbot/src/components/UserMessage.tsx

@@ -4,7 +4,7 @@ import { MarkdownContent } from "./MarkdownContent";
 export const UserMessage = memo(({ message }: { message: string }) => {
     return (
         <div className="flex gap-2 justify-end">
-            <div className="relative max-w-[75%] rounded-3xl bg-gray-a3 px-5 py-2.5">
+            <div className="relative max-w-[75%] rounded-3xl bg-grayscale-a3 px-5 py-2.5">
                 <MarkdownContent className="leading-normal">{message}</MarkdownContent>
             </div>
         </div>

packages/ui/chatbot/tailwind.config.js

@@ -17,7 +17,7 @@ export default {
                     muted: "var(--border-accent-muted)",
                 },
             },
-            gray: {
+            grayscale: {
                 1: "var(--gray-1)",
                 2: "var(--gray-2)",
                 3: "var(--gray-3)",

packages/ui/docs-bundle/package.json

@@ -43,10 +43,11 @@
     "@aws-sdk/s3-request-presigner": "^3.574.0",
     "@fern-api/fdr-sdk": "workspace:*",
     "@fern-api/venus-api-sdk": "^0.1.0",
+    "@fern-ui/chatbot": "workspace:*",
     "@fern-ui/components": "workspace:*",
     "@fern-ui/core-utils": "workspace:*",
     "@fern-ui/fdr-utils": "workspace:*",
-    "@fern-ui/search-utils": "workspace:^",
+    "@fern-ui/search-utils": "workspace:*",
     "@fern-ui/ui": "workspace:*",
     "@sentry/nextjs": "^7.112.2",
     "@vercel/edge-config": "^1.1.0",

packages/ui/docs-bundle/tailwind.config.js

@@ -8,8 +8,9 @@ module.exports = {
         "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
         "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
         "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-        "../app/src/**/*.{ts,tsx}",
         "../tailwind.config.js",
+        path.join(path.dirname(require.resolve("@fern-ui/ui")), "**/*.{ts,tsx}"),
         path.join(path.dirname(require.resolve("@fern-ui/components")), "**/*.{ts,tsx}"),
+        path.join(path.dirname(require.resolve("@fern-ui/chatbot")), "**/*.{ts,tsx}"),
     ],
 };

packages/ui/tailwind.config.js

@@ -63,7 +63,6 @@ module.exports = {
             },
 
             colors: {
-                ...blackA,
                 "fern-green": "#49932B",
                 "fern-green-dark": "#ADFF8C",