hide chat and update llm url parsing (wip)

components/Playground/index.tsx

@@ -38,6 +38,7 @@ const Playground = () => {
   const [isModelInputVisible, setModelInputVisible] = useState(false);
   const [aiProvider, setAIProvider] = useState<string>("openai");
   const [urlOption, setUrlOption] = useState<string | any>(null);
+  const [isChatVisible, setIsChatVisible] = useState(true);
 
   const [systemMessage, setSystemMessage] = useState(
     DEFAULT_PROMPT
@@ -140,6 +141,13 @@ const Playground = () => {
               >
                 {isModelInputVisible ? '−' : '+'}
             </button>
+            <span className="text-lg font-semibold">Chat</span>
+              <button
+                onClick={() => setIsChatVisible(!isChatVisible)}
+                className="p-2 rounded-full hover:bg-gray-200 transition duration-300"
+              >
+                {isChatVisible ? '−' : '+'}
+            </button>
             
             {isSystemInputVisible && (
               <textarea 
@@ -176,32 +184,31 @@ const Playground = () => {
               </div>
             )}
 
-            <form
-              ref={formRef}
-              onSubmit={modifiedHandleSubmit}
-              className="relative w-full"
-            >
-
-            <textarea ref={inputRef} onChange={(e) => setInput(e.target.value)}
-              placeholder="Enter your message"
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && !e.shiftKey) {
-                  formRef.current?.requestSubmit();
-                  e.preventDefault();
-                }
-              }}
-              spellCheck={false} className="textarea" value={input} />
-            <button 
-                type="submit"
-                className="absolute inset-y-0 right-3 my-auto flex h-8 w-8 items-center justify-center rounded-md transition-all"
-            >
-              <SendIcon
-                  className={"h-4 w-4"}
-              />
-            </button>
-          </form>
+            {isChatVisible &&
+                <form ref={formRef} onSubmit={modifiedHandleSubmit} className="relative w-full">
+                <textarea ref={inputRef} onChange={(e) => setInput(e.target.value)}
+                placeholder="Enter your message"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    formRef.current?.requestSubmit();
+                    e.preventDefault();
+                  }
+                }}
+                  spellCheck={false} className="textarea" value={input} />
+                <button 
+                    type="submit"
+                    className="absolute inset-y-0 right-3 my-auto flex h-8 w-8 items-center justify-center rounded-md transition-all"
+                >
+                  <SendIcon
+                      className={"h-4 w-4"}
+                  />
+                </button>
+              </form>
+            }
+            
         </div>
-        <div className="flex flex-col items-start space-y-4 overflow-y-auto max-h-[20vh]">
+        {isChatVisible && (
+          <div className="flex flex-col items-start space-y-4 overflow-y-auto max-h-[20vh]">
           {messages?.map((message, index) => (
             <p key={index} className="messages-text">
               <ReactMarkdown
@@ -223,7 +230,8 @@ const Playground = () => {
               </ReactMarkdown>
             </p>
           ))}
-        </div>
+          </div>
+        )}
       </div>
       <Pane
         panelA={<InputCodeTab editorValue={editorValue} />}

utils/llm.ts

@@ -53,36 +53,39 @@ export const LLMStream = async (baseUrl: string, messages: any[]) => {
     }
   
     const stream = new ReadableStream({
-      async start(controller) {
-        let accumulatedContent = ""; // To accumulate message content
-  
-        const onParse = (event: ParsedEvent | ReconnectInterval) => {
-          if (event.type === 'event') {
-            const data = event.data;
-  
-            if (data === '[DONE]') {
-              const queue = encoder.encode(accumulatedContent);
-              controller.enqueue(queue);
-              controller.close();
-              return;
+        async start(controller) {
+            const onParse = (event: ParsedEvent | ReconnectInterval) => {
+                if (event.type === 'event') {
+                    const data = event.data;
+                
+                    if (data === "[DONE]") {
+                        controller.close();
+                        return;
+                    }
+                
+                    try {
+                        const json = JSON.parse(data);
+                        if (json.choices[0].finish_reason != null) {
+                            controller.close();
+                            return;
+                        }
+                        const text = json.choices[0].delta.content;
+                        const queue = encoder.encode(text);
+                        controller.enqueue(queue);
+                    } catch (e) {
+                        controller.error(e);
+                    }
+                }
+            };
+              
+    
+            const parser = createParser(onParse);
+        
+            for await (const chunk of res.body as any) {
+                parser.feed(decoder.decode(chunk));
             }
-            try {
-              const parsedData = JSON.parse(data);
-              const content = parsedData?.choices?.[0]?.message?.content;
-              accumulatedContent += content ? content + " " : "";
-            } catch (e) {
-              controller.error(`Error parsing message: ${e}`);
-            }
-          }
-        };
-  
-        const parser = createParser(onParse);
-  
-        for await (const chunk of res.body as any) {
-          parser.feed(decoder.decode(chunk));
-        }
-      },
+        },
     });
-  
+    
     return stream;
   };