fix: show chat box in popup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "popup",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "An assistant powered by ChatGPT",
   "license": "MIT",
   "repository": {

src/pages/popup/Popup.css

@@ -1,4 +1,4 @@
-.App {
+.Popup-App {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -7,7 +7,7 @@
   text-align: center;
   height: 100%;
   padding: 10px;
-  background-color: #282c34;
+  background-color: #ffffff;
 }
 
 .App-logo {

src/pages/popup/Popup.tsx

@@ -1,25 +1,51 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import logo from '@assets/img/logo.png';
 import '@pages/popup/Popup.css';
 import useStorage from '@src/shared/hooks/useStorage';
 import exampleThemeStorage from '@src/shared/storages/exampleThemeStorage';
 import withSuspense from '@src/shared/hoc/withSuspense';
 import withErrorBoundary from '@src/shared/hoc/withErrorBoundary';
-import Settings from '@pages/content/Settings/Settings';
+import ChatBox from '@pages/components/ChatBox';
+import { getSystemPrompt } from '@src/agent/agent';
+import AgentsLoader from '@src/agent/agentsRegister';
+import { Divider, Spinner } from '@chakra-ui/react';
+import { createNewSession } from '@pages/content/storageUtils';
 
 const Popup = () => {
   const theme = useStorage(exampleThemeStorage);
+  const [agent, setAgent] = useState(null);
+  const [sessionId, setSessionId] = useState(-1);
+
+  useEffect(() => {
+    const agentsRegistry = new AgentsLoader();
+    agentsRegistry.loadAgents().then(agents => {
+      const agent = agents.get('chat-with-the-bot');
+      setAgent(agent);
+      createNewSession('Chat with the bot', agent).then(sessionId => {
+        setSessionId(sessionId);
+      });
+    });
+  }, []);
 
   return (
-    <div
-      className="App"
-      style={{
-        backgroundColor: theme === 'light' ? '#fff' : '#000',
-      }}>
+    <div className="Popup-App">
       <header className="App-header" style={{ color: theme === 'light' ? '#fff' : '#000' }}>
         <img src={logo} className="App-logo" alt="logo" />
       </header>
-      <Settings />
+      <Divider mb={2} />
+      {agent && sessionId > 0 ? (
+        <ChatBox
+          preInput=""
+          inputType="default"
+          systemPrompt={getSystemPrompt(agent, 'default')}
+          sessionId={sessionId}
+          newMessages={[]}
+          minW="400px"
+          maxH="600px"
+        />
+      ) : (
+        <Spinner />
+      )}
     </div>
   );
 };

src/pages/popup/index.css

@@ -1,6 +1,6 @@
 body {
   width: 580px;
-  height: 260px;
+  height: 360px;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
     'Droid Sans', 'Helvetica Neue', sans-serif;