Merge pull request #164 from openchatai/major/new-dashboard

The new Dashboard

Author: gharbat

.github/workflows/build-widget.yml

@@ -14,14 +14,11 @@ jobs:
         with:
           node-version: 18
 
-      - name: install pnpm
-        run: npm install -g pnpm
-
       - name: Install dependencies
-        run: cd copilot-widget/ && pnpm install
+        run: cd copilot-widget/ && npm install
 
       - name: Build copilot-widget
-        run: cd copilot-widget/ && pnpm build:embed
+        run: cd copilot-widget/ && npm run build
 
       - name: Upload embed as artifact.
         uses: actions/upload-artifact@v3

dashboard/.eslintrc.json

@@ -1,6 +1,11 @@
 {
-  "extends": ["next","next/core-web-vitals"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "next/core-web-vitals"
+  ],
   "rules": {
-    "react/no-unescaped-entities":0
+    "react/no-unescaped-entities": "off",
+    "no-unused-vars": "warn"
   }
 }

dashboard/.gitignore

@@ -4,7 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
-.idea/
+
 # testing
 /coverage
 

dashboard/.nvmrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
+}

dashboard/.prettierrc

@@ -41,4 +41,4 @@ EXPOSE 8000
 ENV PORT 8000
 ENV HOSTNAME "0.0.0.0"
 
-CMD ["node", "server.js"]
+CMD ["node", "server.js"]

dashboard/.vscode/launch.json

@@ -1,19 +1,36 @@
-# OpenCopilot Dashboard
-
-## project structure
-
-- schemas/
-  valibot schemas for the api responses, and form validation.(brand new zod alternative few bytes and faster).
-
-- ui/
-  - components => small piece that renders markup(most are client components).
-  - partials => large components.
-  - hooks(custom hooks that can do magic).
-  - charts (need more work, but we can use it for now).
-  - providers (context providers).
-  - utils (helper functions and constants for the ui purpose).
-- app/
-  - pages and layouts [we are using nextjs13 app router]
-    - Layout Groups.
-      - (dashboard)
-        - the dashboard pages
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

dashboard/Dockerfile

@@ -0,0 +1,44 @@
+import { buttonVariants } from "@/components/ui/button";
+import { NavLink } from "@/components/ui/NavLink";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { LucideIcon } from "lucide-react";
+import React from "react";
+
+export function CopilotLayoutNavLink({
+  IconComponent,
+  label,
+  href,
+  segment,
+}: {
+  label: React.ReactNode;
+  IconComponent: LucideIcon;
+  href: string;
+  segment?: string;
+}) {
+  return (
+    <TooltipProvider delayDuration={100}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <NavLink
+            href={href}
+            segment={segment}
+            className={buttonVariants({
+              size: "icon",
+              variant: "link",
+            })}
+            activeClassName="text-primary"
+            inactiveClassName="hover:text-primary text-accent-foreground/50 hover:bg-accent"
+          >
+            <IconComponent className="h-5 w-5" />
+          </NavLink>
+        </TooltipTrigger>
+        <TooltipContent side="right">{label}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

dashboard/README.md

@@ -0,0 +1,44 @@
+"use client";
+import React from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { useSetAtom } from "jotai";
+import { searchModalAtom } from "@/app/_store/atoms/searchModal";
+export default function LogoMenu() {
+  const setSearchModal = useSetAtom(searchModalAtom);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          className="group relative h-full w-full text-xl text-primary/90"
+        >
+          O
+          <ChevronRight className="absolute bottom-0 right-0 h-4 w-4 rotate-45 fill-current transition-transform group-hover:translate-x-0.5 group-hover:translate-y-0.5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="bottom" sideOffset={2} className="ms-5">
+        <DropdownMenuItem asChild>
+          <Link href="/">Back to dashboard</Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => setSearchModal(true)}>
+          Search
+        </DropdownMenuItem>
+        <DropdownMenuItem>Open example Dashboard</DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link href={"/create/copilot"}>Create New Copilot</Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

dashboard/api/copilots.ts

@@ -0,0 +1,28 @@
+import { NavLink } from "@/components/ui/NavLink";
+import { LucideIcon } from "lucide-react";
+import React from "react";
+
+export function SubNavLink({
+    href,
+    Icon,
+    label,
+  }: {
+    href: string;
+    Icon: LucideIcon;
+    label: React.ReactNode;
+  }) {
+    return (
+      <li className="w-full cursor-pointer select-none ">
+        <NavLink
+          href={href}
+          className="flex items-center rounded-md border px-3 py-2 text-sm text-accent-foreground transition duration-150 ease-in-out"
+          activeClassName="border-gray-300 bg-accent font-semibold"
+          inactiveClassName="border-transparent hover:border-gray-300 font-normal opacity-80 hover:bg-accent"
+        >
+          <Icon className="mr-2 h-5 w-5" />
+          {label}
+        </NavLink>
+      </li>
+    );
+  }
+  

dashboard/app/(copilot)/_parts/CopilotNavLink.tsx

@@ -0,0 +1,28 @@
+import { HeaderShell } from "@/components/domain/HeaderShell";
+import { Button } from "@/components/ui/button";
+import { RefreshCcw } from "lucide-react";
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  params: {
+    copilot_id: string;
+  };
+};
+
+export default function SettingsLayout({ children, params }: Props) {
+  const copilotBase = `/copilot/${params.copilot_id}/conversations`;
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      <HeaderShell className="justify-between">
+        <h1 className="text-lg font-bold text-secondary-foreground">
+          Conversations
+        </h1>
+        <Button size="icon" variant="secondary" className="hidden">
+          <RefreshCcw className="h-6 w-6" />
+        </Button>
+      </HeaderShell>
+      <div className="h-full flex-1 overflow-auto">{children}</div>
+    </div>
+  );
+}