Merge pull request #382 from l3vels/feat/chat-widget

Feat/chat widget
l3vels · Dec 14, 2023 · 509f16f · 509f16f
2 parents 71251db + e25ce88
commit 509f16f
Show file tree

Hide file tree

Showing 13 changed files with 308 additions and 181 deletions.
diff --git a/apps/ui/.eslintrc.json b/apps/ui/.eslintrc.json
@@ -99,5 +99,11 @@
     "react": {
       "version": "detect"
     }
-  }
+  },
+  "overrides": [
+    {
+      "files": ["dist/**/*"]
+    }
+  ],
+  "ignorePatterns": ["dist/"]
 }
diff --git a/apps/ui/index.html b/apps/ui/index.html
@@ -5,7 +5,10 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Open-source framework to make AI agents' team collaboration as effective as human collaboration." />
+    <meta
+      name="description"
+      content="Open-source framework to make AI agents' team collaboration as effective as human collaboration."
+    />
     <link rel="apple-touch-icon" href="/logo192.png" />
 
     <!--
@@ -28,6 +31,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <!-- <div id="test"></div> -->
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -39,5 +43,6 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
     <script type="module" src="/src/index.tsx"></script>
+    <!-- <script type="module" src="/src/TestComp.tsx"></script> -->
   </body>
 </html>
diff --git a/apps/ui/src/ChatWidget/ChatWidget.tsx b/apps/ui/src/ChatWidget/ChatWidget.tsx
@@ -0,0 +1,64 @@
+import { Route as Router, Routes, BrowserRouter } from 'react-router-dom'
+
+import styled, { ThemeProvider } from 'styled-components'
+import { lightTheme } from 'styles/theme'
+import ChatWindow from './ChatWindow'
+import { useState } from 'react'
+
+import Close from 'share-ui/components/Icon/Icons/components/Close'
+import Robot from 'share-ui/components/Icon/Icons/components/Robot'
+import useApollo from 'hooks/useApollo'
+import { ApolloProvider } from '@apollo/client'
+
+const ChatWidget = () => {
+  const client = useApollo()
+
+  const [showChat, setShowChat] = useState(false)
+
+  return (
+    <ApolloProvider client={client}>
+      <ThemeProvider theme={lightTheme}>
+        <StyledRoot>
+          <BrowserRouter>
+            {showChat && (
+              <Routes>
+                <Router element={<ChatWindow />} path='/' />
+              </Routes>
+            )}
+          </BrowserRouter>
+
+          <StyledChatWidget onClick={() => setShowChat(!showChat)}>
+            {showChat ? <Close size={40} /> : <Robot size={40} />}
+          </StyledChatWidget>
+        </StyledRoot>
+      </ThemeProvider>
+    </ApolloProvider>
+  )
+}
+
+export default ChatWidget
+
+const StyledRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  gap: 10px;
+`
+
+const StyledChatWidget = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+  background: #ca7af7;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  transition: all 0.3s ease; /* Add transition for smooth animation */
+
+  /* &:hover {
+    width: 60px;
+    height: 60px;
+  } */
+`
diff --git a/apps/ui/src/ChatWidget/ChatWindow.tsx b/apps/ui/src/ChatWidget/ChatWindow.tsx
@@ -0,0 +1,31 @@
+import ChatV2 from 'modals/AIChatModal/components/ChatV2'
+import { ChatContextProvider } from 'modals/AIChatModal/context/ChatContext'
+import styled from 'styled-components'
+
+const ChatWindow = () => {
+  return (
+    <StyledChatWindow>
+      <ChatContextProvider>
+        <ChatV2 chatSessionId='11af2cae-3423-42f6-a5d5-29a555dac424' />
+      </ChatContextProvider>
+    </StyledChatWindow>
+  )
+}
+
+export default ChatWindow
+
+const StyledChatWindow = styled.div`
+  width: calc(100vw - 30px);
+  max-width: 450px;
+
+  height: calc(75vh);
+
+  border-radius: 10px;
+
+  background-color: #fff;
+  /* border: 1px solid #000; */
+
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+
+  padding: 0 10px;
+`
diff --git a/apps/ui/src/ChatWidget/index.tsx b/apps/ui/src/ChatWidget/index.tsx
@@ -0,0 +1 @@
+export { default } from './ChatWidget'
diff --git a/apps/ui/src/TestComp.css b/apps/ui/src/TestComp.css
@@ -0,0 +1,7 @@
+#test {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+
+  z-index: 1000000000;
+}
diff --git a/apps/ui/src/TestComp.tsx b/apps/ui/src/TestComp.tsx
@@ -0,0 +1,10 @@
+import ReactDOM from 'react-dom'
+
+import './TestComp.css'
+import ChatWidget from 'ChatWidget'
+
+const renderTestComp = () => {
+  ReactDOM.render(<ChatWidget />, document.getElementById('test'))
+}
+
+renderTestComp()
diff --git a/apps/ui/src/modals/AIChatModal/AIChat.tsx b/apps/ui/src/modals/AIChatModal/AIChat.tsx
@@ -21,11 +21,10 @@ const AIChat = () => {
         <Tab onClick={() => setActiveTab(0)}>Team</Tab>
         <Tab onClick={() => setActiveTab(1)}>Private</Tab>
       </StyledTabList> */}
+      <ChatV2 />
       <StyledTabContext activeTabId={activeTab}>
         <TabPanels noAnimation className='TabsContextClass'>
-          <TabPanel className='TabsContextClass'>
-            <ChatV2 />
-          </TabPanel>
+          <TabPanel className='TabsContextClass'></TabPanel>
 
           <TabPanel>
             <ChatV2 />

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMessageList/ChatMessageListV2.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMessageList/ChatMessageListV2.tsx
@@ -320,8 +320,16 @@ const StyledLoaderWrapper = styled.div`
 `
 const StyledReplyMessageContainer = styled.div`
   transition: opacity 1000ms;
-  /* width: 100%; */
   opacity: 0;
-  height: 20px;
-  max-height: 20px;
+  /* width: 100%; */
+  /* height: 20px;
+  max-height: 20px; */
+
+  min-height: 20px;
+  width: 100%;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 `
diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanReply.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanReply.tsx
@@ -53,8 +53,8 @@ export const StyledReplyWrapper = styled.div`
   /* padding-left: 50px; */
   font-size: 14px;
 
-  width: calc(100vw - 100px);
-
+  min-width: 400px;
+  width: calc(100% - 100px);
   max-width: 800px;
 
   height: 20px;