fix: markdown loading indicator, other fixes (#529)

* fix: markdown loading indicator, other fixes * changesets fixes
Yonom · Jul 17, 2024 · 2d7a8bd · 2d7a8bd
1 parent 0dbb3e2
commit 2d7a8bd
Show file tree

Hide file tree

Showing 22 changed files with 300 additions and 275 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -12,7 +12,8 @@
     "search-agent-for-e-commerce",
     "with-inline-suggestions",
     "with-react-hook-form",
-    "with-vercel-ai-rsc",
-    "with-openai-assistants"
+    "with-playground",
+    "with-openai-assistants",
+    "with-vercel-ai-rsc"
   ]
 }
diff --git a/.changeset/mighty-geckos-occur.md b/.changeset/mighty-geckos-occur.md
@@ -0,0 +1,6 @@
+---
+"@assistant-ui/react": patch
+"@assistant-ui/react-markdown": patch
+---
+
+fix: markdown loading indicator
diff --git a/.changeset/odd-phones-drive.md b/.changeset/odd-phones-drive.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+fix: ScrollToBottom visbility bug
diff --git a/.changeset/stale-shrimps-laugh.md b/.changeset/stale-shrimps-laugh.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+fix: text content part data-status field
diff --git a/examples/with-playground/CHANGELOG.md b/examples/with-playground/CHANGELOG.md
diff --git a/examples/with-playground/package.json b/examples/with-playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "with-playground",
-  "version": "0.1.1",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/packages/react-ai-sdk/src/ui/use-assistant/VercelUseAssistantThreadRuntime.tsx b/packages/react-ai-sdk/src/ui/use-assistant/VercelUseAssistantThreadRuntime.tsx
@@ -98,7 +98,7 @@ export class VercelUseAssistantThreadRuntime implements ReactThreadRuntime {
         createdAt: new Date(),
         status: { type: "running" },
         role: "assistant",
-        content: [{ type: "text", text: "" }],
+        content: [],
       });
     }
 

diff --git a/packages/react-ai-sdk/src/ui/use-chat/VercelUseChatThreadRuntime.tsx b/packages/react-ai-sdk/src/ui/use-chat/VercelUseChatThreadRuntime.tsx
@@ -153,7 +153,7 @@ export class VercelUseChatThreadRuntime implements ReactThreadRuntime {
         vm.at(-1)?.id ?? null,
         {
           role: "assistant",
-          content: [{ type: "text", text: "" }],
+          content: [],
         },
       );
     }

