More progress

Author: cte

webview-ui/src/components/ui/chat/ChatMessage.tsx

@@ -1,13 +1,13 @@
 import { useMemo } from "react"
 import { CopyIcon, CheckIcon } from "@radix-ui/react-icons"
-import { BrainCircuit, CircleUserRound } from "lucide-react"
+import { BrainCircuit, CircleUserRound, Loader2 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { useClipboard } from "@/components/ui/hooks"
 import { Badge } from "@/components/ui"
 import { Markdown } from "@/components/ui/markdown"
 
-import { BadgeData, ChatHandler, Message, MessageAnnotationType } from "./types"
+import { BadgeData, Message, MessageAnnotationType } from "./types"
 import { ChatMessageProvider } from "./ChatMessageProvider"
 import { useChatUI } from "./useChatUI"
 import { useChatMessage } from "./useChatMessage"
@@ -16,11 +16,9 @@ interface ChatMessageProps {
 	message: Message
 	isLast: boolean
 	isHeaderVisible: boolean
-	isLoading?: boolean
-	append?: ChatHandler["append"]
 }
 
-export function ChatMessage({ message, isLast, isHeaderVisible, isLoading, append }: ChatMessageProps) {
+export function ChatMessage({ message, isLast, isHeaderVisible }: ChatMessageProps) {
 	const badges = useMemo(
 		() =>
 			message.annotations
@@ -103,3 +101,12 @@ function ChatMessageActions() {
 		</div>
 	)
 }
+
+export function ChatMessageLoading({ message = "asdf" }: { message?: string }) {
+	return (
+		<div className="flex flex-row items-center justify-end px-5 py-2">
+			<Loader2 className="h-4 w-4 animate-spin opacity-25" />
+			{message && <div className="ml-2 text-sm text-muted-foreground">{message}</div>}
+		</div>
+	)
+}

webview-ui/src/components/ui/chat/ChatMessages.tsx

@@ -1,41 +1,43 @@
-import { useEffect, useRef } from "react"
+import { useCallback, useEffect, useMemo, useRef } from "react"
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso"
 
 import { useChatUI } from "./useChatUI"
-import { ChatMessage } from "./ChatMessage"
+import { ChatMessage, ChatMessageLoading } from "./ChatMessage"
 
 export function ChatMessages() {
-	const { messages, isLoading, append } = useChatUI()
-	const messageCount = messages.length
+	const { messages, isLoading, loadingMessage } = useChatUI()
 	const virtuoso = useRef<VirtuosoHandle>(null)
 
+	const totalCount = useMemo(() => messages.length + (isLoading ? 1 : 0), [messages, isLoading])
+
 	useEffect(() => {
 		if (!virtuoso.current) {
 			return
 		}
 
 		requestAnimationFrame(() =>
-			virtuoso.current?.scrollToIndex({ index: messageCount - 1, align: "end", behavior: "smooth" }),
+			virtuoso.current?.scrollToIndex({ index: totalCount - 1, align: "end", behavior: "smooth" }),
 		)
-	}, [messageCount])
-
-	return (
-		<Virtuoso
-			ref={virtuoso}
-			data={messages}
-			totalCount={messageCount}
-			itemContent={(index, message) => (
-				<ChatMessage
-					key={index}
-					message={message}
-					isHeaderVisible={
-						!!message.annotations?.length || index === 0 || messages[index - 1].role !== message.role
-					}
-					isLast={index === messageCount - 1}
-					isLoading={isLoading}
-					append={append}
-				/>
-			)}
-		/>
+	}, [totalCount])
+
+	const itemContent = useCallback(
+		(index: number) => {
+			const isFirst = index === 0
+			const isLast = index === totalCount - 1
+
+			if (isLoading && isLast) {
+				return <ChatMessageLoading key={index} message={loadingMessage} />
+			}
+
+			const message = messages[index]
+
+			const isHeaderVisible =
+				!!message.annotations?.length || isFirst || messages[index - 1].role !== message.role
+
+			return <ChatMessage key={index} message={message} isHeaderVisible={isHeaderVisible} isLast={isLast} />
+		},
+		[messages, isLoading, loadingMessage, totalCount],
 	)
+
+	return <Virtuoso ref={virtuoso} totalCount={totalCount} itemContent={itemContent} />
 }

webview-ui/src/features/deep-research/GetStarted.tsx

@@ -71,7 +71,7 @@ export const GetStarted = () => {
 	}, [errors.providerId, errors.providerApiKey, errors.firecrawlApiKey])
 
 	return (
-		<div className="flex flex-col gap-4 w-full max-w-sm p-4">
+		<div className="flex flex-col gap-4 w-full max-w-md p-4">
 			<Hero />
 			<FormProvider {...form}>
 				<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
@@ -243,7 +243,7 @@ export const GetStarted = () => {
 
 const Hero = () => {
 	return (
-		<div className="flex flex-col gap-4 w-full max-w-sm">
+		<div className="flex flex-col gap-4 w-full">
 			<div className="flex flex-col items-center justify-center gap-2">
 				<div className="flex flex-row items-center justify-center gap-2">
 					<BrainCircuit className="text-muted" />

webview-ui/src/features/deep-research/Session.tsx

@@ -1,7 +1,6 @@
 import { useRef } from "react"
 import { useMount } from "react-use"
 import { Cross2Icon, ReaderIcon, RocketIcon, TriangleDownIcon, TriangleUpIcon } from "@radix-ui/react-icons"
-import { Loader2 } from "lucide-react"
 
 import { Button, Progress } from "@/components/ui"
 import { Chat } from "@/components/ui/chat"
@@ -14,7 +13,6 @@ export const Session = () => {
 	const initialized = useRef(false)
 	const { session } = useSession()
 	const { status, progress, tokenUsage, start, ...handler } = useDeepResearch()
-	const { isLoading, loadingMessage } = handler
 
 	useMount(() => {
 		if (session && !initialized.current) {
@@ -29,8 +27,7 @@ export const Session = () => {
 
 	return (
 		<>
-			<Chat handler={handler} className="pt-10 pr-[1px]">
-				{isLoading && <Loading message={loadingMessage} />}
+			<Chat assistantName="Deep Research (β)" handler={handler} className="pt-10 pr-[1px]">
 				{status === "aborted" && <Aborted />}
 				{(status === "research" || status === "done") && (
 					<ProgressBar status={status} progress={progress} tokenUsage={tokenUsage} />
@@ -62,15 +59,6 @@ function Header() {
 	)
 }
 
-function Loading({ message }: { message?: string }) {
-	return (
-		<div className="flex flex-row items-center justify-end px-5 py-2">
-			<Loader2 className="h-4 w-4 animate-spin opacity-25" />
-			{message && <div className="ml-2 text-sm text-muted-foreground">{message}</div>}
-		</div>
-	)
-}
-
 function Aborted() {
 	const { setSession } = useSession()
 	const { reset } = useDeepResearch()