tbenandClaude Opus 5.5
1c607c4bcd
AIChat (elements/ai/AIChat) is a complete LLM chat UI built on new hooks: - useAIChat: streaming conversation state (send, stop, regenerate, edit, feedback); `send` may return a string, async iterable, ReadableStream or fetch Response - useAIChatHistory: saved conversations with optional localStorage persistence and generated titles, shown in AIChatSidebar - useAIChatSpeech: read aloud via browser speech synthesis or a custom `speak` returning audio - useAIChatDictation: voice input via browser recognition or a custom `transcribe` Also adds a model picker, message editing, thumbs up/down, markdown export, scoped markdown styles in base.css, the twuiReadTextStream, twuiStripMarkdown and twuiGroupByRecency utils (with tests), and a playground page. AIPromptBlock is kept and marked deprecated. Co-Authored-By: Claude Opus 5.5 <[email protected]>
76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import type { ChatCompletionMessageParam } from "openai/resources/index";
|
|
import React from "react";
|
|
import Paper from "../Paper";
|
|
import Stack from "../../layout/Stack";
|
|
import AIPromptPreview from "./AIPromptPreview";
|
|
import Card from "../Card";
|
|
import Row from "../../layout/Row";
|
|
import Span from "../../layout/Span";
|
|
import { MessageCircleMore } from "lucide-react";
|
|
import AIPromptBlockInputSection from "./AIPromptBlockInputSection";
|
|
|
|
type Props = {
|
|
model?: string;
|
|
promptFn: (prompt: string) => void;
|
|
history?: ChatCompletionMessageParam[];
|
|
loading?: boolean;
|
|
mdRes?: string;
|
|
setMdRes: React.Dispatch<React.SetStateAction<string>>;
|
|
placeholder?: string;
|
|
};
|
|
|
|
/**
|
|
* @deprecated Use `elements/ai/AIChat`, which manages the conversation,
|
|
* streaming, stop and regenerate itself.
|
|
*/
|
|
export default function AIPromptBlock({
|
|
model,
|
|
promptFn,
|
|
history = [],
|
|
loading = false,
|
|
mdRes = "",
|
|
setMdRes,
|
|
placeholder,
|
|
}: Props) {
|
|
const currentPromptRef = React.useRef("");
|
|
|
|
return (
|
|
<Paper className="">
|
|
<Stack className="w-full">
|
|
{currentPromptRef.current && (
|
|
<Row className="w-full justify-end">
|
|
<Card className="py-1.5 px-2.5 text-xs">
|
|
<Row>
|
|
<Span>{currentPromptRef.current}</Span>
|
|
<MessageCircleMore
|
|
size={15}
|
|
opacity={0.5}
|
|
className="-mt-px"
|
|
/>
|
|
</Row>
|
|
</Card>
|
|
</Row>
|
|
)}
|
|
<AIPromptPreview
|
|
setStreamRes={setMdRes}
|
|
streamRes={mdRes}
|
|
history={history}
|
|
loading={loading}
|
|
/>
|
|
<AIPromptBlockInputSection
|
|
{...{
|
|
model,
|
|
promptFn,
|
|
history,
|
|
loading,
|
|
mdRes,
|
|
setMdRes,
|
|
placeholder,
|
|
currentPromptRef,
|
|
}}
|
|
/>
|
|
</Stack>
|
|
</Paper>
|
|
);
|
|
}
|