Documentation addition of ai chat tools

src/app/app/documentation/ai-chat-tools/[slug]/page.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+
+import { useAITools } from '@/services/ai-agent/tools/tools';
+
+export default function SingleChatToolPage() {
+  const { slug } = useParams();
+
+  const selectedTool = useAITools()?.find((tool) => tool.id === slug);
+
+  return (
+    <div className="relative flex w-full flex-col gap-y-4 text-white">
+      <div>
+        <Link
+          href="/app/documentation/ai-chat-tools"
+          className="mb-3 text-base font-normal uppercase tracking-wider text-primary-2"
+        >
+          Ai chat tools
+        </Link>
+        <h1 className="text-4xl font-bold">Chat Tool {slug}</h1>
+      </div>
+      <p className="text-lg leading-normal">{selectedTool?.description}</p>
+    </div>
+  );
+}

src/app/app/documentation/ai-chat-tools/page.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import Link from 'next/link';
+
+import { useAITools } from '@/services/ai-agent/tools/tools';
+
+export default function ChatToolsPage() {
+  const allTools = useAITools();
+
+  return (
+    <div className="relative flex w-full flex-col gap-y-6 text-white">
+      <div>
+        <h1 className="mb-3 text-4xl font-bold">Chat Tools</h1>
+        <p>
+          This page provides information about the chat tools available in our application. You can
+          use these tools to interact with the system and get assistance.
+        </p>
+      </div>
+      <div className="mt-2 grid grid-cols-3 gap-4">
+        {allTools?.map((tool: { id: string; name: string }) => (
+          <Link
+            href={`/app/documentation/ai-chat-tools/${tool.id}`}
+            key={tool.id}
+            className="rounded-lg border border-solid border-primary-6 bg-primary-9 px-5 py-4 text-white transition-colors duration-300 ease-in-out hover:bg-primary-8"
+          >
+            <h2 className="text-xl font-semibold">{tool.name}</h2>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/app/documentation/layout.tsx

@@ -3,13 +3,21 @@
 import GlobalSideMenu from '@/components/documentation/global/global-side-menu';
 import DocumentationSideBloc from '@/components/documentation/global/side-bloc';
 
+import { classNames } from '@/util/utils';
+import styles from './styles.module.css';
+
 export default function DocumentationLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="relative min-h-screen w-screen bg-primary-9 p-8">
-      <div className="fixed left-0 top-0 flex h-screen w-[255px] flex-col justify-between p-8 ">
+      <div
+        className={classNames(
+          'fixed left-0 top-0 flex h-screen w-[255px] flex-col justify-between overflow-y-scroll p-8',
+          styles['hide-scrollbar']
+        )}
+      >
         <DocumentationSideBloc />
-        <GlobalSideMenu />
       </div>
+      <GlobalSideMenu />
 
       <main className="ml-[255px] w-2/3">{children}</main>
     </div>

src/app/app/documentation/styles.module.css

@@ -0,0 +1,7 @@
+.hide-scrollbar {
+  scrollbar-width: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}