047de2b431
Zustand persist generates a new deviceId on the server (no localStorage), then hydrates a different value from localStorage on the client. Add suppressHydrationWarning to the deviceId span since this mismatch is expected. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
"use client";
|
|
import { useRef } from "react";
|
|
import { Button } from "@multica/ui/components/ui/button";
|
|
import { ArrowUpIcon } from "@hugeicons/core-free-icons";
|
|
import { HugeiconsIcon } from "@hugeicons/react";
|
|
|
|
export function ChatInput() {
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
|
|
const handleSubmit = () => {
|
|
const value = textareaRef.current?.value ?? "";
|
|
if (!value.trim()) return;
|
|
console.log("submit:", value);
|
|
textareaRef.current!.value = "";
|
|
// reset height
|
|
textareaRef.current!.style.height = "auto";
|
|
};
|
|
|
|
return (
|
|
<div className="bg-card rounded-xl p-3 pt-1 border border-border">
|
|
<textarea
|
|
ref={textareaRef}
|
|
rows={2}
|
|
placeholder="Type a message..."
|
|
onChange={(e) => {
|
|
e.target.style.height = "auto";
|
|
e.target.style.height = `${Math.min(e.target.scrollHeight, 200)}px`;
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSubmit();
|
|
}
|
|
}}
|
|
className="w-full resize-none bg-transparent px-1 py-1 text-sm text-foreground outline-none placeholder:text-muted-foreground"
|
|
/>
|
|
<div className="flex items-center justify-end pt-2">
|
|
<Button size="icon-sm" onClick={handleSubmit}>
|
|
<HugeiconsIcon icon={ArrowUpIcon} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|