complete_stream: no storing for api key req, fe:update shared conv

frontend/src/conversation/Conversation.tsx

@@ -193,7 +193,7 @@ export default function Conversation() {
   const handlePaste = (e: React.ClipboardEvent) => {
     e.preventDefault();
     const text = e.clipboardData.getData('text/plain');
-    document.execCommand('insertText', false, text);
+    inputRef.current && (inputRef.current.innerText = text);
   };
 
   return (

frontend/src/conversation/SharedConversation.tsx

@@ -1,9 +1,12 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { Query } from './conversationModels';
 import { useTranslation } from 'react-i18next';
 import ConversationBubble from './ConversationBubble';
+import Send from '../assets/send.svg';
+import Spinner from '../assets/spinner.svg';
+
 import { Fragment } from 'react';
 const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
 const SharedConversation = () => {
@@ -13,6 +16,8 @@ const SharedConversation = () => {
   const [queries, setQueries] = useState<Query[]>([]);
   const [title, setTitle] = useState('');
   const [date, setDate] = useState('');
+  const [apiKey, setAPIKey] = useState<string | null>(null);
+  const inputRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
   function formatISODate(isoDateStr: string) {
     const date = new Date(isoDateStr);
@@ -57,10 +62,15 @@ const SharedConversation = () => {
           setQueries(data.queries);
           setTitle(data.title);
           setDate(formatISODate(data.timestamp));
+          data.api_key && setAPIKey(data.api_key);
         }
       });
   };
-
+  const handlePaste = (e: React.ClipboardEvent) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData('text/plain');
+    inputRef.current && (inputRef.current.innerText = text);
+  };
   const prepResponseView = (query: Query, index: number) => {
     let responseView;
     if (query.response) {
@@ -126,17 +136,51 @@ const SharedConversation = () => {
         </div>
       </div>
 
-      <div className=" flex flex-col items-center gap-4 pb-2">
-        <button
-          onClick={() => navigate('/')}
-          className="w-fit rounded-full bg-purple-30 p-4 text-white shadow-xl transition-colors duration-200 hover:bg-purple-taupe"
-        >
-          {t('sharedConv.button')}
-        </button>
-        <span className="hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
-          {t('sharedConv.meta')}
-        </span>
+      <div className=" flex w-11/12 flex-col items-center gap-4 pb-2 md:w-10/12 lg:w-6/12">
+        {apiKey ? (
+          <div className="flex h-full w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
+            <div
+              id="inputbox"
+              ref={inputRef}
+              tabIndex={1}
+              onPaste={handlePaste}
+              placeholder={t('inputPlaceholder')}
+              contentEditable
+              className={`inputbox-style max-h-24 w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white pt-5 pb-[22px] text-base leading-tight opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  //handleQuestionSubmission();
+                }
+              }}
+            ></div>
+            {status === 'loading' ? (
+              <img
+                src={Spinner}
+                className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent filter dark:invert"
+              ></img>
+            ) : (
+              <div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000">
+                <img
+                  className="ml-[4px] h-6 w-6 text-white filter dark:invert"
+                  //onClick={handleQuestionSubmission}
+                  src={Send}
+                ></img>
+              </div>
+            )}
+          </div>
+        ) : (
+          <button
+            onClick={() => navigate('/')}
+            className="w-fit rounded-full bg-purple-30 p-4 text-white shadow-xl transition-colors duration-200 hover:bg-purple-taupe"
+          >
+            {t('sharedConv.button')}
+          </button>
+        )}
       </div>
+      <span className="mb-2 hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
+        {t('sharedConv.meta')}
+      </span>
     </div>
   );
 };

frontend/src/conversation/conversationApi.ts

@@ -233,3 +233,76 @@ export function sendFeedback(
     }
   });
 }
+
+export function fetchSharedAnswerSteaming( //for shared conversations
+  question: string,
+  signal: AbortSignal,
+  apiKey: string,
+  history: Array<any> = [],
+  onEvent: (event: MessageEvent) => void,
+): Promise<Answer> {
+  history = history.map((item) => {
+    return { prompt: item.prompt, response: item.response };
+  });
+
+  return new Promise<Answer>((resolve, reject) => {
+    const body = {
+      question: question,
+      history: JSON.stringify(history),
+      apiKey: apiKey,
+    };
+    fetch(apiHost + '/stream', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+      signal,
+    })
+      .then((response) => {
+        if (!response.body) throw Error('No response body');
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder('utf-8');
+        let counterrr = 0;
+        const processStream = ({
+          done,
+          value,
+        }: ReadableStreamReadResult<Uint8Array>) => {
+          if (done) {
+            console.log(counterrr);
+            return;
+          }
+
+          counterrr += 1;
+
+          const chunk = decoder.decode(value);
+
+          const lines = chunk.split('\n');
+
+          for (let line of lines) {
+            if (line.trim() == '') {
+              continue;
+            }
+            if (line.startsWith('data:')) {
+              line = line.substring(5);
+            }
+
+            const messageEvent: MessageEvent = new MessageEvent('message', {
+              data: line,
+            });
+
+            onEvent(messageEvent); // handle each message
+          }
+
+          reader.read().then(processStream).catch(reject);
+        };
+
+        reader.read().then(processStream).catch(reject);
+      })
+      .catch((error) => {
+        console.error('Connection failed:', error);
+        reject(error);
+      });
+  });
+}