Updates

components/elements/ColorSchemeSelector.tsx

@@ -1,6 +1,18 @@
 import React, { type DetailedHTMLProps, type HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import { Moon, Sun } from "lucide-react";
+import type { TWUIButtonSizeType } from "../layout/Button";
+
+const SizeMap: Record<
+    TWUIButtonSizeType,
+    { icon: number; className: string }
+> = {
+    smaller: { icon: 16, className: "w-4 h-4" },
+    small: { icon: 20, className: "w-5 h-5" },
+    normal: { icon: 24, className: "w-6 h-6" },
+    large: { icon: 28, className: "w-7 h-7" },
+    larger: { icon: 32, className: "w-8 h-8" },
+};
 
 type Props = DetailedHTMLProps<
     HTMLAttributes<HTMLDivElement>,
@@ -13,6 +25,11 @@ type Props = DetailedHTMLProps<
         HTMLDivElement
     >;
     defaultScheme?: "light" | "dark";
+    /**
+     * Icon size. Matches the twui `Button` size scale.
+     * @default "normal"
+     */
+    size?: TWUIButtonSizeType;
 };
 
 /**
@@ -24,8 +41,10 @@ export default function ColorSchemeSelector({
     setActive: externalSetActive,
     iconWrapperProps,
     defaultScheme,
+    size = "normal",
     ...props
 }: Props) {
+    const { icon: iconSize, className: sizeClassName } = SizeMap[size];
     const [active, setActive] = React.useState(initialActive);
 
     React.useEffect(() => {
@@ -49,7 +68,7 @@ export default function ColorSchemeSelector({
         } else if (existingTheme === "light") {
             setActive(false);
         } else if (defaultScheme) {
-            setActive(defaultScheme == "dark" ? false : true);
+            setActive(defaultScheme == "dark");
         } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
             setActive(true);
         } else if (typeof active == "undefined") {
@@ -60,15 +79,21 @@ export default function ColorSchemeSelector({
     React.useEffect(() => {
         if (typeof active == "undefined") return;
 
-        if (active) {
+        document.documentElement.classList.remove("dark", "light");
-            document.documentElement.className = "dark";
+        document.documentElement.classList.add(active ? "dark" : "light");
-            localStorage.setItem("theme", "dark");
-        } else {
-            document.documentElement.className = "light";
-            localStorage.setItem("theme", "light");
-        }
     }, [active]);
 
+    /**
+     * Only an explicit toggle is persisted, so visitors who never choose
+     * keep following their OS preference.
+     */
+    function toggleScheme() {
+        const next = !active;
+        setActive(next);
+        externalSetActive?.(next);
+        localStorage.setItem("theme", next ? "dark" : "light");
+    }
+
     return (
         <div
             {...props}
@@ -80,7 +105,7 @@ export default function ColorSchemeSelector({
         >
             <button
                 title="Color Scheme Selector Button"
-                onClick={() => setActive(!active)}
+                onClick={toggleScheme}
                 className={twMerge(
                     "cursor-pointer hover:opacity-70 flex items-center justify-center",
                 )}
@@ -88,12 +113,13 @@ export default function ColorSchemeSelector({
                 <div
                     {...iconWrapperProps}
                     className={twMerge(
-                        "w-6 h-6 flex items-center justify-center",
+                        "flex items-center justify-center",
+                        sizeClassName,
                         iconWrapperProps?.className,
                     )}
                 >
-                    {active == false && <Sun />}
+                    {active == false && <Sun size={iconSize} />}
-                    {active == true && <Moon />}
+                    {active == true && <Moon size={iconSize} />}
                 </div>
             </button>
         </div>

components/elements/ai/AIPromptActionSection.tsx

@@ -6,22 +6,20 @@ import Button from "../../layout/Button";
 import CopySlug from "../CopySlug";
 import AIPromptHistoryModal from "./AIPromptHistoryModal";
 import AIVoiceTranscription from "./AIVoiceTranscription";
+import type { VoiceTranscriptionParams } from "./types";
 
-type Props = {
+type Props = VoiceTranscriptionParams & {
     streamRes: string;
     setStreamRes: Dispatch<SetStateAction<string>>;
     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({
@@ -77,6 +75,11 @@ export default function AIPromptActionSection({
                 <AIPromptHistoryModal
                     history={history}
                     user_image_url={user_image_url}
+                    transcribing={transcribing}
+                    voice_transcription_fn={voice_transcription_fn}
+                    cancel_voice_transcription_fn={
+                        cancel_voice_transcription_fn
+                    }
                 />
             </Row>
 

components/elements/ai/AIPromptHistoryAssistantCard.tsx

@@ -0,0 +1,77 @@
+import type { ChatCompletionMessageParam } from "openai/resources/index";
+import { twMerge } from "tailwind-merge";
+import { Bot, User } from "lucide-react";
+import Stack from "../../layout/Stack";
+import Row from "../../layout/Row";
+import Card from "../Card";
+import Border from "../Border";
+import Img from "../../layout/Img";
+import type { VoiceTranscriptionParams } from "./types";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import AIVoiceTranscription from "./AIVoiceTranscription";
+import Span from "../../layout/Span";
+import CopySlug from "../CopySlug";
+import EmptyContent from "../EmptyContent";
+
+type Props = VoiceTranscriptionParams & {
+    history: ChatCompletionMessageParam;
+    user_image_url?: string;
+};
+
+export default function AIPromptHistoryAssistantCard({
+    history,
+    user_image_url,
+    cancel_voice_transcription_fn,
+    transcribing,
+    voice_transcription_fn,
+}: Props) {
+    const text_content = history.content?.toString();
+
+    if (!text_content) {
+        return <EmptyContent title="No Text response content" />;
+    }
+
+    return (
+        <Row className={"w-full items-start flex-nowrap"}>
+            <Stack>
+                <Border
+                    className={twMerge(
+                        "w-10 h-10 rounded-full items-center justify-center bg-white p-2",
+                        "dark:bg-background-dark",
+                    )}
+                >
+                    <Bot />
+                </Border>
+            </Stack>
+
+            <Stack className="grow items-stretch">
+                <Card className="w-full overflow-x-auto xl:p-8">
+                    <Stack className="twui-llm-chat-block">
+                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                            {history.content?.toString()}
+                        </ReactMarkdown>
+                    </Stack>
+                </Card>{" "}
+                <Row>
+                    <AIVoiceTranscription
+                        transcribing={transcribing}
+                        voice_transcription_fn={voice_transcription_fn}
+                        cancel_voice_transcription_fn={
+                            cancel_voice_transcription_fn
+                        }
+                        history={[history]}
+                        last_response={history.content?.toString()}
+                    />
+
+                    <CopySlug
+                        slugText={text_content}
+                        justIcon
+                        iconProps={{ size: 18, opacity: 0.7 }}
+                        title="Copy Content"
+                    />
+                </Row>
+            </Stack>
+        </Row>
+    );
+}

components/elements/ai/AIPromptHistoryModal.tsx

@@ -1,21 +1,16 @@
 import type { ChatCompletionMessageParam } from "openai/resources/index";
-import { twMerge } from "tailwind-merge";
+import { History } from "lucide-react";
-import { Bot, History, User } from "lucide-react";
 import Modal from "../Modal";
 import Button from "../../layout/Button";
 import Stack from "../../layout/Stack";
 import H2 from "../../layout/H2";
 import Span from "../../layout/Span";
 import Divider from "../../layout/Divider";
-import Row from "../../layout/Row";
+import type { VoiceTranscriptionParams } from "./types";
-import Card from "../Card";
+import AIPromptHistoryUserCard from "./AIPromptHistoryUserCard";
-import Border from "../Border";
+import AIPromptHistoryAssistantCard from "./AIPromptHistoryAssistantCard";
 
-import ReactMarkdown from "react-markdown";
+type Props = VoiceTranscriptionParams & {
-import remarkGfm from "remark-gfm";
-import Img from "../../layout/Img";
-
-type Props = {
     history: ChatCompletionMessageParam[];
     user_image_url?: string;
 };
@@ -23,6 +18,7 @@ type Props = {
 export default function AIPromptHistoryModal({
     history,
     user_image_url,
+    ...props
 }: Props) {
     if (!history[0]) return null;
 
@@ -54,60 +50,22 @@ export default function AIPromptHistoryModal({
                 {history.map((hst, index) => {
                     if (hst.role == "user") {
                         return (
-                            <Row
+                            <AIPromptHistoryUserCard
+                                history={hst}
+                                {...props}
                                 key={index}
-                                className="w-full items-start justify-end flex-nowrap"
+                                user_image_url={user_image_url}
-                            >
+                            />
-                                <Card
-                                    className={twMerge(
-                                        "bg-background-dark text-foreground-dark dark:!bg-background-light dark:text-foreground-light",
-                                        "twui-llm-user-prompt-history-block",
-                                    )}
-                                >
-                                    <Stack className="twui-llm-chat-block">
-                                        {hst.content?.toString()}
-                                    </Stack>
-                                </Card>
-
-                                {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
+                        <AIPromptHistoryAssistantCard
+                            history={hst}
+                            {...props}
                             key={index}
-                            className="w-full items-start flex-nowrap"
+                            user_image_url={user_image_url}
-                        >
+                        />
-                            <Stack>
-                                <Border
-                                    className={twMerge(
-                                        "w-10 h-10 rounded-full items-center justify-center bg-white p-2",
-                                        "dark:bg-background-dark",
-                                    )}
-                                >
-                                    <Bot />
-                                </Border>
-                            </Stack>
-                            <Card className="grow overflow-x-auto xl:p-8">
-                                <Stack className="twui-llm-chat-block">
-                                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                                        {hst.content?.toString()}
-                                    </ReactMarkdown>
-                                </Stack>
-                            </Card>
-                        </Row>
                     );
                 })}
             </Stack>

components/elements/ai/AIPromptHistoryUserCard.tsx

@@ -0,0 +1,48 @@
+import type { ChatCompletionMessageParam } from "openai/resources/index";
+import { twMerge } from "tailwind-merge";
+import { User } from "lucide-react";
+import Stack from "../../layout/Stack";
+import Row from "../../layout/Row";
+import Card from "../Card";
+import Border from "../Border";
+import Img from "../../layout/Img";
+import type { VoiceTranscriptionParams } from "./types";
+
+type Props = VoiceTranscriptionParams & {
+    history: ChatCompletionMessageParam;
+    user_image_url?: string;
+};
+
+export default function AIPromptHistoryUserCard({
+    history,
+    user_image_url,
+    ...props
+}: Props) {
+    return (
+        <Row 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",
+                    "twui-llm-user-prompt-history-block",
+                )}
+            >
+                <Stack className="twui-llm-chat-block">
+                    {history.content?.toString()}
+                </Stack>
+            </Card>
+
+            {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>
+    );
+}

components/elements/ai/AIVoiceTranscription.tsx

@@ -1,6 +1,6 @@
 import { Speech, Voicemail, X } from "lucide-react";
 import Button from "../../layout/Button";
-import { ChatCompletionMessageParam } from "openai/resources";
+import type { ChatCompletionMessageParam } from "openai/resources";
 import Row from "../../layout/Row";
 import Loading from "../Loading";
 import Border from "../Border";

components/elements/ai/types.ts

@@ -0,0 +1,5 @@
+export type VoiceTranscriptionParams = {
+    transcribing?: boolean;
+    cancel_voice_transcription_fn?: () => void;
+    voice_transcription_fn?: (params: { last_message?: string }) => void;
+};

components/form/Input/index.tsx

@@ -489,8 +489,8 @@ export default function Input<KeyType extends string>(
             {info && (
                 <Dropdown
                     target={
-                        <Row className="gap-1">
+                        <Row className="gap-2! flex-nowrap items-start">
-                            <Info size={12} className="opacity-40" />
+                            <Info className="opacity-40 min-w-[17px] h-[17px] mt-[1px]" />
                             <Span
                                 size="smaller"
                                 className="opacity-70 hover:opacity-100"

components/layout/Img.tsx

@@ -146,6 +146,8 @@ export default function Img({
 
     return (
         <img
+            loading="lazy"
+            decoding="async"
             {...interpolatedProps}
             onError={(e) => {
                 setImageError(true);