added postcss

philipdaquin · Jan 23, 2024 · e71b62e · e71b62e
1 parent ef646bf
commit e71b62e
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "@vitejs/plugin-react": "4.2.0",
     "chokidar": "3.5.3",
     "cross-env": "7.0.3",
+    "daisyui": "^4.6.0",
     "eslint": "8.56.0",
     "eslint-config-airbnb-typescript": "17.1.0",
     "eslint-config-prettier": "9.0.0",
@@ -63,16 +64,16 @@
     "jsdom": "^22.1.0",
     "lint-staged": "15.2.0",
     "npm-run-all": "4.1.5",
+    "postcss": "^8.4.19",
     "prettier": "3.1.0",
     "react-icons": "^5.0.1",
     "rollup": "4.3.0",
     "sass": "1.69.5",
+    "tailwindcss": "^3.2.4",
     "ts-loader": "9.5.0",
     "tslib": "2.6.2",
     "typescript": "5.2.2",
-    "tailwindcss": "^3.2.4",
     "vite": "5.0.11",
-    "postcss": "^8.4.19",
     "vitest": "^0.34.6",
     "ws": "8.14.2"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/popup/src/page/Popup.tsx b/src/pages/popup/src/page/Popup.tsx
@@ -5,27 +5,98 @@ import '@pages/popup/Popup.css';
 import withSuspense from '@src/shared/hoc/withSuspense';
 import withErrorBoundary from '@src/shared/hoc/withErrorBoundary';
 import { BsFillSendFill } from 'react-icons/bs';
+import { useState } from 'react';
 // import { BsFillSendFill } from "react-icons/bs";
 
 
 
+
+type MessageFormat = { 
+  name: string,
+  message: string, 
+}
+
+enum Models { 
+  GPT_35_Turbo = 'GPT-3.5 Turbo',
+  GPT4 = 'GPT-4'
+}
+
+
 const Popup = () => {
   // const theme = useStorage(exampleThemeStorage);
-
-  const chatMessages = [
-    'Hello world',
-    'Welcome to Open AI',
-    'What the hell ✏️🗑️⚙️🎯'
+  const [modelSelected, setModelSelected] = useState(Models.GPT_35_Turbo)
+  const chatMessages: MessageFormat[] = [
+    {
+      name: 'You',
+      message: 'Hello world',
+    },
+    {
+      name: 'AI',
+      message: 'Hows it going!'
+    },
+    {
+      name: 'You',
+      message: 'Welcome to Open AI',
+    },
+    {
+      name: 'AI',
+      message: 'No thats my job!'
+    },
+    {
+      name: 'You',
+      message: 'What the hell ✏️🗑️⚙️🎯'
+    },
+
+    {
+      name: 'AI',
+      message: 'No thats my job!'
+    },
+    {
+      name: 'You',
+      message: 'What the hell ✏️🗑️⚙️🎯'
+    },
+
+    {
+      name: 'AI',
+      message: 'No thats my job!'
+    },
+    {
+      name: 'You',
+      message: 'What the hell ✏️🗑️⚙️🎯'
+    },
+    {
+      name: 'You',
+      message: 'What the hell ✏️🗑️⚙️🎯'
+    },
+    {
+      name: 'You',
+      message: 'What the hell ✏️🗑️⚙️🎯'
+    },
+    {
+      name: 'You',
+      message: 'What the hell ✏️🗑️⚙️🎯'
+    },
+    {
+      name: 'You',
+      message: 'What the hell ✏️🗑️⚙️🎯'
+    },
   ]
 
+  const [toggle, setToggle] = useState(true)
+  const openDropDown = () => setToggle(!toggle)
+
 
   return (
-    <div className='flex flex-col'>
-      <div className='flex flex-row justify-between bg-gray-400 py-4 px-4'>
-        <button className='p-2 px-2 bg-slate-200 w-fit rounded-2xl text-[14px]' title='LLM Engine'>
-          🤖 GTP-3.50-Turbo (fastest)
+    <div className='flex flex-col  w-full '>
+      <div className='flex flex-row justify-between top-0 z-10 fixed w-full bg-gray-300 py-4 px-4 overflow-hidden'>
+        <button onClick={openDropDown} className='p-2 px-2 bg-slate-200 w-fit rounded-2xl text-[14px]' 
+          title='LLM Engine'>
+          🤖 {modelSelected}
+
+
         </button>
 
+
         <div className='flex items-center space-x-2'>
           <button className='p-2 bg-slate-200 w-fit rounded-xl' title='Clear chat'>
             🗑️
@@ -36,18 +107,33 @@ const Popup = () => {
         </div>
       </div>
 
-      <div className='px-4 w-full h-full'>
-        <div className=''>
-          {chatMessages.map((f, idx) => { 
+      <div hidden={toggle} className='absolute flex flex-col space-y-1 items-left bg-white w-full text-left' >
+              <button className='p-2 text-left ' onClick={() => setModelSelected(Models.GPT_35_Turbo)}>GPT 3.5 Turbo</button>
+              <button className='p-2 text-left ' onClick={() => setModelSelected(Models.GPT4)}>GPT-4</button>
+            </div>
+
+
+      {/* Scrollable chats */}
+      <div className='pl-4 w-full h-full flex-col items-center justify-center'>
+        <div className='overflow-auto max-h-[300px]'>
+          {chatMessages.map(({message, name}, idx) => { 
             return (
-              <div key={idx} className='p-4 rounded-full w-fit bg-green-400 mt-2'>
-                {f}
+              <div key={idx} className='p-2 flex-col flex text-left items-start rounded-full w-full  mt-2'>
+                <div className='font-bold'>
+                  {name}
+                </div>
+                <div>
+                  {message}
+                </div>
               </div>
             )
           })}
         </div>
       </div>
-      <div className='w-full b-full flex flex-row space-x-2 absolute bottom-3 px-2'>
+
+
+      {/* Input fields */}
+      <div className='w-full fixed b-full flex flex-row space-x-2 py-4 bottom-0 px-2 bg-slate-100'>
         <input type="text" placeholder='Message ChatGPT...' className='rounded-lg border py-2 border-black px-2  w-full focus:outline-none text-sm '/>
         <div className=' items-center flex justify-center p-2 bg-slate-200 w-10 h-10 rounded-xl' title='Setting'>
             <BsFillSendFill height={10} width={10}/>