Paste clipboard img (mckaywrigley#1119)

* Support for paste imgs from clipboard * add image copy/paste --------- Co-authored-by: Murillo Camargo <[email protected]>
bpalagi · Jan 12, 2024 · 8a4ffbd · 8a4ffbd
1 parent 6a6cd0e
commit 8a4ffbd
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 13 deletions.
diff --git a/components/chat/chat-files-display.tsx b/components/chat/chat-files-display.tsx
@@ -40,12 +40,11 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
   const [selectedImage, setSelectedImage] = useState<MessageImage | null>(null)
   const [showPreview, setShowPreview] = useState(false)
 
-  const combinedImages = [
+  const messageImages = [
     ...newMessageImages.filter(
       image =>
         !chatImages.some(chatImage => chatImage.messageId === image.messageId)
-    ),
-    ...chatImages
+    )
   ]
 
   const combinedChatFiles = [
@@ -55,7 +54,7 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
     ...chatFiles
   ]
 
-  const combinedMessageFiles = [...combinedImages, ...combinedChatFiles]
+  const combinedMessageFiles = [...messageImages, ...combinedChatFiles]
 
   const getLinkAndView = async (file: ChatFile) => {
     const fileRecord = files.find(f => f.id === file.id)
@@ -108,7 +107,7 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
 
         <div className="overflow-auto">
           <div className="flex flex-wrap gap-6 truncate pt-2">
-            {combinedImages.map((image, index) => (
+            {messageImages.map((image, index) => (
               <div
                 key={index}
                 className="relative flex h-[64px] cursor-pointer items-center space-x-4 rounded-xl hover:opacity-50"

diff --git a/components/chat/chat-helpers/index.ts b/components/chat/chat-helpers/index.ts
@@ -371,7 +371,10 @@ export const handleCreateMessages = async (
   isRegeneration: boolean,
   retrievedFileItems: Tables<"file_items">[],
   setChatMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>,
-  setChatFileItems: React.Dispatch<React.SetStateAction<Tables<"file_items">[]>>
+  setChatFileItems: React.Dispatch<
+    React.SetStateAction<Tables<"file_items">[]>
+  >,
+  setChatImages: React.Dispatch<React.SetStateAction<MessageImage[]>>
 ) => {
   const finalUserMessage: TablesInsert<"messages"> = {
     chat_id: currentChat.id,
@@ -432,7 +435,15 @@ export const handleCreateMessages = async (
       Boolean
     ) as string[]
 
-    updateMessage(createdMessages[0].id, {
+    setChatImages(prevImages => [
+      ...prevImages,
+      ...newMessageImages.map(obj => ({
+        ...obj,
+        messageId: createdMessages[0].id
+      }))
+    ])
+
+    const updatedMessage = await updateMessage(createdMessages[0].id, {
       ...createdMessages[0],
       image_paths: paths
     })
@@ -450,7 +461,7 @@ export const handleCreateMessages = async (
     finalChatMessages = [
       ...chatMessages,
       {
-        message: createdMessages[0],
+        message: updatedMessage,
         fileItems: []
       },
       {

diff --git a/components/chat/chat-hooks/use-chat-handler.tsx b/components/chat/chat-hooks/use-chat-handler.tsx
@@ -206,7 +206,8 @@ export const useChatHandler = () => {
       isRegeneration,
       retrievedFileItems,
       setChatMessages,
-      setChatFileItems
+      setChatFileItems,
+      setChatImages
     )
 
     setIsGenerating(false)

diff --git a/components/chat/chat-input.tsx b/components/chat/chat-input.tsx
@@ -1,12 +1,13 @@
 import { ChatbotUIContext } from "@/context/context"
 import useHotkey from "@/lib/hooks/use-hotkey"
+import { LLM_LIST } from "@/lib/models/llm/llm-list"
 import { cn } from "@/lib/utils"
 import {
   IconCirclePlus,
   IconPlayerStopFilled,
   IconSend
 } from "@tabler/icons-react"
-import { FC, useContext, useEffect, useRef } from "react"
+import { FC, useContext, useEffect, useRef, useState } from "react"
 import { Input } from "../ui/input"
 import { TextareaAutosize } from "../ui/textarea-autosize"
 import { ChatCommandInput } from "./chat-command-input"
@@ -34,7 +35,10 @@ export const ChatInput: FC<ChatInputProps> = ({}) => {
     isPromptPickerOpen,
     setIsPromptPickerOpen,
     isAtPickerOpen,
-    setFocusFile
+    setFocusFile,
+    newMessageImages,
+    setNewMessageImages,
+    chatSettings
   } = useContext(ChatbotUIContext)
 
   const {
@@ -44,6 +48,8 @@ export const ChatInput: FC<ChatInputProps> = ({}) => {
     handleFocusChatInput
   } = useChatHandler()
 
+  const [isTextareaFocused, setTextareaFocused] = useState(false)
+
   const { handleInputChange } = usePromptAndCommand()
 
   const { filesToAccept, handleSelectDeviceFile } = useSelectFileHandler()
@@ -74,6 +80,22 @@ export const ChatInput: FC<ChatInputProps> = ({}) => {
     }
   }
 
+  const handlePaste = (event: React.ClipboardEvent) => {
+    const imagesAllowed = LLM_LIST.find(
+      llm => llm.modelId === chatSettings?.model
+    )?.imageInput
+    if (!imagesAllowed) return
+
+    const items = event.clipboardData.items
+    for (const item of items) {
+      if (item.type.indexOf("image") === 0) {
+        const file = item.getAsFile()
+        if (!file) return
+        handleSelectDeviceFile(file)
+      }
+    }
+  }
+
   return (
     <>
       <ChatFilesDisplay />
@@ -112,6 +134,7 @@ export const ChatInput: FC<ChatInputProps> = ({}) => {
           minRows={1}
           maxRows={20}
           onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
         />
 
         <div className="absolute bottom-[14px] right-3 cursor-pointer hover:opacity-50">

diff --git a/components/messages/message.tsx b/components/messages/message.tsx
@@ -278,7 +278,9 @@ export const Message: FC<MessageProps> = ({
 
         <div className="mt-3 flex flex-wrap gap-2">
           {message.image_paths.map((path, index) => {
-            const item = chatImages.find(image => image.path === path)
+            const item = chatImages.find(
+              image => image.messageId === message.id
+            )
 
             return (
               <Image

diff --git a/components/ui/textarea-autosize.tsx b/components/ui/textarea-autosize.tsx
@@ -13,6 +13,7 @@ interface TextareaAutosizeProps {
   minRows?: number
   maxRows?: number
   onKeyDown?: (event: React.KeyboardEvent) => void
+  onPaste?: (event: React.ClipboardEvent) => void
 }
 
 export const TextareaAutosize: FC<TextareaAutosizeProps> = ({
@@ -24,7 +25,8 @@ export const TextareaAutosize: FC<TextareaAutosizeProps> = ({
   placeholder = "",
   minRows = 1,
   maxRows = 6,
-  onKeyDown = () => {}
+  onKeyDown = () => {},
+  onPaste = () => {}
 }) => {
   return (
     <ReactTextareaAutosize
@@ -39,6 +41,7 @@ export const TextareaAutosize: FC<TextareaAutosizeProps> = ({
       value={value}
       onChange={event => onValueChange(event.target.value)}
       onKeyDown={onKeyDown}
+      onPaste={onPaste}
     />
   )
 }