+
+ {selectedThread === undefined
+ ?
+
+ {showNewThreadModal
+ ?
+ );
+};
+
+export { app as App };
diff --git a/src/components/aboutModal.tsx b/src/components/aboutModal.tsx
new file mode 100644
index 0000000..9ee7ff1
--- /dev/null
+++ b/src/components/aboutModal.tsx
@@ -0,0 +1,167 @@
+/**
+ * @file About modal explaining what Tatsumi is and how to use it.
+ * @copyright Naomi Carrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable max-lines-per-function -- Modal JSX inherently requires many lines */
+import { invoke } from "@tauri-apps/api/core";
+import { type JSX, type MouseEvent, useCallback } from "react";
+
+const overlayClass = [
+ "fixed inset-0 bg-black/70 backdrop-blur-sm",
+ "flex items-center justify-center z-50",
+].join(" ");
+
+const modalClass = [
+ "bg-[#1a1028] border border-purple-900/40 rounded-2xl",
+ "p-8 max-w-lg w-full mx-4 shadow-2xl",
+].join(" ");
+
+const linkClass = [
+ "text-purple-400 hover:text-purple-300 underline",
+ "transition-colors cursor-pointer",
+].join(" ");
+
+interface AboutModalProperties {
+ readonly onClose: ()=> void;
+}
+
+/**
+ * Renders the About modal explaining Tatsumi and how to use it.
+ * @param props - The component props.
+ * @param props.onClose - Callback to close the modal.
+ * @returns The JSX element.
+ */
+const aboutModal = ({ onClose }: AboutModalProperties): JSX.Element => {
+ const handleOpenDiscord = useCallback((): void => {
+ void invoke("open_url", { url: "https://chat.nhcarrigan.com" });
+ }, []);
+
+ const handleContentClick = useCallback(
+ (clickEvent: MouseEvent): void => {
+ clickEvent.stopPropagation();
+ },
+ [],
+ );
+
+ return (
+
+
+ );
+};
+
+export { aboutModal as AboutModal };
diff --git a/src/components/inputArea.tsx b/src/components/inputArea.tsx
new file mode 100644
index 0000000..9b5f339
--- /dev/null
+++ b/src/components/inputArea.tsx
@@ -0,0 +1,484 @@
+/**
+ * @file Input area component for composing and sending messages.
+ * @copyright Naomi Carrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable max-lines-per-function -- Component requires complex file handling and send logic */
+/* eslint-disable max-lines -- Clipboard and file handling requires many handlers */
+/* eslint-disable complexity -- Replace mode has conditional branches for initial vs follow-up state */
+/* eslint-disable max-statements -- Component requires many state variables and handlers */
+
+import {
+ useCallback,
+ useRef,
+ useState,
+ type ChangeEvent,
+ type ClipboardEvent,
+ type DragEvent,
+ type JSX,
+ type KeyboardEvent,
+} from "react";
+import type { Mode, PendingInput } from "../types/index.ts";
+
+const dropZoneBaseClass = [
+ "border-2 border-dashed rounded-xl p-8",
+ "text-center cursor-pointer transition-all duration-200",
+].join(" ");
+
+const dropZoneActiveClass = "border-blue-400 bg-blue-900/20";
+const dropZoneInactiveClass = [
+ "border-purple-900/40",
+ "hover:border-blue-500/60 hover:bg-blue-900/10",
+].join(" ");
+
+const replaceButtonClass = [
+ "w-full bg-blue-600 hover:bg-blue-500",
+ "disabled:bg-gray-700 disabled:cursor-not-allowed",
+ "text-white font-semibold py-3 rounded-xl transition-all duration-200",
+].join(" ");
+
+const sendButtonClass = [
+ "bg-gradient-to-r from-purple-600 to-pink-600",
+ "hover:from-purple-500 hover:to-pink-500",
+ "disabled:from-gray-700 disabled:to-gray-700 disabled:cursor-not-allowed",
+ "text-white font-semibold py-3 px-5 rounded-xl",
+ "transition-all duration-200 min-w-[80px]",
+].join(" ");
+
+const textareaClass = [
+ "flex-1 bg-[#241836] border border-purple-900/40",
+ "focus:border-purple-500/60 rounded-xl px-4 py-3",
+ "text-white placeholder-gray-600 resize-none outline-none",
+ "transition-colors text-sm",
+].join(" ");
+
+const clearButtonClass = [
+ "absolute top-1 right-1 bg-black/60 hover:bg-black/80",
+ "text-white rounded-full w-6 h-6 flex items-center",
+ "justify-center text-xs transition-colors",
+].join(" ");
+
+const pasteButtonClass = [
+ "w-full border border-purple-900/40 hover:border-purple-500/60",
+ "bg-transparent hover:bg-purple-900/10 text-gray-400 hover:text-gray-200",
+ "text-sm py-2 rounded-xl transition-all duration-200",
+].join(" ");
+
+interface BuildPendingInputOptions {
+ readonly imageBase64?: string;
+ readonly imageMime?: string;
+ readonly imagePreview?: string;
+ readonly text: string;
+}
+
+const buildPendingInput = ({
+ imageBase64,
+ imageMime,
+ imagePreview,
+ text,
+}: BuildPendingInputOptions): PendingInput | undefined => {
+ const hasText = text.trim().length > 0;
+ const hasImage = imageBase64 !== undefined;
+ if (!hasText && !hasImage) {
+ return undefined;
+ }
+ return {
+ /* eslint-disable-next-line stylistic/no-extra-parens -- Required for conditional spread with exactOptionalPropertyTypes */
+ ...(hasImage && { imageBase64, imageMime, imagePreview }),
+ /* eslint-disable-next-line stylistic/no-extra-parens -- Required for conditional spread with exactOptionalPropertyTypes */
+ ...(hasText && { text }),
+ };
+};
+
+const readClipboardImage = async(
+ onFileRead: (file: File)=> void,
+): Promise
+
+
+ 
+
+
+
+ + {"About Tatsumi"} +
+
+
+
+ + { + "Tatsumi is an AI art generation app powered by Google Gemini's " + + "image model. It's built specifically to generate character " + + "art of Naomi." + } +
+ +
+
+
+ + {"Three modes"} +
+-
+
- + + {"Avatar"} + + { + " â Generate a square portrait of Naomi from a text prompt." + } + +
- + + {"Art"} + + { + " â Generate a full widescreen art piece of Naomi " + + "from a text prompt." + } + +
- + + {"Replace"} + + { + " â Upload an anime girl art and get the character " + + "replaced with Naomi." + } + +
+
+
+ + {"⨠Naomi's reference sheet is pre-loaded"} +
++ { + "All three modes automatically include Naomi's character " + + "reference sheet and a full character description on the " + + "first message, so the model knows exactly how she looks. " + + "You just describe the scene, pose, or what to change!" + } +
++ { + "This app is designed specifically to generate art of Naomi. " + + "If you use it to make something you're proud of, come share " + + "it with us â we'd love to see what you create!" + } +
+ ++ {"Join the community on "} + + {" and share your art in the community channels."} +
+
+
+
+
+
+ );
+};
+
+export { inputArea as InputArea };
diff --git a/src/components/messageBubble.tsx b/src/components/messageBubble.tsx
new file mode 100644
index 0000000..9dc6688
--- /dev/null
+++ b/src/components/messageBubble.tsx
@@ -0,0 +1,340 @@
+/**
+ * @file Message bubble component for displaying chat messages.
+ * @copyright Naomi Carrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable max-lines-per-function -- Component JSX inherently requires many lines */
+/* eslint-disable max-statements -- Component requires many callbacks and state variables */
+/* eslint-disable complexity -- UI component has inherently complex conditional rendering */
+import { invoke } from "@tauri-apps/api/core";
+import {
+ useCallback,
+ useState,
+ type ChangeEvent,
+ type JSX,
+ type KeyboardEvent,
+ type MouseEvent,
+} from "react";
+import type { MessagePart, ThreadMessage } from "../types/index.ts";
+
+const modelBubbleClass = [
+ "bg-[#241836] text-gray-100",
+ "rounded-tl-sm border border-purple-900/20",
+].join(" ");
+
+const thoughtContentClass = [
+ "mt-1 text-xs text-gray-400 italic",
+ "border-l-2 border-purple-800/40 pl-2",
+ "leading-relaxed whitespace-pre-wrap",
+].join(" ");
+
+const downloadButtonClass = [
+ "text-gray-400 hover:text-white text-xs mt-1 transition-colors",
+].join(" ");
+
+const footerActionClass = [
+ "text-gray-500 hover:text-purple-300 text-xs transition-colors",
+].join(" ");
+
+const deleteActionClass = [
+ "text-gray-500 hover:text-red-400 text-xs transition-colors",
+].join(" ");
+
+const thoughtButtonClass = [
+ "text-xs text-purple-400 hover:text-purple-300 flex items-center gap-1",
+].join(" ");
+
+const editTextareaClass = [
+ "w-full bg-[#0f0a1a] border border-purple-700/40 rounded-lg",
+ "px-3 py-2 text-sm text-white resize-none focus:outline-none",
+ "focus:border-purple-500/60 min-h-[80px]",
+].join(" ");
+
+const editSaveButtonClass = [
+ "text-xs bg-purple-700 hover:bg-purple-600",
+ "text-white px-3 py-1 rounded-lg transition-colors",
+].join(" ");
+
+const editCancelButtonClass = [
+ "text-xs text-gray-400 hover:text-gray-200 transition-colors",
+].join(" ");
+
+interface MessageBubbleProperties {
+ readonly message: ThreadMessage;
+ readonly onDelete?: ()=> void;
+ readonly onEdit?: (editedText: string)=> void;
+ readonly onRetry?: ()=> void;
+}
+
+/**
+ * Renders a single message bubble in the thread view.
+ * @param props - The component props.
+ * @param props.message - The message to display.
+ * @param props.onDelete - Optional callback to delete this message and all following.
+ * @param props.onEdit - Optional callback to update the user message text and re-run.
+ * @param props.onRetry - Optional callback to retry generating this response.
+ * @returns The JSX element.
+ */
+const messageBubble = ({
+ message,
+ onDelete,
+ onEdit,
+ onRetry,
+}: MessageBubbleProperties): JSX.Element => {
+ const isUser = message.role === "user";
+ const bubbleClass = isUser
+ ? "bg-purple-700/60 text-white rounded-tr-sm"
+ : modelBubbleClass;
+
+ const [ thoughtExpanded, setThoughtExpanded ] = useState(false);
+ const [ isHovered, setIsHovered ] = useState(false);
+ const [ isEditing, setIsEditing ] = useState(false);
+ const [ editingText, setEditingText ] = useState("");
+
+ const originalTextPart = message.parts.find((part) => {
+ return part.type === "text";
+ });
+
+ const toggleThought = useCallback((): void => {
+ setThoughtExpanded((previous) => {
+ return !previous;
+ });
+ }, []);
+
+ const handleMouseEnter = useCallback((): void => {
+ setIsHovered(true);
+ }, []);
+
+ const handleMouseLeave = useCallback((): void => {
+ setIsHovered(false);
+ }, []);
+
+ const handleEditStart = useCallback((): void => {
+ setEditingText(originalTextPart?.text ?? "");
+ setIsEditing(true);
+ }, [ originalTextPart ]);
+
+ const handleEditCancel = useCallback((): void => {
+ setIsEditing(false);
+ }, []);
+
+ const handleEditSave = useCallback((): void => {
+ setIsEditing(false);
+ onEdit?.(editingText);
+ }, [ editingText, onEdit ]);
+
+ const handleEditChange = useCallback(
+ (changeEvent: ChangeEvent
+
+ {modeLabelText(mode)}
+
+
+
+ {isInitialReplace
+ ?
+ {imagePreview === undefined
+ ?
+
+ :
+
+
+ :
+
+
+ {"đ"}
+ + {"Drop an image here, or "} + + {"click to browse"} + +
++ {"PNG, JPG, WEBP supported"} +
+
+ 
+
+
}
+
+
+
+
+
+ {mode === "replace"
+ ?
}
+
+ {imagePreview === undefined
+ ?
+
+ :
+
+ : null}
+
+
+
+
+
}
+
+
+
+
+
+
+
+ {thoughtExpanded
+ ?
+ );
+ };
+
+ const renderImagePart = (key: string, part: MessagePart): JSX.Element => {
+ const { imageData = "" } = part;
+ const mimeType = part.mimeType ?? "image/png";
+ const source = `data:${mimeType};base64,${imageData}`;
+ return (
+
+ {text}
+
+
+ : null}
+
+ 
+ {isUser
+ ? null
+ : }
+
+ );
+ };
+
+ const renderPart = (
+ part: MessagePart,
+ partIndex: number,
+ ): JSX.Element | null => {
+ const key = `part-${String(partIndex)}`;
+ if (part.type === "thought" && part.text !== undefined && !isUser) {
+ return renderThoughtPart(key, part.text);
+ }
+ if (part.type === "text" && part.text !== undefined && !isEditing) {
+ return (
+ + {part.text} +
+ ); + } + if (part.type === "image" && part.imageData !== undefined) { + return renderImagePart(key, part); + } + return null; + }; + + const editArea = isEditing + ?
+
+
+
+ : null;
+
+ const showUserActions = isUser && (isHovered || isEditing) && !isEditing;
+ const userFooter = showUserActions
+ ?
+
+
+
+
+ {originalTextPart !== undefined && onEdit !== undefined
+ ?
+
+ : null}
+ {onDelete === undefined
+ ? null
+ : }
+
+
+ : null;
+
+ return (
+
+
+ );
+};
+
+export { messageBubble as MessageBubble };
diff --git a/src/components/newThreadModal.tsx b/src/components/newThreadModal.tsx
new file mode 100644
index 0000000..84425b3
--- /dev/null
+++ b/src/components/newThreadModal.tsx
@@ -0,0 +1,183 @@
+/**
+ * @file Modal for selecting a new thread generation mode.
+ * @copyright Naomi Carrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable max-lines-per-function -- Component JSX inherently requires many lines */
+import { useCallback, type JSX, type MouseEvent } from "react";
+import type { Mode } from "../types/index.ts";
+
+interface ModeOption {
+ colour: string;
+ description: string;
+ icon: string;
+ label: string;
+ mode: Mode;
+}
+
+const avatarDescription = [
+ "Generate a square 1:1 portrait.",
+ "Perfect for profile pictures and avatars.",
+].join(" ");
+
+const artDescription = [
+ "Generate wide 16:9 landscape artwork.",
+ "Great for wallpapers and banners.",
+].join(" ");
+
+const replaceDescription = [
+ "Upload an image and have Naomi redrawn in",
+ "anime style with the same pose and outfit.",
+].join(" ");
+
+const modeOptionList: Array
+ {message.parts.map((part: MessagePart, partIndex: number) => {
+ return renderPart(part, partIndex);
+ })}
+ {editArea}
+ {userFooter}
+ {isUser
+ ? null
+ : <>
+ {message.cost === undefined
+ ? null
+ :
+ + {`Cost: $${message.cost.toFixed(4)}`} +
} +
+ {onRetry === undefined
+ ? null
+ : }
+ {onDelete === undefined
+ ? null
+ : }
+
+ }
+
+
+ );
+};
+
+export { threadModal as NewThreadModal };
diff --git a/src/components/settingsModal.tsx b/src/components/settingsModal.tsx
new file mode 100644
index 0000000..4e4fa44
--- /dev/null
+++ b/src/components/settingsModal.tsx
@@ -0,0 +1,154 @@
+/**
+ * @file Settings modal component for configuring the application API key.
+ * @copyright Naomi Carrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable max-lines-per-function -- Component JSX inherently requires many lines */
+import { type ChangeEvent, useCallback, useState, type JSX } from "react";
+
+const overlayClass = [
+ "fixed inset-0 bg-black/70 backdrop-blur-sm",
+ "flex items-center justify-center z-50",
+].join(" ");
+
+const panelClass = [
+ "bg-[#1a1028] border border-purple-900/40",
+ "rounded-2xl p-8 max-w-lg w-full mx-4",
+ "shadow-2xl shadow-purple-900/30",
+].join(" ");
+
+const saveButtonClass = [
+ "bg-gradient-to-r from-purple-600 to-pink-600",
+ "hover:from-purple-500 hover:to-pink-500",
+ "text-white font-semibold py-2 px-6 rounded-xl",
+ "transition-all duration-200 text-sm",
+].join(" ");
+
+const cancelButtonClass = [
+ "bg-transparent border border-purple-900/40",
+ "hover:border-purple-500/60 text-gray-400 hover:text-white",
+ "font-semibold py-2 px-6 rounded-xl",
+ "transition-all duration-200 text-sm",
+].join(" ");
+
+const inputClass = [
+ "flex-1 bg-[#0f0a1a] border border-purple-900/40",
+ "rounded-xl px-4 py-2.5 text-white text-sm",
+ "focus:outline-none focus:border-purple-500/60",
+ "placeholder-gray-600 font-mono",
+].join(" ");
+
+interface SettingsModalProperties {
+ readonly currentApiKey: string;
+ readonly onClose: ()=> void;
+ readonly onSave: (apiKey: string)=> void;
+}
+
+/**
+ * Renders the settings modal for configuring the Gemini API key.
+ * @param props - The component props.
+ * @param props.currentApiKey - The currently configured API key.
+ * @param props.onClose - Callback to close the modal.
+ * @param props.onSave - Callback when the API key is saved.
+ * @returns The JSX element.
+ */
+const settingsModal = ({
+ currentApiKey,
+ onClose,
+ onSave,
+}: SettingsModalProperties): JSX.Element => {
+ const [ apiKey, setApiKey ] = useState(currentApiKey);
+ const [ showKey, setShowKey ] = useState(false);
+
+ const handleApiKeyChange = useCallback(
+ (event: ChangeEvent
+
+
+
+
+ + {"New Thread"} +
+ ++ {"Choose a generation mode to begin:"} +
+ +
+ {modeOptionList.map((option) => {
+ const colours = colourMap[option.colour];
+ const buttonClass = [
+ "flex items-center gap-4 p-5 rounded-xl",
+ "border border-purple-900/30 bg-[#241836]",
+ "text-left transition-all duration-200",
+ colours?.hover ?? "",
+ ].join(" ");
+ return (
+
+ );
+ })}
+
+
+
+ );
+};
+
+export { settingsModal as SettingsModal };
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
new file mode 100644
index 0000000..ffbe636
--- /dev/null
+++ b/src/components/sidebar.tsx
@@ -0,0 +1,324 @@
+/**
+ * @file Sidebar component showing thread list and navigation.
+ * @copyright Naomi Carrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable max-lines-per-function -- Component JSX inherently requires many lines */
+import { getVersion } from "@tauri-apps/api/app";
+import { invoke } from "@tauri-apps/api/core";
+import {
+ useState,
+ useCallback,
+ useEffect,
+ type JSX,
+ type MouseEvent,
+} from "react";
+import type { Mode, Thread } from "../types/index.ts";
+
+const deleteButtonClass = [
+ "shrink-0 text-gray-600 hover:text-red-400",
+ "transition-colors text-sm",
+].join(" ");
+
+const addThreadButtonClass = [
+ "w-full bg-gradient-to-r from-purple-600 to-pink-600",
+ "hover:from-purple-500 hover:to-pink-500",
+ "text-white font-semibold py-2.5 rounded-xl",
+ "transition-all duration-200 text-sm",
+ "shadow-lg shadow-purple-900/20",
+].join(" ");
+
+const settingsButtonClass = [
+ "w-full text-left text-gray-500 hover:text-gray-300",
+ "transition-colors text-sm py-1.5 px-2 rounded-lg hover:bg-purple-900/15",
+].join(" ");
+
+const iconButtonClass = [
+ "flex-1 text-gray-500 hover:text-gray-300",
+ "transition-colors text-sm py-1.5 px-2 rounded-lg",
+ "hover:bg-purple-900/15 text-center",
+].join(" ");
+
+const sidebarClass = [
+ "w-[280px] min-w-[280px] bg-[#1a1028]",
+ "border-r border-purple-900/30 flex flex-col h-full",
+].join(" ");
+
+const modeBadge = (mode: Mode): string => {
+ if (mode === "avatar") {
+ return "bg-purple-900/40 text-purple-300";
+ }
+ if (mode === "art") {
+ return "bg-pink-900/40 text-pink-300";
+ }
+ return "bg-blue-900/40 text-blue-300";
+};
+
+const modeLabel = (mode: Mode): string => {
+ if (mode === "avatar") {
+ return "Avatar";
+ }
+ if (mode === "art") {
+ return "Art";
+ }
+ return "Replace";
+};
+
+const formatDate = (timestamp: number): string => {
+ const date = new Date(timestamp);
+ const now = new Date();
+ const diffMs = now.getTime() - date.getTime();
+ const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+ if (diffDays === 0) {
+ return date.toLocaleTimeString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+ }
+ if (diffDays === 1) {
+ return "Yesterday";
+ }
+ if (diffDays < 7) {
+ return `${String(diffDays)}d ago`;
+ }
+ return date.toLocaleDateString([], {
+ day: "numeric",
+ month: "short",
+ });
+};
+
+interface SidebarProperties {
+ readonly onAbout: ()=> void;
+ readonly onDeleteThread: (threadId: string)=> void;
+ readonly onNewThread: ()=> void;
+ readonly onSelectThread: (thread: Thread)=> void;
+ readonly onSettings: ()=> void;
+ readonly selectedThreadId: string | undefined;
+ readonly threads: Array
+
+
+
+
+ {"Settings"}
+ +
+
+
+
+
+
+
+
+
+
+
+ + {"Your API key is stored locally on this device."} +
+
+
+
+
+
+
+
+ );
+};
+
+export { sidebar as Sidebar };
diff --git a/src/components/threadView.tsx b/src/components/threadView.tsx
new file mode 100644
index 0000000..5cc30b0
--- /dev/null
+++ b/src/components/threadView.tsx
@@ -0,0 +1,549 @@
+/**
+ * @file Thread view component for displaying and sending messages.
+ * @copyright Naomi Carrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable max-lines-per-function -- Component requires complex async logic */
+/* eslint-disable complexity -- Component renders conditionally based on many state values */
+/* eslint-disable max-lines -- Retry and send logic requires many lines */
+/* eslint-disable react/jsx-no-bind -- Per-message index closures require inline handlers in map */
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useRef, useState, type JSX } from "react";
+import { InputArea } from "./inputArea.tsx";
+import { MessageBubble } from "./messageBubble.tsx";
+import type {
+ MessagePart,
+ Mode,
+ PendingInput,
+ Thread,
+ ThreadMessage,
+} from "../types/index.ts";
+
+const headerClass = [
+ "flex items-center gap-3 px-6 py-4",
+ "border-b border-purple-900/30 bg-[#1a1028]/50",
+].join(" ");
+
+const loadingBubbleClass = [
+ "bg-[#241836] border border-purple-900/20",
+ "rounded-2xl rounded-tl-sm px-4 py-3",
+].join(" ");
+
+const errorBubbleClass = [
+ "bg-red-900/20 border border-red-700/40",
+ "rounded-2xl rounded-tl-sm px-4 py-3 max-w-[80%]",
+].join(" ");
+
+const errorRetryButtonClass = [
+ "text-red-400 hover:text-red-200 text-xs mt-2 transition-colors block",
+].join(" ");
+
+const dotOneDelay = { animationDelay: "0ms" };
+const dotTwoDelay = { animationDelay: "150ms" };
+const dotThreeDelay = { animationDelay: "300ms" };
+const dotClass = "w-2 h-2 bg-purple-400 rounded-full animate-bounce";
+
+const modeBadgeColour = (mode: Mode): string => {
+ if (mode === "avatar") {
+ return "bg-purple-900/40 text-purple-300";
+ }
+ if (mode === "art") {
+ return "bg-pink-900/40 text-pink-300";
+ }
+ return "bg-blue-900/40 text-blue-300";
+};
+
+const modeLabel = (mode: Mode): string => {
+ if (mode === "avatar") {
+ return "Avatar";
+ }
+ if (mode === "art") {
+ return "Art";
+ }
+ return "Replace";
+};
+
+interface BuildUserPartsOptions {
+ readonly imageBase64?: string;
+ readonly imageMime?: string;
+ readonly mode: Mode;
+ readonly text: string;
+}
+
+const buildUserParts = ({
+ imageBase64,
+ imageMime,
+ mode,
+ text,
+}: BuildUserPartsOptions): Array
+
+
+
+
+
+
+
+
+
+ + {"Tatsumi"} +
++ {appVersion.length > 0 + ? `v${appVersion}` + : ""} +
+
+ {sortedThreads.length === 0
+ ?
+
+
+ {"No threads yet. Create one to get started!"}
+
+
+ : null}
+
+ {sortedThreads.map((thread) => {
+ const isSelected = selectedThreadId === thread.id;
+ const isHovered = hoveredId === thread.id;
+ const threadItemClass = [
+ "flex items-start gap-3 px-4 py-3",
+ "cursor-pointer transition-all duration-150 relative group",
+ isSelected
+ ? "bg-purple-900/30 border-r-2 border-purple-500"
+ : "hover:bg-purple-900/15",
+ ].join(" ");
+ const badgeClass = [
+ "text-xs px-1.5 py-0.5 rounded-full font-medium shrink-0",
+ modeBadge(thread.mode),
+ ].join(" ");
+
+ return (
+
+
+ );
+ })}
+
+
+
+ {isHovered || isSelected
+ ?
+
+ : null}
+
+
+ {modeLabel(thread.mode)}
+
+
+ + {thread.name} +
++ {formatDate(thread.updatedAt)} +
+
+
+
+
+
+
+
+
+
+ 0}
+ isLoading={isLoading}
+ mode={thread.mode}
+ onInputChange={onPendingInputChange}
+ onSend={handleSend}
+ />
+
+ );
+};
+
+export { threadView as ThreadView };
diff --git a/src/components/welcomeScreen.tsx b/src/components/welcomeScreen.tsx
new file mode 100644
index 0000000..c460b08
--- /dev/null
+++ b/src/components/welcomeScreen.tsx
@@ -0,0 +1,96 @@
+/**
+ * @file Welcome screen displayed when no thread is selected.
+ * @copyright Naomi Carrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable max-lines-per-function -- Component JSX inherently requires many lines */
+import type { JSX } from "react";
+
+const buttonClass = [
+ "bg-gradient-to-r from-purple-600 to-pink-600",
+ "hover:from-purple-500 hover:to-pink-500",
+ "text-white font-semibold py-3 px-8 rounded-xl",
+ "transition-all duration-200 text-lg",
+ "shadow-lg shadow-purple-900/30",
+].join(" ");
+
+const cardClass = "bg-[#241836] rounded-xl p-6 border border-purple-900/30";
+const containerClass = [
+ "flex flex-col items-center justify-center",
+ "h-full gap-8 text-center px-8",
+].join(" ");
+
+const headingClass = [
+ "text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-400",
+ "bg-clip-text text-transparent",
+].join(" ");
+
+interface WelcomeScreenProperties {
+ readonly onNewThread: ()=> void;
+}
+
+/**
+ * Renders the welcome screen with mode descriptions and a new thread button.
+ * @param props - The component props.
+ * @param props.onNewThread - Callback to open the new thread modal.
+ * @returns The JSX element.
+ */
+const welcomeScreen = ({
+ onNewThread,
+}: WelcomeScreenProperties): JSX.Element => {
+ return (
+
+
+
+ + {thread.name} +
+ + {modeLabel(thread.mode)} + +
+ {thread.messages.length === 0
+ ? {
+ handleDelete(messageIndex);
+ }}
+ {...(message.role === "user" && {
+ onEdit: (editedText: string): void => {
+ handleEditCommit(messageIndex, editedText);
+ },
+ })}
+ {...(message.role === "model" && {
+ onRetry: (): void => {
+ handleRetry(messageIndex);
+ },
+ })}
+ />
+ );
+ })}
+
+ {isLoading
+ ?
+
+
+ {"Start by sending your first prompt!"}
+
+
+ : null}
+
+ {thread.messages.map((message, messageIndex) => {
+ return (
+
+
+
+ : null}
+
+ {errorMessage === undefined
+ ? null
+
+ :
+
+
+
+
+
+
+
+
+ {`Generating... (${String(elapsedSeconds)}s)`}
+
+
}
+
+
+
+
+ + {`â ī¸ Error: ${errorMessage}`} +
+ +
+
+ );
+};
+
+export { welcomeScreen as WelcomeScreen };
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..96fdf75
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,42 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+html,
+body,
+#root {
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
+ background-color: #0f0a1a;
+ color: white;
+ -webkit-font-smoothing: antialiased;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+ width: 6px;
+}
+
+::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #3b1f5e;
+ border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #5b3f7e;
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..37c1402
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,24 @@
+/**
+ * @file Application entry point for Tatsumi.
+ * @copyright Naomi Carrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable import/no-unassigned-import -- CSS import has no exports to assign */
+import "./index.css";
+/* eslint-enable import/no-unassigned-import -- CSS import has no exports to assign */
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./app.tsx";
+
+const rootElement = document.getElementById("root");
+
+if (rootElement === null) {
+ throw new Error("Root element not found");
+}
+
+createRoot(rootElement).render(
+
+
+
+ {"â¨"}
+ {"Tatsumi"}
++ { + "Hi! I'm Tatsumi â NHCarrigan's Chief Design Officer. " + + "My siren magic goes into everything I make, and I've poured " + + "it into this too. Tell me how you want Naomi to look, " + + "and I'll bring her to life~" + } +
+
+
+
+
+
+
+ {"đ¤"}
+ + {"Avatar Mode"} +
++ {"Generate a square portrait of Naomi"} +
+
+
+ {"đ¨"}
+ {"Art Mode"}
++ {"Generate a widescreen art piece of Naomi"} +
+
+
+ {"đ"}
+ + {"Replace Mode"} +
++ {"Upload anime girl art and replace her with Naomi"} +
+