Moduletrace/tailwind-ui-library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
tben
2026-10-13 06:52:08 +01:00
parent 3dc9f12ad4
commit 44088c5a9c
9 changed files with 196 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/elements/ColorSchemeSelector.tsx
+38 -12
View File
@@ -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.className = "dark";
localStorage.setItem("theme", "dark");
} else {
document.documentElement.className = "light";
localStorage.setItem("theme", "light");
}
document.documentElement.classList.remove("dark", "light");
document.documentElement.classList.add(active ? "dark" : "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 == true && <Moon />}
{active == false && <Sun size={iconSize} />}
{active == true && <Moon size={iconSize} />}
</div>
</button>
</div>
components/elements/ai/AIPromptActionSection.tsx
+7 -4
View File
@@ -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
+77
View File
@@ -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
+15 -57
View File
@@ -1,21 +1,16 @@
import type { ChatCompletionMessageParam } from "openai/resources/index";
import { twMerge } from "tailwind-merge";
import { Bot, History, User } from "lucide-react";
import { History } 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 Card from "../Card";
import Border from "../Border";
import type { VoiceTranscriptionParams } from "./types";
import AIPromptHistoryUserCard from "./AIPromptHistoryUserCard";
import AIPromptHistoryAssistantCard from "./AIPromptHistoryAssistantCard";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import Img from "../../layout/Img";
type Props = {
type Props = VoiceTranscriptionParams & {
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"
>
<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}
user_image_url={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"
>
<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>
user_image_url={user_image_url}
/>
);
})}
</Stack>
components/elements/ai/AIPromptHistoryUserCard.tsx
+48
View File
@@ -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 -1
View File
@@ -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
+5
View File
@@ -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
+2 -2
View File
@@ -489,8 +489,8 @@ export default function Input<KeyType extends string>(
{info && (
<Dropdown
target={
<Row className="gap-1">
<Info size={12} className="opacity-40" />
<Row className="gap-2! flex-nowrap items-start">
<Info className="opacity-40 min-w-[17px] h-[17px] mt-[1px]" />
<Span
size="smaller"
className="opacity-70 hover:opacity-100"
components/layout/Img.tsx
+2
View File
@@ -146,6 +146,8 @@ export default function Img({
return (
<img
loading="lazy"
decoding="async"
{...interpolatedProps}
onError={(e) => {
setImageError(true);