orcheo-canvas 0.0.1

package/src/features/shared/components/chat-input/attachment-preview.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { Button } from "@/design-system/ui/button";
+import { FileIcon, VideoIcon, XIcon } from "lucide-react";
+import type { Attachment } from "@/features/shared/components/chat-input/chat-input-types";
+
+interface AttachmentPreviewProps {
+  attachments: Attachment[];
+  onRemoveAttachment: (id: string) => void;
+}
+
+export default function AttachmentPreview({
+  attachments,
+  onRemoveAttachment,
+}: AttachmentPreviewProps) {
+  if (attachments.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2 rounded-md bg-muted/50 p-2">
+      {attachments.map((attachment) => (
+        <div
+          key={attachment.id}
+          className="group relative overflow-hidden rounded-md border border-border"
+        >
+          {attachment.type === "image" && attachment.previewUrl ? (
+            <div className="relative h-16 w-16">
+              <img
+                src={attachment.previewUrl}
+                alt={attachment.file.name}
+                className="h-full w-full object-cover"
+              />
+              <OverlayRemoveButton
+                onRemove={() => onRemoveAttachment(attachment.id)}
+              />
+            </div>
+          ) : attachment.type === "video" && attachment.previewUrl ? (
+            <div className="relative flex h-16 w-16 items-center justify-center bg-black">
+              <VideoIcon className="h-6 w-6 text-white" />
+              <OverlayRemoveButton
+                onRemove={() => onRemoveAttachment(attachment.id)}
+              />
+            </div>
+          ) : (
+            <div className="relative flex h-16 w-16 flex-col items-center justify-center bg-muted p-1">
+              <FileIcon className="h-6 w-6" />
+              <div className="w-full truncate text-center text-xs">
+                {attachment.file.name.split(".").pop()}
+              </div>
+              <OverlayRemoveButton
+                onRemove={() => onRemoveAttachment(attachment.id)}
+              />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface OverlayRemoveButtonProps {
+  onRemove: () => void;
+}
+
+function OverlayRemoveButton({ onRemove }: OverlayRemoveButtonProps) {
+  return (
+    <div className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-6 w-6 text-white"
+        onClick={onRemove}
+      >
+        <XIcon className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}

package/src/features/shared/components/chat-input/chat-input-types.ts

@@ -0,0 +1,13 @@
+export interface Attachment {
+  id: string;
+  file: File;
+  type: "image" | "video" | "file";
+  previewUrl?: string;
+}
+
+export interface ChatInputProps {
+  onSendMessage: (message: string, attachments: Attachment[]) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+}

package/src/features/shared/components/chat-input/emoji-picker.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/design-system/ui/popover";
+import { SmileIcon } from "lucide-react";
+
+const COMMON_EMOJIS = [
+  "😀",
+  "😃",
+  "😄",
+  "😁",
+  "😆",
+  "😅",
+  "😂",
+  "🤣",
+  "😊",
+  "😇",
+  "🙂",
+  "🙃",
+  "😉",
+  "😌",
+  "😍",
+  "🥰",
+  "😘",
+  "😗",
+  "😙",
+  "😚",
+  "😋",
+  "😛",
+  "😝",
+  "😜",
+  "🤪",
+  "🤨",
+  "🧐",
+  "🤓",
+  "😎",
+  "🤩",
+  "🥳",
+  "😏",
+  "😒",
+  "😞",
+  "😔",
+  "😟",
+  "😕",
+  "🙁",
+  "☹️",
+  "😣",
+  "👍",
+  "👎",
+  "👌",
+  "✌️",
+  "🤞",
+  "🤟",
+  "🤘",
+  "👏",
+  "🙌",
+  "👐",
+  "❤️",
+  "🧡",
+  "💛",
+  "💚",
+  "💙",
+  "💜",
+  "🖤",
+  "❣️",
+  "💕",
+  "💞",
+];
+
+interface EmojiPickerProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelect: (emoji: string) => void;
+}
+
+export default function EmojiPicker({
+  isOpen,
+  onOpenChange,
+  onSelect,
+}: EmojiPickerProps) {
+  return (
+    <Popover open={isOpen} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
+          <SmileIcon className="h-5 w-5 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-2" align="end">
+        <div className="grid grid-cols-10 gap-1">
+          {COMMON_EMOJIS.map((emoji) => (
+            <button
+              key={emoji}
+              className="flex h-8 w-8 items-center justify-center rounded-md text-lg hover:bg-muted"
+              onClick={() => onSelect(emoji)}
+            >
+              {emoji}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/features/shared/components/chat-input.tsx

@@ -0,0 +1,234 @@
+import React, { useState, useRef, ChangeEvent, KeyboardEvent } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import { Button } from "@/design-system/ui/button";
+import { Textarea } from "@/design-system/ui/textarea";
+import { MicIcon, PaperclipIcon, SendIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import AttachmentPreview from "@/features/shared/components/chat-input/attachment-preview";
+import EmojiPicker from "@/features/shared/components/chat-input/emoji-picker";
+import type {
+  Attachment,
+  ChatInputProps,
+} from "@/features/shared/components/chat-input/chat-input-types";
+
+type SpeechRecognitionConstructor = new () => SpeechRecognition;
+
+interface SpeechRecognitionWindow extends Window {
+  SpeechRecognition?: SpeechRecognitionConstructor;
+  webkitSpeechRecognition?: SpeechRecognitionConstructor;
+}
+
+export default function ChatInput({
+  onSendMessage,
+  disabled = false,
+  placeholder = "Type a message...",
+  className,
+}: ChatInputProps) {
+  const [message, setMessage] = useState("");
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSendMessage = () => {
+    if (message.trim() || attachments.length > 0) {
+      onSendMessage(message, attachments);
+      setMessage("");
+      setAttachments([]);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    const newAttachments: Attachment[] = [];
+
+    Array.from(files).forEach((file) => {
+      const id = `attachment-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+      const type = file.type.startsWith("image/")
+        ? "image"
+        : file.type.startsWith("video/")
+          ? "video"
+          : "file";
+
+      const attachment: Attachment = {
+        id,
+        file,
+        type,
+      };
+
+      if (type === "image" || type === "video") {
+        attachment.previewUrl = URL.createObjectURL(file);
+      }
+
+      newAttachments.push(attachment);
+    });
+
+    setAttachments([...attachments, ...newAttachments]);
+
+    // Reset the file input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleRemoveAttachment = (id: string) => {
+    setAttachments(attachments.filter((attachment) => attachment.id !== id));
+  };
+
+  const handleEmojiSelect = (emoji: string) => {
+    setMessage((prev) => prev + emoji);
+    setIsEmojiPickerOpen(false);
+  };
+
+  const handleVoiceInput = () => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const recognitionCtor =
+      (window as SpeechRecognitionWindow).SpeechRecognition ??
+      (window as SpeechRecognitionWindow).webkitSpeechRecognition;
+
+    if (!recognitionCtor) {
+      alert(
+        "Speech recognition is not supported in your browser. Try using Chrome.",
+      );
+      return;
+    }
+
+    const recognition = new recognitionCtor();
+    recognition.lang = "en-US";
+    recognition.continuous = false;
+    recognition.interimResults = false;
+
+    recognition.onstart = () => {
+      setIsRecording(true);
+    };
+
+    recognition.onresult = (event: SpeechRecognitionEvent) => {
+      const transcript = event.results[0][0].transcript;
+      setMessage((prev) => `${prev} ${transcript}`.trim());
+    };
+
+    recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
+      console.error("Speech recognition error", event.error);
+      setIsRecording(false);
+    };
+
+    recognition.onend = () => {
+      setIsRecording(false);
+    };
+
+    if (!isRecording) {
+      recognition.start();
+    } else {
+      recognition.stop();
+    }
+  };
+
+  return (
+    <div className={cn("flex flex-col gap-2 p-2", className)}>
+      <AttachmentPreview
+        attachments={attachments}
+        onRemoveAttachment={handleRemoveAttachment}
+      />
+
+      <div className="flex items-end gap-2">
+        <div className="flex-1 relative">
+          <Textarea
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            className="min-h-[60px] max-h-[200px] resize-none pr-10"
+          />
+
+          <div className="absolute bottom-2 right-2">
+            <EmojiPicker
+              isOpen={isEmojiPickerOpen}
+              onOpenChange={setIsEmojiPickerOpen}
+              onSelect={handleEmojiSelect}
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={cn(
+                    "rounded-full",
+                    isRecording &&
+                      "bg-red-100 text-red-500 dark:bg-red-900/30 dark:text-red-400",
+                  )}
+                  onClick={handleVoiceInput}
+                  disabled={disabled}
+                >
+                  <MicIcon className="h-5 w-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {isRecording ? "Stop recording" : "Voice input"}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="rounded-full"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={disabled}
+                >
+                  <PaperclipIcon className="h-5 w-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Attach file</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            className="hidden"
+            multiple
+            accept="image/*,video/*,application/*"
+            disabled={disabled}
+          />
+
+          <Button
+            onClick={handleSendMessage}
+            disabled={
+              disabled || (message.trim() === "" && attachments.length === 0)
+            }
+            className="rounded-full"
+          >
+            <SendIcon className="h-5 w-5" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}