diff --git a/packages/react-markdown/src/primitives/MarkdownText.tsx b/packages/react-markdown/src/primitives/MarkdownText.tsx
@@ -34,7 +34,7 @@ export const MarkdownTextPrimitive: FC<MarkdownTextPrimitiveProps> = ({
   const {
     part: { text },
   } = useContentPartText();
-  const smoothText = useSmooth(text, smooth);
+  const smoothText = useSmooth(text, smooth); // TODO loading indicator disappears before smooth animation ends
 
   const {
     pre = DefaultPre,

diff --git a/packages/react-markdown/src/styles/tailwindcss/markdown.css b/packages/react-markdown/src/styles/tailwindcss/markdown.css
@@ -1,18 +1,22 @@
 /* in progress indicator */
-.aui-md-in-progress:where(:empty)::after,
-.aui-md-in-progress:where(> :not(ol):not(ul):not(pre):last-child)::after,
-.aui-md-in-progress:where(> pre:last-child code)::after,
-.aui-md-in-progress:where(
-    > :is(ol, ul):last-child > li:last-child:not(:has(* > li))
+:where(.aui-md-in-progress:empty)::after,
+:where(.aui-md-in-progress > :not(ol):not(ul):not(pre):last-child)::after,
+:where(.aui-md-in-progress > pre:last-child code)::after,
+:where(
+    .aui-md-in-progress
+      > :is(ol, ul):last-child
+      > li:last-child:not(:has(* > li))
   )::after,
-.aui-md-in-progress:where(
-    > :is(ol, ul):last-child
+:where(
+    .aui-md-in-progress
+      > :is(ol, ul):last-child
       > li:last-child
       > :is(ol, ul):last-child
       > li:last-child:not(:has(* > li))
   )::after,
-.aui-md-in-progress:where(
-    > :is(ol, ul):last-child
+:where(
+    .aui-md-in-progress
+      > :is(ol, ul):last-child
       > li:last-child
       > :is(ol, ul):last-child
       > li:last-child

diff --git a/packages/react-playground/src/lib/playground-runtime.ts b/packages/react-playground/src/lib/playground-runtime.ts
@@ -165,7 +165,7 @@ export class PlaygroundThreadRuntime implements ReactThreadRuntime {
       id: generateId(),
       role: "assistant",
       status: { type: "running" },
-      content: [{ type: "text", text: "" }],
+      content: [],
       createdAt: new Date(),
     };
 

diff --git a/packages/react/src/context/providers/ContentPartProvider.tsx b/packages/react/src/context/providers/ContentPartProvider.tsx
@@ -30,7 +30,7 @@ const toContentPartStatus = (
 ): ToolContentPartStatus => {
   if (message.role !== "assistant") return COMPLETE_STATUS;
 
-  const isLastPart = partIndex === message.content.length - 1;
+  const isLastPart = partIndex === Math.max(0, message.content.length - 1);
   if (part.type !== "tool-call") {
     if (
       "reason" in message.status &&
@@ -51,13 +51,22 @@ const toContentPartStatus = (
   return message.status as ToolContentPartStatus;
 };
 
+const EMPTY_CONTENT = Object.freeze({ type: "text", text: "" });
+
 const syncContentPart = (
   { message }: MessageState,
   useContentPart: ContentPartContextValue["useContentPart"],
   partIndex: number,
 ) => {
-  const part = message.content[partIndex];
-  if (!part) return;
+  let part = message.content[partIndex];
+  if (!part) {
+    // for empty messages, show an empty text content part
+    if (message.content.length === 0 && partIndex === 0) {
+      part = EMPTY_CONTENT;
+    } else {
+      return;
+    }
+  }
 
   // if the content part is the same, don't update
   const status = toContentPartStatus(message, partIndex, part);

diff --git a/packages/react/src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx b/packages/react/src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
@@ -38,7 +38,8 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
     if (!div) return;
 
     const isAtBottom = useViewport.getState().isAtBottom;
-    const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight;
+    const newIsAtBottom =
+      div.scrollHeight - div.scrollTop <= div.clientHeight + 1; // TODO figure out why +1 is needed
 
     if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
       // ignore scroll down

diff --git a/packages/react/src/primitives/contentPart/ContentPartText.tsx b/packages/react/src/primitives/contentPart/ContentPartText.tsx
@@ -24,7 +24,7 @@ export const ContentPartPrimitiveText = forwardRef<
   const smoothText = useSmooth(text, smooth);
 
   return (
-    <Primitive.span data-status={status} {...rest} ref={forwardedRef}>
+    <Primitive.span data-status={status.type} {...rest} ref={forwardedRef}>
       {smoothText}
     </Primitive.span>
   );

diff --git a/packages/react/src/primitives/message/MessageContent.tsx b/packages/react/src/primitives/message/MessageContent.tsx
@@ -141,7 +141,7 @@ export const MessagePrimitiveContent: FC<MessagePrimitiveContentProps> = ({
 }) => {
   const { useMessage } = useMessageContext();
 
-  const contentLength = useMessage((s) => s.message.content.length);
+  const contentLength = useMessage((s) => s.message.content.length) || 1;
 
   return new Array(contentLength).fill(null).map((_, idx) => {
     const partIndex = idx; // use the index as key, as message is generally append only