bump: chat-ui and tailwind v4 (#509)

Author: thucpn

.changeset/rare-eyes-protect.md

@@ -0,0 +1,5 @@
+---
+"create-llama": patch
+---
+
+bump: chat-ui and tailwind v4

templates/types/streaming/nextjs/app/components/header.tsx

@@ -3,11 +3,11 @@ import Image from "next/image";
 export default function Header() {
   return (
     <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-      <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+      <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-linear-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
         Get started by editing&nbsp;
         <code className="font-mono font-bold">app/page.tsx</code>
       </p>
-      <div className="fixed bottom-0 left-0 mb-4 flex h-auto w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:w-auto lg:bg-none lg:mb-0">
+      <div className="fixed bottom-0 left-0 mb-4 flex h-auto w-full items-end justify-center bg-linear-to-t from-white via-white dark:from-black dark:via-black lg:static lg:w-auto lg:bg-none lg:mb-0">
         <a
           href="https://www.llamaindex.ai/"
           className="flex items-center justify-center font-nunito text-lg font-bold gap-2"

templates/types/streaming/nextjs/app/components/ui/button.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import { cn } from "./lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

templates/types/streaming/nextjs/app/components/ui/card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
       className,
     )}
     {...props}

templates/types/streaming/nextjs/app/components/ui/chat/chat-avatar.tsx

@@ -6,14 +6,14 @@ export function ChatMessageAvatar() {
   const { message } = useChatMessage();
   if (message.role === "user") {
     return (
-      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-background shadow">
+      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-background shadow-sm">
         <User2 className="h-4 w-4" />
       </div>
     );
   }
 
   return (
-    <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-black text-white shadow">
+    <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-black text-white shadow-sm">
       <Image
         className="rounded-md"
         src="/llama.png"

templates/types/streaming/nextjs/app/components/ui/chat/chat-message-content.tsx

@@ -1,44 +1,19 @@
-import {
-  ChatMessage,
-  ContentPosition,
-  getSourceAnnotationData,
-  useChatMessage,
-  useChatUI,
-} from "@llamaindex/chat-ui";
+import { ChatMessage } from "@llamaindex/chat-ui";
 import { DeepResearchCard } from "./custom/deep-research-card";
-import { Markdown } from "./custom/markdown";
 import { ToolAnnotations } from "./tools/chat-tools";
 
 export function ChatMessageContent() {
-  const { isLoading, append } = useChatUI();
-  const { message } = useChatMessage();
-  const customContent = [
-    {
-      // override the default markdown component
-      position: ContentPosition.MARKDOWN,
-      component: (
-        <Markdown
-          content={message.content}
-          sources={getSourceAnnotationData(message.annotations)?.[0]}
-        />
-      ),
-    },
-    // add the deep research card
-    {
-      position: ContentPosition.CHAT_EVENTS,
-      component: <DeepResearchCard message={message} />,
-    },
-    {
-      // add the tool annotations after events
-      position: ContentPosition.AFTER_EVENTS,
-      component: <ToolAnnotations message={message} />,
-    },
-  ];
   return (
-    <ChatMessage.Content
-      content={customContent}
-      isLoading={isLoading}
-      append={append}
-    />
+    <ChatMessage.Content>
+      <ChatMessage.Content.Event />
+      <ChatMessage.Content.AgentEvent />
+      <DeepResearchCard />
+      <ToolAnnotations />
+      <ChatMessage.Content.Image />
+      <ChatMessage.Content.Markdown />
+      <ChatMessage.Content.DocumentFile />
+      <ChatMessage.Content.Source />
+      <ChatMessage.Content.SuggestedQuestions />
+    </ChatMessage.Content>
   );
 }

templates/types/streaming/nextjs/app/components/ui/chat/custom/deep-research-card.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Message } from "@llamaindex/chat-ui";
+import { getCustomAnnotation, useChatMessage } from "@llamaindex/chat-ui";
 import {
   AlertCircle,
   CheckCircle2,
@@ -54,7 +54,6 @@ type DeepResearchCardState = {
 };
 
 interface DeepResearchCardProps {
-  message: Message;
   className?: string;
 }
 
@@ -143,25 +142,19 @@ const deepResearchEventsToState = (
   );
 };
 
-export function DeepResearchCard({
-  message,
-  className,
-}: DeepResearchCardProps) {
-  const deepResearchEvents = message.annotations as
-    | DeepResearchEvent[]
-    | undefined;
-  const hasDeepResearchEvents = deepResearchEvents?.some(
-    (event) => event.type === "deep_research_event",
-  );
+export function DeepResearchCard({ className }: DeepResearchCardProps) {
+  const { message } = useChatMessage();
 
-  const state = useMemo(
-    () => deepResearchEventsToState(deepResearchEvents),
-    [deepResearchEvents],
-  );
+  const state = useMemo(() => {
+    const deepResearchEvents = getCustomAnnotation<DeepResearchEvent>(
+      message.annotations,
+      (annotation) => annotation?.type === "deep_research_event",
+    );
+    if (!deepResearchEvents.length) return null;
+    return deepResearchEventsToState(deepResearchEvents);
+  }, [message.annotations]);
 
-  if (!hasDeepResearchEvents) {
-    return null;
-  }
+  if (!state) return null;
 
   return (
     <Card className={cn("w-full", className)}>

templates/types/streaming/nextjs/app/components/ui/chat/tools/chat-tools.tsx

@@ -1,26 +1,28 @@
 import {
   Message,
   MessageAnnotation,
-  getAnnotationData,
+  getChatUIAnnotation,
+  useChatMessage,
   useChatUI,
 } from "@llamaindex/chat-ui";
 import { JSONValue } from "ai";
 import { useMemo } from "react";
 import { Artifact, CodeArtifact } from "./artifact";
 import { WeatherCard, WeatherData } from "./weather-card";
 
-export function ToolAnnotations({ message }: { message: Message }) {
+export function ToolAnnotations() {
   // TODO: This is a bit of a hack to get the artifact version. better to generate the version in the tool call and
   // store it in CodeArtifact
   const { messages } = useChatUI();
+  const { message } = useChatMessage();
   const artifactVersion = useMemo(
     () => getArtifactVersion(messages, message),
     [messages, message],
   );
   // Get the tool data from the message annotations
   const annotations = message.annotations as MessageAnnotation[] | undefined;
   const toolData = annotations
-    ? (getAnnotationData(annotations, "tools") as unknown as ToolData[])
+    ? (getChatUIAnnotation(annotations, "tools") as unknown as ToolData[])
     : null;
   return toolData?.[0] ? (
     <ChatTools data={toolData[0]} artifactVersion={artifactVersion} />
@@ -87,7 +89,7 @@ function getArtifactVersion(
   let versionIndex = 1;
   for (const m of messages) {
     const toolData = m.annotations
-      ? (getAnnotationData(m.annotations, "tools") as unknown as ToolData[])
+      ? (getChatUIAnnotation(m.annotations, "tools") as unknown as ToolData[])
       : null;
 
     if (toolData?.some((t) => t.toolCall.name === "artifact")) {

templates/types/streaming/nextjs/app/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

templates/types/streaming/nextjs/app/components/ui/select.tsx

@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
@@ -117,7 +117,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     {...props}