From 3fa9e773c22858103190219262b5e70a0f35f543 Mon Sep 17 00:00:00 2001 From: Manan17 Date: Fri, 20 Feb 2026 22:23:26 +0000 Subject: [PATCH 01/12] fixed the vlm's text only errors --- studio/backend/core/inference/inference.py | 38 +++++++++------------- 1 file changed, 15 insertions(+), 23 deletions(-) diff --git a/studio/backend/core/inference/inference.py b/studio/backend/core/inference/inference.py index 99a7c485e7..11408399c0 100644 --- a/studio/backend/core/inference/inference.py +++ b/studio/backend/core/inference/inference.py @@ -576,8 +576,8 @@ class InferenceBackend: tokenizer = model_info.get("tokenizer") or model_info.get("processor") top_k = self._normalize_top_k(top_k) - if is_vision: - # Vision model generation + if is_vision and image: + # Vision model generation (only when an image is actually provided) yield from self._generate_vision_response( messages, system_prompt, image, temperature, top_p, top_k, min_p, max_new_tokens, repetition_penalty, @@ -601,7 +601,7 @@ class InferenceBackend: # This modifies the tokenizer with the correct template tokenizer = get_chat_template( tokenizer, - self.active_model_name + chat_template=template_name, ) else: logger.info(f"No registered template for {self.active_model_name}, using tokenizer default") @@ -635,6 +635,9 @@ class InferenceBackend: model_info = self.models[self.active_model_name] model = model_info["model"] processor = model_info["processor"] + # FastVisionModel may return a raw tokenizer (e.g. GemmaTokenizerFast) + # instead of a Processor for some models. Safe unwrap for tokenize-only ops. + raw_tokenizer = getattr(processor, "tokenizer", processor) # Extract user message user_message = "" @@ -668,7 +671,7 @@ class InferenceBackend: else: # Text-only for vision model formatted_prompt = self.format_chat_prompt(messages, system_prompt) - inputs = processor.tokenizer(formatted_prompt, return_tensors="pt").to(self.device) + inputs = raw_tokenizer(formatted_prompt, return_tensors="pt").to(self.device) # Stream with TextIteratorStreamer + background thread try: @@ -676,7 +679,7 @@ class InferenceBackend: import threading streamer = TextIteratorStreamer( - processor.tokenizer, + raw_tokenizer, skip_prompt=True, skip_special_tokens=True, timeout=0.2, @@ -1116,24 +1119,13 @@ class InferenceBackend: return img def _clean_generated_text(self, text: str) -> str: - import re - - text = re.sub(r'<\|start_header_id\|>.*?<\|end_header_id\|>', '', text) - text = re.sub(r'<\|eot_id\|>', '', text) - text = re.sub(r'<\|begin_of_text\|>', '', text) - - text = re.sub(r'\[INST\].*?\[/INST\]', '', text) - text = re.sub(r'|', '', text) - - # Clean ChatML tokens (used by Qwen2-VL and similar models) - text = re.sub(r'<\|im_start\|>.*?<\|im_end\|>', '', text) - text = re.sub(r'<\|im_end\|>', '', text) - text = re.sub(r'<\|im_start\|>', '', text) - - text = re.sub(r'^\s*(assistant|user|system):\s*', '', text, flags=re.IGNORECASE) - text = text.strip() - - return text + """Strip leaked special tokens using the tokenizer's own token list.""" + tokenizer = self.models.get(self.active_model_name, {}).get("tokenizer") + if tokenizer: + for token in getattr(tokenizer, "all_special_tokens", []): + if token in text: + text = text.replace(token, "") + return text.strip() def _load_chat_template_info(self, model_name: str): if model_name not in self.models or not self.models[model_name].get("tokenizer"): From 0a3beade35bbcd8b8afdf3f53cbae147b142123c Mon Sep 17 00:00:00 2001 From: samit Date: Fri, 20 Feb 2026 15:49:33 -0800 Subject: [PATCH 02/12] updated to edit loading as downloading model --- .../frontend/src/features/chat/chat-page.tsx | 15 +++++++++++- .../chat/hooks/use-chat-model-runtime.ts | 24 ++++++++++++------- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx index 34443ec87f..1184183088 100644 --- a/studio/frontend/src/features/chat/chat-page.tsx +++ b/studio/frontend/src/features/chat/chat-page.tsx @@ -5,6 +5,7 @@ import { } from "@/components/assistant-ui/model-selector"; import { Thread } from "@/components/assistant-ui/thread"; import { Button } from "@/components/ui/button"; +import { Spinner } from "@/components/ui/spinner"; import { SidebarProvider, SidebarTrigger, useSidebar } from "@/components/ui/sidebar"; import { Sheet, @@ -283,7 +284,8 @@ export function ChatPage(): ReactElement { const modelsFromStore = useChatRuntimeStore((state) => state.models); const lorasFromStore = useChatRuntimeStore((state) => state.loras); const modelsError = useChatRuntimeStore((state) => state.modelsError); - const { refresh, selectModel, ejectModel } = useChatModelRuntime(); + const { refresh, selectModel, ejectModel, loadingModel } = + useChatModelRuntime(); const refreshRef = useRef(refresh); const selectModelRef = useRef(selectModel); @@ -518,6 +520,17 @@ export function ChatPage(): ReactElement { contentDataTour="chat-model-selector-popover" className="max-w-[62vw] sm:max-w-none" /> + {loadingModel ? ( +
+ + + Downloading model… + +
+ ) : null} {modelsError && (
diff --git a/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts b/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts index 03aba01736..175ccfba65 100644 --- a/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts +++ b/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts @@ -1,4 +1,4 @@ -import { useCallback } from "react"; +import { useCallback, useState } from "react"; import { toast } from "sonner"; import { getInferenceStatus, @@ -116,6 +116,11 @@ export function useChatModelRuntime() { const setCheckpoint = useChatRuntimeStore((state) => state.setCheckpoint); const clearCheckpoint = useChatRuntimeStore((state) => state.clearCheckpoint); + const [loadingModel, setLoadingModel] = useState<{ + id: string; + displayName: string; + } | null>(null); + const refresh = useCallback(async () => { setModelsError(null); try { @@ -157,6 +162,7 @@ export function useChatModelRuntime() { const displayName = model?.name || lora?.name || modelId; setModelsError(null); + setLoadingModel({ id: modelId, displayName }); try { async function performLoad(): Promise { if (params.checkpoint) { @@ -176,19 +182,20 @@ export function useChatModelRuntime() { await refresh(); } - let description = "Base model selected."; - if (isLora) { - description = "Fine-tuned (LoRA) selected."; - } + const loadPromise = performLoad().finally(() => { + setLoadingModel(null); + }); - await toast.promise(performLoad(), { - loading: `Loading ${displayName}`, + await toast.promise(loadPromise, { + loading: "Downloading model…", success: `${displayName} loaded`, error: (err) => err instanceof Error ? err.message : "Failed to load model", - description, + description: + "This may include downloading. Large models can take a while.", }); } catch (error) { + setLoadingModel(null); const message = error instanceof Error ? error.message : "Failed to load model"; setModelsError(message); @@ -227,5 +234,6 @@ export function useChatModelRuntime() { refresh, selectModel, ejectModel, + loadingModel, }; } From 08c3c80d3153a34d654d9b58160bdb7520fe80c0 Mon Sep 17 00:00:00 2001 From: samit Date: Fri, 20 Feb 2026 17:25:03 -0800 Subject: [PATCH 03/12] added vram fit indicator to models in chat --- .../assistant-ui/model-selector/pickers.tsx | 120 +++++++++++++++--- 1 file changed, 105 insertions(+), 15 deletions(-) diff --git a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx index b90cdd0e3b..e023e36e2b 100644 --- a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx +++ b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx @@ -1,7 +1,14 @@ import { Input } from "@/components/ui/input"; import { Spinner } from "@/components/ui/spinner"; -import { useDebouncedValue, useHfModelSearch, useInfiniteScroll } from "@/hooks"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { useDebouncedValue, useGpuInfo, useHfModelSearch, useInfiniteScroll } from "@/hooks"; import { cn, formatCompact } from "@/lib/utils"; +import type { VramFitStatus } from "@/lib/vram"; +import { checkVramFit, estimateLoadingVram } from "@/lib/vram"; import { Search01Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useMemo, useState, type ReactNode } from "react"; @@ -28,27 +35,77 @@ function ModelRow({ meta, selected, onClick, + vramStatus, + vramEst, + gpuGb, }: { label: string; meta?: string; selected?: boolean; onClick: () => void; + vramStatus?: VramFitStatus | null; + vramEst?: number; + gpuGb?: number; }) { - return ( + const exceeds = vramStatus === "exceeds"; + const showVramTooltip = + vramEst != null && vramEst > 0 && gpuGb != null && gpuGb > 0; + const vramTooltipText = + showVramTooltip && vramStatus + ? exceeds + ? `Needs ~${vramEst}GB VRAM (GPU: ${gpuGb}GB)` + : vramStatus === "tight" + ? `~${vramEst}GB VRAM (tight fit on ${gpuGb}GB)` + : `~${vramEst}GB VRAM` + : null; + + const content = ( ); + + if (vramTooltipText) { + return ( + + {content} + + {label} + {vramTooltipText} + + + ); + } + return content; } export function HubModelPicker({ @@ -60,6 +117,7 @@ export function HubModelPicker({ value?: string; onSelect: (id: string, meta: ModelSelectorChangeMeta) => void; }) { + const gpu = useGpuInfo(); const [query, setQuery] = useState(""); const debouncedQuery = useDebouncedValue(query); const { results, isLoading, isLoadingMore, fetchMore } = useHfModelSearch( @@ -94,6 +152,30 @@ export function HubModelPicker({ [results], ); + const vramMap = useMemo(() => { + const map = new Map< + string, + { est: number; status: VramFitStatus | null; detail: string | null } + >(); + for (const r of results) { + const detail = r.totalParams + ? formatCompact(r.totalParams) + : r.downloads != null + ? `↓${formatCompact(r.downloads)}` + : null; + if (r.totalParams) { + const est = estimateLoadingVram(r.totalParams, "qlora"); + const status = gpu.available + ? checkVramFit(est, gpu.memoryTotalGb) + : null; + map.set(r.id, { est, status, detail }); + } else { + map.set(r.id, { est: 0, status: null, detail }); + } + } + return map; + }, [results, gpu]); + const { scrollRef, sentinelRef } = useInfiniteScroll(fetchMore, results.length); return ( @@ -144,15 +226,23 @@ export function HubModelPicker({ No matching models.
) : ( - hfIds.map((id) => ( - onSelect(id, { source: "hub", isLora: false })} - /> - )) + hfIds.map((id) => { + const vram = vramMap.get(id); + return ( + + onSelect(id, { source: "hub", isLora: false }) + } + vramStatus={vram?.status ?? null} + vramEst={vram?.est} + gpuGb={gpu.available ? gpu.memoryTotalGb : undefined} + /> + ); + }) )}
{isLoadingMore ? ( From f6ebeb1d42b8886cce9c0a8eb6dbf0e2d712a031 Mon Sep 17 00:00:00 2001 From: Manan17 Date: Sat, 21 Feb 2026 01:57:05 +0000 Subject: [PATCH 04/12] Mapping proper tokenizer for VLMs --- studio/backend/core/inference/inference.py | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/studio/backend/core/inference/inference.py b/studio/backend/core/inference/inference.py index 11408399c0..62b0b031ee 100644 --- a/studio/backend/core/inference/inference.py +++ b/studio/backend/core/inference/inference.py @@ -574,6 +574,8 @@ class InferenceBackend: model_info = self.models[self.active_model_name] is_vision = model_info.get("is_vision", False) tokenizer = model_info.get("tokenizer") or model_info.get("processor") + # Unwrap processor → raw tokenizer for VLMs on the text path + tokenizer = getattr(tokenizer, "tokenizer", tokenizer) top_k = self._normalize_top_k(top_k) if is_vision and image: @@ -769,7 +771,11 @@ class InferenceBackend: model_info = self.models[self.active_model_name] model = model_info["model"] + # For VLMs the stored "tokenizer" is actually the processor. + # Unwrap to get the real tokenizer so TextIteratorStreamer's + # skip_prompt / skip_special_tokens work correctly. tokenizer = model_info["tokenizer"] + tokenizer = getattr(tokenizer, "tokenizer", tokenizer) try: inputs = tokenizer(prompt, return_tensors="pt").to(model.device) @@ -879,6 +885,7 @@ class InferenceBackend: chat_template_info = self.models[self.active_model_name].get("chat_template_info", {}) tokenizer = self.models[self.active_model_name]["tokenizer"] + tokenizer = getattr(tokenizer, "tokenizer", tokenizer) chat_messages = [] From c051e3d532f7b3b37ba3a302efef03c7090e4bf1 Mon Sep 17 00:00:00 2001 From: Roland Tannous Date: Sat, 21 Feb 2026 04:40:29 +0000 Subject: [PATCH 05/12] fix: load proper vision processor from base model when FastVisionModel returns raw tokenizer, add tokenize=False to vision chat template --- studio/backend/core/inference/inference.py | 126 +++++++++++++-------- 1 file changed, 80 insertions(+), 46 deletions(-) diff --git a/studio/backend/core/inference/inference.py b/studio/backend/core/inference/inference.py index 62b0b031ee..6423e7a128 100644 --- a/studio/backend/core/inference/inference.py +++ b/studio/backend/core/inference/inference.py @@ -107,6 +107,23 @@ class InferenceBackend: # Apply inference optimization FastVisionModel.for_inference(model) + # FastVisionModel may return a raw tokenizer (e.g. GemmaTokenizerFast) + # instead of a proper Processor for some models (e.g. Gemma-3). + # In that case, load the real processor from the base model. + from transformers import ProcessorMixin + if not (isinstance(processor, ProcessorMixin) or hasattr(processor, "image_processor")): + processor_source = config.base_model if config.is_lora else config.identifier + logger.warning( + f"FastVisionModel returned {type(processor).__name__} (no image_processor) " + f"for '{model_name}' — loading proper processor from '{processor_source}'" + ) + from transformers import AutoProcessor + processor = AutoProcessor.from_pretrained( + processor_source, + token=hf_token if hf_token and hf_token.strip() else None, + ) + logger.info(f"Loaded {type(processor).__name__} from {processor_source}") + self.models[model_name]["model"] = model self.models[model_name]["tokenizer"] = processor self.models[model_name]["processor"] = processor @@ -580,55 +597,72 @@ class InferenceBackend: if is_vision and image: # Vision model generation (only when an image is actually provided) - yield from self._generate_vision_response( - messages, system_prompt, image, - temperature, top_p, top_k, min_p, max_new_tokens, repetition_penalty, - cancel_event=cancel_event, + # Check that the stored processor can actually handle images. + # FastVisionModel may return a raw tokenizer (e.g. GemmaTokenizerFast) + # instead of a proper ProcessorMixin for some models (e.g. Gemma-3). + from transformers import ProcessorMixin + processor = model_info.get("processor") + has_image_processing = ( + processor is not None + and (isinstance(processor, ProcessorMixin) or hasattr(processor, "image_processor")) ) - else: - # Text model: Use training pipeline approach - # Messages are already in ChatML format from eval.py - - # Step 1: Apply get_chat_template if model is in mapper - try: - from utils.datasets import MODEL_TO_TEMPLATE_MAPPER, get_tokenizer_chat_template - - model_name_lower = self.active_model_name.lower() - - # Check if model has a registered template - if model_name_lower in MODEL_TO_TEMPLATE_MAPPER: - template_name = MODEL_TO_TEMPLATE_MAPPER[model_name_lower] - logger.info(f"Applying chat template '{template_name}' for {self.active_model_name}") - - # This modifies the tokenizer with the correct template - tokenizer = get_chat_template( - tokenizer, - chat_template=template_name, - ) - else: - logger.info(f"No registered template for {self.active_model_name}, using tokenizer default") - except Exception as e: - logger.warning(f"Could not apply get_chat_template: {e}") - - # Step 2: Format with tokenizer.apply_chat_template() - try: - formatted_prompt = tokenizer.apply_chat_template( - messages, - tokenize=False, - add_generation_prompt=True + if has_image_processing: + yield from self._generate_vision_response( + messages, system_prompt, image, + temperature, top_p, top_k, min_p, max_new_tokens, repetition_penalty, + cancel_event=cancel_event, + ) + return + else: + logger.warning( + f"Model '{self.active_model_name}' is marked as vision but its processor " + f"({type(processor).__name__}) has no image_processor — " + f"falling back to text-only generation (image will be ignored)." ) - logger.debug(f"Formatted prompt: {formatted_prompt[:200]}...") - except Exception as e: - logger.error(f"Error applying chat template: {e}") - # Fallback to manual formatting - formatted_prompt = self.format_chat_prompt(messages, system_prompt) - # Step 3: Generate - yield from self.generate_stream( - formatted_prompt, temperature, top_p, top_k, min_p, max_new_tokens, repetition_penalty, - cancel_event=cancel_event, - _adapter_state=_adapter_state, + # Text path: Use training pipeline approach + # Messages are already in ChatML format from eval.py + + # Step 1: Apply get_chat_template if model is in mapper + try: + from utils.datasets import MODEL_TO_TEMPLATE_MAPPER, get_tokenizer_chat_template + + model_name_lower = self.active_model_name.lower() + + # Check if model has a registered template + if model_name_lower in MODEL_TO_TEMPLATE_MAPPER: + template_name = MODEL_TO_TEMPLATE_MAPPER[model_name_lower] + logger.info(f"Applying chat template '{template_name}' for {self.active_model_name}") + + # This modifies the tokenizer with the correct template + tokenizer = get_chat_template( + tokenizer, + chat_template=template_name, + ) + else: + logger.info(f"No registered template for {self.active_model_name}, using tokenizer default") + except Exception as e: + logger.warning(f"Could not apply get_chat_template: {e}") + + # Step 2: Format with tokenizer.apply_chat_template() + try: + formatted_prompt = tokenizer.apply_chat_template( + messages, + tokenize=False, + add_generation_prompt=True ) + logger.debug(f"Formatted prompt: {formatted_prompt[:200]}...") + except Exception as e: + logger.error(f"Error applying chat template: {e}") + # Fallback to manual formatting + formatted_prompt = self.format_chat_prompt(messages, system_prompt) + + # Step 3: Generate + yield from self.generate_stream( + formatted_prompt, temperature, top_p, top_k, min_p, max_new_tokens, repetition_penalty, + cancel_event=cancel_event, + _adapter_state=_adapter_state, + ) def _generate_vision_response(self, messages, system_prompt, image, temperature, top_p, top_k, min_p, max_new_tokens, @@ -663,7 +697,7 @@ class InferenceBackend: } ] - input_text = processor.apply_chat_template(vision_messages, add_generation_prompt=True) + input_text = processor.apply_chat_template(vision_messages, add_generation_prompt=True, tokenize=False) inputs = processor( image, input_text, From 97f40bdc58c55bf8be66a58c53cf09dc7a2aa284 Mon Sep 17 00:00:00 2001 From: samit Date: Fri, 20 Feb 2026 22:14:27 -0800 Subject: [PATCH 06/12] Added dictate and add attachments feature --- .../src/features/chat/api/chat-adapter.ts | 9 + .../src/features/chat/shared-composer.tsx | 246 +++++++++++++++++- 2 files changed, 243 insertions(+), 12 deletions(-) diff --git a/studio/frontend/src/features/chat/api/chat-adapter.ts b/studio/frontend/src/features/chat/api/chat-adapter.ts index 8e9e7df0e0..af8f10156f 100644 --- a/studio/frontend/src/features/chat/api/chat-adapter.ts +++ b/studio/frontend/src/features/chat/api/chat-adapter.ts @@ -65,6 +65,15 @@ function findLatestUserImageBase64(messages: RunMessages): string | undefined { continue; } + // Image in message.content (e.g. compare view appends content with image parts) + for (const part of message.content ?? []) { + if (part.type === "image" && "image" in part) { + const encoded = extractImageBase64(part.image); + if (encoded) return encoded; + } + } + + // Image in message.attachments (e.g. chat composer) if ("attachments" in message && (message.attachments?.length ?? 0) > 0) { for (const attachment of message.attachments ?? []) { for (const part of attachment.content ?? []) { diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx index f849d3f5b7..5ddcb3947f 100644 --- a/studio/frontend/src/features/chat/shared-composer.tsx +++ b/studio/frontend/src/features/chat/shared-composer.tsx @@ -1,25 +1,103 @@ import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button"; import { Button } from "@/components/ui/button"; import { useAui } from "@assistant-ui/react"; -import { ArrowUpIcon, SquareIcon } from "lucide-react"; +import { ArrowUpIcon, MicIcon, PlusIcon, SquareIcon, XIcon } from "lucide-react"; import { type KeyboardEvent, type MutableRefObject, type ReactElement, type ReactNode, createContext, + useCallback, useContext, useEffect, useRef, useState, } from "react"; +export type CompareMessagePart = + | { type: "text"; text: string } + | { type: "image"; image: string }; + export interface CompareHandle { - append: (content: { type: "text"; text: string }[]) => void; + append: (content: CompareMessagePart[]) => void; cancel: () => void; isRunning: () => boolean; } +const IMAGE_ACCEPT = "image/jpeg,image/png,image/webp,image/gif"; +const MAX_IMAGE_SIZE = 20 * 1024 * 1024; + +function fileToBase64DataURL(file: File): Promise { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => resolve(reader.result as string); + reader.onerror = () => reject(new Error("Failed to read image file")); + reader.readAsDataURL(file); + }); +} + +function useDictation( + textareaRef: React.RefObject, + setText: (value: string | ((prev: string) => string)) => void, +) { + const [isDictating, setIsDictating] = useState(false); + const recognitionRef = useRef(null); + + const start = useCallback(() => { + const SpeechRecognitionAPI = + typeof window !== "undefined" && + (window.SpeechRecognition ?? (window as unknown as { webkitSpeechRecognition?: typeof SpeechRecognition }).webkitSpeechRecognition); + if (!SpeechRecognitionAPI) { + return; + } + const recognition = new SpeechRecognitionAPI() as SpeechRecognition; + recognition.continuous = true; + recognition.interimResults = true; + recognition.lang = "en-US"; + recognition.onresult = (event: SpeechRecognitionEvent) => { + const last = event.resultIndex; + const result = event.results[last]; + if (!result?.isFinal) return; + const transcript = result[0]?.transcript?.trim(); + if (transcript) { + setText((prev) => (prev ? `${prev} ${transcript}` : transcript)); + } + }; + recognition.onerror = () => { + setIsDictating(false); + }; + recognition.onend = () => { + setIsDictating(false); + }; + recognition.start(); + recognitionRef.current = recognition; + setIsDictating(true); + }, [setText]); + + const stop = useCallback(() => { + if (recognitionRef.current) { + recognitionRef.current.stop(); + recognitionRef.current = null; + } + setIsDictating(false); + }, []); + + useEffect(() => { + return () => { + if (recognitionRef.current) { + recognitionRef.current.abort(); + } + }; + }, []); + + const supported = + typeof window !== "undefined" && + !!(window.SpeechRecognition ?? (window as unknown as { webkitSpeechRecognition?: unknown }).webkitSpeechRecognition); + + return { isDictating, start, stop, supported }; +} + export type CompareHandles = MutableRefObject>; const CompareHandlesContext = createContext(null); @@ -66,6 +144,37 @@ export function RegisterCompareHandle({ return null; } +type PendingImage = { id: string; file: File }; + +function PendingImageThumb({ + file, + onRemove, +}: { + file: File; + onRemove: () => void; +}): ReactElement { + const [src, setSrc] = useState(null); + useEffect(() => { + const url = URL.createObjectURL(file); + setSrc(url); + return () => URL.revokeObjectURL(url); + }, [file]); + if (!src) return
; + return ( +
+ {file.name} + +
+ ); +} + export function SharedComposer({ handlesRef, }: { @@ -73,7 +182,15 @@ export function SharedComposer({ }): ReactElement { const [text, setText] = useState(""); const [running, setRunning] = useState(false); + const [pendingImages, setPendingImages] = useState([]); + const [dragging, setDragging] = useState(false); const textareaRef = useRef(null); + const fileInputRef = useRef(null); + + const { isDictating, start: startDictation, stop: stopDictation, supported: dictationSupported } = useDictation( + textareaRef, + setText, + ); useEffect(() => { const id = setInterval(() => { @@ -84,23 +201,50 @@ export function SharedComposer({ return () => clearInterval(id); }, [handlesRef]); - function send() { - const msg = text.trim(); - if (!msg) { - return; + const addFiles = useCallback((files: FileList | null) => { + if (!files?.length) return; + const next: PendingImage[] = []; + for (let i = 0; i < files.length; i++) { + const file = files[i]; + if (!file?.type.match(/^image\/(jpeg|png|webp|gif)$/i)) continue; + if (file.size > MAX_IMAGE_SIZE) continue; + next.push({ id: crypto.randomUUID(), file }); } + setPendingImages((prev) => [...prev, ...next]); + }, []); + + const removePendingImage = useCallback((id: string) => { + setPendingImages((prev) => prev.filter((p) => p.id !== id)); + }, []); + + async function send() { + const msg = text.trim(); + if (!msg && pendingImages.length === 0) return; + + const content: CompareMessagePart[] = []; + for (const { file } of pendingImages) { + try { + const image = await fileToBase64DataURL(file); + content.push({ type: "image", image }); + } catch { + // skip failed image + } + } + if (msg) { + content.push({ type: "text", text: msg }); + } + if (content.length === 0) return; - const content: { type: "text"; text: string }[] = [ - { type: "text", text: msg }, - ]; for (const handle of Object.values(handlesRef.current)) { handle.append(content); } setText(""); + setPendingImages([]); textareaRef.current?.focus(); } function stop() { + if (isDictating) stopDictation(); for (const handle of Object.values(handlesRef.current)) { handle.cancel(); } @@ -115,8 +259,33 @@ export function SharedComposer({ } } + const canSend = (text.trim().length > 0 || pendingImages.length > 0) && !running; + return ( -
+
{ + e.preventDefault(); + setDragging(true); + }} + onDragLeave={() => setDragging(false)} + onDrop={(e) => { + e.preventDefault(); + setDragging(false); + addFiles(e.dataTransfer.files); + }} + > + {pendingImages.length > 0 && ( +
+ {pendingImages.map(({ id, file }) => ( + removePendingImage(id)} + /> + ))} +
+ )}