fix styling in extension, remove ai sidebar in extension

3 files changed, 46 insertions, 502 deletions

diff --git a/apps/extension/src/SideBar.tsx b/apps/extension/src/SideBar.tsx
index 96b1dd4c..00d52109 100644
--- a/apps/extension/src/SideBar.tsx
+++ b/apps/extension/src/SideBar.tsx
@@ -1,8 +1,6 @@
-import { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
+import { useState } from 'react';
+
 import './dist.css';
-import { Input } from './components/ui/input';
-import { Button } from './components/ui/button';
 import {
   Tooltip,
   TooltipContent,
@@ -26,190 +24,36 @@ function sendUrlToAPI() {
   }
 }
 
-function SideBar({ jwt }: { jwt: string }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [input, setInput] = useState('');
+function SideBar() {
   const [savedWebsites, setSavedWebsites] = useState<string[]>([]);
 
   const [isSendingData, setIsSendingData] = useState(false);
 
-  const [toBeParsed, setToBeParsed] = useState('');
-  const [aiResponse, setAIResponse] = useState<string>('');
-  const [lastQuestion, setLastQuestion] = useState<string>('');
-
-  const handleStreamData = (newChunk: string) => {
-    // Append the new chunk to the existing data to be parsed
-    setToBeParsed((prev) => prev + newChunk);
-  };
-
-  const queryApi = async () => {
-    const content = document.documentElement.innerText;
-
-    setAIResponse('');
-
-    const query = `Answer this question based on this query: ${input}\n\n${content}`;
-
-    chrome.runtime.sendMessage({ type: 'queryApi', input: query, jwt });
-  };
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    chrome.runtime.onMessage.addListener((message) => {
-      if (message.action === 'streamData') {
-        console.log(message.data);
-        handleStreamData(message.data);
-      } else if (message.action === 'streamEnd') {
-        setLastQuestion(input);
-        setInput('');
-        setToBeParsed('');
-      }
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    // Define a function to try parsing the accumulated data
-    const tryParseAccumulatedData = () => {
-      // 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 = '';
-
-        // Process each part to extract JSON objects
-        parts.forEach((part, index) => {
-          if (part.startsWith('data: [DONE]data: ')) {
-            part = part.replace('data: [DONE]data: ', 'data: ');
-          }
-          try {
-            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) {
-              remainingData = part;
-            } else if (parsedPart && parsedPart.response) {
-              // If the part is parsable and has the "response" field, update the AI response state
-              setAIResponse((prev) => prev + parsedPart.response);
-            }
-          } 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);
-            } else {
-              // If it's the last part, it may be incomplete, so keep it
-              remainingData = part;
-            }
-          }
-        });
-
-        // Update the toBeParsed state to only contain the unparsed remainder
-        if (remainingData !== toBeParsed) {
-          setToBeParsed(remainingData);
-        }
-      } catch (error) {
-        console.error('Error parsing accumulated data: ', error);
-      }
-    };
-
-    // Call the parsing function if there's data to be parsed
-    if (toBeParsed) {
-      tryParseAccumulatedData();
-    }
-  }, [toBeParsed]);
-
   return (
     <>
       <TooltipProvider>
-        {isOpen && (
-          <div
-            onClick={() => setIsOpen(false)}
-            className="anycontext-overlay"
-          ></div>
-        )}
-
-        {isOpen ? (
-          <motion.div
-            initial={{ x: '100%' }}
-            animate={{ x: 0 }}
-            exit={{ x: '100%' }}
-            transition={{ duration: 0.3 }}
-            className="anycontext-sidebar anycontext-relative"
-          >
-            <div className="anycontext-sidebar-content anycontext-text-black anycontext-px-4 anycontext-relative">
-              <h1 className="anycontext-header anycontext-font-sans">
-                Ask a question to this page
-              </h1>
-
-              {/* Three buttons as options to choose from */}
-              {!input && (
-                <div className="anycontext-flex anycontext-flex-col anycontext-gap-4 anycontext-mt-8 anycontext-px-4">
-                  <Button
-                    onClick={async () => {
-                      setInput('Summarise the content of this web page');
-                      await queryApi();
-                    }}
-                    className="anycontext-w-full"
-                  >
-                    Summarize content
-                  </Button>
-                  <Button
-                    onClick={async () => {
-                      setInput(
-                        'Whats the most important points of this page? Answer in points.',
-                      );
-                      await queryApi();
-                    }}
-                    className="anycontext-w-full"
-                  >
-                    What's the most important?
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      setIsOpen(false);
-                      sendUrlToAPI();
-                      setIsSendingData(true);
-                      setTimeout(() => {
-                        setIsSendingData(false);
-                        setSavedWebsites([
-                          ...savedWebsites,
-                          window.location.href,
-                        ]);
-                      }, 1000);
-                    }}
-                    className="anycontext-w-full anycontext-bg-gradient-to-tr anycontext-from-purple-400 anycontext-to-purple-600"
-                  >
-                    Save to memory
-                  </Button>
-                </div>
-              )}
-
-              {lastQuestion && (
-                <div className="anycontext-mb-4">
-                  <h2 className="anycontext-text-lg anycontext-font-semibold">
-                    {lastQuestion}
-                  </h2>
-                </div>
-              )}
-              <div className="anycontext-px-4 anycontext-max-h-[75vh] anycontext-overflow-y-auto anycontext-mt-8">
-                {aiResponse.replace('</s>', '')}
-              </div>
-
-              <form
-                onSubmit={async (e) => {
-                  e.preventDefault();
-                  await queryApi();
-                  setInput('');
+        <div className="anycontext-flex anycontext-flex-col anycontext-gap-2 anycontext-fixed anycontext-bottom-12 anycontext-right-0 anycontext-z-[99999]">
+          <Tooltip delayDuration={300}>
+            <TooltipContent side="left">
+              <p>Open Sidebar</p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip delayDuration={300}>
+            <TooltipTrigger>
+              <button
+                onClick={() => {
+                  sendUrlToAPI();
+                  setIsSendingData(true);
+                  setTimeout(() => {
+                    setIsSendingData(false);
+                    setSavedWebsites([...savedWebsites, window.location.href]);
+                  }, 1000);
                 }}
-                className="anycontext-flex anycontext-absolute anycontext-bottom-0 anycontext-w-full anycontext-gap-4 anycontext-justify-between anycontext-px-4"
+                disabled={savedWebsites.includes(window.location.href)}
+                className="anycontext-open-button disabled:anycontext-opacity-30"
               >
-                <Input
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  placeholder="Ask anything about this website"
-                  className="anycontext-mb-4 anycontext-text-black anycontext-outline"
-                />
-                <Button onClick={async () => queryApi()}>
+                {savedWebsites.includes(window.location.href) ? (
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="24"
@@ -220,102 +64,33 @@ function SideBar({ jwt }: { jwt: string }) {
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
-                    className="lucide lucide-send-horizontal"
+                    className="lucide lucide-file-check-2"
                   >
-                    <path d="m3 3 3 9-3 9 19-9Z" />
-                    <path d="M6 12h16" />
+                    <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
+                    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+                    <path d="m3 15 2 2 4-4" />
                   </svg>
-                </Button>
-              </form>
-            </div>
-          </motion.div>
-        ) : (
-          <div className="anycontext-flex anycontext-flex-col anycontext-gap-2 anycontext-fixed anycontext-bottom-12 anycontext-right-0 anycontext-z-[99999]">
-            <Tooltip delayDuration={300}>
-              <TooltipTrigger>
-                <button
-                  onClick={() => setIsOpen(true)}
-                  className="anycontext-open-button"
-                >
+                ) : (
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="lucide lucide-panel-right-open"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    className={`anycontext-w-5 anycontext-h-5 ${isSendingData ? 'anycontext-animate-spin' : ''}`}
                   >
-                    <rect width="18" height="18" x="3" y="3" rx="2" />
-                    <path d="M15 3v18" />
-                    <path d="m10 15-3-3 3-3" />
+                    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
                   </svg>
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="left">
-                <p>Open Sidebar</p>
-              </TooltipContent>
-            </Tooltip>
-
-            <Tooltip delayDuration={300}>
-              <TooltipTrigger>
-                <button
-                  onClick={() => {
-                    sendUrlToAPI();
-                    setIsSendingData(true);
-                    setTimeout(() => {
-                      setIsSendingData(false);
-                      setSavedWebsites([
-                        ...savedWebsites,
-                        window.location.href,
-                      ]);
-                    }, 1000);
-                  }}
-                  disabled={savedWebsites.includes(window.location.href)}
-                  className="anycontext-open-button disabled:anycontext-opacity-30"
-                >
-                  {savedWebsites.includes(window.location.href) ? (
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      className="lucide lucide-file-check-2"
-                    >
-                      <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
-                      <path d="M14 2v4a2 2 0 0 0 2 2h4" />
-                      <path d="m3 15 2 2 4-4" />
-                    </svg>
-                  ) : (
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                      className={`anycontext-w-5 anycontext-h-5 ${isSendingData ? 'anycontext-animate-spin' : ''}`}
-                    >
-                      <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
-                    </svg>
-                  )}
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="left">
-                <p>
-                  {savedWebsites.includes(window.location.href)
-                    ? 'Added to memory'
-                    : 'Add to memory'}
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        )}
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="left">
+              <p>
+                {savedWebsites.includes(window.location.href)
+                  ? 'Added to memory'
+                  : 'Add to memory'}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
       </TooltipProvider>
     </>
   );
diff --git a/apps/extension/src/content.tsx b/apps/extension/src/content.tsx
index 1e92bf04..5964e1a0 100644
--- a/apps/extension/src/content.tsx
+++ b/apps/extension/src/content.tsx
@@ -38,8 +38,8 @@ const jwt = chrome.storage.local.get('jwt').then((data) => {
   return data.jwt;
 }) as Promise<string>;
 
-jwt.then((jwt) => {
+jwt.then(() => {
   ReactDOM.createRoot(
     document.getElementById('anycontext-app-container')!,
-  ).render(<SideBar jwt={jwt} />);
+  ).render(<SideBar />);
 });
diff --git a/apps/extension/src/dist.css b/apps/extension/src/dist.css
index 5fda8915..539e4323 100644
--- a/apps/extension/src/dist.css
+++ b/apps/extension/src/dist.css
@@ -1,234 +1,3 @@
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  /* 1 */
-
-  border-width: 0;
-  /* 2 */
-
-  border-style: solid;
-  /* 2 */
-
-  border-color: #e5e7eb;
-  /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: '';
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-
-[hidden] {
-  display: none;
-}
-
-*,
-::before,
-::after {
-  --tw-border-spacing-x: 0;
-
-  --tw-border-spacing-y: 0;
-
-  --tw-translate-x: 0;
-
-  --tw-translate-y: 0;
-
-  --tw-rotate: 0;
-
-  --tw-skew-x: 0;
-
-  --tw-skew-y: 0;
-
-  --tw-scale-x: 1;
-
-  --tw-scale-y: 1;
-
-  --tw-pan-x: ;
-
-  --tw-pan-y: ;
-
-  --tw-pinch-zoom: ;
-
-  --tw-scroll-snap-strictness: proximity;
-
-  --tw-gradient-from-position: ;
-
-  --tw-gradient-via-position: ;
-
-  --tw-gradient-to-position: ;
-
-  --tw-ordinal: ;
-
-  --tw-slashed-zero: ;
-
-  --tw-numeric-figure: ;
-
-  --tw-numeric-spacing: ;
-
-  --tw-numeric-fraction: ;
-
-  --tw-ring-inset: ;
-
-  --tw-ring-offset-width: 0px;
-
-  --tw-ring-offset-color: #fff;
-
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-
-  --tw-ring-offset-shadow: 0 0 #0000;
-
-  --tw-ring-shadow: 0 0 #0000;
-
-  --tw-shadow: 0 0 #0000;
-
-  --tw-shadow-colored: 0 0 #0000;
-
-  --tw-blur: ;
-
-  --tw-brightness: ;
-
-  --tw-contrast: ;
-
-  --tw-grayscale: ;
-
-  --tw-hue-rotate: ;
-
-  --tw-invert: ;
-
-  --tw-saturate: ;
-
-  --tw-sepia: ;
-
-  --tw-drop-shadow: ;
-
-  --tw-backdrop-blur: ;
-
-  --tw-backdrop-brightness: ;
-
-  --tw-backdrop-contrast: ;
-
-  --tw-backdrop-grayscale: ;
-
-  --tw-backdrop-hue-rotate: ;
-
-  --tw-backdrop-invert: ;
-
-  --tw-backdrop-opacity: ;
-
-  --tw-backdrop-saturate: ;
-
-  --tw-backdrop-sepia: ;
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-
-  --tw-border-spacing-y: 0;
-
-  --tw-translate-x: 0;
-
-  --tw-translate-y: 0;
-
-  --tw-rotate: 0;
-
-  --tw-skew-x: 0;
-
-  --tw-skew-y: 0;
-
-  --tw-scale-x: 1;
-
-  --tw-scale-y: 1;
-
-  --tw-pan-x: ;
-
-  --tw-pan-y: ;
-
-  --tw-pinch-zoom: ;
-
-  --tw-scroll-snap-strictness: proximity;
-
-  --tw-gradient-from-position: ;
-
-  --tw-gradient-via-position: ;
-
-  --tw-gradient-to-position: ;
-
-  --tw-ordinal: ;
-
-  --tw-slashed-zero: ;
-
-  --tw-numeric-figure: ;
-
-  --tw-numeric-spacing: ;
-
-  --tw-numeric-fraction: ;
-
-  --tw-ring-inset: ;
-
-  --tw-ring-offset-width: 0px;
-
-  --tw-ring-offset-color: #fff;
-
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-
-  --tw-ring-offset-shadow: 0 0 #0000;
-
-  --tw-ring-shadow: 0 0 #0000;
-
-  --tw-shadow: 0 0 #0000;
-
-  --tw-shadow-colored: 0 0 #0000;
-
-  --tw-blur: ;
-
-  --tw-brightness: ;
-
-  --tw-contrast: ;
-
-  --tw-grayscale: ;
-
-  --tw-hue-rotate: ;
-
-  --tw-invert: ;
-
-  --tw-saturate: ;
-
-  --tw-sepia: ;
-
-  --tw-drop-shadow: ;
-
-  --tw-backdrop-blur: ;
-
-  --tw-backdrop-brightness: ;
-
-  --tw-backdrop-contrast: ;
-
-  --tw-backdrop-grayscale: ;
-
-  --tw-backdrop-hue-rotate: ;
-
-  --tw-backdrop-invert: ;
-
-  --tw-backdrop-opacity: ;
-
-  --tw-backdrop-saturate: ;
-
-  --tw-backdrop-sepia: ;
-}
-
 .anycontext-fixed {
   position: fixed;
 }