Add image upload UI (microsoft#1073)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <[email protected]>
JEKA-Software · Sep 28, 2024 · e0b7c81 · e0b7c81
1 parent f5085e1
commit e0b7c81
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 33 deletions.
diff --git a/frontend/src/components/QuestionInput/QuestionInput.tsx b/frontend/src/components/QuestionInput/QuestionInput.tsx
@@ -1,26 +1,26 @@
-import { useContext, useState } from 'react';
-import { FontIcon, Stack, TextField } from '@fluentui/react';
-import { SendRegular } from '@fluentui/react-icons';
+import { useContext, useState } from 'react'
+import { FontIcon, Stack, TextField } from '@fluentui/react'
+import { SendRegular } from '@fluentui/react-icons'
 
 import Send from '../../assets/Send.svg';
 
-import styles from './QuestionInput.module.css';
-import { ChatMessage } from '../../api';
-import { AppStateContext } from '../../state/AppProvider';
+import styles from './QuestionInput.module.css'
+import { ChatMessage } from '../../api'
+import { AppStateContext } from '../../state/AppProvider'
 
 interface Props {
-  onSend: (question: ChatMessage['content'], id?: string) => void;
-  disabled: boolean;
-  placeholder?: string;
-  clearOnSend?: boolean;
-  conversationId?: string;
+  onSend: (question: ChatMessage['content'], id?: string) => void
+  disabled: boolean
+  placeholder?: string
+  clearOnSend?: boolean
+  conversationId?: string
 }
 
 export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, conversationId }: Props) => {
-  const [question, setQuestion] = useState<string>('');
+  const [question, setQuestion] = useState<string>('')
   const [base64Image, setBase64Image] = useState<string | null>(null);
 
-  const appStateContext = useContext(AppStateContext);
+  const appStateContext = useContext(AppStateContext)
   const OYD_ENABLED = appStateContext?.state.frontendSettings?.oyd_enabled || false;
 
   const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -53,11 +53,11 @@ export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, conv
     const questionTest: ChatMessage["content"] = base64Image ? [{ type: "text", text: question }, { type: "image_url", image_url: { url: base64Image } }] : question.toString();
 
     if (conversationId && questionTest !== undefined) {
-      onSend(questionTest, conversationId);
-      setBase64Image(null);
+      onSend(questionTest, conversationId)
+      setBase64Image(null)
     } else {
-      onSend(questionTest);
-      setBase64Image(null);
+      onSend(questionTest)
+      setBase64Image(null)
     }
 
     if (clearOnSend) {

diff --git a/frontend/src/pages/chat/Chat.tsx b/frontend/src/pages/chat/Chat.tsx
@@ -143,8 +143,8 @@ const Chat = () => {
 
   const processResultMessage = (resultMessage: ChatMessage, userMessage: ChatMessage, conversationId?: string) => {
     if (typeof resultMessage.content === "string" && resultMessage.content.includes('all_exec_results')) {
-      const parsedExecResults = JSON.parse(resultMessage.content) as AzureSqlServerExecResults;
-      setExecResults(parsedExecResults.all_exec_results);
+      const parsedExecResults = JSON.parse(resultMessage.content) as AzureSqlServerExecResults
+      setExecResults(parsedExecResults.all_exec_results)
       assistantMessage.context = JSON.stringify({
         all_exec_results: parsedExecResults.all_exec_results
       });
@@ -180,13 +180,13 @@ const Chat = () => {
   };
 
   const makeApiRequestWithoutCosmosDB = async (question: ChatMessage["content"], conversationId?: string) => {
-    setIsLoading(true);
-    setShowLoadingMessage(true);
-    const abortController = new AbortController();
-    abortFuncs.current.unshift(abortController);
+    setIsLoading(true)
+    setShowLoadingMessage(true)
+    const abortController = new AbortController()
+    abortFuncs.current.unshift(abortController)
 
-    const questionContent = typeof question === 'string' ? question : [{ type: "text", text: question[0].text }, { type: "image_url", image_url: { url: question[1].image_url.url } }];
-    question = typeof question !== 'string' && question[0]?.text?.length > 0 ? question[0].text : question;
+    const questionContent = typeof question === 'string' ? question : [{ type: "text", text: question[0].text }, { type: "image_url", image_url: { url: question[1].image_url.url } }]
+    question = typeof question !== 'string' && question[0]?.text?.length > 0 ? question[0].text : question
 
     const userMessage: ChatMessage = {
       id: uuid(),
@@ -307,12 +307,12 @@ const Chat = () => {
   };
 
   const makeApiRequestWithCosmosDB = async (question: ChatMessage["content"], conversationId?: string) => {
-    setIsLoading(true);
-    setShowLoadingMessage(true);
-    const abortController = new AbortController();
-    abortFuncs.current.unshift(abortController);
-    const questionContent = typeof question === 'string' ? question : [{ type: "text", text: question[0].text }, { type: "image_url", image_url: { url: question[1].image_url.url } }];
-    question = typeof question !== 'string' && question[0]?.text?.length > 0 ? question[0].text : question;
+    setIsLoading(true)
+    setShowLoadingMessage(true)
+    const abortController = new AbortController()
+    abortFuncs.current.unshift(abortController)
+    const questionContent = typeof question === 'string' ? question : [{ type: "text", text: question[0].text }, { type: "image_url", image_url: { url: question[1].image_url.url } }]
+    question = typeof question !== 'string' && question[0]?.text?.length > 0 ? question[0].text : question
 
     const userMessage: ChatMessage = {
       id: uuid(),
@@ -321,8 +321,8 @@ const Chat = () => {
       date: new Date().toISOString()
     };
 
-    let request: ConversationRequest;
-    let conversation;
+    let request: ConversationRequest
+    let conversation
     if (conversationId) {
       conversation = appStateContext?.state?.chatHistory?.find(conv => conv.id === conversationId);
       if (!conversation) {