Merge branch 'main' of https://github.com/Royal-lobster/Syncia

.changeset/silly-deers-brake.md

@@ -0,0 +1,6 @@
+---
+"syncia": major
+---
+
+- [NEW FEATURE 🌟]: Brings Chat History to Syncia !
+- Now Syncia uses langchain to manage chat 

.github/workflows/checks.yml

@@ -10,7 +10,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: Installing dependencies
         run: yarn install --frozen-lockfile
       - name: Lint rome

README.md

@@ -26,7 +26,7 @@ Alternatively, you can install Syncia manually by following these steps:
 3. Open Google Chrome and go to the "Extensions" page by typing "chrome://extensions/" in the address bar.
 4. Turn on "Developer mode" by toggling the switch in the top right corner of the page.
 5. Click on the "Load unpacked" button in the top left corner of the page.
-6. Select the `dist` folder. 
+6. Select the `dist` folder.
 
 ## 💫 Usage
 
@@ -75,7 +75,7 @@ You can also contribute to the project by creating a pull request. please follow
 
 Checkout the [CONTRIBUTING.md](
     https://github.com/Royal-lobster/Syncia/blob/main/CONTRIBUTING.md
-) file for more information. 
+) file for more information.
 
 ## 🔎 Issues and Pull Requests
 

manifest.config.ts

