"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@kineticui/core"; import { CheckIcon, CopyIcon, RefreshIcon } from "@kineticui/icons"; /** Reveals `text` progressively, like a streamed model response. */ export function useStreamedText(text: string, { speed = 40, enabled = true }: { speed?: number; enabled?: boolean } = {}) { const [n, setN] = React.useState(enabled ? 0 : text.length); React.useEffect(() => { if (!enabled) { setN(text.length); return; } setN(0); let i = 0; const id = window.setInterval(() => { i += Math.max(1, Math.round(Math.random() * 4)); setN(Math.min(i, text.length)); if (i >= text.length) window.clearInterval(id); }, 1000 / speed); return () => window.clearInterval(id); }, [text, speed, enabled]); return { text: text.slice(0, n), done: n >= text.length }; } /** Minimal markdown: paragraphs, **bold**, `code`, lists and fenced code. */ export function SimpleMarkdown({ children }: { children: string }) { const inline = (s: string) => s.split(/(\*\*[^*]+\*\*|`[^`]+`)/g).map((p, i) => p.startsWith("**") && p.endsWith("**") && p.length > 4 ? ( {p.slice(2, -2)} ) : p.startsWith("`") && p.endsWith("`") && p.length > 2 ? ( {p.slice(1, -1)} ) : ( p ), ); const blocks = children.split(/\n{2,}/); return (

{blocks.map((b, i) => { if (b.startsWith("```")) { const body = b.replace(/^```\w*\n?/, "").replace(/```$/, ""); return (

              {body}

); } const lines = b.split("\n"); if (lines.every((l) => /^\s*([-*]|\d+\.)\s/.test(l))) { const ordered = /^\s*\d+\./.test(lines[0]!); const Tag = ordered ? "ol" : "ul"; return ( {lines.map((l, j) => (

{inline(l.replace(/^\s*([-*]|\d+\.)\s/, ""))}

))} ); } return

{inline(b)}

; })}

); } export type ChatMessageProps = { role: "user" | "assistant"; /** Plain text / simple markdown, or any ReactNode. */ content: React.ReactNode; avatar?: React.ReactNode; name?: string; /** Shows a blinking caret after the content. */ streaming?: boolean; /** Blocks shown before the answer, e.g. or . */ before?: React.ReactNode; /** Blocks after the answer, e.g. . */ after?: React.ReactNode; onRetry?: () => void; onFeedback?: (good: boolean) => void; className?: string; }; /** One turn in a conversation: user bubble or assistant answer with actions. */ export function ChatMessage({ role, content, avatar, name, streaming, before, after, onRetry, onFeedback, className }: ChatMessageProps) { const [copied, setCopied] = React.useState(false); const [vote, setVote] = React.useState(null); const body = typeof content === "string" ? {content} : content; if (role === "user") return (

{body}

); return (

{avatar ?? ( )}

{name ? {name} : null} {before}

{body} {streaming ? : null}

{after} {!streaming ? (

{onFeedback ? ([true, false] as const).map((good) => ( )) : null} {onRetry ? ( ) : null}

) : null}

); }

Chat Message

Installation

Exports