feat: daisyUI sidebar

.github/workflows/nextjs_bundle_analysis.yml

@@ -0,0 +1,118 @@
+# Copyright (c) HashiCorp, Inc.
+# SPDX-License-Identifier: MPL-2.0
+
+name: 'Next.js Bundle Analysis'
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
+  workflow_dispatch:
+
+defaults:
+  run:
+    # change this if your nextjs app does not live at the root of the repo
+    working-directory: ./
+
+permissions:
+  contents: read # for checkout repository
+  actions: read # for fetching base branch bundle stats
+  pull-requests: write # for comments
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install Bun
+        uses: oven-sh/setup-bun@v2
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Restore next build
+        uses: actions/cache@v3
+        id: restore-build-cache
+        env:
+          cache-name: cache-next-build
+        with:
+          # if you use a custom build directory, replace all instances of `.next` in this file with your build directory
+          # ex: if your app builds to `dist`, replace `.next` with `dist`
+          path: .next/cache
+          # change this if you prefer a more strict cache
+          key: ${{ runner.os }}-build-${{ env.cache-name }}
+
+      - name: Build next.js app
+        # change this if your site requires a custom build command
+        run: bun run build
+
+      # Here's the first place where next-bundle-analysis' own script is used
+      # This step pulls the raw bundle stats for the current bundle
+      - name: Analyze bundle
+        run: bunx -p nextjs-bundle-analysis report
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v3
+        with:
+          name: bundle
+          path: .next/analyze/__bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: nextjs_bundle_analysis.yml
+          branch: ${{ github.event.pull_request.base.ref }}
+          path: .next/analyze/base
+
+      # And here's the second place - this runs after we have both the current and
+      # base branch bundle stats, and will compare them to determine what changed.
+      # There are two configurable arguments that come from package.json:
+      #
+      # - budget: optional, set a budget (bytes) against which size changes are measured
+      #           it's set to 350kb here by default, as informed by the following piece:
+      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+      #
+      # - red-status-percentage: sets the percent size increase where you get a red
+      #                          status indicator, defaults to 20%
+      #
+      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+      # entry in your package.json file.
+      - name: Compare with base branch bundle
+        if: success() && github.event.number
+        run: ls -laR .next/analyze/base && bunx -p nextjs-bundle-analysis compare
+
+      - name: Get Comment Body
+        id: get-comment-body
+        if: success() && github.event.number
+        # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings
+        run: |
+          echo "body<<EOF" >> $GITHUB_OUTPUT
+          echo "$(cat .next/analyze/__bundle_analysis_comment.txt)" >> $GITHUB_OUTPUT
+          echo EOF >> $GITHUB_OUTPUT
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v2
+        if: success() && github.event.number
+        id: fc
+        with:
+          issue-number: ${{ github.event.number }}
+          body-includes: '<!-- __NEXTJS_BUNDLE -->'
+
+      - name: Create Comment
+        uses: peter-evans/create-or-update-comment@v2
+        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/create-or-update-comment@v2
+        if: success() && github.event.number && steps.fc.outputs.comment-id != 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace

package.json

@@ -10,13 +10,13 @@
     "format": "ultracite format"
   },
   "dependencies": {
-    "@ai-sdk/anthropic": "^1.2.12",
-    "@ai-sdk/google": "^1.2.19",
-    "@ai-sdk/groq": "^1.2.9",
-    "@ai-sdk/openai": "^1.3.22",
-    "@ai-sdk/react": "^1.2.12",
+    "@ai-sdk/anthropic": "^2.0.1",
+    "@ai-sdk/google": "^1.2.22",
+    "@ai-sdk/groq": "^2.0.4",
+    "@ai-sdk/openai": "^1.3.24",
+    "@ai-sdk/react": "^2.0.9",
     "@ai-sdk/ui-utils": "^1.2.11",
-    "@ai-sdk/xai": "^1.2.16",
+    "@ai-sdk/xai": "^1.2.18",
     "@aws-sdk/client-s3": "^3.826.0",
     "@biomejs/biome": "2.0.6",
     "@logto/next": "^4.2.4",
@@ -26,7 +26,7 @@
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
-    "ai": "^4.3.16",
+    "ai": "^4.3.19",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "daisyui": "^5.0.43",
@@ -47,7 +47,7 @@
     "sonner": "^2.0.5",
     "tailwind-merge": "^3.3.0",
     "tailwind-variants": "^1.0.0",
-    "zod": "^3.25.56"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.8",
@@ -59,5 +59,11 @@
     "tw-animate-css": "^1.3.4",
     "typescript": "^5",
     "ultracite": "5.0.32"
+  },
+  "nextBundleAnalysis": {
+    "budget": null,
+    "budgetPercentIncreaseRed": 20,
+    "minimumChangeThreshold": 0,
+    "showDetails": true
   }
 }