@@ -27,14 +27,15 @@ export default defineManifest(async (env) => ({
       description: 'Open the sidebar',
     },
   },
+  externally_connectable: { ids: ['*'] },
   manifest_version: 3,
   icons: {
     '16': 'images/icon-16.png',
     '32': 'images/icon-32.png',
     '48': 'images/icon-48.png',
     '128': 'images/icon-128.png',
   },
-  permissions: ['storage', 'unlimitedStorage', 'contextMenus'],
+  permissions: ['storage', 'unlimitedStorage', 'contextMenus', 'tabs'],
   background: {
     service_worker: 'src/pages/background/index.ts',
   },

package.json

@@ -27,11 +27,14 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.2",
     "@types/object-hash": "^3.0.2",
     "axios": "^1.3.5",
     "dnd-kit-sortable-tree": "^0.1.58",
     "endent": "^2.1.0",
+    "jotai": "^2.4.3",
+    "langchain": "^0.0.151",
     "object-hash": "^3.0.0",
     "publish-browser-extension": "^1.2.0",
     "react": "^18.2.0",

src/components/Layout/DialogPortal.tsx

@@ -25,10 +25,11 @@ const DialogPortal = ({
       <Dialog.Title className="cdx-text-2xl cdx-m-0 cdx-mb-4 cdx-border-b cdx-border-b-neutral-500/20 cdx-pb-4">
         {title}
       </Dialog.Title>
-      <div className='cdx-text-base'>{children}</div>
+      <div className="cdx-text-base">{children}</div>
       <div className="cdx-flex cdx-gap-3 cdx-justify-end cdx-mt-4">
         {secondaryAction && (
           <button
+            type="button"
             className="cdx-text-neutral-400 hover:cdx-text-neutral-300 cdx-px-4 cdx-py-2 cdx-rounded-sm cdx-bg-neutral-100 dark:cdx-bg-neutral-600 hover:cdx-bg-neutral-200 focus:cdx-bg-neutral-200 focus:cdx-outline-none"
             onClick={secondaryAction}
           >
@@ -37,6 +38,7 @@ const DialogPortal = ({
         )}
         {primaryAction && (
           <button
+            type="button"
             className="cdx-text-white cdx-px-4 cdx-py-2 cdx-rounded-sm cdx-text-sm cdx-bg-blue-500 hover:cdx-bg-blue-600 focus:cdx-bg-blue-600 focus:cdx-outline-none"
             onClick={primaryAction}
           >
@@ -46,6 +48,7 @@ const DialogPortal = ({
       </div>
       <Dialog.Close asChild>
         <button
+          type="button"
           className="cdx-text-neutral-500 hover:cdx-text-neutral-400 cdx-absolute cdx-top-7 cdx-right-7 cdx-inline-flex cdx-h-[25px] cdx-w-[25px] cdx-appearance-none cdx-items-center cdx-justify-center focus:cdx-outline-none"
           aria-label="Close"
         >

src/components/QuickMenu/index.tsx

@@ -1,5 +1,5 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { BsRobot } from 'react-icons/bs'
 import { usePrompts } from '../../hooks/usePrompts'
 import useThemeSync from '../../hooks/useThemeSync'
@@ -50,10 +50,10 @@ export const QuickMenu = ({ selectedText, setMenuOpen }: QuickMenuProps) => {
           <div className="cdx-py-1 cdx-px-1.5 cdx-bg-neutral-200 dark:cdx-bg-neutral-700">
             <BsRobot
               size={15}
-              className='cdx-mt-0.5 cdx-fill-neutral-800 dark:cdx-fill-white'
+              className="cdx-mt-0.5 cdx-fill-neutral-800 dark:cdx-fill-white"
             />
           </div>
-          <span className='cdx-py-1 cdx-text-sm !cdx-font-sans cdx-px-1.5 cdx-mt-0.5'>
+          <span className="cdx-py-1 cdx-text-sm !cdx-font-sans cdx-px-1.5 cdx-mt-0.5">
             Syncia
           </span>
         </button>
@@ -67,21 +67,22 @@ export const QuickMenu = ({ selectedText, setMenuOpen }: QuickMenuProps) => {
             {prompts
               .filter((i) => !i.prompt)
               .map((item) => (
-                <>
-                  <DropdownMenu.Label className='cdx-text-[10px] cdx-m-1 cdx-text-neutral-500 cdx-uppercase'>
+                <React.Fragment key={item.id}>
+                  <DropdownMenu.Label className="cdx-text-[10px] cdx-m-1 cdx-text-neutral-500 cdx-uppercase">
                     {item.name}
                   </DropdownMenu.Label>
                   {item.children?.map((item) => (
                     <RecursiveItem
+                      key={item.id}
                       item={item}
                       handleGenerate={handleGenerate}
                     />
                   ))}
-                </>
+                </React.Fragment>
               ))}
 
             {noCategoryPrompts.length > 0 && (
-              <DropdownMenu.Label className='cdx-text-[10px] cdx-m-1 cdx-text-neutral-500 cdx-uppercase'>
+              <DropdownMenu.Label className="cdx-text-[10px] cdx-m-1 cdx-text-neutral-500 cdx-uppercase">
                 Uncategorized
               </DropdownMenu.Label>
             )}

src/components/Settings/Elements/AddItemButton.tsx

@@ -4,6 +4,7 @@ import { HiDocumentText, HiFolder } from 'react-icons/hi'
 import TextareaAutosize from 'react-textarea-autosize'
 import { Prompt, usePrompts } from '../../../hooks/usePrompts'
 import DialogPortal from '../../Layout/DialogPortal'
+import { getUUID } from '../../../lib/getUUID'
 
 export const AddItemButton = ({ isCategory }: { isCategory: boolean }) => {
   const [open, setOpen] = useState(false)
@@ -19,7 +20,7 @@ export const AddItemButton = ({ isCategory }: { isCategory: boolean }) => {
     const newPrompt = formData.get('prompt') as string
 
     const item = {
-      id: crypto.randomUUID(),
+      id: getUUID(),
       name: newName,
       prompt: isCategory ? undefined : newPrompt,
       children: isCategory ? [] : undefined,
@@ -37,14 +38,14 @@ export const AddItemButton = ({ isCategory }: { isCategory: boolean }) => {
       <Dialog.Trigger asChild>
         {isCategory ? (
           <button
-            className='btn !cdx-py-1 cdx-text-sm dark:cdx-bg-neutral-600 cdx-bg-neutral-400 hover:cdx-bg-neutral-500 hover:dark:cdx-bg-neutral-700'
-            type='button'
+            className="btn !cdx-py-1 cdx-text-sm dark:cdx-bg-neutral-600 cdx-bg-neutral-400 hover:cdx-bg-neutral-500 hover:dark:cdx-bg-neutral-700"
+            type="button"
           >
             <HiFolder />
             <span>Add Category</span>
           </button>
         ) : (
-          <button className='btn !cdx-py-1 cdx-text-sm' type='button'>
+          <button className="btn !cdx-py-1 cdx-text-sm" type="button">
             <HiDocumentText />
             <span>Add Prompt</span>
           </button>
@@ -55,25 +56,25 @@ export const AddItemButton = ({ isCategory }: { isCategory: boolean }) => {
         primaryAction={handleAdd}
         secondaryAction={() => setOpen(false)}
         primaryText="Save"
-        secondaryText='Cancel'
+        secondaryText="Cancel"
       >
-        <form className='cdx-flex cdx-flex-col cdx-gap-2' ref={formRef}>
+        <form className="cdx-flex cdx-flex-col cdx-gap-2" ref={formRef}>
           <label htmlFor="promptName">Name</label>
           <input
             name="promptName"
-            className='input'
+            className="input"
             type="text"
             required
-            placeholder='Enter Name'
+            placeholder="Enter Name"
           />
           {!isCategory && (
             <>
               <label htmlFor="prompt">Prompt</label>
               <TextareaAutosize
                 name="prompt"
-                className='input'
+                className="input"
                 required
-                placeholder='Enter Prompt'
+                placeholder="Enter Prompt"
                 minRows={2}
                 maxRows={15}
               />

src/components/Settings/Elements/DeletePromptButton.tsx

@@ -26,20 +26,20 @@ export const DeletePromptButton = ({ id }: { id: string }) => {
     <Dialog.Root open={open} onOpenChange={setOpen}>
       <Dialog.Trigger asChild>
         <button
-          className='cdx-rounded-sm cdx-p-1 dark:cdx-bg-red-500/50 cdx-bg-red-300/50'
+          className="cdx-rounded-sm cdx-p-1 dark:cdx-bg-red-500/50 cdx-bg-red-300/50"
           type="button"
         >
           <HiTrash />
         </button>
       </Dialog.Trigger>
       <DialogPortal
-        title='Delete Prompt ?'
+        title="Delete Prompt ?"
         primaryAction={() => {
           handleDelete()
           setOpen(false)
         }}
         secondaryAction={() => setOpen(false)}
-        primaryText='Delete'
+        primaryText="Delete"
       >
         You are about to delete this prompt. This action cannot be undone.
       </DialogPortal>

src/components/Settings/Elements/EditPromptButton.tsx

@@ -44,7 +44,7 @@ export const EditPromptButton = ({
     <Dialog.Root open={open} onOpenChange={setOpen}>
       <Dialog.Trigger asChild>
         <button
-          className='cdx-flex cdx-items-center cdx-gap-2 cdx-rounded-sm cdx-px-1 cdx-bg-blue-300/50 dark:cdx-bg-blue-500/50'
+          className="cdx-flex cdx-items-center cdx-gap-2 cdx-rounded-sm cdx-px-1 cdx-bg-blue-300/50 dark:cdx-bg-blue-500/50"
           type="button"
         >
           <HiPencilAlt /> Edit
@@ -55,26 +55,26 @@ export const EditPromptButton = ({
         primaryAction={handleEdit}
         secondaryAction={() => setOpen(false)}
         primaryText="Save"
-        secondaryText='Cancel'
+        secondaryText="Cancel"
       >
-        <form className='cdx-flex cdx-flex-col cdx-gap-2' ref={formRef}>
+        <form className="cdx-flex cdx-flex-col cdx-gap-2" ref={formRef}>
           <label htmlFor="promptName">Name</label>
           <input
             name="promptName"
-            className='input'
+            className="input"
             type="text"
             required
             defaultValue={item.name}
-            placeholder='Enter Name'
+            placeholder="Enter Name"
           />
           {isLeafNode && (
             <>
               <label htmlFor="prompt">Prompt</label>
               <TextareaAutosize
                 name="prompt"
-                className='input'
+                className="input"
                 required
-                placeholder='Enter Prompt'
+                placeholder="Enter Prompt"
                 minRows={2}
                 maxRows={15}
                 defaultValue={item.prompt}

src/components/Settings/Elements/QuickMenuCustomize.tsx

@@ -34,12 +34,12 @@ const QuickMenuCustomize = () => {
         TreeItemComponent={TreeItem}
       />
 
-      <div className='cdx-my-8'>
-        <div className='cdx-flex cdx-gap-2 cdx-justify-center'>
+      <div className="cdx-my-8">
+        <div className="cdx-flex cdx-gap-2 cdx-justify-center">
           <AddItemButton isCategory />
           <AddItemButton isCategory={false} />
         </div>
-        <div className='cdx-text-sm cdx-text-neutral-400 cdx-text-center cdx-mt-3'>
+        <div className="cdx-text-sm cdx-text-neutral-400 cdx-text-center cdx-mt-3">
           Categories are used to organize your prompts. Once you create a new
           category or prompt, they will go at last in the list. You can drag and
           drop them to reorder them as you wish.
@@ -59,20 +59,20 @@ const TreeItem = React.forwardRef<
         data-top-level={
           props.depth === 0 && !props.item.prompt ? 'true' : undefined
         }
-        className='dark:cdx-bg-neutral-900 cdx-bg-neutral-200 cdx-pr-2 cdx-min-w-[200px] cdx-justify-between cdx-overflow-hidden cdx-whitespace-nowrap cdx-flex cdx-items-center cdx-gap-3 cdx-rounded-sm data-[top-level]:dark:cdx-bg-neutral-700  data-[top-level]:cdx-bg-neutral-300 data-[top-level]:cdx-w-full'
+        className="dark:cdx-bg-neutral-900 cdx-bg-neutral-200 cdx-pr-2 cdx-min-w-[200px] cdx-justify-between cdx-overflow-hidden cdx-whitespace-nowrap cdx-flex cdx-items-center cdx-gap-3 cdx-rounded-sm data-[top-level]:dark:cdx-bg-neutral-700  data-[top-level]:cdx-bg-neutral-300 data-[top-level]:cdx-w-full"
       >
-        <div className='cdx-flex cdx-gap-3 cdx-items-center'>
+        <div className="cdx-flex cdx-gap-3 cdx-items-center">
           <div
             data-top-level={props.depth === 0 ? 'true' : undefined}
-            className='cdx-p-2 cdx-h-full cdx-bg-neutral-300 data-[top-level]:cdx-bg-neutral-300 dark:cdx-bg-neutral-700 cdx-cursor-move'
+            className="cdx-p-2 cdx-h-full cdx-bg-neutral-300 data-[top-level]:cdx-bg-neutral-300 dark:cdx-bg-neutral-700 cdx-cursor-move"
             {...props.handleProps}
           >
             <IoMove />
           </div>
-          <div className='cdx-py-1'>{props.item.name}</div>
+          <div className="cdx-py-1">{props.item.name}</div>
         </div>
 
-        <div className='cdx-flex cdx-gap-2 cdx-items-center'>
+        <div className="cdx-flex cdx-gap-2 cdx-items-center">
           <EditPromptButton
             item={props.item}
             isLeafNode={

src/components/Settings/Sections/ChatSettings.tsx

@@ -68,28 +68,28 @@ const ChatSettings = () => {
   }
 
   return (
-    <div className='cdx-w-full cdx-flex-shrink-0 cdx-rounded-md'>
-      <SectionHeading title='Chat' />
+    <div className="cdx-w-full cdx-flex-shrink-0 cdx-rounded-md">
+      <SectionHeading title="Chat" />
 
       {/* =========================
               OPEN AI KEY 
       ===========================*/}
 
       <FieldWrapper
-        title='Open AI Key'
-        description='You can get your Open AI key from https://beta.openai.com/account/api-keys'
+        title="Open AI Key"
+        description="You can get your Open AI key from https://beta.openai.com/account/api-keys"
         onSubmit={handleOpenAiKeySubmit}
       >
-        <div className='cdx-flex cdx-gap-2 cdx-items-center'>
+        <div className="cdx-flex cdx-gap-2 cdx-items-center">
           <input
             required
             pattern="sk-[a-zA-Z0-9]{48}"
-            className='input'
+            className="input"
             ref={apiKeyInputRef}
-            placeholder='sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+            placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
             defaultValue={chatSettings.openAIKey || ''}
           />
-          <button type="submit" className='btn'>
+          <button type="submit" className="btn">
             Update
           </button>
         </div>
@@ -100,13 +100,13 @@ const ChatSettings = () => {
       ===========================*/}
 
       <FieldWrapper
-        title='Modal'
-        description='Choose between OpenAI Chat Modals. For more information, visit https://platform.openai.com/docs/models/overview'
+        title="Modal"
+        description="Choose between OpenAI Chat Modals. For more information, visit https://platform.openai.com/docs/models/overview"
         row={true}
       >
         <select
           value={chatSettings.modal}
-          className='input cdx-w-44'
+          className="input cdx-w-44"
           onChange={handleModalChange}
         >
           {Object.values(AvailableModels).map((modal) => (
@@ -122,14 +122,14 @@ const ChatSettings = () => {
       ===========================*/}
 
       <FieldWrapper
-        title='Mode'
-        description='Tweak temperature of response. Creative will generate more non deterministic responses, Precise will generate more deterministic responses.'
+        title="Mode"
+        description="Tweak temperature of response. Creative will generate more non deterministic responses, Precise will generate more deterministic responses."
         row={true}
       >
         <select
           value={chatSettings.mode}
           onChange={handleModeChange}
-          className='input cdx-w-36'
+          className="input cdx-w-36"
         >
           {Object.entries(Mode).map(([mode, value]) => (
             <option key={value} value={value}>