Updates

2026-10-01 08:02:47 +01:00
parent 6392457ffb
commit 3dc9f12ad4
104 changed files with 6536 additions and 1037 deletions
@@ -1,10 +1,11 @@
 import { Send, X } from "lucide-react";
-import React, { Dispatch, SetStateAction } from "react";
-import { ChatCompletionMessageParam } from "openai/resources/index";
+import React, { type Dispatch, type SetStateAction } from "react";
+import type { ChatCompletionMessageParam } from "openai/resources/index";
 import Row from "../../layout/Row";
 import Button from "../../layout/Button";
 import CopySlug from "../CopySlug";
 import AIPromptHistoryModal from "./AIPromptHistoryModal";
+import AIVoiceTranscription from "./AIVoiceTranscription";

 type Props = {
    streamRes: string;
@@ -12,10 +13,15 @@ type Props = {
    setPrompt: Dispatch<SetStateAction<string>>;
    loading: boolean;
    promptFn: (prompt: string) => void;
+    voice_transcription_fn?: (params: { last_message?: string }) => void;
+    transcribing?: boolean;
    history: ChatCompletionMessageParam[];
    prompt: string;
    currentPromptRef: React.MutableRefObject<string>;
    promptInputRef: React.RefObject<HTMLTextAreaElement>;
+    user_image_url?: string;
+    last_response?: string;
+    cancel_voice_transcription_fn?: () => void;
 };

 export default function AIPromptActionSection({
@@ -28,10 +34,24 @@ export default function AIPromptActionSection({
    setPrompt,
    currentPromptRef,
    promptInputRef,
+    user_image_url,
+    transcribing,
+    voice_transcription_fn,
+    last_response,
+    cancel_voice_transcription_fn,
 }: Props) {
    return (
        <Row className="w-full justify-between">
-            <Row className="gap-4">
+            <Row className="gap-4 px-2">
+                <AIVoiceTranscription
+                    transcribing={transcribing}
+                    voice_transcription_fn={voice_transcription_fn}
+                    cancel_voice_transcription_fn={
+                        cancel_voice_transcription_fn
+                    }
+                    history={history}
+                    last_response={last_response}
+                />
                {streamRes.match(/./) && (
                    <React.Fragment>
                        <Button
@@ -53,10 +73,13 @@ export default function AIPromptActionSection({
                        />
                    </React.Fragment>
                )}
+
+                <AIPromptHistoryModal
+                    history={history}
+                    user_image_url={user_image_url}
+                />
            </Row>
-            <Row>
-                <AIPromptHistoryModal history={history} />
-            </Row>
+
            <Row>
                <Button
                    title="Send Prompt"
@@ -74,6 +97,7 @@ export default function AIPromptActionSection({
                        promptFn(prompt);
                    }}
                    loadingProps={{ size: "smaller" }}
+                    disabled={transcribing}
                />
            </Row>
        </Row>
@@ -1,15 +1,13 @@
-import { ChatCompletionMessageParam } from "openai/resources/index";
+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 LoadingOverlay from "../LoadingOverlay";
-import Textarea from "../../form/Textarea";
-import AIPromptActionSection from "./AIPromptActionSection";
 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;
@@ -57,47 +55,17 @@ export default function AIPromptBlock({
                    history={history}
                    loading={loading}
                />
-                <Stack className="w-full relative">
-                    {loading && <LoadingOverlay />}
-                    <Textarea
-                        placeholder={
-                            placeholder ||
-                            (model ? `Prompt ${model}` : "Prompt AI")
-                        }
-                        wrapperProps={{ className: "outline-none" }}
-                        wrapperWrapperProps={{ className: "w-full" }}
-                        value={prompt}
-                        onChange={(e) => {
-                            setPrompt(e.target.value);
-                        }}
-                        onKeyDown={(e) => {
-                            if (e.key == "Enter" && !e.ctrlKey && !e.shiftKey) {
-                                e.preventDefault();
-                                currentPromptRef.current = prompt;
-                                setTimeout(() => {
-                                    setPrompt("");
-                                    if (promptInputRef.current) {
-                                        promptInputRef.current.value = "";
-                                    }
-                                }, 200);
-                                promptFn(prompt);
-                            }
-                        }}
-                        componentRef={promptInputRef}
-                        // autoFocus
-                    />
-                    <AIPromptActionSection
-                        loading={loading}
-                        promptFn={promptFn}
-                        setStreamRes={setMdRes}
-                        streamRes={mdRes}
-                        history={history}
-                        prompt={prompt}
-                        setPrompt={setPrompt}
-                        currentPromptRef={currentPromptRef}
-                        promptInputRef={promptInputRef as any}
-                    />
-                </Stack>
+                <AIPromptBlockInputSection
+                    {...{
+                        model,
+                        promptFn,
+                        history,
+                        loading,
+                        mdRes,
+                        setMdRes,
+                        placeholder,
+                    }}
+                />
            </Stack>
        </Paper>
    );
@@ -0,0 +1,73 @@
+import type { ChatCompletionMessageParam } from "openai/resources/index";
+import React from "react";
+import Stack from "../../layout/Stack";
+import LoadingOverlay from "../LoadingOverlay";
+import Textarea from "../../form/Textarea";
+import AIPromptActionSection from "./AIPromptActionSection";
+
+type Props = {
+    model?: string;
+    promptFn: (prompt: string) => void;
+    history?: ChatCompletionMessageParam[];
+    loading?: boolean;
+    mdRes?: string;
+    setMdRes: React.Dispatch<React.SetStateAction<string>>;
+    placeholder?: string;
+};
+
+export default function AIPromptBlockInputSection({
+    model,
+    promptFn,
+    history = [],
+    loading = false,
+    mdRes = "",
+    setMdRes,
+    placeholder,
+}: Props) {
+    const [prompt, setPrompt] = React.useState("");
+    const currentPromptRef = React.useRef("");
+    const promptInputRef = React.useRef<HTMLTextAreaElement>(null);
+
+    return (
+        <Stack className="w-full relative">
+            {loading && <LoadingOverlay />}
+            <Textarea
+                placeholder={
+                    placeholder || (model ? `Prompt ${model}` : "Prompt AI")
+                }
+                wrapperProps={{ className: "outline-none" }}
+                wrapperWrapperProps={{ className: "w-full" }}
+                value={prompt}
+                onChange={(e) => {
+                    setPrompt(e.target.value);
+                }}
+                onKeyDown={(e) => {
+                    if (e.key == "Enter" && !e.ctrlKey && !e.shiftKey) {
+                        e.preventDefault();
+                        currentPromptRef.current = prompt;
+                        setTimeout(() => {
+                            setPrompt("");
+                            if (promptInputRef.current) {
+                                promptInputRef.current.value = "";
+                            }
+                        }, 200);
+                        promptFn(prompt);
+                    }
+                }}
+                componentRef={promptInputRef}
+                // autoFocus
+            />
+            <AIPromptActionSection
+                loading={loading}
+                promptFn={promptFn}
+                setStreamRes={setMdRes}
+                streamRes={mdRes}
+                history={history}
+                prompt={prompt}
+                setPrompt={setPrompt}
+                currentPromptRef={currentPromptRef}
+                promptInputRef={promptInputRef as any}
+            />
+        </Stack>
+    );
+}
@@ -1,7 +1,6 @@
-import React from "react";
-import { ChatCompletionMessageParam } from "openai/resources/index";
+import type { ChatCompletionMessageParam } from "openai/resources/index";
 import { twMerge } from "tailwind-merge";
-import { Bot, User } from "lucide-react";
+import { Bot, History, User } from "lucide-react";
 import Modal from "../Modal";
 import Button from "../../layout/Button";
 import Stack from "../../layout/Stack";
@@ -11,13 +10,20 @@ import Divider from "../../layout/Divider";
 import Row from "../../layout/Row";
 import Card from "../Card";
 import Border from "../Border";
-import MarkdownEditorPreviewComponent from "../../mdx/markdown/MarkdownEditorPreviewComponent";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import Img from "../../layout/Img";

 type Props = {
    history: ChatCompletionMessageParam[];
+    user_image_url?: string;
 };

-export default function AIPromptHistoryModal({ history }: Props) {
+export default function AIPromptHistoryModal({
+    history,
+    user_image_url,
+}: Props) {
    if (!history[0]) return null;

    return (
@@ -27,9 +33,10 @@ export default function AIPromptHistoryModal({ history }: Props) {
                    title="View Chat History"
                    size="smaller"
                    color="gray"
-                    variant="outlined"
+                    variant="ghost"
+                    className="p-1!"
                >
-                    View History
+                    <History size={20} opacity={0.7} />
                </Button>
            }
            className="max-w-[900px] bg-slate-100 dark:bg-white/5 xl:p-8"
@@ -49,22 +56,35 @@ export default function AIPromptHistoryModal({ history }: Props) {
                        return (
                            <Row
                                key={index}
-                                className="w-full items-start justify-end"
+                                className="w-full items-start justify-end flex-nowrap"
                            >
                                <Card
                                    className={twMerge(
-                                        "bg-background-dark text-foreground-dark dark:!bg-background-light dark:text-foreground-light"
+                                        "bg-background-dark text-foreground-dark dark:!bg-background-light dark:text-foreground-light",
+                                        "twui-llm-user-prompt-history-block",
                                    )}
                                >
-                                    {hst.content?.toString()}
+                                    <Stack className="twui-llm-chat-block">
+                                        {hst.content?.toString()}
+                                    </Stack>
                                </Card>

-                                <Border className="w-10 h-10 rounded-full p-2 items-center justify-center">
-                                    <User />
-                                </Border>
+                                {user_image_url ? (
+                                    <Img
+                                        alt="Prompting user"
+                                        size={30}
+                                        circle
+                                        src={user_image_url}
+                                    />
+                                ) : (
+                                    <Border className="w-10 h-10 rounded-full p-2 items-center justify-center">
+                                        <User />
+                                    </Border>
+                                )}
                            </Row>
                        );
                    }
+
                    return (
                        <Row
                            key={index}
@@ -74,21 +94,18 @@ export default function AIPromptHistoryModal({ history }: Props) {
                                <Border
                                    className={twMerge(
                                        "w-10 h-10 rounded-full items-center justify-center bg-white p-2",
-                                        "dark:bg-background-dark"
+                                        "dark:bg-background-dark",
                                    )}
                                >
                                    <Bot />
                                </Border>
                            </Stack>
                            <Card className="grow overflow-x-auto xl:p-8">
-                                <MarkdownEditorPreviewComponent
-                                    value={hst.content?.toString() || ""}
-                                    maxHeight="none"
-                                    wrapperProps={{
-                                        className:
-                                            "border-none p-0 ai-response-content w-full",
-                                    }}
-                                />
+                                <Stack className="twui-llm-chat-block">
+                                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                                        {hst.content?.toString()}
+                                    </ReactMarkdown>
+                                </Stack>
                            </Card>
                        </Row>
                    );
@@ -2,7 +2,7 @@ import Divider from "../../layout/Divider";
 import Stack from "../../layout/Stack";
 import React from "react";
 import MarkdownEditorPreviewComponent from "../../mdx/markdown/MarkdownEditorPreviewComponent";
-import { ChatCompletionMessageParam } from "openai/resources/index";
+import type { ChatCompletionMessageParam } from "openai/resources/index";

 type Props = {
    streamRes: string;
@@ -0,0 +1,70 @@
+import { Speech, Voicemail, X } from "lucide-react";
+import Button from "../../layout/Button";
+import { ChatCompletionMessageParam } from "openai/resources";
+import Row from "../../layout/Row";
+import Loading from "../Loading";
+import Border from "../Border";
+
+type Props = {
+    voice_transcription_fn?: (params: { last_message?: string }) => void;
+    transcribing?: boolean;
+    history?: ChatCompletionMessageParam[];
+    last_response?: string;
+    cancel_voice_transcription_fn?: () => void;
+};
+
+export default function AIVoiceTranscription({
+    transcribing,
+    voice_transcription_fn,
+    history,
+    last_response,
+    cancel_voice_transcription_fn,
+}: Props) {
+    if (!voice_transcription_fn) return null;
+
+    if (transcribing) {
+        return (
+            <Border className="px-1.5! py-0.5!">
+                <Row className="gap-2!">
+                    <Loading size="small" />
+                    <Button
+                        title="Cancel Transcription"
+                        className="p-1!"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            cancel_voice_transcription_fn?.();
+                        }}
+                        variant="ghost"
+                    >
+                        <X size={20} opacity={0.7} />
+                    </Button>
+                </Row>
+            </Border>
+        );
+    }
+
+    return (
+        <Button
+            title="Listen to Speech"
+            size="smaller"
+            color="gray"
+            variant="ghost"
+            loading={transcribing}
+            onClick={(e) => {
+                e.preventDefault();
+
+                const history_last_response = history?.find(
+                    (h) => h.role == "assistant",
+                );
+                voice_transcription_fn({
+                    last_message:
+                        last_response ||
+                        history_last_response?.content?.toString(),
+                });
+            }}
+            className="p-1!"
+        >
+            <Speech size={20} opacity={0.7} />
+        </Button>
+    );
+}