Composable, reusable chat interface with Markdown support + VSCode theme syntax highlighting

Author: cte

webview-ui/package-lock.json

@@ -36,6 +36,7 @@
 		"lucide-react": "^0.475.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-markdown": "^9.0.3",
 		"react-remark": "^2.1.0",
 		"react-textarea-autosize": "^8.5.3",
 		"react-use": "^17.5.1",
@@ -75,6 +76,7 @@
 		"jest": "^27.5.1",
 		"jest-environment-jsdom": "^27.5.1",
 		"jest-simple-dot-reporter": "^1.0.5",
+		"shiki": "^2.3.2",
 		"storybook": "^8.5.6",
 		"storybook-dark-mode": "^4.0.2",
 		"ts-jest": "^27.1.5",

webview-ui/package.json

@@ -0,0 +1,29 @@
+import { HTMLAttributes } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { ChatHandler } from "./types"
+import { ChatProvider } from "./ChatProvider"
+import { ChatMessages } from "./ChatMessages"
+import { ChatInput } from "./ChatInput"
+
+type ChatProps = HTMLAttributes<HTMLDivElement> & {
+	assistantName: string
+	handler: ChatHandler
+}
+
+export const Chat = ({ assistantName, handler, ...props }: ChatProps) => (
+	<ChatProvider value={{ assistantName, ...handler }}>
+		<InnerChat {...props} />
+	</ChatProvider>
+)
+
+type InnerChatProps = HTMLAttributes<HTMLDivElement>
+
+const InnerChat = ({ className, children, ...props }: InnerChatProps) => (
+	<div className={cn("relative flex flex-col flex-1 min-h-0", className)} {...props}>
+		<ChatMessages />
+		{children}
+		<ChatInput />
+	</div>
+)

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

@@ -0,0 +1,100 @@
+import { PaperPlaneIcon, StopIcon } from "@radix-ui/react-icons"
+
+import { Button, AutosizeTextarea } from "@/components/ui"
+
+import { ChatInputProvider } from "./ChatInputProvider"
+import { useChatUI } from "./useChatUI"
+import { useChatInput } from "./useChatInput"
+
+export function ChatInput() {
+	const { input, setInput, append, isLoading } = useChatUI()
+	const isDisabled = isLoading || !input.trim()
+
+	const submit = async () => {
+		if (input.trim() === "") {
+			return
+		}
+
+		setInput("")
+		await append({ role: "user", content: input })
+	}
+
+	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+		await submit()
+	}
+
+	const handleKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+		if (isDisabled) {
+			return
+		}
+
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault()
+			await submit()
+		}
+	}
+
+	return (
+		<ChatInputProvider value={{ isDisabled, handleKeyDown, handleSubmit }}>
+			<div className="border-t border-vscode-editor-background p-3">
+				<ChatInputForm />
+			</div>
+		</ChatInputProvider>
+	)
+}
+
+function ChatInputForm() {
+	const { handleSubmit } = useChatInput()
+
+	return (
+		<form onSubmit={handleSubmit} className="relative">
+			<ChatInputField />
+			<ChatInputSubmit />
+		</form>
+	)
+}
+
+interface ChatInputFieldProps {
+	placeholder?: string
+}
+
+function ChatInputField({ placeholder = "Chat" }: ChatInputFieldProps) {
+	const { input, setInput } = useChatUI()
+	const { handleKeyDown } = useChatInput()
+
+	return (
+		<AutosizeTextarea
+			name="input"
+			placeholder={placeholder}
+			minHeight={75}
+			maxHeight={200}
+			value={input}
+			onChange={({ target: { value } }) => setInput(value)}
+			onKeyDown={handleKeyDown}
+			className="resize-none px-3 pt-3 pb-[50px]"
+		/>
+	)
+}
+
+function ChatInputSubmit() {
+	const { isLoading, stop } = useChatUI()
+	const { isDisabled } = useChatInput()
+	const isStoppable = isLoading && !!stop
+
+	return (
+		<div className="absolute bottom-[1px] left-[1px] right-[1px] h-[40px] bg-input border-t border-vscode-editor-background rounded-b-md p-1">
+			<div className="flex flex-row-reverse items-center gap-2">
+				{isStoppable ? (
+					<Button type="button" variant="ghost" size="sm" onClick={stop}>
+						<StopIcon className="text-destructive" />
+					</Button>
+				) : (
+					<Button type="submit" variant="ghost" size="icon" disabled={isDisabled}>
+						<PaperPlaneIcon />
+					</Button>
+				)}
+			</div>
+		</div>
+	)
+}

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

@@ -0,0 +1,11 @@
+import { createContext } from "react"
+
+interface ChatInputContext {
+	isDisabled: boolean
+	handleKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
+	handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void
+}
+
+export const chatInputContext = createContext<ChatInputContext | null>(null)
+
+export const ChatInputProvider = chatInputContext.Provider

webview-ui/src/components/ui/chat/ChatInputProvider.ts

