From feea1a26dc19074fd58ad156cd418c3efb1971b6 Mon Sep 17 00:00:00 2001
From: Dhravya <dhravyashah@gmail.com>
Date: Wed, 10 Apr 2024 15:36:51 -0700
Subject: extension styling such that website content is not affected
 https://twitter.com/DhravyaShah/status/1778189224396922948

---
 apps/web/src/components/QueryAI.tsx | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

(limited to 'apps/web/src/components/QueryAI.tsx')

diff --git a/apps/web/src/components/QueryAI.tsx b/apps/web/src/components/QueryAI.tsx
index 3cb14178..894b5d2d 100644
--- a/apps/web/src/components/QueryAI.tsx
+++ b/apps/web/src/components/QueryAI.tsx
@@ -1,18 +1,18 @@
-'use client';
+"use client";
 
-import { Label } from './ui/label';
-import React, { useEffect, useState } from 'react';
-import { Input } from './ui/input';
-import { Button } from './ui/button';
-import SearchResults from './SearchResults';
+import { Label } from "./ui/label";
+import React, { useEffect, useState } from "react";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import SearchResults from "./SearchResults";
 
 function QueryAI() {
   const [searchResults, setSearchResults] = useState<string[]>([]);
   const [isAiLoading, setIsAiLoading] = useState(false);
 
-  const [aiResponse, setAIResponse] = useState('');
-  const [input, setInput] = useState('');
-  const [toBeParsed, setToBeParsed] = useState('');
+  const [aiResponse, setAIResponse] = useState("");
+  const [input, setInput] = useState("");
+  const [toBeParsed, setToBeParsed] = useState("");
 
   const handleStreamData = (newChunk: string) => {
     // Append the new chunk to the existing data to be parsed
@@ -25,13 +25,13 @@ function QueryAI() {
       // Attempt to parse the "toBeParsed" state as JSON
       try {
         // Split the accumulated data by the known delimiter "\n\n"
-        const parts = toBeParsed.split('\n\n');
-        let remainingData = '';
+        const parts = toBeParsed.split("\n\n");
+        let remainingData = "";
 
         // Process each part to extract JSON objects
         parts.forEach((part, index) => {
           try {
-            const parsedPart = JSON.parse(part.replace('data: ', '')); // Try to parse the part as JSON
+            const parsedPart = JSON.parse(part.replace("data: ", "")); // Try to parse the part as JSON
 
             // If the part is the last one and couldn't be parsed, keep it to  accumulate more data
             if (index === parts.length - 1 && !parsedPart) {
@@ -43,7 +43,7 @@ function QueryAI() {
           } catch (error) {
             // If parsing fails and it's not the last part, it's a malformed JSON
             if (index !== parts.length - 1) {
-              console.error('Malformed JSON part: ', part);
+              console.error("Malformed JSON part: ", part);
             } else {
               // If it's the last part, it may be incomplete, so keep it
               remainingData = part;
@@ -56,7 +56,7 @@ function QueryAI() {
           setToBeParsed(remainingData);
         }
       } catch (error) {
-        console.error('Error parsing accumulated data: ', error);
+        console.error("Error parsing accumulated data: ", error);
       }
     };
 
@@ -89,8 +89,8 @@ function QueryAI() {
 
     if (response.body) {
       let reader = response.body.getReader();
-      let decoder = new TextDecoder('utf-8');
-      let result = '';
+      let decoder = new TextDecoder("utf-8");
+      let result = "";
 
       // @ts-ignore
       reader.read().then(function processText({ done, value }) {
@@ -108,10 +108,10 @@ function QueryAI() {
   };
 
   return (
-    <div className="w-full max-w-2xl mx-auto">
+    <div className="mx-auto w-full max-w-2xl">
       <form onSubmit={async (e) => await getSearchResults(e)} className="mt-8">
         <Label htmlFor="searchInput">Ask your SuperMemory</Label>
-        <div className="flex flex-col md:flex-row md:w-full md:items-center space-y-2 md:space-y-0 md:space-x-2">
+        <div className="flex flex-col space-y-2 md:w-full md:flex-row md:items-center md:space-x-2 md:space-y-0">
           <Input
             value={input}
             onChange={(e) => setInput(e.target.value)}
-- 
cgit v1.2.3

