Merge pull request #144 from rijnb/pasteimage

Add paste image support

Author: RijnBuve-TomTom

components/Chat/ChatInput.tsx

@@ -267,6 +267,18 @@ export const ChatInput = ({modelId, onSend, onRegenerate, stopConversationRef, t
     }, 3000)
   }
 
+  const handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    const items = e.clipboardData.items
+    for (const item of items) {
+      if (item.kind === "file" && item.type.startsWith("image/")) {
+        const file = item.getAsFile()
+        if (file) {
+          addImageToPrompt(file)
+        }
+      }
+    }
+  }
+
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     if (showPromptList) {
       if (e.key === "ArrowDown") {
@@ -460,6 +472,7 @@ export const ChatInput = ({modelId, onSend, onRegenerate, stopConversationRef, t
             onCompositionEnd={() => setIsTyping(false)}
             onChange={handleContentChange}
             onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
           />
           <button
             data-testid="chat-send"

components/Chat/PromptInputVars.tsx

@@ -15,13 +15,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import { useAppInsightsContext } from "@microsoft/applicationinsights-react-js";
+import { ChangeEvent, DragEvent, useEffect, useRef, useState } from "react";
 
-import {useAppInsightsContext} from "@microsoft/applicationinsights-react-js"
-import {ChangeEvent, DragEvent, useEffect, useRef, useState} from "react"
 
-import {Button, Dialog, FormHeader, FormLabel, FormText, TextArea} from "@/components/Styled"
-import {Prompt} from "@/types/prompt"
-import {isLanguageSupported} from "@/utils/app/codeblock"
+
+import { Button, Dialog, FormHeader, FormLabel, FormText, TextArea } from "@/components/Styled";
+import { Prompt } from "@/types/prompt";
+import { isLanguageSupported } from "@/utils/app/codeblock";
+
 
 interface Props {
   prompt: Prompt
@@ -168,7 +170,7 @@ export const PromptInputVars = ({prompt, promptVariables, onSubmit, onCancel}: P
                   ref={index === 0 ? nameInputRef : undefined}
                   placeholder={`${variable.key}...`}
                   value={variable.value}
-                  onChange={(e) => handleChange(index, e.target.value)}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => handleChange(index, e.target.value)}
                   rows={5}
                 />
               </>

components/ChatBar/components/PluginKeyList.tsx

@@ -15,16 +15,18 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import { IconKey } from "@tabler/icons-react";
+import React, { ChangeEvent, useContext, useState } from "react";
+import { useTranslation } from "react-i18next";
 
-import {IconKey} from "@tabler/icons-react"
-import React, {useContext, useState} from "react"
-import {useTranslation} from "react-i18next"
 
-import ChatBarContext from "@/components/ChatBar/ChatBar.context"
-import SidebarButton from "@/components/Sidebar/SidebarButton"
-import {Button, Dialog, FormHeader, FormLabel, FormText, Input} from "@/components/Styled"
-import {useHomeContext} from "@/pages/api/home/home.context"
-import {PluginID} from "@/types/plugin"
+
+import ChatBarContext from "@/components/ChatBar/ChatBar.context";
+import SidebarButton from "@/components/Sidebar/SidebarButton";
+import { Button, Dialog, FormHeader, FormLabel, FormText, Input } from "@/components/Styled";
+import { useHomeContext } from "@/pages/api/home/home.context";
+import { PluginID } from "@/types/plugin";
+
 
 export const PluginKeyList = () => {
   const {t} = useTranslation("common")
@@ -82,7 +84,7 @@ export const PluginKeyList = () => {
           <Input
             type="password"
             value={googleApiKey}
-            onChange={(e) => {
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
               setGoogleApiKey(e.target.value)
             }}
           />
@@ -91,7 +93,7 @@ export const PluginKeyList = () => {
           <Input
             type="password"
             value={googleCseId}
-            onChange={(e) => {
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
               setGoogleCseId(e.target.value)
             }}
           />

components/PromptBar/components/PromptEditModal.tsx

@@ -15,12 +15,14 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import { useTranslation } from "next-i18next";
+import { ChangeEvent, useEffect, useMemo, useRef, useState } from "react";
 
-import {useTranslation} from "next-i18next"
-import {useEffect, useMemo, useRef, useState} from "react"
 
-import {Button, Dialog, FormDisclaimer, FormLabel, Input, TextArea} from "@/components/Styled"
-import {Prompt} from "@/types/prompt"
+
+import { Button, Dialog, FormDisclaimer, FormLabel, Input, TextArea } from "@/components/Styled";
+import { Prompt } from "@/types/prompt";
+
 
 interface Props {
   prompt: Prompt
@@ -57,16 +59,16 @@ export const PromptEditModal = ({prompt, onClose, onUpdatePrompt}: Props) => {
         ref={nameInputRef}
         placeholder={t("A name for your prompt.")}
         value={name}
-        onChange={(e) => setName(e.target.value)}
-        onBlur={(e) => setName(e.target.value)}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+        onBlur={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
       />
 
       <FormLabel className="mt-2">{t("Description")}</FormLabel>
       <TextArea
         placeholder={t("A description for your prompt.")}
         value={description}
-        onChange={(e) => setDescription(e.target.value)}
-        onBlur={(e) => setDescription(e.target.value)}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setDescription(e.target.value)}
+        onBlur={(e: ChangeEvent<HTMLInputElement>) => setDescription(e.target.value)}
         rows={3}
       />
 
@@ -76,8 +78,8 @@ export const PromptEditModal = ({prompt, onClose, onUpdatePrompt}: Props) => {
           "Use {{...}} to specify one or more prompt variables. For example:\n\n| Translate: {{Paste your text}} \n| Into this language: {{Specify target language}}\n\nThis will show 2 input boxes, one for the text and one for the target language. If you specify {{#DROP}} as the last parameter, a drop zone for files to be read is shown."
         )}
         value={content}
-        onChange={(e) => setContent(e.target.value)}
-        onBlur={(e) => setContent(e.target.value)}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setContent(e.target.value)}
+        onBlur={(e: ChangeEvent<HTMLInputElement>) => setContent(e.target.value)}
         rows={9}
       />
 

components/Styled/StyledComponents.tsx

@@ -23,8 +23,9 @@ function createStyledComponent<P extends HTMLAttributes<HTMLElement>>(
   baseStyles: string,
   extraProps?: P
 ) {
+  // TODO [techdebt]: The 'any' type was 'P' but is no usuable. This is a workaround.
   const component = React.forwardRef(
-    ({className, children, ...props}: P, ref: ForwardedRef<HTMLElement>): ReactElement => {
+    ({className, children, ...props}: any, ref: ForwardedRef<HTMLElement>): ReactElement => {
       const classes = [className, baseStyles].filter(Boolean).join(" ")
 
       const allProps = {