renovate.json

@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended"
-  ]
+  "extends": ["config:recommended"]
 }

src/app/(chat)/template.tsx

@@ -1,19 +1,28 @@
 import { getLogtoContext } from '@logto/next/server-actions';
+import Link from 'next/link';
 import { redirect } from 'next/navigation';
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from '@/components/animate-ui/radix/sidebar';
+  LuImage as ImageIcon,
+  LuBot,
+  LuFile,
+  LuHouse,
+  LuLogOut,
+  LuMenu,
+  LuMessageCircle,
+  LuMessageSquareHeart,
+  LuSettings,
+  LuShare,
+} from 'react-icons/lu';
+import KawaiiLogo from '@/assets/img/mikan-vtube.svg';
 import { ChatSidebar } from '@/components/sidebar';
 import { logtoConfig } from '@/lib/auth';
 import { prisma } from '@/lib/prisma';
 
 export default async function ChatLayout({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   const { claims } = await getLogtoContext(logtoConfig);
 
@@ -53,10 +62,90 @@ export default async function ChatLayout({
   };
 
   return (
-    <SidebarProvider>
-      <ChatSidebar data={data} />
-      <SidebarTrigger className={'mt-3 ml-3 hover:bg-secondary'} />
-      <SidebarInset>{children}</SidebarInset>
-    </SidebarProvider>
+    <>
+      <div className="drawer">
+        <input className="drawer-toggle" id="my-drawer-3" type="checkbox" />
+        <div className="drawer-content flex flex-col">
+          <div className="navbar sticky top-0 z-40 w-full bg-base-300">
+            <div className="flex-none">
+              <label
+                aria-label="open sidebar"
+                className="btn btn-square btn-ghost"
+                htmlFor="my-drawer-3"
+              >
+                <LuMenu className="inline-block h-6 w-6" />
+              </label>
+            </div>
+            <div className="mx-2 flex-1 px-2">
+              <a className="flex space-x-3 font-bold text-xl normal-case">
+                <img
+                  alt="MikanDev Logo"
+                  className="mr-3 h-8 w-auto"
+                  src={KawaiiLogo.src}
+                />
+                Chat
+              </a>
+            </div>
+            <div className="hidden flex-none lg:block">
+              <ul className="menu menu-horizontal">
+                <Link href={'/settings/models'}>
+                  <button className={'btn btn-ghost'}>
+                    <LuBot className="inline-block h-6 w-6" />
+                    Models
+                  </button>
+                </Link>
+                <Link href={'/settings/files'}>
+                  <button className={'btn btn-ghost'}>
+                    <LuFile className="inline-block h-6 w-6" />
+                    Files
+                  </button>
+                </Link>
+                <Link href={'/settings/shared'}>
+                  <button className={'btn btn-ghost'}>
+                    <LuShare className="inline-block h-6 w-6" />
+                    Shared chats
+                  </button>
+                </Link>
+                <Link href={'/logout'} prefetch={false}>
+                  <button className={'btn btn-ghost'}>
+                    <LuLogOut className="inline-block h-6 w-6" />
+                    Logout
+                  </button>
+                </Link>
+              </ul>
+            </div>
+          </div>
+          {children}
+        </div>
+        <div className="drawer-side z-60">
+          <label
+            aria-label="close sidebar"
+            className="drawer-overlay"
+            htmlFor="my-drawer-3"
+          />
+          <ul className="menu flex min-h-screen w-80 flex-col bg-base-200 p-4">
+            <ChatSidebar data={data} />
+            <div className="card mt-auto shadow-xl">
+              <div className="card-body">
+                <div className="flex items-center">
+                  <div className="avatar">
+                    <div className="w-12 rounded-full">
+                      <img
+                        alt={data.user.name}
+                        src={data.user.avatar || '/default-avatar.png'}
+                      />
+                    </div>
+                  </div>
+                  <div className="ml-3">
+                    <h2 className="card-title">{data.user.name}</h2>
+                    <p className="text-gray-500 text-sm">UID {data.user.id}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ul>
+        </div>
+      </div>
+    </>
   );
 }

src/app/(public)/template.tsx

@@ -1,18 +1,9 @@
 import type * as React from 'react';
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from '@/components/animate-ui/radix/sidebar';
 
 export default async function ShareLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <SidebarProvider>
-      <SidebarInset>{children}</SidebarInset>
-    </SidebarProvider>
-  );
+  return <>{children}</>;
 }