Camel AGI first code commit
This commit is contained in:
Anil-matcha
48
client/package.json
Normal file
48
client/package.json
Normal file
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"name": "autogpt",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"proxy": "http://localhost:5000",
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.9.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.2.0",
|
||||
"bootstrap": "^5.2.3",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.6.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-markdown": "^8.0.5",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.4.3",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-toastify": "^9.1.1",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
BIN
client/public/favicon.ico
Normal file
BIN
client/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
47
client/public/index.html
Normal file
47
client/public/index.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;900&display=swap" rel="stylesheet"/>
|
||||
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>AutoGPT</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
BIN
client/public/logo192.png
Normal file
BIN
client/public/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
client/public/logo512.png
Normal file
BIN
client/public/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
25
client/public/manifest.json
Normal file
25
client/public/manifest.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
3
client/public/robots.txt
Normal file
3
client/public/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
20
client/src/App.js
Normal file
20
client/src/App.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import './styles/home.css';
|
||||
import { BrowserRouter, Route, Routes,Navigate } from 'react-router-dom';
|
||||
import AgentConvo from './pages/AgentConvo';
|
||||
import AgentConvoShare from './pages/AgentConvoShare';
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route exact path='/' element={<AgentConvo/>}/>
|
||||
<Route exact path='/conversation/share' element={<AgentConvoShare/>}/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
8
client/src/App.test.js
Normal file
8
client/src/App.test.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
BIN
client/src/assets/camelagi.png
Normal file
BIN
client/src/assets/camelagi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
1
client/src/assets/discord.svg
Normal file
1
client/src/assets/discord.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 985 B |
10
client/src/assets/google.svg
Normal file
10
client/src/assets/google.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||
<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
|
||||
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
4
client/src/assets/key.svg
Normal file
4
client/src/assets/key.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.0607 4.06066C22.6464 3.47487 22.6464 2.52513 22.0607 1.93934C21.4749 1.35355 20.5251 1.35355 19.9393 1.93934L11.2747 10.6039C10.1856 9.90521 8.89011 9.5 7.5 9.5C3.63401 9.5 0.5 12.634 0.5 16.5C0.5 20.366 3.63401 23.5 7.5 23.5C11.366 23.5 14.5 20.366 14.5 16.5C14.5 15.1099 14.0948 13.8144 13.3961 12.7253L16.2129 9.90838L17.4841 11.1795C18.2652 11.9606 19.5315 11.9606 20.3125 11.1795L22.7889 8.70313C23.57 7.92208 23.57 6.65575 22.7889 5.8747L21.5178 4.60354L22.0607 4.06066ZM3.5 16.5C3.5 14.2909 5.29086 12.5 7.5 12.5C9.70914 12.5 11.5 14.2909 11.5 16.5C11.5 18.7091 9.70914 20.5 7.5 20.5C5.29086 20.5 3.5 18.7091 3.5 16.5Z" fill="#ffffff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 924 B |
1
client/src/assets/logout-white.svg
Normal file
1
client/src/assets/logout-white.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffffff" d="M12.59,13l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4a1,1,0,0,0,.21-.33,1,1,0,0,0,0-.76,1,1,0,0,0-.21-.33l-4-4a1,1,0,1,0-1.42,1.42L12.59,11H3a1,1,0,0,0,0,2ZM12,2A10,10,0,0,0,3,7.55a1,1,0,0,0,1.8.9A8,8,0,1,1,12,20a7.93,7.93,0,0,1-7.16-4.45,1,1,0,0,0-1.8.9A10,10,0,1,0,12,2Z"/></svg>
|
||||
|
After Width: | Height: | Size: 369 B |
14
client/src/assets/question-mark.svg
Normal file
14
client/src/assets/question-mark.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M23.424,10.827c0,3.956-4.533,5.478-5.507,6.907c-0.729,1.063-0.485,2.557-2.495,2.557c-1.309,0-1.946-1.064-1.946-2.039
|
||||
c0-3.623,5.323-4.442,5.323-7.425c0-1.643-1.096-2.616-2.921-2.616c-3.895,0-2.373,4.016-5.323,4.016
|
||||
c-1.066,0-1.979-0.639-1.979-1.855c0-2.983,3.407-5.628,7.119-5.628C19.59,4.742,23.424,6.536,23.424,10.827z M15.545,22.268
|
||||
c-1.369,0-2.496,1.125-2.496,2.496c0,1.369,1.127,2.494,2.496,2.494c1.367,0,2.494-1.125,2.494-2.494
|
||||
C18.039,23.393,16.912,22.268,15.545,22.268z M32,16c0,8.822-7.178,16-16,16C7.178,32,0,24.822,0,16S7.178,0,16,0
|
||||
C24.822,0,32,7.177,32,16z M29,16c0-7.168-5.832-13-13-13S3,8.832,3,16s5.832,13,13,13S29,23.168,29,16z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
17
client/src/assets/reload.svg
Normal file
17
client/src/assets/reload.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#ffffff" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 489.698 489.698" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M468.999,227.774c-11.4,0-20.8,8.3-20.8,19.8c-1,74.9-44.2,142.6-110.3,178.9c-99.6,54.7-216,5.6-260.6-61l62.9,13.1
|
||||
c10.4,2.1,21.8-4.2,23.9-15.6c2.1-10.4-4.2-21.8-15.6-23.9l-123.7-26c-7.2-1.7-26.1,3.5-23.9,22.9l15.6,124.8
|
||||
c1,10.4,9.4,17.7,19.8,17.7c15.5,0,21.8-11.4,20.8-22.9l-7.3-60.9c101.1,121.3,229.4,104.4,306.8,69.3
|
||||
c80.1-42.7,131.1-124.8,132.1-215.4C488.799,237.174,480.399,227.774,468.999,227.774z"/>
|
||||
<path d="M20.599,261.874c11.4,0,20.8-8.3,20.8-19.8c1-74.9,44.2-142.6,110.3-178.9c99.6-54.7,216-5.6,260.6,61l-62.9-13.1
|
||||
c-10.4-2.1-21.8,4.2-23.9,15.6c-2.1,10.4,4.2,21.8,15.6,23.9l123.8,26c7.2,1.7,26.1-3.5,23.9-22.9l-15.6-124.8
|
||||
c-1-10.4-9.4-17.7-19.8-17.7c-15.5,0-21.8,11.4-20.8,22.9l7.2,60.9c-101.1-121.2-229.4-104.4-306.8-69.2
|
||||
c-80.1,42.6-131.1,124.8-132.2,215.3C0.799,252.574,9.199,261.874,20.599,261.874z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
client/src/assets/send.svg
Normal file
1
client/src/assets/send.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 32 32" viewBox="0 0 32 32"><path style="color:1C1B1F" d="M30.50443,14.58744l-28-10C1.95023,4.38871,1.32913,4.5352,0.91947,4.95951c-0.40918,0.4248-0.53125,1.0498-0.31201,1.59766l3.77686,9.44287l-3.77686,9.44287c-0.21924,0.54785-0.09717,1.17285,0.31201,1.59766c0.28809,0.29883,0.68018,0.45947,1.08105,0.45947c0.16895,0,0.33936-0.02832,0.50391-0.0874l28-10c0.59717-0.21338,0.99561-0.77881,0.99561-1.4126C31.50003,15.36625,31.10159,14.80082,30.50443,14.58744z M4.62796,23.46879l2.38751-5.96875h5.14374c0.82861,0,1.5-0.67139,1.5-1.5c0-0.82861-0.67139-1.5-1.5-1.5H7.01548L4.62796,8.53129l20.91211,7.46875L4.62796,23.46879z"/></svg>
|
||||
|
After Width: | Height: | Size: 692 B |
8
client/src/assets/share-white.svg
Normal file
8
client/src/assets/share-white.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_202_132" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="15" height="15">
|
||||
<rect x="0.531738" y="0.298828" width="13.7877" height="13.7877" fill="#ffffff"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_202_132)">
|
||||
<path d="M10.8727 12.9375C10.3939 12.9375 9.98701 12.7699 9.65189 12.4348C9.31678 12.0997 9.14922 11.6928 9.14922 11.214C9.14922 11.147 9.154 11.0775 9.16358 11.0055C9.17315 10.9339 9.18752 10.8693 9.20667 10.8119L5.15653 8.4565C4.99376 8.60012 4.81184 8.71253 4.61077 8.79372C4.4097 8.8753 4.19905 8.91609 3.97883 8.91609C3.50009 8.91609 3.09316 8.74853 2.75805 8.41341C2.42293 8.07829 2.25537 7.67136 2.25537 7.19263C2.25537 6.71389 2.42293 6.30696 2.75805 5.97184C3.09316 5.63672 3.50009 5.46916 3.97883 5.46916C4.19905 5.46916 4.4097 5.50976 4.61077 5.59095C4.81184 5.67253 4.99376 5.78513 5.15653 5.92875L9.20667 3.57336C9.18752 3.51591 9.17315 3.45137 9.16358 3.37975C9.154 3.30775 9.14922 3.23824 9.14922 3.17122C9.14922 2.69248 9.31678 2.28555 9.65189 1.95043C9.98701 1.61531 10.3939 1.44775 10.8727 1.44775C11.3514 1.44775 11.7583 1.61531 12.0935 1.95043C12.4286 2.28555 12.5961 2.69248 12.5961 3.17122C12.5961 3.64995 12.4286 4.05688 12.0935 4.392C11.7583 4.72712 11.3514 4.89468 10.8727 4.89468C10.6525 4.89468 10.4418 4.85389 10.2407 4.77231C10.0397 4.69112 9.85775 4.57871 9.69498 4.43509L5.64485 6.79048C5.664 6.84793 5.67836 6.91247 5.68793 6.98409C5.69751 7.05609 5.70229 7.1256 5.70229 7.19263C5.70229 7.25965 5.69751 7.32897 5.68793 7.40059C5.67836 7.47259 5.664 7.53732 5.64485 7.59477L9.69498 9.95016C9.85775 9.80654 10.0397 9.69394 10.2407 9.61236C10.4418 9.53117 10.6525 9.49057 10.8727 9.49057C11.3514 9.49057 11.7583 9.65813 12.0935 9.99325C12.4286 10.3284 12.5961 10.7353 12.5961 11.214C12.5961 11.6928 12.4286 12.0997 12.0935 12.4348C11.7583 12.7699 11.3514 12.9375 10.8727 12.9375ZM10.8727 3.7457C11.0355 3.7457 11.1718 3.69074 11.2817 3.58082C11.392 3.47052 11.4472 3.33399 11.4472 3.17122C11.4472 3.00844 11.392 2.87191 11.2817 2.76161C11.1718 2.65169 11.0355 2.59673 10.8727 2.59673C10.7099 2.59673 10.5736 2.65169 10.4636 2.76161C10.3533 2.87191 10.2982 3.00844 10.2982 3.17122C10.2982 3.33399 10.3533 3.47052 10.4636 3.58082C10.5736 3.69074 10.7099 3.7457 10.8727 3.7457ZM3.97883 7.76711C4.1416 7.76711 4.27814 7.71196 4.38844 7.60166C4.49836 7.49174 4.55332 7.3554 4.55332 7.19263C4.55332 7.02985 4.49836 6.89332 4.38844 6.78302C4.27814 6.6731 4.1416 6.61814 3.97883 6.61814C3.81606 6.61814 3.67953 6.6731 3.56922 6.78302C3.4593 6.89332 3.40435 7.02985 3.40435 7.19263C3.40435 7.3554 3.4593 7.49174 3.56922 7.60166C3.67953 7.71196 3.81606 7.76711 3.97883 7.76711ZM10.8727 11.7885C11.0355 11.7885 11.1718 11.7334 11.2817 11.6231C11.392 11.5132 11.4472 11.3768 11.4472 11.214C11.4472 11.0513 11.392 10.9149 11.2817 10.805C11.1718 10.6947 11.0355 10.6395 10.8727 10.6395C10.7099 10.6395 10.5736 10.6947 10.4636 10.805C10.3533 10.9149 10.2982 11.0513 10.2982 11.214C10.2982 11.3768 10.3533 11.5132 10.4636 11.6231C10.5736 11.7334 10.7099 11.7885 10.8727 11.7885Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
1
client/src/assets/user-1.svg
Normal file
1
client/src/assets/user-1.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="532" height="532" viewBox="0 0 532 532" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><circle cx="270.759" cy="260.92941" r="86.34897" fill="#a0616a"/><polygon points="199.2879 366.61365 217.2879 320.61365 310.2879 306.61365 320.28003 408.44043 226.28003 410.44043 199.2879 366.61365" fill="#a0616a"/></g><path d="M357.94449,276.8613c-1.12067,4.48965-3.38602,15.17972-6.9238,15.23233-2.89023,.04208-5.65668-46.33466-2.76953-54.00568,3.31638-8.81271-5.39886-19.96062-11.96411-25.6832-11.80423-10.2894-38.00696,11.80466-64.65118,1.79587-.70633-.26482-.56558-.23502-8.97934-3.59174-25.88966-10.32974-27.2506-10.62788-28.73386-10.77521-12.55046-1.24167-27.86705,9.02844-34.12146,21.55038-6.50168,13.01653-1.06937,24.18106-7.18346,55.67184-.71246,3.67065-1.83138,8.90216-3.59174,8.97934-3.21819,.14029-6.3605-17.04846-7.18346-21.55038-3.44792-18.86186-6.7722-37.04675,0-57.46771,.73878-2.22729,5.29158-10.49458,14.36693-26.93799,13.0744-23.68825,19.65018-35.57709,21.55038-37.7132,13.62859-15.32624,38.43575-29.30734,59.26357-23.34626,10.52704,3.01299,8.63953,7.85691,21.55038,12.57105,23.00821,8.40057,43.00476-1.87303,46.69254,5.3876,1.9537,3.84602-3.51236,7.01686-3.59174,14.36693-.13593,12.6114,15.81424,16.25575,25.14212,28.73386,5.01447,6.70819,13.59753,6.78012-8.87228,96.78212l.00003,.00003Z" fill="#2f2e41"/></g><path d="M464.92017,442.61035c-3.48022,3.91016-7.09009,7.74023-10.83008,11.48047-50.23999,50.23926-117.04004,77.90918-188.09009,77.90918-61.40991,0-119.63989-20.66992-166.75-58.71973-.03003-.01953-.05005-.04004-.07983-.07031-6.25-5.03906-12.30005-10.39941-18.14014-16.05957,.10986-.87988,.22998-1.75,.35986-2.61035,.82007-5.7998,1.73022-11.33008,2.75-16.41992,8.3501-41.71973,118.22021-85.51953,121.08008-86.66016,.04004-.00977,.06006-.01953,.06006-.01953,0,0,14.14014,52.12012,74.72998,51.4502,41.27002-.4502,33.27002-51.4502,33.27002-51.4502,0,0,.5,.09961,1.43994,.2998,11.91992,2.53027,94.68018,20.70996,127.33008,45.52051,9.94995,7.55957,17.08984,23.66016,22.21997,42.85938,.21997,.82031,.42993,1.66016,.65015,2.49023Z" fill="#763FF9"/><path d="M454.09009,77.91016C403.8501,27.6709,337.05005,0,266,0S128.15015,27.6709,77.90991,77.91016C27.67017,128.15039,0,194.9502,0,266c0,64.85059,23.05005,126.16016,65.29004,174.57031,4.03003,4.62988,8.23999,9.13965,12.61987,13.52051,1.03003,1.0293,2.07007,2.05957,3.12012,3.05957,5.84009,5.66016,11.89014,11.02051,18.14014,16.05957,.02979,.03027,.0498,.05078,.07983,.07031,47.11012,38.0498,105.3401,58.71973,166.75001,58.71973,71.05005,0,137.8501-27.66992,188.09009-77.90918,3.73999-3.74023,7.34985-7.57031,10.83008-11.48047,43.36987-48.71973,67.07983-110.83984,67.07983-176.61035,0-71.0498-27.66992-137.84961-77.90991-188.08984Zm10.17993,362.20996c-7.86987,8.9502-16.33008,17.37012-25.33008,25.18066-17.06982,14.84961-36.06982,27.5293-56.55981,37.62988-7.19019,3.5498-14.56006,6.7793-22.1001,9.66992-29.29004,11.24023-61.08008,17.39941-94.28003,17.39941-32.04004,0-62.76001-5.73926-91.18994-16.23926-11.67017-4.30078-22.94995-9.41016-33.78003-15.26074-1.59009-.85938-3.16992-1.72949-4.73999-2.61914-8.26001-4.68066-16.25-9.79004-23.91992-15.31055-10.98999-7.87988-21.3501-16.58984-30.98022-26.03027-5.3999-5.29004-10.55981-10.7998-15.48975-16.5293C26.09009,391.77051,2,331.65039,2,266,2,120.43066,120.42993,2,266,2s264,118.43066,264,264c0,66.66016-24.82983,127.62012-65.72998,174.12012Z" fill="#3f3d56"/></svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
1
client/src/assets/user-2.svg
Normal file
1
client/src/assets/user-2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 4.9 KiB |
1
client/src/assets/user-3.svg
Normal file
1
client/src/assets/user-3.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="532" height="532" viewBox="0 0 532 532" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="270.75986" cy="260.93427" r="86.34897" fill="#ffb6b6"/><polygon points="221.18982 360.05209 217.28876 320.6185 295.18982 306.05209 341.18982 418.05209 261.18982 510.05209 204.18982 398.05209 221.18982 360.05209" fill="#ffb6b6"/><path d="m216.0374,340.35736l17.03111,3.84802s-13.38821-42.45453-8.84396-46.50766c4.54427-4.05316,15.68007,2.33328,15.68007,2.33328l11.70201,13.1199,14.25394-14.51239s15.47495-19.2421,21.53397-24.6463-3.67319-25.46364-3.67319-25.46364c0,0,89.89185-24.23923,56.44299-67.83968,0,0-19.61093-34.18452-25.99734-23.04871-6.38641,11.1358-14.00162-6.55013-14.00162-6.55013l-23.25381,4.42198s-45.89429-27.06042-89.45331,30.82959c-43.55902,57.89003,28.57916,154.01572,28.57916,154.01572h-.00002Z" fill="#2f2e41"/><path d="m433.16003,472.95001c-47.19,38.26001-105.57001,59.04999-167.16003,59.04999-56.23999,0-109.81-17.33997-154.62-49.47998.08002-.84003.16003-1.66998.23004-2.5,1.19-13,2.25-25.64001,2.94995-36.12,2.71002-40.69,97.64001-67.81,97.64001-67.81,0,0,.42999.42999,1.29004,1.17999,5.23999,4.59998,26.50995,21.27997,63.81,25.94,33.25995,4.15997,44.20996-15.57001,47.51996-25.02002,1-2.88,1.30005-4.81,1.30005-4.81l97.63995,46.10999c6.37,9.10004,8.86005,28.70001,9.35004,50.73004.01996.90997.03998,1.81.04999,2.72998Z" fill="#3f65f9"/><path d="m454.09003,77.91003C403.85004,27.66998,337.05005,0,266,0S128.15002,27.66998,77.91003,77.91003C27.67004,128.15002,0,194.95001,0,266c0,64.85004,23.05005,126.16003,65.29004,174.57001,4.02997,4.63,8.23999,9.14001,12.62,13.52002,1.02997,1.02997,2.07001,2.06,3.12,3.06,2.79999,2.70996,5.65002,5.35999,8.54999,7.92999,1.76001,1.57001,3.54004,3.10999,5.34003,4.62,1.40997,1.19,2.82001,2.35999,4.25,3.51001.02997.02997.04999.04999.07996.07001,3.97003,3.19995,8.01001,6.27997,12.13,9.23999,44.81,32.14001,98.37999,49.47998,154.61998,49.47998,61.59003,0,119.97003-20.78998,167.16003-59.04999,3.84998-3.12,7.62-6.35999,11.32001-9.71002,3.26996-2.95996,6.46997-6.01001,9.60999-9.14996.98999-.98999,1.97998-1.98999,2.95001-3,2.70001-2.78003,5.32001-5.61005,7.88-8.48004,43.37-48.71997,67.07996-110.83997,67.07996-176.60999,0-71.04999-27.66998-137.84998-77.90997-188.08997Zm10.17999,362.20997c-2.5,2.84003-5.06,5.64001-7.67999,8.37-4.08002,4.25-8.28998,8.37-12.64001,12.34003-1.64996,1.52002-3.32001,3-5.01001,4.46997-1.91998,1.67004-3.85999,3.31-5.82996,4.92004-15.53003,12.75-32.54004,23.75-50.73004,32.70996-7.19,3.54999-14.56,6.78003-22.09998,9.67004-29.28998,11.23999-61.08002,17.39996-94.28003,17.39996-32.03998,0-62.75995-5.73999-91.19-16.23999-11.66998-4.29999-22.94995-9.40997-33.77997-15.26001-1.59003-.85999-3.16998-1.72998-4.73999-2.62-8.26001-4.67999-16.25-9.78998-23.91998-15.31-.25-.17999-.51001-.37-.76001-.54999-5.46002-3.94-10.77002-8.09003-15.90002-12.45001-1.88-1.59003-3.73999-3.20001-5.57001-4.84998-2.97998-2.65002-5.89996-5.38-8.75-8.18005-5.39996-5.28998-10.56-10.79999-15.48999-16.52997C26.09003,391.77002,2,331.65002,2,266,2,120.42999,120.43005,2,266,2s264,118.42999,264,264c0,66.66003-24.82996,127.62-65.72998,174.12Z" fill="#3f3d56"/></svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
1
client/src/assets/user-4.svg
Normal file
1
client/src/assets/user-4.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.2 KiB |
BIN
client/src/assets/user.png
Normal file
BIN
client/src/assets/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 874 B |
13
client/src/index.css
Normal file
13
client/src/index.css
Normal file
@@ -0,0 +1,13 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
18
client/src/index.js
Normal file
18
client/src/index.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
1
client/src/logo.svg
Normal file
1
client/src/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
262
client/src/pages/AgentConvo.js
Normal file
262
client/src/pages/AgentConvo.js
Normal file
@@ -0,0 +1,262 @@
|
||||
import {useState,useEffect,useRef} from 'react';
|
||||
import '../styles/agent-convo.css'
|
||||
import { Button, Stack, Image, Form, Row, Col, Spinner, InputGroup,FormControl, Modal } from "react-bootstrap";
|
||||
import { ReactComponent as ReloadIcon } from "../assets/reload.svg";
|
||||
import { ReactComponent as KeyIcon } from "../assets/key.svg";
|
||||
import { ReactComponent as LogoutIcon } from "../assets/logout-white.svg";
|
||||
import { ReactComponent as Bot1Icon } from "../assets/user-1.svg";
|
||||
import { ReactComponent as Bot2Icon } from "../assets/user-2.svg";
|
||||
import { ReactComponent as Bot3Icon } from "../assets/user-3.svg";
|
||||
import { ReactComponent as Bot4Icon } from "../assets/user-4.svg";
|
||||
import logoImage from '../assets/camelagi.png'
|
||||
import {ReactComponent as SendIcon} from '../assets/send.svg'
|
||||
import { ToastContainer, toast } from 'react-toastify';
|
||||
import {ReactComponent as GoogleIcon} from '../assets/google.svg'
|
||||
import { ReactComponent as DiscordIcon } from "../assets/discord.svg";
|
||||
import axios from "axios"
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import { ReactComponent as ShareIcon } from "../assets/share-white.svg";
|
||||
|
||||
|
||||
function AgentConvo() {
|
||||
const [isLoggedIn,setIsLoggedIn] = useState(false);
|
||||
const [authUrl,setAuthUrl] = useState("")
|
||||
const [ranUser1, setRanUser1] = useState(null);
|
||||
const [ranUser2, setRanUser2] = useState(null);
|
||||
const [started, setStarted] = useState(false);
|
||||
const [key, setKey] = useState("");
|
||||
const [task, setTask] = useState("");
|
||||
const [finished, setFinished] = useState(false);
|
||||
const [keyAdded, setKeyAdded] = useState(false);
|
||||
const [user, setUser] = useState(false);
|
||||
const [role1, setRole1] = useState("");
|
||||
const [role2, setRole2] = useState("");
|
||||
const [chat,setChat] = useState([])
|
||||
const [sessId,setSessId] = useState(0)
|
||||
const [showBanner, setShowBanner] = useState(false);
|
||||
const [turn,setTurn] = useState(0)
|
||||
const sessionRef = useRef(null)
|
||||
sessionRef.current = sessId
|
||||
const chatRef = useRef(null)
|
||||
chatRef.current = chat
|
||||
const turnRef = useRef(null)
|
||||
turnRef.current = turn
|
||||
|
||||
let fetchMessages = () => {
|
||||
setChat([...chatRef.current,{role:0,msg:null}])
|
||||
|
||||
axios.post("/rp/start",{role1:role1,role2:role2,task:task,sessId:sessionRef.current}).then((res)=>{
|
||||
setSessId(res.data.sessId)
|
||||
if(res.data.convoEnd==true){
|
||||
setFinished((prev)=>true)
|
||||
}else{
|
||||
chatRef.current.at(-1).msg = res.data.userMsg
|
||||
setChat([...chatRef.current,{role:1,msg:null}])
|
||||
setTimeout(() => {
|
||||
chatRef.current.at(-1).msg = res.data.assistantMsg;
|
||||
setTurn((prev)=>prev+1)
|
||||
startDiscussion(false)
|
||||
}, 3000);
|
||||
// setUpdate((prev)=>!prev)
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.catch((err)=>{
|
||||
toast("Failed to respond " + err.response.data);
|
||||
})
|
||||
}
|
||||
|
||||
let startDiscussion = (newTurn) => {
|
||||
let getTurn = turnRef.current
|
||||
if(newTurn==true){
|
||||
getTurn = 0
|
||||
setTurn((prev)=>0)
|
||||
setStarted((prev)=>true)
|
||||
}
|
||||
|
||||
if(getTurn<2){
|
||||
fetchMessages()
|
||||
}
|
||||
}
|
||||
|
||||
const addKey = () => {
|
||||
axios.post("/store_key",{key:key}).then((res)=>{
|
||||
setKeyAdded(true)
|
||||
}).catch((err)=>{
|
||||
toast("Key cannot be verified, try again");
|
||||
})
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
axios.get("/heybot/logout").then((res)=>{
|
||||
window.location.reload();
|
||||
}).catch((err)=>{
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
const shareChat = () => {
|
||||
navigator.clipboard.writeText(window.location.host+'/conversation/share?session='+sessionRef.current)
|
||||
window.open('/conversation/share?session='+sessionRef.current, "_blank");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setRanUser1(Math.random())
|
||||
setRanUser2(Math.random())
|
||||
axios.get("/rp/isLoggedIn").then((res)=>{
|
||||
setIsLoggedIn(res.data.isLoggedIn)
|
||||
if(res.data.isLoggedIn == false){
|
||||
setAuthUrl(res.data.auth_url)
|
||||
}else{
|
||||
setUser({id:res.data.userId,image:res.data.image})
|
||||
if(res.data.key_added==null){
|
||||
setKeyAdded((prev)=>false)
|
||||
}else{
|
||||
setKeyAdded((prev)=>true)
|
||||
setKey(res.data.key_added)
|
||||
}
|
||||
|
||||
}
|
||||
}).catch((err)=>{
|
||||
console.log(err)
|
||||
})
|
||||
|
||||
window.setTimeout(()=>setShowBanner(true),30000)
|
||||
},[])
|
||||
useEffect(() => {
|
||||
if(document.querySelector('.end-chat')!=null){document.querySelector('.end-chat').scrollIntoView({ behavior: 'smooth', block: 'end' });}
|
||||
}, [chat])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="agent-convo-container vh-100 d-flex justify-content-center align-items-center">
|
||||
<div className="agent-convo-box px-3 py-4 p-md-5 text-white">
|
||||
<div className="d-flex justify-content-between mb-3">
|
||||
<h4><b>CamelAGI</b></h4>
|
||||
{isLoggedIn&&<div className="d-flex gap-3">
|
||||
<ReloadIcon title="New Task" onClick={()=>window.location.reload()} className="icon"/>
|
||||
{<KeyIcon title="Change Key" onClick={()=>setKeyAdded(false)} className="icon"/>}
|
||||
<LogoutIcon title="Logout" onClick={logout} className="icon"/>
|
||||
</div>}
|
||||
</div>
|
||||
{isLoggedIn?
|
||||
<Stack className="scroll-container " gap={3}>
|
||||
{keyAdded?
|
||||
<>
|
||||
{started?
|
||||
<>
|
||||
<Stack className="agent-scroll" gap={3}>
|
||||
{chatRef.current.length>0&&chatRef.current.map((message)=>
|
||||
message.role==0?
|
||||
<div className="d-flex align-items-end align-self-start me-4 role1-container">
|
||||
{ranUser1!=null&&ranUser1>0.5?<Bot1Icon className="agent-chat-icon"/>:<Bot2Icon className="agent-chat-icon"/>}
|
||||
<div className="d-flex flex-column gap-1">
|
||||
<div className="bubble agent-1-chat ">
|
||||
{message.msg==null?
|
||||
<Stack className="p-2 loading" direction="horizontal" gap={2}>
|
||||
<Spinner size="sm" animation="grow" />
|
||||
<Spinner size="sm" animation="grow" />
|
||||
<Spinner size="sm" animation="grow" />
|
||||
</Stack>:
|
||||
<p className="p-2 m-0 agent-msg-container"><ReactMarkdown children={message.msg} remarkPlugins={[remarkGfm]} /></p>}
|
||||
</div>
|
||||
<small className="role-name ms-2 align-self-start">{role1}</small>
|
||||
</div>
|
||||
</div>:
|
||||
<div className="d-flex align-items-end align-self-end ms-4 role2-container">
|
||||
<div className="d-flex flex-column gap-1">
|
||||
<div className="bubble agent-2-chat ">
|
||||
{message.msg==null?
|
||||
<Stack className="p-2 loading" direction="horizontal" gap={2}>
|
||||
<Spinner size="sm" animation="grow" />
|
||||
<Spinner size="sm" animation="grow" />
|
||||
<Spinner size="sm" animation="grow" />
|
||||
</Stack>:
|
||||
<p className="p-2 m-0 agent-msg-container"><ReactMarkdown children={message.msg} remarkPlugins={[remarkGfm]} /></p>}
|
||||
</div>
|
||||
<small className="role-name me-2 align-self-end">{role2}</small>
|
||||
</div>
|
||||
{ranUser2!=null&&ranUser2>0.5?<Bot3Icon className="agent-chat-icon"/>:<Bot4Icon className="agent-chat-icon"/>}
|
||||
</div>
|
||||
)}
|
||||
{sessionRef.current!=0&&<Button className="align-self-end agent-share-btn" onClick={shareChat}><ShareIcon className="small-icon me-1"/><small>Share</small></Button>}
|
||||
<div className="end-chat"></div>
|
||||
</Stack>
|
||||
{finished?
|
||||
<h5><b>Task Completed!</b></h5>
|
||||
:
|
||||
<>
|
||||
{turnRef.current<3?
|
||||
<Button className="continue-button mt-auto d-flex gap-2 justify-content-center align-items-center" disabled><Spinner size="sm"/>Loading</Button>
|
||||
:<Button className="continue-button mt-auto" onClick={()=>startDiscussion(true)}>Continue</Button>}
|
||||
</>}
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<h5 className="m-0">Get started with a task to discuss</h5>
|
||||
<Form.Group className=" mt-4" >
|
||||
<Form.Label >Enter Role of the Instructor</Form.Label>
|
||||
<Form.Control className="agent-input" value={role1} placeholder="Stock Trader" onChange={(e)=>setRole1(e.target.value)}/>
|
||||
</Form.Group>
|
||||
<Form.Group className=" " >
|
||||
<Form.Label >Enter Role of the Assistant</Form.Label>
|
||||
<Form.Control className="agent-input" value={role2} placeholder="Python Programmer" onChange={(e)=>setRole2(e.target.value)}/>
|
||||
</Form.Group>
|
||||
<Form.Group className=" " >
|
||||
<Form.Label >Enter topic of discussion</Form.Label>
|
||||
<Form.Control className="agent-input" value={task} placeholder="Develop a trading bot for the stock market" onChange={(e)=>setTask(e.target.value)}/>
|
||||
</Form.Group>
|
||||
<Button className="continue-button mt-auto" onClick={()=>startDiscussion(true)}>Start Discussion</Button>
|
||||
</>
|
||||
|
||||
}
|
||||
</>:
|
||||
<Stack className="align-items-center" gap={3}>
|
||||
<h6><b>Add your OpenAI Key</b></h6>
|
||||
<p><small>Get your OpenAI Key by signing up/ logging in from the OpenAI Dashboard. </small><a target="_blank" href="https://platform.openai.com/account/api-keys">Go to Dashboard</a></p>
|
||||
<InputGroup >
|
||||
<FormControl className="chat-input px-md-5 py-md-2 shadow-none"
|
||||
style={{height:'48px'}}
|
||||
value={key}
|
||||
onChange={(e)=>setKey(e.target.value)}
|
||||
onKeyDown={(e)=>{e.code=="Enter"&&addKey()}}
|
||||
/>
|
||||
<Button variant="outline-secondary" className="chat-button text-dark fw-bold ps-md-3 pe-md-5 py-md-2" onClick={addKey}>
|
||||
<SendIcon className="icon"/>
|
||||
</Button>
|
||||
</InputGroup>
|
||||
<small>Watch this video to get started</small>
|
||||
<iframe className="key-video-agent" src="https://www.youtube.com/embed/FaJdwbNWNkk" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
|
||||
</Stack>
|
||||
}
|
||||
</Stack>:
|
||||
<Stack className="align-items-center" gap={4}>
|
||||
<Image className="logo mt-5 pt-5" src={logoImage}/>
|
||||
{/* <h5 className="">Login to agi</h5> */}
|
||||
<h5 className="">Accomplish your task with AI agents</h5>
|
||||
<Button className="option-buttons px-3 py-2 align-self-center" href={authUrl}> Login with Google</Button>
|
||||
<Button className="option-buttons px-3 py-2 align-self-center" href="https://github.com/SamurAIGPT/Camel-AutoGPT/" target="_blank">Star CamelAGI on Github</Button>
|
||||
{/* <Stack direction="horizontal" gap={2} style={{cursor:'pointer',opacity:'0.7'}} className="mt-auto align-self-center" onClick={()=>navigate('/agi/faq')}><QuestionIcon className="icon"/> <b>Know More</b></Stack> */}
|
||||
</Stack>
|
||||
}
|
||||
</div>
|
||||
<ToastContainer />
|
||||
<Modal className="banner-modal" centered show={showBanner} onHide={()=>setShowBanner(false)}>
|
||||
<Modal.Body className="p-5 position-relative">
|
||||
<b style={{cursor:'pointer'}} onClick={()=>setShowBanner(false)} className="position-absolute top-0 end-0 me-4 mt-2">X</b>
|
||||
<Stack className="align-items-center" gap={3}>
|
||||
<a href="https://www.producthunt.com/posts/camel-agi?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-camel-agi" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=389872&theme=light" alt="Camel AGI - Communicative Agents on GPT | Product Hunt" /></a>
|
||||
<a className="discord-invite px-3 py-3 ms-3" target="_blank" href="https://discord.gg/A6EzvsKX4u"><DiscordIcon className="icon me-1"/> Join Our Discord</a>
|
||||
<a className="discord-invite px-3 py-3 ms-3" target="_blank" href="https://github.com/SamurAIGPT/Camel-AutoGPT/">Star CamelAGI on Github</a>
|
||||
</Stack>
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default AgentConvo;
|
||||
125
client/src/pages/AgentConvoShare.js
Normal file
125
client/src/pages/AgentConvoShare.js
Normal file
@@ -0,0 +1,125 @@
|
||||
import {useState,useEffect,useRef} from 'react';
|
||||
import '../styles/agent-convo.css'
|
||||
import { Button, Stack, Image, Form,Modal, Spinner, } from "react-bootstrap";
|
||||
import { ReactComponent as Bot1Icon } from "../assets/user-1.svg";
|
||||
import { ReactComponent as Bot2Icon } from "../assets/user-2.svg";
|
||||
import { ReactComponent as Bot3Icon } from "../assets/user-3.svg";
|
||||
import { ReactComponent as Bot4Icon } from "../assets/user-4.svg";
|
||||
import logoImage from '../assets/camelagi.png'
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { ToastContainer, toast } from 'react-toastify';
|
||||
import axios from "axios"
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import { ReactComponent as ShareIcon } from "../assets/share-white.svg";
|
||||
import { useSearchParams, useParams } from "react-router-dom";
|
||||
|
||||
|
||||
function AgentConvoShare() {
|
||||
|
||||
const [ranUser1, setRanUser1] = useState(null);
|
||||
const [ranUser2, setRanUser2] = useState(null);
|
||||
const navigate = useNavigate()
|
||||
const [showBanner, setShowBanner] = useState(false);
|
||||
const [user, setUser] = useState(false);
|
||||
const [role1, setRole1] = useState("");
|
||||
const [role2, setRole2] = useState("");
|
||||
const [task, setTask] = useState("");
|
||||
const [chat,setChat] = useState([])
|
||||
const [sessId,setSessId] = useState(0)
|
||||
const sessionRef = useRef(null)
|
||||
sessionRef.current = sessId
|
||||
const chatRef = useRef(null)
|
||||
chatRef.current = chat
|
||||
let [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setRanUser1(Math.random())
|
||||
setRanUser2(Math.random())
|
||||
axios.get("/rp/get_chat?sessId="+searchParams.get("session")).then((res)=>{
|
||||
setChat(res.data.messages)
|
||||
setRole1(res.data.role1)
|
||||
setRole2(res.data.role2)
|
||||
setTask(res.data.task)
|
||||
|
||||
|
||||
}).catch((err)=>{
|
||||
console.log(err)
|
||||
})
|
||||
window.setTimeout(()=>setShowBanner(true),30000)
|
||||
},[])
|
||||
// useEffect(() => {
|
||||
// if(document.querySelector('.end-chat')!=null){document.querySelector('.end-chat').scrollIntoView({ behavior: 'smooth', block: 'end' });}
|
||||
// }, [chat])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="agent-convo-container vh-100 d-flex justify-content-center align-items-center">
|
||||
<div className="agent-convo-box px-3 py-4 p-md-5 text-white">
|
||||
<div className="d-flex justify-content-between mb-3">
|
||||
<h4 className="m-0"><b className="pt-2">CamelAGI</b><Image className="logo ms-3" src={logoImage}/></h4>
|
||||
<Button className="continue-button mt-auto" onClick={()=>navigate('/conversation')}>Create your own</Button>
|
||||
|
||||
</div>
|
||||
|
||||
<Stack className="scroll-container " gap={3}>
|
||||
|
||||
<Stack className="agent-scroll" gap={3}>
|
||||
<span className="py-2">Check out this conversation between <b style={{color:'#763FF9'}}>{role1}</b> and <b style={{color:'#3f65f9'}}>{role2}</b> to discuss:<br/> <b>{task}</b></span>
|
||||
{chatRef.current.length>0&&chatRef.current.map((message)=>
|
||||
message.role==0?
|
||||
<div className="d-flex align-items-end align-self-start me-4 role1-container">
|
||||
{ranUser1!=null&&ranUser1>0.5?<Bot1Icon className="agent-chat-icon"/>:<Bot2Icon className="agent-chat-icon"/>}
|
||||
<div className="d-flex flex-column gap-1">
|
||||
<div className="bubble agent-1-chat ">
|
||||
{message.msg==null?
|
||||
<Stack className="p-2 loading" direction="horizontal" gap={2}>
|
||||
<Spinner size="sm" animation="grow" />
|
||||
<Spinner size="sm" animation="grow" />
|
||||
<Spinner size="sm" animation="grow" />
|
||||
</Stack>:
|
||||
<p className="p-2 m-0 agent-msg-container"><ReactMarkdown children={message.msg} remarkPlugins={[remarkGfm]} /></p>}
|
||||
</div>
|
||||
<small className="role-name ms-2 align-self-start">{role1}</small>
|
||||
</div>
|
||||
</div>:
|
||||
<div className="d-flex align-items-end align-self-end ms-4 role2-container">
|
||||
<div className="d-flex flex-column gap-1">
|
||||
<div className="bubble agent-2-chat ">
|
||||
{message.msg==null?
|
||||
<Stack className="p-2 loading" direction="horizontal" gap={2}>
|
||||
<Spinner size="sm" animation="grow" />
|
||||
<Spinner size="sm" animation="grow" />
|
||||
<Spinner size="sm" animation="grow" />
|
||||
</Stack>:
|
||||
<p className="p-2 m-0 agent-msg-container"><ReactMarkdown children={message.msg} remarkPlugins={[remarkGfm]} /></p>}
|
||||
</div>
|
||||
<small className="role-name me-2 align-self-end">{role2}</small>
|
||||
</div>
|
||||
{ranUser2!=null&&ranUser2>0.5?<Bot3Icon className="agent-chat-icon"/>:<Bot4Icon className="agent-chat-icon"/>}
|
||||
</div>
|
||||
)}
|
||||
<div className="end-chat"></div>
|
||||
</Stack>
|
||||
|
||||
</Stack>
|
||||
|
||||
|
||||
</div>
|
||||
<ToastContainer />
|
||||
<Modal className="banner-modal" centered show={showBanner} onHide={()=>setShowBanner(false)}>
|
||||
<Modal.Body className="p-5 position-relative">
|
||||
<b style={{cursor:'pointer'}} onClick={()=>setShowBanner(false)} className="position-absolute top-0 end-0 me-4 mt-2">X</b>
|
||||
<Stack className="align-items-center" gap={3}>
|
||||
<a href="https://www.producthunt.com/posts/camel-agi?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-camel-agi" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=389872&theme=light" alt="Camel AGI - Communicative Agents on GPT | Product Hunt" /></a>
|
||||
</Stack>
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default AgentConvoShare;
|
||||
13
client/src/reportWebVitals.js
Normal file
13
client/src/reportWebVitals.js
Normal file
@@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
5
client/src/setupTests.js
Normal file
5
client/src/setupTests.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
149
client/src/styles/agent-convo.css
Normal file
149
client/src/styles/agent-convo.css
Normal file
@@ -0,0 +1,149 @@
|
||||
.agent-convo-container{
|
||||
background: #eee;
|
||||
}
|
||||
.agent-convo-box{
|
||||
border-radius: 12px;
|
||||
background: #2b2d2f;
|
||||
box-shadow: 10px 10px 40px #2b2d2f;
|
||||
height: 80%;
|
||||
width: 60%;
|
||||
}
|
||||
.agent-msg-data{
|
||||
color: #fff !important;
|
||||
background-color: transparent !important;
|
||||
font-family: var(--fontFamily) !important;
|
||||
white-space: break-spaces;
|
||||
font-size: 1rem !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
--r: 12px;
|
||||
--t: 10px;
|
||||
|
||||
padding: calc(2*var(--r)/3);
|
||||
-webkit-mask:
|
||||
radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%)
|
||||
var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
|
||||
conic-gradient(at var(--r) var(--r),#000 75%,#0000 0)
|
||||
calc(var(--r)/-2) calc(var(--r)/-2) padding-box,
|
||||
radial-gradient(50% 50%,#000 98%,#0000 101%)
|
||||
0 0/var(--r) var(--r) space padding-box;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
.agent-1-chat {
|
||||
--_d: 0%;
|
||||
border-left: var(--t) solid #0000;
|
||||
margin-right: var(--t);
|
||||
box-shadow: 10px 10px 40px #2b2d2f;
|
||||
background: var(--themeColor) border-box;
|
||||
}
|
||||
.agent-2-chat {
|
||||
--_d: 100%;
|
||||
border-right: var(--t) solid #0000;
|
||||
margin-left: var(--t);
|
||||
box-shadow: 10px 10px 40px #2b2d2f;
|
||||
background: #3f65f9 border-box;
|
||||
}
|
||||
.agent-chat-icon{
|
||||
min-width: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
max-width: 2.5rem;
|
||||
max-height: 2.5rem;
|
||||
|
||||
}
|
||||
.continue-button{
|
||||
background-color: #eee !important;
|
||||
color: #000 !important;
|
||||
border: none !important;
|
||||
border-radius: 12px !important;
|
||||
/* font-size: 12px !important; */
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
.agent-input{
|
||||
background-color: transparent !important;
|
||||
color: #fff !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
.agent-scroll{
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.agent-scroll::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.scroll-container{
|
||||
height: 90% !important;
|
||||
}
|
||||
.agent-msg-container>pre{
|
||||
max-width: 30rem;
|
||||
}
|
||||
.key-video-agent{
|
||||
width: 60%;
|
||||
min-height: 14rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.role-name{
|
||||
opacity: 60%;
|
||||
font-size: 12px;
|
||||
}
|
||||
.role1-container{
|
||||
animation: role1msg 0.3s ease-out 0s forwards;
|
||||
|
||||
}
|
||||
.role2-container{
|
||||
animation: role2msg 0.3s ease-out 0s forwards;
|
||||
|
||||
}
|
||||
@keyframes role1msg {
|
||||
0% {
|
||||
margin-left: -2rem;
|
||||
opacity: 0;
|
||||
}
|
||||
80% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.agent-share-btn{
|
||||
opacity: 0.8;
|
||||
background: transparent !important;
|
||||
border: 1px solid white !important;
|
||||
padding: 0.2rem 0.4rem !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
@keyframes role1msg {
|
||||
0% {
|
||||
margin-right: -2rem;
|
||||
opacity: 0;
|
||||
}
|
||||
80% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:1000px){
|
||||
.agent-convo-box{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
.agent-msg-container>pre{
|
||||
max-width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logo{
|
||||
width: 4rem;
|
||||
}
|
||||
291
client/src/styles/home.css
Normal file
291
client/src/styles/home.css
Normal file
@@ -0,0 +1,291 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap");
|
||||
:root {
|
||||
|
||||
--hoverColor: rgb(71, 24, 182) !important ;
|
||||
--fontFamily: "Nunito", sans-serif;
|
||||
--border: 1px solid #dfdfdf;
|
||||
--themeColor: #763FF9;
|
||||
|
||||
}
|
||||
|
||||
.powered-by{
|
||||
background-color: #F6F3FF;
|
||||
border-radius: 22px 22px 0 0;
|
||||
opacity: 0.8;
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 1rem;
|
||||
}
|
||||
.banner-modal>.modal-dialog>.modal-content{
|
||||
border-radius: 22px !important;
|
||||
}
|
||||
.producthunt-banner{
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.powered-by a{
|
||||
color: black;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.discord-invite{
|
||||
background-color: #5865f2;
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.powered-by a:hover{
|
||||
color: black;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.btn-filled{
|
||||
background: #763FF9 !important;
|
||||
box-shadow: 0px 2px 25px #F0EDF9 !important;
|
||||
border-radius: 12px !important;
|
||||
border: 1px solid #763FF9 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.btn-filled:hover{
|
||||
background: var(--hoverColor) !important;
|
||||
|
||||
}
|
||||
.side-nav{
|
||||
width: 13.5rem ;
|
||||
min-height: 100vh;
|
||||
background: #FFFFFF;
|
||||
border-right: 1px solid #DFDFDF;
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.04);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
/* .mobile-nav{
|
||||
font-size: 0.75rem !important;
|
||||
} */
|
||||
body,html{
|
||||
background-color: #ffffff !important;
|
||||
font-family: var(--fontFamily) !important;
|
||||
color:#000000 !important;
|
||||
}
|
||||
.nav-body,
|
||||
.nav-header > .accordion-button {
|
||||
padding:0.5rem 0rem !important;
|
||||
border:0 !important;
|
||||
background-color: transparent !important;
|
||||
color: #000 !important;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.os-logo{
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
.os-logo-mobile{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
.offcanvas-backdrop{
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.nav-icon{
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
.side-accordion{
|
||||
--bs-accordion-bg: transparent !important;
|
||||
}
|
||||
.nav-width{
|
||||
width: 10.5rem;
|
||||
}
|
||||
.nav-width>.nav-item{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-header > .accordion-button::after {
|
||||
margin-left: auto;
|
||||
|
||||
}
|
||||
.accordion-button.collapsed::after{
|
||||
background-size: 1rem;
|
||||
color: #000 !important;
|
||||
margin-left: auto;
|
||||
}
|
||||
.accordion-button:not(.collapsed) {
|
||||
box-shadow: none !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
.nav-header > .accordion-button:not(.collapsed)::after {
|
||||
transform: rotate(-180deg) !important;
|
||||
background-size: 1rem;
|
||||
color: #000 !important;
|
||||
}
|
||||
.nav-header > .accordion-button:focus {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.side-nav-links >.nav-link.active{
|
||||
color: #763FF9 !important;
|
||||
border-radius: 1.875rem;
|
||||
}
|
||||
|
||||
.side-nav-links >.nav-link{
|
||||
color: #5F5B66 !important;
|
||||
padding: 0.375rem 2.5rem;
|
||||
}
|
||||
|
||||
.side-nav-links > .active{
|
||||
background-color: #F6F3FF !important;
|
||||
color: #763FF9 !important;
|
||||
}
|
||||
|
||||
|
||||
.rounded-cards{
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF !important;
|
||||
border: 1px solid #DFDFDF;
|
||||
box-shadow: 0px 2px 25px #F0EDF9;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.top-filters-cards{
|
||||
height: 2.81rem;
|
||||
background: #FFFFFF !important;
|
||||
border: 1px solid #DFDFDF !important;
|
||||
box-shadow: 0px 2px 25px #F0EDF9 !important;
|
||||
border-radius: 0.75rem;
|
||||
color: #000 !important;
|
||||
font-size: 0.75rem !important;
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
}
|
||||
|
||||
.dropdown>.dropdown-toggle::after{
|
||||
margin-left:20px !important;
|
||||
}
|
||||
|
||||
.small-text{
|
||||
font-size: 0.75rem !important ;
|
||||
}
|
||||
.content-container{
|
||||
max-width: 50rem;
|
||||
}
|
||||
.number-text{
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.navbar-toggler:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
.graph-title{
|
||||
font-weight: 400;
|
||||
}
|
||||
.stats-table{
|
||||
background: #FFFFFF !important;
|
||||
border: 1px solid #DFDFDF !important;
|
||||
}
|
||||
.stats-table>thead{
|
||||
background-color: #F2F2F2;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.stats-table>thead>tr>th,.stats-table>tbody>tr>td{
|
||||
padding: 1.5rem;
|
||||
|
||||
}
|
||||
/* .stats-table tr:first-child th:first-child {
|
||||
border-top-left-radius: 22px;
|
||||
}
|
||||
|
||||
.stats-table tr:first-child th:last-child {
|
||||
border-top-right-radius: 22px;
|
||||
}
|
||||
.stats-table tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 22px;
|
||||
}
|
||||
|
||||
.stats-table tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 22px;
|
||||
} */
|
||||
@media screen and (max-width:992px){
|
||||
.main-col{
|
||||
margin-top: 7rem !important;
|
||||
}
|
||||
.nav-header > .accordion-button {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.graph-title{
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.stats-table>thead>tr>th,.stats-table>tbody>tr>td{
|
||||
padding: 1rem;
|
||||
|
||||
}
|
||||
.powered-by{
|
||||
background-color: #21cd9c;
|
||||
border-radius: 0 0 12px 12px ;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1600px){
|
||||
.content-container{
|
||||
max-width: 75rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:500px){
|
||||
.stats-table>thead>tr>th,.stats-table>tbody>tr>td{
|
||||
padding: 0.5rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.options-bg{
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF !important;
|
||||
border: 1px solid #DFDFDF !important;
|
||||
box-shadow: 0px 2px 25px #F0EDF9 !important;
|
||||
border-radius: 50px !important;
|
||||
color: #000000 !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.filter-drop > button{
|
||||
background-color: white !important;
|
||||
color: #000 !important;
|
||||
border: 0px !important;
|
||||
font-size: 12px !important;
|
||||
padding-left: 3px !important;
|
||||
padding-right: 3px !important;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
.filter-drop >.dropdown-toggle::after{
|
||||
content:none !important;
|
||||
}
|
||||
|
||||
.filter-drop > .dropdown-menu{
|
||||
font-size: 12px !important;
|
||||
min-width: 5rem !important;
|
||||
border: 1px solid #ececec!important;
|
||||
box-shadow: 0px 2px 25px #F0EDF9 !important;
|
||||
}
|
||||
|
||||
.vr{
|
||||
background-color: #acacac !important;
|
||||
}
|
||||
|
||||
.icon{
|
||||
width: 1.3rem ;
|
||||
height: 1.3rem ;
|
||||
cursor: pointer ;
|
||||
}
|
||||
Reference in New Issue
Block a user