@@ -0,0 +1,105 @@
+import { useMemo } from "react"
+import { CopyIcon, CheckIcon } from "@radix-ui/react-icons"
+import { BrainCircuit, CircleUserRound } 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 { ChatMessageProvider } from "./ChatMessageProvider"
+import { useChatUI } from "./useChatUI"
+import { useChatMessage } from "./useChatMessage"
+
+interface ChatMessageProps {
+	message: Message
+	isLast: boolean
+	isHeaderVisible: boolean
+	isLoading?: boolean
+	append?: ChatHandler["append"]
+}
+
+export function ChatMessage({ message, isLast, isHeaderVisible, isLoading, append }: ChatMessageProps) {
+	const badges = useMemo(
+		() =>
+			message.annotations
+				?.filter(({ type }) => type === MessageAnnotationType.BADGE)
+				.map(({ data }) => data as BadgeData),
+		[message.annotations],
+	)
+
+	return (
+		<ChatMessageProvider value={{ message, isLast }}>
+			<div
+				className={cn("relative group flex flex-col text-secondary-foreground", {
+					"bg-vscode-input-background/50": message.role === "user",
+				})}>
+				{isHeaderVisible && <ChatMessageHeader badges={badges} />}
+				<ChatMessageContent isHeaderVisible={isHeaderVisible} />
+				<ChatMessageActions />
+			</div>
+		</ChatMessageProvider>
+	)
+}
+
+interface ChatMessageHeaderProps {
+	badges?: BadgeData[]
+}
+
+function ChatMessageHeader({ badges }: ChatMessageHeaderProps) {
+	return (
+		<div className="flex flex-row items-center justify-between border-t border-accent px-3 pt-3 pb-1">
+			<ChatMessageAvatar />
+			{badges?.map(({ label, variant = "outline" }) => (
+				<Badge variant={variant} key={label}>
+					{label}
+				</Badge>
+			))}
+		</div>
+	)
+}
+
+const icons: Record<string, React.ReactNode> = {
+	user: <CircleUserRound className="h-4 w-4" />,
+	assistant: <BrainCircuit className="h-4 w-4" />,
+}
+
+function ChatMessageAvatar() {
+	const { assistantName } = useChatUI()
+	const { message } = useChatMessage()
+
+	return icons[message.role] ? (
+		<div className="flex flex-row items-center gap-1">
+			<div className="opacity-25 select-none">{icons[message.role]}</div>
+			<div className="text-muted">{message.role === "user" ? "You" : assistantName}</div>
+		</div>
+	) : null
+}
+
+interface ChatMessageContentProps {
+	isHeaderVisible: boolean
+}
+
+function ChatMessageContent({ isHeaderVisible }: ChatMessageContentProps) {
+	const { message } = useChatMessage()
+
+	return (
+		<div className={cn("flex flex-col gap-4 flex-1 min-w-0 px-4 pb-6", { "pt-4": isHeaderVisible })}>
+			<Markdown content={message.content} />
+		</div>
+	)
+}
+
+function ChatMessageActions() {
+	const { message } = useChatMessage()
+	const { isCopied, copy } = useClipboard()
+
+	return (
+		<div
+			className="absolute right-2 bottom-2 opacity-0 group-hover:opacity-25 cursor-pointer"
+			onClick={() => copy(message.content)}>
+			{isCopied ? <CheckIcon /> : <CopyIcon />}
+		</div>
+	)
+}

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

@@ -0,0 +1,12 @@
+import { createContext } from "react"
+
+import { Message } from "./types"
+
+export interface ChatMessageContext {
+	message: Message
+	isLast: boolean
+}
+
+export const chatMessageContext = createContext<ChatMessageContext | null>(null)
+
+export const ChatMessageProvider = chatMessageContext.Provider

webview-ui/src/components/ui/chat/ChatMessageProvider.ts

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useRef } from "react"
+
+import { useChatUI } from "./useChatUI"
+import { ChatMessage } from "./ChatMessage"
+
+export function ChatMessages() {
+	const { messages, isLoading, append } = useChatUI()
+	const containerRef = useRef<HTMLDivElement>(null)
+	const messageCount = messages.length
+
+	const scrollToBottom = useCallback(() => {
+		if (!containerRef.current) {
+			return
+		}
+
+		requestAnimationFrame(() => {
+			containerRef.current?.scrollTo({
+				top: containerRef.current.scrollHeight,
+				behavior: "smooth",
+			})
+		})
+	}, [])
+
+	useEffect(() => scrollToBottom(), [messageCount, scrollToBottom])
+
+	return (
+		<div ref={containerRef} className="flex flex-col flex-1 min-h-0 overflow-auto relative">
+			{messages.map((message, index) => (
+				<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}
+				/>
+			))}
+		</div>
+	)
+}

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

@@ -0,0 +1,11 @@
+import { createContext } from "react"
+
+import { ChatHandler } from "./types"
+
+type ChatContext = ChatHandler & {
+	assistantName: string
+}
+
+export const chatContext = createContext<ChatContext | null>(null)
+
+export const ChatProvider = chatContext.Provider

webview-ui/src/components/ui/chat/ChatProvider.ts

@@ -0,0 +1,2 @@
+export * from "./types"
+export * from "./Chat"