feat: implement ai agent basic gui

nodemon.json

@@ -2,4 +2,4 @@
   "watch": ["src"],
   "ext": "ts",
   "exec": "node --inspect -r ts-node/register ./src/server.ts"
-}
+}

package.json

@@ -7,6 +7,7 @@
     "prepare": "husky install",
     "lint": "eslint .",
     "pretty": "prettier --check --ignore-unknown .",
+    "pretty:fix": "prettier --write . && prettier --write readme-typescript-nodejs.md",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "dev": "nodemon",
     "dev:app": "NODE_OPTIONS='--inspect' NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1 next dev",

readme-typescript-nodejs.md

@@ -1,4 +1,4 @@
-# typescript-nodejs 
+# typescript-nodejs
 
 Requirements: node.js >= 18.15.0 ( LTS )
 
@@ -14,4 +14,4 @@ Template for TypeScript nodejs projects. It includes:
 
 1. Update package.json with your project details
 2. Install dependencies with `npm install`
-3. Start coding!
+3. Start coding!

src/app/page.tsx

@@ -1,9 +1,39 @@
-import ApiUrl from '@/components/ApiUrl';
+'use client';
+
+import { Card, CardHeader, CardBody } from '@nextui-org/card';
+import { Button, Spacer } from '@nextui-org/react';
+import { IconArrowUp, IconTrash } from '@tabler/icons-react';
+import { TextArea } from '@/components/Textearea';
 
 export default function Page() {
   return (
-    <div className="flex flex-col h-screen overflow-hidden">
-      <ApiUrl />
+    <div className=" w-screen h-screen glassmorphism">
+      <Card className="w-full h-full fixed py-2 bg-transparent  ">
+        <div className=" flex">
+          <Button className=" bg-transparent " isIconOnly>
+            <IconTrash color="gray" size={24} />
+          </Button>
+          <CardHeader className="text-center fonst-bold text-white">
+            Chat with AI
+          </CardHeader>
+        </div>
+        <Spacer y={10} />
+        <CardBody className="flex-grow text-white font-bold"></CardBody>
+        <div className="flex bg-gray-200 flex-grow items-center p-2 overflow-scroll">
+          <TextArea
+            type="text"
+            placeholder="Type your question..."
+            minRows={1}
+            maxRows={4}
+          />
+          <Button
+            isIconOnly
+            className="bg-secondary py-1  mr-0 mb-2 ml-2 h-[30px] w-[32px] rounded-full"
+          >
+            <IconArrowUp size={30} stroke={3} />
+          </Button>
+        </div>
+      </Card>
     </div>
   );
 }

src/components/Textearea.tsx

@@ -0,0 +1,30 @@
+import { extendVariants } from '@nextui-org/react';
+
+const TextArea = ({ ...props }) => {
+  return (
+    <ExtendedTextarea
+      className={'mb-2'}
+      radius="xs"
+      labelPlacement="outside"
+      {...props}
+    />
+  );
+};
+const ExtendedTextarea = extendVariants(TextArea, {
+  variants: {
+    radius: {
+      xs: {
+        inputWrapper: ['bg-content6', 'rounded', 'shadow-none']
+      }
+    },
+    textSize: {
+      base: {
+        input: 'text-base'
+      },
+      large: {
+        input: 'text-2xl'
+      }
+    }
+  }
+});
+export { TextArea };