feat: @assistant-ui/react-ui (#1467)

* feat: @assistant-ui/react-ui * Update packages/react-ui/src/ui/attachment-ui.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update packages/react-ui/src/ui/attachment-ui.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
assistant-ui · Jan 31, 2025 · 7730672 · 7730672
1 parent 52ea2bd
commit 7730672
Show file tree

Hide file tree

Showing 71 changed files with 3,464 additions and 54 deletions.
diff --git a/apps/docs/components/docs-chat/DocsChat.tsx b/apps/docs/components/docs-chat/DocsChat.tsx
@@ -11,11 +11,15 @@ import { makeMarkdownText } from "@assistant-ui/react-markdown";
 import { makePrismAsyncSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter";
 import { coldarkDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import remarkGfm from "remark-gfm";
-import { Thread, type ThreadConfig } from "@assistant-ui/react";
+import {
+  Thread,
+  type ThreadConfig,
+  Composer,
+  ThreadWelcome,
+} from "@assistant-ui/react-ui";
 import entelligenceLogoLight from "./entelligence-light.png";
 import entelligenceLogoDark from "./entelligence-dark.png";
 import Image from "next/image";
-import { Composer, ThreadWelcome } from "@assistant-ui/react";
 
 function asAsyncIterable<T>(source: ReadableStream<T>): AsyncIterable<T> {
   return {

diff --git a/apps/docs/components/shadcn/Shadcn.tsx b/apps/docs/components/shadcn/Shadcn.tsx
@@ -1,5 +1,5 @@
 import { MenuIcon, ShareIcon } from "lucide-react";
-import { Thread, ThreadList } from "@assistant-ui/react";
+import { Thread, ThreadList } from "@assistant-ui/react-ui";
 import { makeMarkdownText } from "@assistant-ui/react-markdown";
 import remarkGfm from "remark-gfm";
 import { makePrismAsyncSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter";

diff --git a/apps/docs/content/docs/getting-started.mdx b/apps/docs/content/docs/getting-started.mdx
@@ -52,7 +52,7 @@ npm run dev
 ### Install `@assistant-ui/react`
 
 ```sh npm2yarn
-npm install @assistant-ui/react
+npm install @assistant-ui/react @assistant-ui/react-ui
 ```
 
   </Step>
@@ -294,7 +294,7 @@ Add the following to your `tailwind.config.ts`:
 {
   plugins: [
     require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
-    require("@assistant-ui/react/tailwindcss")
+    require("@assistant-ui/react-ui/tailwindcss")
   ],
 }
 ```
@@ -309,8 +309,8 @@ Add the following to your `tailwind.config.ts`:
 ```
 
 ```ts title="/app/layout.tsx" tab="Not using Tailwind"
-import "@assistant-ui/react/styles/index.css";
-import "@assistant-ui/react/styles/modal.css"; // if using AssistantModal
+import "@assistant-ui/react-ui/styles/index.css";
+import "@assistant-ui/react-ui/styles/modal.css"; // if using AssistantModal
 ```
 
 </Tabs>
@@ -323,7 +323,8 @@ import "@assistant-ui/react/styles/modal.css"; // if using AssistantModal
 <Tabs items={["Thread", "AssistantModal"]}>
 
 ```tsx title="/app/page.tsx" tab="Thread"
-import { Thread, useEdgeRuntime } from "@assistant-ui/react";
+import { useEdgeRuntime } from "@assistant-ui/react";
+import { Thread } from "@assistant-ui/react-ui";
 
 const MyApp = () => {
   const runtime = useEdgeRuntime({

diff --git a/apps/docs/content/docs/runtimes/langgraph/index.mdx b/apps/docs/content/docs/runtimes/langgraph/index.mdx
@@ -44,7 +44,7 @@ NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id
 ### Install dependencies
 
 ```sh npm2yarn
-npm install @assistant-ui/react @assistant-ui/react-langgraph @langchain/langgraph-sdk
+npm install @assistant-ui/react @assistant-ui/react-ui @assistant-ui/react-langgraph @langchain/langgraph-sdk
 ```
 
   </Step>
@@ -190,7 +190,7 @@ export const sendMessage = async (params: {
 "use client";
 
 import { useRef } from "react";
-import { Thread } from "@assistant-ui/react";
+import { Thread } from "@assistant-ui/react-ui";
 import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
 import { makeMarkdownText } from "@assistant-ui/react-markdown";
 

diff --git a/apps/docs/content/docs/runtimes/langgraph/tutorial/part-1.mdx b/apps/docs/content/docs/runtimes/langgraph/tutorial/part-1.mdx
@@ -77,8 +77,8 @@ Rich text rendering using Markdown is enabled by default. You can view `/app/pag
 ```tsx title="@/app/page.tsx" {4,6,11}
 "use client";
 
-import { Thread } from "@assistant-ui/react";
 import { makeMarkdownText } from "@assistant-ui/react-markdown";
+import { Thread } from "@assistant-ui/react-ui";
 
 const MarkdownText = makeMarkdownText();
 

diff --git a/apps/docs/content/docs/runtimes/trieve.mdx b/apps/docs/content/docs/runtimes/trieve.mdx
@@ -27,7 +27,7 @@ cd my-app
 ### Install `trieve-ts-sdk`, `@assistant-ui/react-trieve` and `@assistant-ui/react`
 
 ```sh npm2yarn
-npm install @assistant-ui/react @assistant-ui/react-trieve trieve-ts-sdk
+npm install @assistant-ui/react @assistant-ui/react-ui @assistant-ui/react-trieve trieve-ts-sdk
 ```
 
   </Step>
@@ -73,7 +73,7 @@ import { useTrieveRuntime } from "@assistant-ui/react-trieve";
 import { trieve } from "@/app/trieve";
 
 export const TrieveRuntimeProvider = () => {
- const runtime = useTrieveRuntime({
+  const runtime = useTrieveRuntime({
     trieve,
     // Define what you want to key the owners for threads on
     ownerId: "abcd",
@@ -82,13 +82,13 @@ export const TrieveRuntimeProvider = () => {
       {
         name: "Stories",
         value: "story",
-      }
+      },
     ],
   });
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
-       {children}
+      {children}
     </AssistantRuntimeProvider>
   );
 };
@@ -122,11 +122,12 @@ export default function RootLayout({
 ```
 
 ### Example Usage
+
 ```tsx twoslash title="@/app/layout.tsx"
 // @include: MyRuntimeProvider
 // @filename: /app/layout.tsx
 // ---cut---
-import { Thread } from "@assistant-ui/react";
+import { Thread } from "@assistant-ui/react-ui";
 import {
   makeTrieveMarkdownText,
   TrieveComposer,

diff --git a/apps/docs/content/docs/ui/styled/AssistantModal.mdx b/apps/docs/content/docs/ui/styled/AssistantModal.mdx
@@ -14,6 +14,15 @@ A chat bubble shown in the bottom right corner of the screen. Useful for support
 <Steps>
   <Step>
 
+### Install `@assistant-ui/react-ui`
+
+```sh npm2yarn
+npm install @assistant-ui/react-ui
+```
+
+  </Step>
+  <Step>
+
 ### Import CSS styles
 
 Add the following to your `tailwind.config.ts`:
@@ -24,7 +33,7 @@ Add the following to your `tailwind.config.ts`:
 {
   plugins: [
     require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
-    require("@assistant-ui/react/tailwindcss")({
+    require("@assistant-ui/react-ui/tailwindcss")({
       components: ["assistant-modal"],
     })
   ],
@@ -35,7 +44,7 @@ Add the following to your `tailwind.config.ts`:
 {
   plugins: [
     require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
-    require("@assistant-ui/react/tailwindcss")({
+    require("@assistant-ui/react-ui/tailwindcss")({
       components: ["assistant-modal"],
       shadcn: true
     })
@@ -44,8 +53,8 @@ Add the following to your `tailwind.config.ts`:
 ```
 
 ```ts title="/app/layout.tsx" tab="Not using Tailwind"
-import "@assistant-ui/react/styles/index.css";
-import "@assistant-ui/react/styles/modal.css";
+import "@assistant-ui/react-ui/styles/index.css";
+import "@assistant-ui/react-ui/styles/modal.css";
 ```
 
 </Tabs>
@@ -56,7 +65,8 @@ import "@assistant-ui/react/styles/modal.css";
 ### Use it in your app
 
 ```tsx title="/app/page.tsx"
-import { AssistantModal, useEdgeRuntime } from "@assistant-ui/react";
+import { useEdgeRuntime } from "@assistant-ui/react";
+import { AssistantModal } from "@assistant-ui/react-ui";
 
 const MyApp = () => {
   const runtime = useEdgeRuntime({

diff --git a/apps/docs/content/docs/ui/styled/Decomposition.mdx b/apps/docs/content/docs/ui/styled/Decomposition.mdx
@@ -16,7 +16,7 @@ import {
   ThreadWelcome,
   Composer,
   type ThreadConfig,
-} from "@assistant-ui/react";
+} from "@assistant-ui/react-ui";
 
 const MyThread: FC<ThreadConfig> = (config) => {
   return (
@@ -66,7 +66,7 @@ A button to scroll the viewport to the bottom. Hidden when the viewport is alrea
 Renders the welcome message when no messages are present.
 
 ```tsx
-import { ThreadWelcome } from "@assistant-ui/react";
+import { ThreadWelcome } from "@assistant-ui/react-ui";
 
 const MyThreadWelcome: FC = () => {
   return (
@@ -114,7 +114,7 @@ The welcome message.
 Conversation starter suggestions.
 
 ```tsx
-import { ThreadWelcome } from "@assistant-ui/react";
+import { ThreadWelcome } from "@assistant-ui/react-ui";
 
 const MyThreadWelcomeSuggestions: FC = () => {
   return (
@@ -135,7 +135,7 @@ A conversation starter suggestion.
 Renders the composer.
 
 ```tsx
-import { Composer } from "@assistant-ui/react";
+import { Composer } from "@assistant-ui/react-ui";
 
 const MyComposer: FC = () => {
   return (
@@ -174,7 +174,7 @@ The text input field for the user to type a new message.
 The button to send or cancel the message.
 
 ```tsx
-import { Composer, ThreadPrimitive } from "@assistant-ui/react";
+import { Composer, ThreadPrimitive } from "@assistant-ui/react-ui";
 
 const MyComposerAction: FC = () => {
   return (
@@ -215,7 +215,7 @@ Renders an add attachment button.
 Renders an attachment.
 
 ```tsx
-import { AttachmentUI } from "@assistant-ui/react";
+import { AttachmentUI } from "@assistant-ui/react-ui";
 
 const MyAttachmentUI: FC = () => {
   return (
@@ -240,7 +240,7 @@ Renders a remove attachment button.
 Renders an assistant message.
 
 ```tsx
-import { AssistantMessage } from "@assistant-ui/react";
+import { AssistantMessage } from "@assistant-ui/react-ui";
 
 const MyAssistantMessage: FC = () => {
   return (
@@ -283,7 +283,7 @@ The content of the assistant message.
 Renders the action bar for the assistant message.
 
 ```tsx
-import { AssistantActionBar } from "@assistant-ui/react";
+import { AssistantActionBar } from "@assistant-ui/react-ui";
 
 const MyAssistantActionBar: FC = () => {
   return (
@@ -351,7 +351,7 @@ Shows a negative feedback button.
 Renders the branch picker.
 
 ```tsx
-import { BranchPicker } from "@assistant-ui/react";
+import { BranchPicker } from "@assistant-ui/react-ui";
 
 const MyBranchPicker: FC = () => {
   return (
@@ -401,7 +401,7 @@ Shows a next button.
 Shows the current branch number and total number of branches.
 
 ```tsx
-import { BranchPicker } from "@assistant-ui/react";
+import { BranchPicker } from "@assistant-ui/react-ui";
 
 const MyBranchPickerState: FC = () => {
   return (
@@ -425,7 +425,7 @@ The total number of branches.
 Renders a user message.
 
 ```tsx
-import { UserMessage } from "@assistant-ui/react";
+import { UserMessage } from "@assistant-ui/react-ui";
 
 const MyUserMessage: FC = () => {
   return (
@@ -468,7 +468,7 @@ Renders attachments.
 Renders the action bar for the user message.
 
 ```tsx
-import { UserActionBar } from "@assistant-ui/react";
+import { UserActionBar } from "@assistant-ui/react-ui";
 
 const MyUserActionBar: FC = () => {
   return (
@@ -504,7 +504,7 @@ Shows an edit button.
 Renders an attachment.
 
 ```tsx
-import { UserAttachment } from "@assistant-ui/react";
+import { UserAttachment } from "@assistant-ui/react-ui";
 
 const MyUserAttachment: FC = () => {
   return <UserAttachment.Root>attachment</UserAttachment.Root>;
@@ -520,7 +520,7 @@ Contains all parts of the user attachment.
 Renders a user message being edited.
 
 ```tsx
-import { EditComposer } from "@assistant-ui/react";
+import { EditComposer } from "@assistant-ui/react-ui";
 
 const MyEditComposer: FC = () => {
   return (
@@ -572,7 +572,11 @@ Sends the message.
 Renders the assistant modal.
 
 ```tsx
-import { AssistantModal, Thread, type ThreadConfig } from "@assistant-ui/react";
+import {
+  AssistantModal,
+  Thread,
+  type ThreadConfig,
+} from "@assistant-ui/react-ui";
 
 const MyAssistantModal: FC<ThreadConfig> = (config) => {
   return (
@@ -597,7 +601,7 @@ const MyAssistantModal: FC<ThreadConfig> = (config) => {
 Renders a thread list.
 
 ```tsx
-import { ThreadList, ThreadListItem } from "@assistant-ui/react";
+import { ThreadList, ThreadListItem } from "@assistant-ui/react-ui";
 
 const MyThreadList = () => {
   return (
@@ -614,7 +618,7 @@ const MyThreadList = () => {
 Renders a thread list item.
 
 ```tsx
-import { ThreadListItem, ThreadListItemPrimitive } from "@assistant-ui/react";
+import { ThreadListItem, ThreadListItemPrimitive } from "@assistant-ui/react-ui";
 
 const MyThreadListItem = () => {
   return (

diff --git a/apps/docs/content/docs/ui/styled/Markdown.mdx b/apps/docs/content/docs/ui/styled/Markdown.mdx
@@ -30,7 +30,7 @@ npm install @assistant-ui/react-markdown
 {
   plugins: [
     require("tailwindcss-animate"),
-    require("@assistant-ui/react/tailwindcss"),
+    require("@assistant-ui/react-ui/tailwindcss"),
     require("@assistant-ui/react-markdown/tailwindcss"),
   ],
 }
@@ -40,14 +40,14 @@ npm install @assistant-ui/react-markdown
 {
   plugins: [
     require("tailwindcss-animate"),
-    require("@assistant-ui/react/tailwindcss")({ shadcn: true }),
+    require("@assistant-ui/react-ui/tailwindcss")({ shadcn: true }),
     require("@assistant-ui/react-markdown/tailwindcss"),
   ],
 }
 ```
 
 ```ts title="/app/layout.tsx" tab="Not using Tailwind"
-import "@assistant-ui/react/styles/index.css";
+import "@assistant-ui/react-ui/styles/index.css";
 import "@assistant-ui/react-markdown/styles/markdown.css";
 ```
 

diff --git a/apps/docs/content/docs/ui/styled/Scrollbar.mdx b/apps/docs/content/docs/ui/styled/Scrollbar.mdx
@@ -45,7 +45,7 @@ import {
   ThreadWelcome,
   Composer,
   type ThreadConfig,
-} from "@assistant-ui/react";
+} from "@assistant-ui/react-ui";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"; // [!code highlight]
 import { ScrollBar } from "@/components/ui/scroll-area"; // [!code highlight]