├── public
    ├── logo.png
    └── screenshot.jpeg
├── src
    ├── app
    │   ├── @modal
    │   │   ├── default.tsx
    │   │   └── (.)settings
    │   │   │   └── page.tsx
    │   ├── favicon.ico
    │   ├── settings
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── api
    │   │   └── chat
    │   │   │   └── route.ts
    │   ├── (journal)
    │   │   ├── use-journal-updates.tsx
    │   │   ├── page.tsx
    │   │   └── use-journals.tsx
    │   ├── globals.css
    │   ├── chat
    │   │   ├── page.tsx
    │   │   └── [id]
    │   │   │   └── page.tsx
    │   ├── knowledge
    │   │   ├── page.tsx
    │   │   └── knowledge-dialog.tsx
    │   └── notes
    │   │   └── [id]
    │   │       └── page.tsx
    ├── lib
    │   ├── db
    │   │   ├── schema
    │   │   │   ├── chat.ts
    │   │   │   ├── embedding.ts
    │   │   │   ├── chat-message.ts
    │   │   │   └── note.ts
    │   │   └── index.ts
    │   ├── utils.ts
    │   ├── fonts.ts
    │   ├── ai
    │   │   ├── provder.ts
    │   │   └── embedding.ts
    │   ├── settings.ts
    │   └── chat.ts
    ├── instrumentation.ts
    ├── components
    │   ├── ui
    │   │   ├── skeleton.tsx
    │   │   ├── collapsible.tsx
    │   │   ├── textarea.tsx
    │   │   ├── label.tsx
    │   │   ├── input.tsx
    │   │   ├── separator.tsx
    │   │   ├── sonner.tsx
    │   │   ├── badge.tsx
    │   │   ├── switch.tsx
    │   │   ├── tooltip.tsx
    │   │   ├── button.tsx
    │   │   ├── dialog.tsx
    │   │   ├── sheet.tsx
    │   │   ├── form.tsx
    │   │   ├── alert-dialog.tsx
    │   │   ├── context-menu.tsx
    │   │   └── sidebar.tsx
    │   ├── form-button.tsx
    │   ├── icons.tsx
    │   ├── logo.tsx
    │   ├── chat
    │   │   ├── messages.tsx
    │   │   ├── skeletons.tsx
    │   │   ├── markdown.tsx
    │   │   ├── message.tsx
    │   │   ├── chat-input.tsx
    │   │   └── chat-container.tsx
    │   ├── editor.tsx
    │   ├── settings
    │   │   ├── embeddings-settings.tsx
    │   │   ├── provider-settings.tsx
    │   │   └── settings-modal.tsx
    │   └── app-sidebar.tsx
    ├── hooks
    │   ├── use-mobile.tsx
    │   └── use-scroll-to-bottom.ts
    ├── config
    │   └── site.ts
    └── contexts
    │   └── chat-store.tsx
├── next.config.ts
├── .prettierrc
├── postcss.config.mjs
├── eslint.config.mjs
├── .dockerignore
├── components.json
├── .gitignore
├── .github
    └── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
├── tsconfig.json
├── env.ts
├── Dockerfile
├── package.json
├── tailwind.config.ts
├── README.cn.md
└── README.md


/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/celerforge-dev/freenote/HEAD/public/logo.png


--------------------------------------------------------------------------------
/src/app/@modal/default.tsx:
--------------------------------------------------------------------------------
1 | export default function Default() {
2 |   return null;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/celerforge-dev/freenote/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/public/screenshot.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/celerforge-dev/freenote/HEAD/public/screenshot.jpeg


--------------------------------------------------------------------------------
/src/lib/db/schema/chat.ts:
--------------------------------------------------------------------------------
1 | export type Chat = {
2 |   id: string;
3 |   title?: string;
4 |   createdAt: Date;
5 |   updatedAt: Date | null;
6 | };
7 | 


--------------------------------------------------------------------------------
/src/lib/db/schema/embedding.ts:
--------------------------------------------------------------------------------
1 | export type Embedding = {
2 |   id: number;
3 |   noteId: number;
4 |   content: string;
5 |   embedding: number[];
6 | };
7 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   output: "standalone",
5 | };
6 | 
7 | export default nextConfig;
8 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": [
3 |     "prettier-plugin-organize-imports",
4 |     "@trivago/prettier-plugin-sort-imports",
5 |     "prettier-plugin-tailwindcss"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/src/lib/db/schema/chat-message.ts:
--------------------------------------------------------------------------------
1 | export type ChatMessage = {
2 |   id: string;
3 |   chatId: string;
4 |   role: "system" | "user" | "assistant" | "data";
5 |   content: string;
6 |   createdAt: Date;
7 | };
8 | 


--------------------------------------------------------------------------------
/src/instrumentation.ts:
--------------------------------------------------------------------------------
 1 | // import { registerOTel } from "@vercel/otel";
 2 | // import { LangfuseExporter } from "langfuse-vercel";
 3 | 
 4 | export function register() {
 5 |   // registerOTel({
 6 |   //   serviceName: "freenote",
 7 |   //   traceExporter: new LangfuseExporter(),
 8 |   // });
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/lib/db/schema/note.ts:
--------------------------------------------------------------------------------
 1 | export enum NoteType {
 2 |   Journal = "journal",
 3 |   Knowledge = "knowledge",
 4 | }
 5 | 
 6 | export type Note = {
 7 |   id: number;
 8 |   title: string;
 9 |   type: NoteType;
10 |   content: string;
11 |   createdAt: Date;
12 |   updatedAt: Date | null;
13 |   embeddingUpdatedAt: Date | null;
14 | };
15 | 


--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-primary/10", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/src/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 4 | 
 5 | const Collapsible = CollapsiblePrimitive.Root
 6 | 
 7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 8 | 
 9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 | 
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 | 


--------------------------------------------------------------------------------
/src/app/@modal/(.)settings/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import SettingsModal from "@/components/settings/settings-modal";
 4 | import { useRouter } from "next/navigation";
 5 | 
 6 | export default function SettingsInterceptedPage() {
 7 |   const router = useRouter();
 8 | 
 9 |   const handleClose = () => {
10 |     router.back();
11 |   };
12 | 
13 |   return <SettingsModal isOpen={true} onClose={handleClose} />;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/settings/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import SettingsModal from "@/components/settings/settings-modal";
 4 | import { useRouter } from "next/navigation";
 5 | 
 6 | export default function SettingsPage() {
 7 |   const router = useRouter();
 8 | 
 9 |   const handleClose = () => {
10 |     router.push("/", { scroll: false });
11 |   };
12 | 
13 |   return <SettingsModal isOpen={true} onClose={handleClose} />;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { clsx, type ClassValue } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs));
 6 | }
 7 | 
 8 | export function objEnum<T extends string>(enumValues: readonly T[]) {
 9 |   const enumObject = {} as { [K in T]: K };
10 |   for (const enumValue of enumValues) {
11 |     enumObject[enumValue] = enumValue;
12 |   }
13 |   return enumObject;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/lib/fonts.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   JetBrains_Mono as FontMono,
 3 |   Inter as FontSans,
 4 |   Outfit,
 5 | } from "next/font/google";
 6 | 
 7 | export const fontSans = FontSans({
 8 |   subsets: ["latin"],
 9 |   variable: "--font-sans",
10 | });
11 | 
12 | export const fontMono = FontMono({
13 |   subsets: ["latin"],
14 |   variable: "--font-mono",
15 | });
16 | 
17 | export const fontOutfit = Outfit({
18 |   subsets: ["latin"],
19 |   variable: "--font-outfit",
20 | });
21 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 | 
16 | export default eslintConfig;
17 | 


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
 1 | # Dependencies
 2 | node_modules
 3 | .pnp
 4 | .pnp.js
 5 | 
 6 | # Testing
 7 | coverage
 8 | 
 9 | # Next.js
10 | .next
11 | out
12 | 
13 | # Production
14 | build
15 | 
16 | # Misc
17 | .DS_Store
18 | *.pem
19 | 
20 | # Debug
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .pnpm-debug.log*
25 | 
26 | # Local env files
27 | .env*.local
28 | .env
29 | 
30 | # Vercel
31 | .vercel
32 | 
33 | # TypeScript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 
37 | # Git
38 | .git
39 | .github 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/src/lib/ai/provder.ts:
--------------------------------------------------------------------------------
 1 | import { SETTINGS } from "@/lib/settings";
 2 | import { createOpenAI } from "@ai-sdk/openai";
 3 | import { getCookies } from "next-client-cookies/server";
 4 | 
 5 | export const getProvider = async () => {
 6 |   const cookies = await getCookies();
 7 |   const baseUrl = cookies.get(SETTINGS.ai.provider.baseUrl);
 8 |   const apiKey = cookies.get(SETTINGS.ai.provider.apiKey);
 9 |   if (!baseUrl || !apiKey) {
10 |     return null;
11 |   }
12 |   const provider = createOpenAI({
13 |     baseURL: baseUrl,
14 |     apiKey: apiKey,
15 |   });
16 |   return provider;
17 | };
18 | 


--------------------------------------------------------------------------------
/src/lib/settings.ts:
--------------------------------------------------------------------------------
 1 | export const SETTINGS = {
 2 |   ai: {
 3 |     provider: {
 4 |       baseUrl: "settings.ai.provider.baseUrl",
 5 |       apiKey: "settings.ai.provider.apiKey",
 6 |     },
 7 |     embeddings: {
 8 |       autoUpdate: "settings.ai.embeddings.autoUpdate",
 9 |     },
10 |   },
11 | } as const;
12 | 
13 | // Type helper for getting nested values
14 | type SettingsValue<T> =
15 |   T extends Record<string, unknown>
16 |     ? { [K in keyof T]: SettingsValue<T[K]> }
17 |     : string;
18 | 
19 | // Inferred settings type
20 | export type Settings = SettingsValue<typeof SETTINGS>;
21 | 


--------------------------------------------------------------------------------
/src/hooks/use-mobile.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | const MOBILE_BREAKPOINT = 768
 4 | 
 5 | export function useIsMobile() {
 6 |   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 7 | 
 8 |   React.useEffect(() => {
 9 |     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
10 |     const onChange = () => {
11 |       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
12 |     }
13 |     mql.addEventListener("change", onChange)
14 |     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15 |     return () => mql.removeEventListener("change", onChange)
16 |   }, [])
17 | 
18 |   return !!isMobile
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Textarea = React.forwardRef<
 6 |   HTMLTextAreaElement,
 7 |   React.ComponentProps<"textarea">
 8 | >(({ className, ...props }, ref) => {
 9 |   return (
10 |     <textarea
11 |       className={cn(
12 |         "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
13 |         className
14 |       )}
15 |       ref={ref}
16 |       {...props}
17 |     />
18 |   )
19 | })
20 | Textarea.displayName = "Textarea"
21 | 
22 | export { Textarea }
23 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"],
23 |       "~/*": ["./*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": [
28 |     "node_modules",
29 |     "src-tauri"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/env.ts:
--------------------------------------------------------------------------------
 1 | // src/env.mjs
 2 | import { createEnv } from "@t3-oss/env-nextjs";
 3 | 
 4 | export const env = createEnv({
 5 |   /*
 6 |    * Serverside Environment variables, not available on the client.
 7 |    * Will throw if you access these variables on the client.
 8 |    */
 9 |   server: {},
10 |   /*
11 |    * Environment variables available on the client (and server).
12 |    *
13 |    * 💡 You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
14 |    */
15 |   client: {},
16 |   /*
17 |    * Due to how Next.js bundles environment variables on Edge and Client,
18 |    * we need to manually destructure them to make sure all are included in bundle.
19 |    *
20 |    * 💡 You'll get type errors if not all variables from `server` & `client` are included here.
21 |    */
22 |   runtimeEnv: {},
23 | });
24 | 


--------------------------------------------------------------------------------
/src/lib/chat.ts:
--------------------------------------------------------------------------------
 1 | export function generateChatTitle(message: string): string {
 2 |   if (!message || message.trim().length === 0) {
 3 |     return "New Chat";
 4 |   }
 5 | 
 6 |   try {
 7 |     // Extract the first few words as the title
 8 |     const words = message.trim().split(/\s+/);
 9 | 
10 |     // If message is short, use the entire message
11 |     if (words.length <= 5) {
12 |       return message.length <= 30 ? message : message.substring(0, 27) + "...";
13 |     }
14 | 
15 |     // Otherwise take the first 5 words
16 |     const title = words.slice(0, 5).join(" ");
17 |     return title.length <= 30 ? title : title.substring(0, 27) + "...";
18 |   } catch (error) {
19 |     console.error("Error generating chat title:", error);
20 |     return "New Chat"; // Default title if generation fails
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/components/form-button.tsx:
--------------------------------------------------------------------------------
 1 | import { Icons } from "@/components/icons";
 2 | import { Button, type ButtonProps } from "@/components/ui/button";
 3 | import { useFormState } from "react-hook-form";
 4 | 
 5 | interface FormButtonProps extends ButtonProps {
 6 |   pendingText?: string;
 7 | }
 8 | 
 9 | export function FormButton({
10 |   children,
11 |   pendingText,
12 |   className,
13 |   ...props
14 | }: FormButtonProps) {
15 |   const { isSubmitting } = useFormState();
16 | 
17 |   return (
18 |     <Button className={className} disabled={isSubmitting} {...props}>
19 |       {isSubmitting ? (
20 |         <>
21 |           <Icons.refreshCw className="sp-mr-2 sp-h-4 sp-w-4 sp-animate-spin" />
22 |           {pendingText || "Processing..."}
23 |         </>
24 |       ) : (
25 |         <>{children}</>
26 |       )}
27 |     </Button>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 | 


--------------------------------------------------------------------------------
/src/hooks/use-scroll-to-bottom.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, type RefObject } from "react";
 2 | 
 3 | export function useScrollToBottom<T extends HTMLElement>(): [
 4 |   RefObject<T>,
 5 |   RefObject<T>,
 6 | ] {
 7 |   const containerRef = useRef<T>(null);
 8 |   const endRef = useRef<T>(null);
 9 | 
10 |   useEffect(() => {
11 |     const container = containerRef.current;
12 |     const end = endRef.current;
13 | 
14 |     if (container && end) {
15 |       const observer = new MutationObserver(() => {
16 |         end.scrollIntoView({ behavior: "instant", block: "end" });
17 |       });
18 | 
19 |       observer.observe(container, {
20 |         childList: true,
21 |         subtree: true,
22 |         attributes: true,
23 |         characterData: true,
24 |       });
25 | 
26 |       return () => observer.disconnect();
27 |     }
28 |   }, []);
29 | 
30 |   return [containerRef as RefObject<T>, endRef as RefObject<T>];
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = "horizontal", decorative = true, ...props },
14 |     ref
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         "shrink-0 bg-border",
22 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 | 
31 | export { Separator }
32 | 


--------------------------------------------------------------------------------
/src/components/icons.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ArrowUp,
 3 |   BookOpenText,
 4 |   BotMessageSquare,
 5 |   Bug,
 6 |   ChevronRight,
 7 |   CircleArrowUp,
 8 |   CircleHelp,
 9 |   CirclePlus,
10 |   Github,
11 |   Loader,
12 |   LucideIcon,
13 |   MessageSquare,
14 |   NotebookPen,
15 |   NotebookText,
16 |   RefreshCw,
17 |   Settings,
18 |   Sparkles,
19 |   StopCircle,
20 | } from "lucide-react";
21 | 
22 | export const Icons = {
23 |   sparkles: Sparkles,
24 |   notebookText: NotebookText,
25 |   botMessageSquare: BotMessageSquare,
26 |   notebookPen: NotebookPen,
27 |   bookOpenText: BookOpenText,
28 |   arrowUp: ArrowUp,
29 |   loader: Loader,
30 |   chevronRight: ChevronRight,
31 |   circleArrowUp: CircleArrowUp,
32 |   stopCircle: StopCircle,
33 |   settings: Settings,
34 |   refreshCw: RefreshCw,
35 |   circlePlus: CirclePlus,
36 |   github: Github,
37 |   bug: Bug,
38 |   messageSquare: MessageSquare,
39 |   circleHelp: CircleHelp,
40 | } satisfies Record<string, LucideIcon>;
41 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | import { Toaster as Sonner } from "sonner"
 5 | 
 6 | type ToasterProps = React.ComponentProps<typeof Sonner>
 7 | 
 8 | const Toaster = ({ ...props }: ToasterProps) => {
 9 |   const { theme = "system" } = useTheme()
10 | 
11 |   return (
12 |     <Sonner
13 |       theme={theme as ToasterProps["theme"]}
14 |       className="toaster group"
15 |       toastOptions={{
16 |         classNames: {
17 |           toast:
18 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
19 |           description: "group-[.toast]:text-muted-foreground",
20 |           actionButton:
21 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
22 |           cancelButton:
23 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
24 |         },
25 |       }}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | export { Toaster }
32 | 


--------------------------------------------------------------------------------
/src/lib/db/index.ts:
--------------------------------------------------------------------------------
 1 | import { Chat } from "@/lib/db/schema/chat";
 2 | import { ChatMessage } from "@/lib/db/schema/chat-message";
 3 | import { Embedding } from "@/lib/db/schema/embedding";
 4 | import { Note } from "@/lib/db/schema/note";
 5 | import Dexie, { EntityTable } from "dexie";
 6 | 
 7 | class FreeNoteDB extends Dexie {
 8 |   notes!: EntityTable<Note, "id">;
 9 |   embeddings!: EntityTable<Embedding, "id">;
10 |   chats!: EntityTable<Chat, "id">;
11 |   chatMessages!: EntityTable<ChatMessage, "id">;
12 | 
13 |   constructor() {
14 |     super("freenote");
15 |     this.version(1).stores({
16 |       notes: "++id, title, type, createdAt, updatedAt, embeddingUpdatedAt",
17 |       embeddings: "++id, noteId, content, embedding",
18 |       chats: "++id, title, updatedAt, createdAt",
19 |       chatMessages: "++id, chatId",
20 |     });
21 |   }
22 | }
23 | 
24 | export const db = new FreeNoteDB();
25 | export * from "@/lib/db/schema/chat";
26 | export * from "@/lib/db/schema/chat-message";
27 | export * from "@/lib/db/schema/embedding";
28 | export * from "@/lib/db/schema/note";
29 | 


--------------------------------------------------------------------------------
/src/components/logo.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { VariantProps, cva } from "class-variance-authority";
 4 | import React from "react";
 5 | 
 6 | import { siteConfig } from "@/config/site";
 7 | import { fontOutfit } from "@/lib/fonts";
 8 | import { cn } from "@/lib/utils";
 9 | 
10 | const logoVariants = cva("font-medium", {
11 |   variants: {
12 |     size: {
13 |       sm: ["text-xl"],
14 |       default: ["text-xl"],
15 |       lg: ["text-3xl"],
16 |     },
17 |   },
18 |   defaultVariants: {
19 |     size: "default",
20 |   },
21 | });
22 | 
23 | interface logoProps extends VariantProps<typeof logoVariants> {
24 |   className?: string;
25 | }
26 | 
27 | const Logo = React.forwardRef<HTMLButtonElement, logoProps>(
28 |   ({ className, size, ...props }, ref) => {
29 |     return (
30 |       <span
31 |         className={cn(fontOutfit.className, logoVariants({ size, className }))}
32 |         {...props}
33 |         ref={ref}
34 |       >
35 |         {siteConfig.name}
36 |       </span>
37 |     );
38 |   },
39 | );
40 | Logo.displayName = "Logo";
41 | 
42 | export { Logo, logoVariants };
43 | 


--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as SwitchPrimitives from "@radix-ui/react-switch";
 4 | import * as React from "react";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Switch = React.forwardRef<
 9 |   React.ElementRef<typeof SwitchPrimitives.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SwitchPrimitives.Root
13 |     className={cn(
14 |       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
15 |       className,
16 |     )}
17 |     {...props}
18 |     ref={ref}
19 |   >
20 |     <SwitchPrimitives.Thumb
21 |       className={cn(
22 |         "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
23 |       )}
24 |     />
25 |   </SwitchPrimitives.Root>
26 | ));
27 | Switch.displayName = SwitchPrimitives.Root.displayName;
28 | 
29 | export { Switch };
30 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const TooltipProvider = TooltipPrimitive.Provider
 9 | 
10 | const Tooltip = TooltipPrimitive.Root
11 | 
12 | const TooltipTrigger = TooltipPrimitive.Trigger
13 | 
14 | const TooltipContent = React.forwardRef<
15 |   React.ElementRef<typeof TooltipPrimitive.Content>,
16 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |   <TooltipPrimitive.Portal>
19 |     <TooltipPrimitive.Content
20 |       ref={ref}
21 |       sideOffset={sideOffset}
22 |       className={cn(
23 |         "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
24 |         className
25 |       )}
26 |       {...props}
27 |     />
28 |   </TooltipPrimitive.Portal>
29 | ))
30 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
31 | 
32 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
33 | 


--------------------------------------------------------------------------------
/src/config/site.ts:
--------------------------------------------------------------------------------
 1 | export type SiteConfig = typeof siteConfig;
 2 | 
 3 | export const siteConfig = {
 4 |   name: "Freenote",
 5 |   url: "freenote.app",
 6 |   keywords: [
 7 |     "AI journal app",
 8 |     "AI diary app",
 9 |     "journal prompts",
10 |     "how to journal",
11 |     "journaling ideas",
12 |     "gratitude journal prompts",
13 |     "journal writing prompts",
14 |     "journal prompts for mental health",
15 |     "how to start journaling",
16 |     "daily journal prompts",
17 |     "journal prompts for self love",
18 |     "best journal app",
19 |     "benefits of journaling",
20 |     "how to journal for mental health",
21 |     "what to write in a journal",
22 |     "how to journal daily",
23 |     "diary app",
24 |     "AI-assisted note search",
25 |     "AI-assisted note summarization",
26 |     "AI-driven journaling",
27 |     "digital diary with AI",
28 |     "private journaling app",
29 |     "mood tracker",
30 |     "mood tracker app",
31 |     "self care",
32 |     "mental health apps",
33 |     "mindfulness",
34 |     "note-taking application",
35 |     "personal knowledge base",
36 |     "secure note-taking",
37 |   ],
38 |   title: "Freenote - Write Freely, Note Casually",
39 |   description:
40 |     "Freenote is an open-source AI journal app with Markdown support. You can freely record your notes, and with AI assistance, easily search and summarize past entries, enhancing creativity capture and management. All data is stored locally on your device, ensuring privacy and security.",
41 |   twitter: "https://twitter.com/chaoying972",
42 |   domain: "https://freenote.app",
43 | };
44 | 


--------------------------------------------------------------------------------
/src/components/chat/messages.tsx:
--------------------------------------------------------------------------------
 1 | /** Originally from `vercel/ai-chatbot`
 2 |  * @link https://github.com/vercel/ai-chatbot/blob/main/components/messages.tsx
 3 |  */
 4 | 
 5 | import { PreviewMessage, ThinkingMessage } from "@/components/chat/message";
 6 | import { useScrollToBottom } from "@/hooks/use-scroll-to-bottom";
 7 | import { Message } from "ai";
 8 | import equal from "fast-deep-equal";
 9 | import { memo } from "react";
10 | 
11 | export function PureMessages({
12 |   messages,
13 |   isLoading,
14 | }: {
15 |   messages: Message[];
16 |   isLoading: boolean;
17 | }) {
18 |   const [messagesContainerRef, messagesEndRef] =
19 |     useScrollToBottom<HTMLDivElement>();
20 |   return (
21 |     <div
22 |       ref={messagesContainerRef}
23 |       className="flex min-w-0 flex-1 flex-col gap-6 overflow-y-scroll pt-4"
24 |     >
25 |       {messages.map((message) => (
26 |         <PreviewMessage key={message.id} message={message} />
27 |       ))}
28 |       {isLoading &&
29 |         messages.length > 0 &&
30 |         messages[messages.length - 1].role === "user" && <ThinkingMessage />}
31 | 
32 |       <div
33 |         ref={messagesEndRef}
34 |         className="min-h-[24px] min-w-[24px] shrink-0"
35 |       />
36 |     </div>
37 |   );
38 | }
39 | 
40 | export const Messages = memo(PureMessages, (prevProps, nextProps) => {
41 |   if (prevProps.isLoading !== nextProps.isLoading) return false;
42 |   if (prevProps.isLoading && nextProps.isLoading) return false;
43 |   if (prevProps.messages.length !== nextProps.messages.length) return false;
44 |   if (!equal(prevProps.messages, nextProps.messages)) return false;
45 | 
46 |   return true;
47 | });
48 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import "@/app/globals.css";
 2 | import { AppSidebar } from "@/components/app-sidebar";
 3 | import {
 4 |   SidebarInset,
 5 |   SidebarProvider,
 6 |   SidebarTrigger,
 7 | } from "@/components/ui/sidebar";
 8 | import { Toaster } from "@/components/ui/sonner";
 9 | import { siteConfig } from "@/config/site";
10 | import { ChatStoreProvider } from "@/contexts/chat-store";
11 | import { fontSans } from "@/lib/fonts";
12 | import { cn } from "@/lib/utils";
13 | import { Analytics } from "@vercel/analytics/react";
14 | import type { Metadata } from "next";
15 | import { CookiesProvider } from "next-client-cookies/server";
16 | 
17 | export const metadata: Metadata = {
18 |   title: siteConfig.title,
19 |   description: siteConfig.description,
20 |   keywords: siteConfig.keywords,
21 | };
22 | 
23 | export default function RootLayout({
24 |   children,
25 |   modal,
26 | }: {
27 |   children: React.ReactNode;
28 |   modal: React.ReactNode;
29 | }) {
30 |   return (
31 |     <html lang="en">
32 |       <body
33 |         className={cn("bg-background font-sans antialiased", fontSans.variable)}
34 |       >
35 |         <CookiesProvider>
36 |           <ChatStoreProvider>
37 |             <SidebarProvider>
38 |               <AppSidebar />
39 |               <SidebarInset>
40 |                 <header className="flex h-16 items-center border-b px-2">
41 |                   <SidebarTrigger />
42 |                 </header>
43 |                 <main>{children}</main>
44 |               </SidebarInset>
45 |             </SidebarProvider>
46 |             {modal}
47 |             <Toaster richColors />
48 |           </ChatStoreProvider>
49 |         </CookiesProvider>
50 |         <Analytics />
51 |       </body>
52 |     </html>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/editor.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | import {
 5 |   MDXEditor,
 6 |   MDXEditorProps,
 7 |   codeBlockPlugin,
 8 |   codeMirrorPlugin,
 9 |   headingsPlugin,
10 |   listsPlugin,
11 |   markdownShortcutPlugin,
12 |   tablePlugin,
13 | } from "@mdxeditor/editor";
14 | import "@mdxeditor/editor/style.css";
15 | import { FC } from "react";
16 | 
17 | interface EditorProps extends MDXEditorProps {
18 |   onValueChange: (value: string) => void;
19 |   className?: string;
20 |   contentEditableClassName?: string;
21 | }
22 | 
23 | /**
24 |  * Extend this Component further with the necessary plugins or props you need.
25 |  * proxying the ref is necessary. Next.js dynamically imported components don't support refs.
26 |  */
27 | const Editor: FC<EditorProps> = ({
28 |   onValueChange,
29 |   className,
30 |   contentEditableClassName,
31 |   ...props
32 | }: EditorProps) => {
33 |   return (
34 |     <MDXEditor
35 |       onChange={onValueChange}
36 |       className={className}
37 |       contentEditableClassName={cn(
38 |         "prose prose-stone !p-0",
39 |         contentEditableClassName,
40 |       )}
41 |       {...props}
42 |       plugins={[
43 |         headingsPlugin({}),
44 |         listsPlugin(),
45 |         tablePlugin(),
46 |         codeBlockPlugin({
47 |           defaultCodeBlockLanguage: "js",
48 |         }),
49 |         codeMirrorPlugin({
50 |           codeBlockLanguages: {
51 |             js: "JavaScript",
52 |             css: "CSS",
53 |             ts: "TypeScript",
54 |             html: "HTML",
55 |             python: "Python",
56 |             bash: "Bash",
57 |             json: "JSON",
58 |             yaml: "YAML",
59 |             markdown: "Markdown",
60 |             sql: "SQL",
61 |             xml: "XML",
62 |           },
63 |         }),
64 |         markdownShortcutPlugin(),
65 |       ]}
66 |     />
67 |   );
68 | };
69 | 
70 | export default Editor;
71 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/src/components/settings/embeddings-settings.tsx:
--------------------------------------------------------------------------------
 1 | import { Icons } from "@/components/icons";
 2 | import { Button } from "@/components/ui/button";
 3 | import { Label } from "@/components/ui/label";
 4 | import { Switch } from "@/components/ui/switch";
 5 | 
 6 | interface EmbeddingsSettingsProps {
 7 |   autoUpdate: boolean;
 8 |   onAutoUpdateChange: (value: boolean) => void;
 9 |   onSync: () => void;
10 |   isSyncing: boolean;
11 | }
12 | 
13 | export function EmbeddingsSettings({
14 |   autoUpdate,
15 |   onAutoUpdateChange,
16 |   onSync,
17 |   isSyncing,
18 | }: EmbeddingsSettingsProps) {
19 |   return (
20 |     <div className="space-y-6 py-4">
21 |       <div>
22 |         <h3 className="text-lg font-medium">Embeddings</h3>
23 |         <p className="mt-2 text-sm text-muted-foreground">
24 |           Manage your AI embeddings settings and synchronization.
25 |         </p>
26 |       </div>
27 | 
28 |       <div className="space-y-4 rounded-lg border p-4">
29 |         <div className="flex items-center justify-between">
30 |           <div className="space-y-0.5">
31 |             <Label htmlFor="auto-update" className="text-base">
32 |               Auto-update Embeddings
33 |             </Label>
34 |             <p className="text-[13px] text-muted-foreground">
35 |               Automatically update embeddings when notes are modified
36 |             </p>
37 |           </div>
38 |           <Switch
39 |             id="auto-update"
40 |             checked={autoUpdate}
41 |             onCheckedChange={onAutoUpdateChange}
42 |           />
43 |         </div>
44 |       </div>
45 | 
46 |       <div className="space-y-4 rounded-lg border p-4">
47 |         <div className="space-y-1">
48 |           <h4 className="font-medium">Manual Synchronization</h4>
49 |           <p className="text-[13px] text-muted-foreground">
50 |             Update embeddings for all notes to ensure your AI has the latest
51 |             content
52 |           </p>
53 |         </div>
54 |         <Button
55 |           onClick={onSync}
56 |           disabled={isSyncing}
57 |           className="w-full sm:w-auto"
58 |         >
59 |           <Icons.refreshCw
60 |             className={`mr-2 h-4 w-4 ${isSyncing ? "animate-spin" : ""}`}
61 |           />
62 |           {isSyncing ? "Synchronizing..." : "Synchronize Now"}
63 |         </Button>
64 |       </div>
65 |     </div>
66 |   );
67 | }
68 | 


--------------------------------------------------------------------------------
/src/app/api/chat/route.ts:
--------------------------------------------------------------------------------
 1 | import { getProvider } from "@/lib/ai/provder";
 2 | import { streamText, tool } from "ai";
 3 | import { z } from "zod";
 4 | 
 5 | // Allow streaming responses up to 30 seconds
 6 | export const maxDuration = 30;
 7 | 
 8 | const SYSTEM_PROMPT = `\
 9 | You are a helpful and precise assistant for a personal note-taking application. Follow these rules:
10 | 1. Only answer what is explicitly asked in the question
11 | 2. Never include information that wasn't specifically asked for
12 | 3. Format responses:
13 |    - Keep it concise
14 |    - One short paragraph
15 |    - Include dates as YYYY/MM/DD when available
16 |    - Use the same language as the question
17 | 4. If no relevant information found, say "Sorry, I don't have any notes about this topic."\
18 | `;
19 | 
20 | export async function POST(req: Request) {
21 |   const { messages } = await req.json();
22 |   const provider = await getProvider();
23 |   if (!provider) {
24 |     return new Response(
25 |       "No provider found. Please set API credentials first.",
26 |       {
27 |         status: 400,
28 |       },
29 |     );
30 |   }
31 |   const result = streamText({
32 |     model: provider.chat("gpt-4o-mini"),
33 |     system: SYSTEM_PROMPT,
34 |     tools: {
35 |       retrieveNote: tool({
36 |         description: `retrieve information from your personal notes that EXACTLY matches the user's question. Only return information that directly answers the specific question asked. Filter out any unrelated information even if it appears in the same note.`,
37 |         parameters: z.object({
38 |           question: z.string().describe("the users question"),
39 |           filterUnrelated: z
40 |             .boolean()
41 |             .default(true)
42 |             .describe(
43 |               "whether to filter out unrelated information from the same note",
44 |             ),
45 |         }),
46 |       }),
47 |     },
48 |     experimental_telemetry: { isEnabled: true },
49 |     messages,
50 |   });
51 | 
52 |   return result.toDataStreamResponse({
53 |     getErrorMessage: (error) => {
54 |       if (error == null) {
55 |         return "unknown error";
56 |       }
57 | 
58 |       if (typeof error === "string") {
59 |         return error;
60 |       }
61 | 
62 |       if (error instanceof Error) {
63 |         return error.message;
64 |       }
65 | 
66 |       return JSON.stringify(error);
67 |     },
68 |   });
69 | }
70 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | # syntax=docker.io/docker/dockerfile:1
 2 | 
 3 | FROM node:20-alpine AS base
 4 | 
 5 | # Install dependencies only when needed
 6 | FROM base AS deps
 7 | # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 8 | RUN apk add --no-cache libc6-compat
 9 | WORKDIR /app
10 | 
11 | # Install dependencies based on the preferred package manager
12 | COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
13 | RUN \
14 |   if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
15 |   elif [ -f package-lock.json ]; then npm ci; \
16 |   elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --force; \
17 |   else echo "Lockfile not found." && exit 1; \
18 |   fi
19 | 
20 | 
21 | # Rebuild the source code only when needed
22 | FROM base AS builder
23 | WORKDIR /app
24 | COPY --from=deps /app/node_modules ./node_modules
25 | COPY . .
26 | 
27 | # Next.js collects completely anonymous telemetry data about general usage.
28 | # Learn more here: https://nextjs.org/telemetry
29 | # Uncomment the following line in case you want to disable telemetry during the build.
30 | # ENV NEXT_TELEMETRY_DISABLED=1
31 | 
32 | RUN \
33 |   if [ -f yarn.lock ]; then yarn run build; \
34 |   elif [ -f package-lock.json ]; then npm run build; \
35 |   elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
36 |   else echo "Lockfile not found." && exit 1; \
37 |   fi
38 | 
39 | # Production image, copy all the files and run next
40 | FROM base AS runner
41 | WORKDIR /app
42 | 
43 | ENV NODE_ENV=production
44 | # Uncomment the following line in case you want to disable telemetry during runtime.
45 | # ENV NEXT_TELEMETRY_DISABLED=1
46 | 
47 | RUN addgroup --system --gid 1001 nodejs
48 | RUN adduser --system --uid 1001 nextjs
49 | 
50 | COPY --from=builder /app/public ./public
51 | 
52 | # Automatically leverage output traces to reduce image size
53 | # https://nextjs.org/docs/advanced-features/output-file-tracing
54 | COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
55 | COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
56 | 
57 | USER nextjs
58 | 
59 | EXPOSE 3000
60 | 
61 | ENV PORT=3000
62 | 
63 | # server.js is created by next build from the standalone output
64 | # https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
65 | ENV HOSTNAME="0.0.0.0"
66 | CMD ["node", "server.js"] 


--------------------------------------------------------------------------------
/src/app/(journal)/use-journal-updates.tsx:
--------------------------------------------------------------------------------
 1 | import { generateEmbeddings } from "@/lib/ai/embedding";
 2 | import { db } from "@/lib/db";
 3 | import { SETTINGS } from "@/lib/settings";
 4 | import { useDebounce } from "@uidotdev/usehooks";
 5 | import { useCookies } from "next-client-cookies";
 6 | import { useEffect, useState } from "react";
 7 | 
 8 | export function useJournalUpdates() {
 9 |   const [pendingUpdates, setPendingUpdates] = useState<Record<number, string>>(
10 |     {},
11 |   );
12 |   const cookies = useCookies();
13 |   const [autoUpdate] = useState(
14 |     cookies.get(SETTINGS.ai.embeddings.autoUpdate) !== "false" &&
15 |       cookies.get(SETTINGS.ai.provider.apiKey) !== undefined,
16 |   );
17 |   const debouncedUpdates = useDebounce(pendingUpdates, 1000);
18 | 
19 |   useEffect(() => {
20 |     const updateEntries = async () => {
21 |       const updates = Object.entries(debouncedUpdates);
22 |       if (updates.length === 0) return;
23 | 
24 |       try {
25 |         await Promise.all(
26 |           updates.map(async ([id, content]) => {
27 |             const updates: {
28 |               content: string;
29 |               updatedAt: Date;
30 |               embeddingUpdatedAt?: Date;
31 |             } = {
32 |               content,
33 |               updatedAt: new Date(),
34 |             };
35 |             if (autoUpdate) {
36 |               db.embeddings.where("noteId").equals(Number(id)).delete();
37 |               const title = await db.notes
38 |                 .get(Number(id))
39 |                 .then((note) => note?.title);
40 |               const embedding = await generateEmbeddings(content, title);
41 |               await db.embeddings.bulkAdd(
42 |                 embedding.map((embedding) => ({
43 |                   noteId: Number(id),
44 |                   content: embedding.content,
45 |                   embedding: embedding.embedding,
46 |                 })),
47 |               );
48 |               updates["embeddingUpdatedAt"] = updates.updatedAt;
49 |             }
50 |             db.notes.update(Number(id), updates);
51 |           }),
52 |         );
53 |       } catch (err) {
54 |         console.error("Failed to update journals:", err);
55 |       }
56 |     };
57 | 
58 |     updateEntries();
59 |   }, [debouncedUpdates, autoUpdate]);
60 | 
61 |   return {
62 |     handleContentChange: (id: number, content: string) => {
63 |       setPendingUpdates((prev) => ({ ...prev, [id]: content }));
64 |     },
65 |   };
66 | }
67 | 


--------------------------------------------------------------------------------
/src/components/chat/skeletons.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Skeleton } from "@/components/ui/skeleton";
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | interface SkeletonProps {
 7 |   className?: string;
 8 | }
 9 | 
10 | export function ChatMessageSkeleton({
11 |   className,
12 |   isUser = false,
13 | }: SkeletonProps & { isUser?: boolean }) {
14 |   if (isUser) {
15 |     return (
16 |       <div className={cn("flex items-start justify-end gap-3", className)}>
17 |         <div className="w-full max-w-md space-y-2">
18 |           <Skeleton className="ml-auto h-4 w-20" />
19 |           <Skeleton className="h-12 w-full rounded-xl" />
20 |         </div>
21 |       </div>
22 |     );
23 |   }
24 | 
25 |   return (
26 |     <div className={cn("flex items-start gap-3", className)}>
27 |       <Skeleton className="h-10 w-10 rounded-full" />
28 |       <div className="w-full max-w-md space-y-2">
29 |         <Skeleton className="h-4 w-20" />
30 |         <Skeleton className="h-16 w-full" />
31 |       </div>
32 |     </div>
33 |   );
34 | }
35 | 
36 | export function ChatInputSkeleton({ className }: SkeletonProps) {
37 |   return (
38 |     <div className={cn("relative", className)}>
39 |       <Skeleton className="h-[98px] w-full rounded-lg" />
40 |       <Skeleton className="absolute bottom-2 right-2 h-8 w-8 rounded-full" />
41 |     </div>
42 |   );
43 | }
44 | 
45 | export function ChatContainerSkeleton({ className }: SkeletonProps) {
46 |   return (
47 |     <div
48 |       className={cn(
49 |         "container flex h-[calc(100vh-4rem)] max-w-3xl flex-col space-y-4 py-6",
50 |         className,
51 |       )}
52 |     >
53 |       <div className="flex-1 space-y-4 overflow-auto py-4">
54 |         <ChatMessageSkeleton />
55 |         <ChatMessageSkeleton isUser />
56 |         <ChatMessageSkeleton />
57 |       </div>
58 | 
59 |       <ChatInputSkeleton />
60 |     </div>
61 |   );
62 | }
63 | 
64 | export function NewChatSkeleton({ className }: SkeletonProps) {
65 |   return (
66 |     <div
67 |       className={cn(
68 |         "container flex h-[70vh] max-w-3xl flex-col items-center justify-center space-y-4 px-4",
69 |         className,
70 |       )}
71 |     >
72 |       <div className="w-full max-w-md space-y-2">
73 |         <Skeleton className="mx-auto h-8 w-3/4" />
74 |         <Skeleton className="h-4 w-full" />
75 |         <Skeleton className="h-4 w-5/6" />
76 |         <Skeleton className="h-4 w-4/6" />
77 |       </div>
78 |       <p className="animate-pulse text-sm text-muted-foreground">
79 |         Creating new chat...
80 |       </p>
81 |     </div>
82 |   );
83 | }
84 | 


--------------------------------------------------------------------------------
/src/components/settings/provider-settings.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/components/ui/button";
 2 | import { Input } from "@/components/ui/input";
 3 | import { Label } from "@/components/ui/label";
 4 | 
 5 | interface ProviderSettingsProps {
 6 |   baseUrl: string;
 7 |   apiKey: string;
 8 |   onBaseUrlChange: (value: string) => void;
 9 |   onApiKeyChange: (value: string) => void;
10 |   onSave: () => void;
11 |   onCancel: () => void;
12 | }
13 | 
14 | export function ProviderSettings({
15 |   baseUrl,
16 |   apiKey,
17 |   onBaseUrlChange,
18 |   onApiKeyChange,
19 |   onSave,
20 |   onCancel,
21 | }: ProviderSettingsProps) {
22 |   return (
23 |     <div className="space-y-4 py-4">
24 |       <h3 className="text-lg font-medium">LLM Provider</h3>
25 |       <p className="mb-4 text-sm text-muted-foreground">
26 |         Configure your OpenAI API settings to connect with the AI services.
27 |       </p>
28 |       <div className="grid gap-2">
29 |         <Label htmlFor="baseUrl">API Base URL</Label>
30 |         <Input
31 |           id="baseUrl"
32 |           value={baseUrl}
33 |           onChange={(e) => onBaseUrlChange(e.target.value)}
34 |           placeholder="https://api.openai.com/v1"
35 |         />
36 |         <p className="mt-1 text-xs text-muted-foreground">
37 |           Default: https://api.openai.com/v1
38 |         </p>
39 |       </div>
40 |       <div className="grid gap-2">
41 |         <Label htmlFor="apiKey">API Key</Label>
42 |         <Input
43 |           id="apiKey"
44 |           type="password"
45 |           value={apiKey}
46 |           onChange={(e) => onApiKeyChange(e.target.value)}
47 |           placeholder="Enter your OpenAI API key"
48 |         />
49 |         <p className="mt-1 text-xs text-muted-foreground">
50 |           Your API key is stored locally and never shared.
51 |         </p>
52 |         <p className="mt-1 text-xs text-muted-foreground">
53 |           You can get your API key from{" "}
54 |           <a
55 |             href="https://platform.openai.com/api-keys"
56 |             target="_blank"
57 |             rel="noopener noreferrer"
58 |             className="text-primary hover:underline"
59 |           >
60 |             OpenAI&apos;s API Keys page
61 |           </a>{" "}
62 |           after creating an account.
63 |         </p>
64 |       </div>
65 |       <div className="mt-8 flex items-center justify-end gap-4">
66 |         <Button variant="outline" onClick={onCancel}>
67 |           Cancel
68 |         </Button>
69 |         <Button onClick={onSave}>Save changes</Button>
70 |       </div>
71 |     </div>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "freenote",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@ai-sdk/openai": "^1.1.9",
13 |     "@ai-sdk/react": "^1.1.18",
14 |     "@hookform/resolvers": "^4.1.3",
15 |     "@mdxeditor/editor": "^3.21.5",
16 |     "@opentelemetry/api-logs": "^0.57.2",
17 |     "@opentelemetry/instrumentation": "^0.57.2",
18 |     "@opentelemetry/sdk-logs": "^0.57.2",
19 |     "@radix-ui/react-alert-dialog": "^1.1.6",
20 |     "@radix-ui/react-avatar": "^1.1.2",
21 |     "@radix-ui/react-collapsible": "^1.1.2",
22 |     "@radix-ui/react-context-menu": "^2.2.6",
23 |     "@radix-ui/react-dialog": "^1.1.5",
24 |     "@radix-ui/react-dropdown-menu": "^2.1.5",
25 |     "@radix-ui/react-label": "^2.1.2",
26 |     "@radix-ui/react-popover": "^1.1.5",
27 |     "@radix-ui/react-separator": "^1.1.1",
28 |     "@radix-ui/react-slot": "^1.1.1",
29 |     "@radix-ui/react-switch": "^1.1.3",
30 |     "@radix-ui/react-tooltip": "^1.1.7",
31 |     "@t3-oss/env-nextjs": "^0.12.0",
32 |     "@uidotdev/usehooks": "^2.4.1",
33 |     "@vercel/analytics": "^1.5.0",
34 |     "@vercel/otel": "^1.10.1",
35 |     "ai": "^4.1.34",
36 |     "class-variance-authority": "^0.7.1",
37 |     "clsx": "^2.1.1",
38 |     "date-fns": "^4.1.0",
39 |     "dexie": "^4.0.11",
40 |     "dexie-react-hooks": "^1.1.7",
41 |     "fast-deep-equal": "^3.1.3",
42 |     "framer-motion": "^12.4.7",
43 |     "langfuse-vercel": "^3.35.3",
44 |     "lucide-react": "^0.474.0",
45 |     "next": "15.1.6",
46 |     "next-client-cookies": "^2.0.1",
47 |     "next-themes": "^0.4.4",
48 |     "postgres": "^3.4.5",
49 |     "react": "^19.0.0",
50 |     "react-day-picker": "8.10.1",
51 |     "react-dom": "^19.0.0",
52 |     "react-hook-form": "^7.54.2",
53 |     "react-intersection-observer": "^9.15.1",
54 |     "react-markdown": "^10.0.0",
55 |     "sonner": "^2.0.1",
56 |     "tailwind-merge": "^3.0.1",
57 |     "zod": "^3.24.1"
58 |   },
59 |   "devDependencies": {
60 |     "@eslint/eslintrc": "^3",
61 |     "@tailwindcss/typography": "^0.5.16",
62 |     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
63 |     "@types/node": "^20",
64 |     "@types/react": "^19",
65 |     "@types/react-dom": "^19",
66 |     "eslint": "^9",
67 |     "eslint-config-next": "15.1.6",
68 |     "postcss": "^8",
69 |     "prettier-plugin-organize-imports": "^4.1.0",
70 |     "prettier-plugin-tailwindcss": "^0.6.11",
71 |     "tailwindcss": "^3.4.1",
72 |     "tailwindcss-animate": "^1.0.7",
73 |     "typescript": "^5"
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | export default {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   theme: {
11 |     container: {
12 |       center: true,
13 |       padding: "2rem",
14 |       screens: {
15 |         "2xl": "1400px",
16 |       },
17 |     },
18 |     extend: {
19 |       colors: {
20 |         background: "hsl(var(--background))",
21 |         foreground: "hsl(var(--foreground))",
22 |         card: {
23 |           DEFAULT: "hsl(var(--card))",
24 |           foreground: "hsl(var(--card-foreground))",
25 |         },
26 |         popover: {
27 |           DEFAULT: "hsl(var(--popover))",
28 |           foreground: "hsl(var(--popover-foreground))",
29 |         },
30 |         primary: {
31 |           DEFAULT: "hsl(var(--primary))",
32 |           foreground: "hsl(var(--primary-foreground))",
33 |         },
34 |         secondary: {
35 |           DEFAULT: "hsl(var(--secondary))",
36 |           foreground: "hsl(var(--secondary-foreground))",
37 |         },
38 |         muted: {
39 |           DEFAULT: "hsl(var(--muted))",
40 |           foreground: "hsl(var(--muted-foreground))",
41 |         },
42 |         accent: {
43 |           DEFAULT: "hsl(var(--accent))",
44 |           foreground: "hsl(var(--accent-foreground))",
45 |         },
46 |         destructive: {
47 |           DEFAULT: "hsl(var(--destructive))",
48 |           foreground: "hsl(var(--destructive-foreground))",
49 |         },
50 |         border: "hsl(var(--border))",
51 |         input: "hsl(var(--input))",
52 |         ring: "hsl(var(--ring))",
53 |         chart: {
54 |           "1": "hsl(var(--chart-1))",
55 |           "2": "hsl(var(--chart-2))",
56 |           "3": "hsl(var(--chart-3))",
57 |           "4": "hsl(var(--chart-4))",
58 |           "5": "hsl(var(--chart-5))",
59 |         },
60 |         sidebar: {
61 |           DEFAULT: "hsl(var(--sidebar-background))",
62 |           foreground: "hsl(var(--sidebar-foreground))",
63 |           primary: "hsl(var(--sidebar-primary))",
64 |           "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
65 |           accent: "hsl(var(--sidebar-accent))",
66 |           "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
67 |           border: "hsl(var(--sidebar-border))",
68 |           ring: "hsl(var(--sidebar-ring))",
69 |         },
70 |       },
71 |       borderRadius: {
72 |         lg: "var(--radius)",
73 |         md: "calc(var(--radius) - 2px)",
74 |         sm: "calc(var(--radius) - 4px)",
75 |       },
76 |       typography: {
77 |         DEFAULT: {
78 |           css: {
79 |             maxWidth: "100ch",
80 |           },
81 |         },
82 |       },
83 |     },
84 |   },
85 |   plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
86 | } satisfies Config;
87 | 


--------------------------------------------------------------------------------
/src/components/chat/markdown.tsx:
--------------------------------------------------------------------------------
  1 | /** Originally from `vercel/ai-chatbot`
  2 |  * @link https://github.com/vercel/ai-chatbot/blob/main/components/markdown.tsx
  3 |  */
  4 | 
  5 | import Link from "next/link";
  6 | import { memo } from "react";
  7 | import ReactMarkdown, { type Components } from "react-markdown";
  8 | 
  9 | const components: Partial<Components> = {
 10 |   pre: ({ children }) => <>{children}</>,
 11 |   ol: ({ children, ...props }) => {
 12 |     return (
 13 |       <ol className="ml-4 list-outside list-decimal" {...props}>
 14 |         {children}
 15 |       </ol>
 16 |     );
 17 |   },
 18 |   li: ({ children, ...props }) => {
 19 |     return (
 20 |       <li className="py-1" {...props}>
 21 |         {children}
 22 |       </li>
 23 |     );
 24 |   },
 25 |   ul: ({ children, ...props }) => {
 26 |     return (
 27 |       <ul className="ml-4 list-outside list-decimal" {...props}>
 28 |         {children}
 29 |       </ul>
 30 |     );
 31 |   },
 32 |   strong: ({ children, ...props }) => {
 33 |     return (
 34 |       <span className="font-semibold" {...props}>
 35 |         {children}
 36 |       </span>
 37 |     );
 38 |   },
 39 |   a: ({ children, href, ...props }) => {
 40 |     if (!href) return <span>{children}</span>;
 41 | 
 42 |     return (
 43 |       <Link
 44 |         href={href}
 45 |         className="text-blue-500 hover:underline"
 46 |         target={href.startsWith("http") ? "_blank" : undefined}
 47 |         rel={href.startsWith("http") ? "noreferrer" : undefined}
 48 |         {...props}
 49 |       >
 50 |         {children}
 51 |       </Link>
 52 |     );
 53 |   },
 54 |   h1: ({ children, ...props }) => {
 55 |     return (
 56 |       <h1 className="mb-2 mt-6 text-3xl font-semibold" {...props}>
 57 |         {children}
 58 |       </h1>
 59 |     );
 60 |   },
 61 |   h2: ({ children, ...props }) => {
 62 |     return (
 63 |       <h2 className="mb-2 mt-6 text-2xl font-semibold" {...props}>
 64 |         {children}
 65 |       </h2>
 66 |     );
 67 |   },
 68 |   h3: ({ children, ...props }) => {
 69 |     return (
 70 |       <h3 className="mb-2 mt-6 text-xl font-semibold" {...props}>
 71 |         {children}
 72 |       </h3>
 73 |     );
 74 |   },
 75 |   h4: ({ children, ...props }) => {
 76 |     return (
 77 |       <h4 className="mb-2 mt-6 text-lg font-semibold" {...props}>
 78 |         {children}
 79 |       </h4>
 80 |     );
 81 |   },
 82 |   h5: ({ children, ...props }) => {
 83 |     return (
 84 |       <h5 className="mb-2 mt-6 text-base font-semibold" {...props}>
 85 |         {children}
 86 |       </h5>
 87 |     );
 88 |   },
 89 |   h6: ({ children, ...props }) => {
 90 |     return (
 91 |       <h6 className="mb-2 mt-6 text-sm font-semibold" {...props}>
 92 |         {children}
 93 |       </h6>
 94 |     );
 95 |   },
 96 | };
 97 | 
 98 | const NonMemoizedMarkdown = ({ children }: { children: string }) => {
 99 |   return <ReactMarkdown components={components}>{children}</ReactMarkdown>;
100 | };
101 | 
102 | export const Markdown = memo(
103 |   NonMemoizedMarkdown,
104 |   (prevProps, nextProps) => prevProps.children === nextProps.children,
105 | );
106 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | body {
  6 |   font-family: Arial, Helvetica, sans-serif;
  7 | }
  8 | 
  9 | @layer base {
 10 |   :root {
 11 |     --background: 0 0% 100%;
 12 |     --foreground: 240 10% 3.9%;
 13 |     --card: 0 0% 100%;
 14 |     --card-foreground: 240 10% 3.9%;
 15 |     --popover: 0 0% 100%;
 16 |     --popover-foreground: 240 10% 3.9%;
 17 |     --primary: 240 5.9% 10%;
 18 |     --primary-foreground: 0 0% 98%;
 19 |     --secondary: 240 4.8% 95.9%;
 20 |     --secondary-foreground: 0 0% 40%;
 21 |     --muted: 240 4.8% 95.9%;
 22 |     --muted-foreground: 240 3.8% 46.1%;
 23 |     --accent: 240 4.8% 95.9%;
 24 |     --accent-foreground: 240 5.9% 10%;
 25 |     --destructive: 0 84.2% 60.2%;
 26 |     --destructive-foreground: 0 0% 98%;
 27 |     --border: 240 5.9% 90%;
 28 |     --input: 240 5.9% 90%;
 29 |     --ring: 240 10% 3.9%;
 30 |     --chart-1: 12 76% 61%;
 31 |     --chart-2: 173 58% 39%;
 32 |     --chart-3: 197 37% 24%;
 33 |     --chart-4: 43 74% 66%;
 34 |     --chart-5: 27 87% 67%;
 35 |     --radius: 0.5rem;
 36 |     --sidebar-background: 0 0% 98%;
 37 |     --sidebar-foreground: 240 5.3% 26.1%;
 38 |     --sidebar-primary: 240 5.9% 10%;
 39 |     --sidebar-primary-foreground: 0 0% 98%;
 40 |     --sidebar-accent: 240 4.8% 95.9%;
 41 |     --sidebar-accent-foreground: 240 5.9% 10%;
 42 |     --sidebar-border: 220 13% 91%;
 43 |     --sidebar-ring: 217.2 91.2% 59.8%;
 44 |   }
 45 |   :root[class~="dark"] {
 46 |     --background: 240 10% 3.9%;
 47 |     --foreground: 0 0% 98%;
 48 |     --card: 240 10% 3.9%;
 49 |     --card-foreground: 0 0% 98%;
 50 |     --popover: 240 10% 3.9%;
 51 |     --popover-foreground: 0 0% 98%;
 52 |     --primary: 0 0% 98%;
 53 |     --primary-foreground: 240 5.9% 10%;
 54 |     --secondary: 240 3.7% 15.9%;
 55 |     --secondary-foreground: 0 0% 98%;
 56 |     --muted: 240 3.7% 15.9%;
 57 |     --muted-foreground: 240 5% 64.9%;
 58 |     --accent: 240 3.7% 15.9%;
 59 |     --accent-foreground: 0 0% 98%;
 60 |     --destructive: 0 62.8% 30.6%;
 61 |     --destructive-foreground: 0 0% 98%;
 62 |     --border: 240 3.7% 15.9%;
 63 |     --input: 240 3.7% 15.9%;
 64 |     --ring: 240 4.9% 83.9%;
 65 |     --chart-1: 220 70% 50%;
 66 |     --chart-2: 160 60% 45%;
 67 |     --chart-3: 30 80% 55%;
 68 |     --chart-4: 280 65% 60%;
 69 |     --chart-5: 340 75% 55%;
 70 |   }
 71 |   .dark {
 72 |     --sidebar-background: 240 5.9% 10%;
 73 |     --sidebar-foreground: 240 4.8% 95.9%;
 74 |     --sidebar-primary: 224.3 76.3% 48%;
 75 |     --sidebar-primary-foreground: 0 0% 100%;
 76 |     --sidebar-accent: 240 3.7% 15.9%;
 77 |     --sidebar-accent-foreground: 240 4.8% 95.9%;
 78 |     --sidebar-border: 240 3.7% 15.9%;
 79 |     --sidebar-ring: 217.2 91.2% 59.8%;
 80 |   }
 81 | }
 82 | 
 83 | @layer base {
 84 |   * {
 85 |     @apply border-border;
 86 |   }
 87 |   body {
 88 |     @apply bg-background text-foreground;
 89 |   }
 90 | }
 91 | 
 92 | 
 93 | 
 94 | @layer base {
 95 |   * {
 96 |     @apply border-border outline-ring/50;
 97 |   }
 98 |   body {
 99 |     @apply bg-background text-foreground;
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/src/contexts/chat-store.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Chat, ChatMessage, db } from "@/lib/db";
  4 | import { generateId } from "ai";
  5 | import {
  6 |   createContext,
  7 |   ReactNode,
  8 |   useCallback,
  9 |   useContext,
 10 |   useEffect,
 11 |   useState,
 12 | } from "react";
 13 | 
 14 | export type ChatWithMessages = Chat & {
 15 |   messages: ChatMessage[];
 16 | };
 17 | 
 18 | interface ChatStore {
 19 |   chats: Chat[];
 20 |   isLoading: boolean;
 21 |   createChat: () => Promise<string>;
 22 |   updateChat: (chatId: string, update: Partial<Chat>) => Promise<void>;
 23 |   deleteChat: (chatId: string) => Promise<void>;
 24 |   getChat: (id: string) => Promise<ChatWithMessages | null>;
 25 |   insertChatMessage: (message: Omit<ChatMessage, "id">) => Promise<void>;
 26 | }
 27 | 
 28 | const ChatStoreContext = createContext<ChatStore | undefined>(undefined);
 29 | 
 30 | export function ChatStoreProvider({ children }: { children: ReactNode }) {
 31 |   const [chats, setChats] = useState<Chat[]>([]);
 32 |   const [isLoading, setIsLoading] = useState(true);
 33 | 
 34 |   const loadChats = useCallback(async () => {
 35 |     try {
 36 |       const chatList = await db.chats.orderBy("updatedAt").reverse().toArray();
 37 |       setChats(chatList);
 38 |     } catch (error) {
 39 |       console.error("Failed to load chats:", error);
 40 |     } finally {
 41 |       setIsLoading(false);
 42 |     }
 43 |   }, []);
 44 | 
 45 |   useEffect(() => {
 46 |     loadChats();
 47 |   }, [loadChats]);
 48 | 
 49 |   const createChat = useCallback(async () => {
 50 |     const id = generateId();
 51 |     await db.chats.add({
 52 |       id,
 53 |       title: "New Chat",
 54 |       createdAt: new Date(),
 55 |       updatedAt: null,
 56 |     });
 57 |     loadChats();
 58 |     return id;
 59 |   }, [loadChats]);
 60 | 
 61 |   const updateChat = useCallback(
 62 |     async (chatId: string, update: Partial<Chat>) => {
 63 |       await db.chats.update(chatId, update);
 64 |       loadChats();
 65 |     },
 66 |     [loadChats],
 67 |   );
 68 | 
 69 |   const deleteChat = useCallback(
 70 |     async (chatId: string) => {
 71 |       await db.chats.delete(chatId);
 72 |       loadChats();
 73 |     },
 74 |     [loadChats],
 75 |   );
 76 | 
 77 |   const getChat = useCallback(async (id: string) => {
 78 |     const chat = await db.chats.get(id);
 79 |     if (!chat) {
 80 |       return null;
 81 |     }
 82 |     const messages = await db.chatMessages.where("chatId").equals(id).toArray();
 83 |     return { ...chat, messages };
 84 |   }, []);
 85 | 
 86 |   const insertChatMessage = useCallback(
 87 |     async (message: Omit<ChatMessage, "id">) => {
 88 |       await db.chatMessages.add(message);
 89 |     },
 90 |     [],
 91 |   );
 92 | 
 93 |   return (
 94 |     <ChatStoreContext.Provider
 95 |       value={{
 96 |         chats,
 97 |         isLoading,
 98 |         createChat,
 99 |         updateChat,
100 |         deleteChat,
101 |         getChat,
102 |         insertChatMessage,
103 |       }}
104 |     >
105 |       {children}
106 |     </ChatStoreContext.Provider>
107 |   );
108 | }
109 | 
110 | export function useChatStore() {
111 |   const context = useContext(ChatStoreContext);
112 |   if (context === undefined) {
113 |     throw new Error("useChatStore must be used within a ChatStoreProvider");
114 |   }
115 |   return context;
116 | }
117 | 


--------------------------------------------------------------------------------
/src/app/chat/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { NewChatSkeleton } from "@/components/chat/skeletons";
 4 | import { Button } from "@/components/ui/button";
 5 | import { useChatStore } from "@/contexts/chat-store";
 6 | import { SETTINGS } from "@/lib/settings";
 7 | import { useCookies } from "next-client-cookies";
 8 | import { useRouter } from "next/navigation";
 9 | import { useCallback, useEffect, useState } from "react";
10 | 
11 | // Custom event name for settings updates
12 | const SETTINGS_UPDATED_EVENT = "settings-updated";
13 | 
14 | export default function Page() {
15 |   const router = useRouter();
16 |   const { createChat } = useChatStore();
17 |   const cookies = useCookies();
18 |   const [isConfigured, setIsConfigured] = useState<boolean | null>(null);
19 | 
20 |   // Check if API is configured
21 |   const checkApiConfiguration = useCallback(() => {
22 |     const baseUrl = cookies.get(SETTINGS.ai.provider.baseUrl);
23 |     const apiKey = cookies.get(SETTINGS.ai.provider.apiKey);
24 |     return !!baseUrl && !!apiKey;
25 |   }, [cookies]);
26 | 
27 |   // Create chat and navigate
28 |   const createAndNavigate = useCallback(async () => {
29 |     const id = await createChat();
30 |     router.push(`/chat/${id}`);
31 |   }, [createChat, router]);
32 | 
33 |   // Handle settings change
34 |   const handleSettingsChange = useCallback(() => {
35 |     const newConfigured = checkApiConfiguration();
36 |     if (newConfigured && !isConfigured) {
37 |       setIsConfigured(true);
38 |       createAndNavigate();
39 |     }
40 |   }, [checkApiConfiguration, createAndNavigate, isConfigured]);
41 | 
42 |   useEffect(() => {
43 |     // Initial check
44 |     const configured = checkApiConfiguration();
45 |     setIsConfigured(configured);
46 | 
47 |     if (configured) {
48 |       createAndNavigate();
49 |       return;
50 |     }
51 | 
52 |     // Listen for storage events
53 |     window.addEventListener("storage", handleSettingsChange);
54 |     // Listen for our custom event
55 |     window.addEventListener(SETTINGS_UPDATED_EVENT, handleSettingsChange);
56 | 
57 |     return () => {
58 |       window.removeEventListener("storage", handleSettingsChange);
59 |       window.removeEventListener(SETTINGS_UPDATED_EVENT, handleSettingsChange);
60 |     };
61 |   }, [checkApiConfiguration, createAndNavigate, handleSettingsChange]);
62 | 
63 |   const handleOpenSettings = () => {
64 |     // Navigate to settings and pass a query parameter to indicate return to chat
65 |     router.push("/settings?returnTo=chat");
66 |   };
67 | 
68 |   // Show loading state
69 |   if (isConfigured === null) {
70 |     return <NewChatSkeleton />;
71 |   }
72 | 
73 |   // If not configured, show configuration prompt
74 |   if (!isConfigured) {
75 |     return (
76 |       <div className="flex h-full flex-col items-center justify-center p-6">
77 |         <div className="max-w-md space-y-4 text-center">
78 |           <h2 className="text-2xl font-bold">API Configuration Required</h2>
79 |           <p className="text-muted-foreground">
80 |             Please configure your API settings before using AI-related features.
81 |             You need to set up your API key to create and use chat
82 |             functionality.
83 |           </p>
84 |           <Button onClick={handleOpenSettings} className="mt-4">
85 |             Open Settings
86 |           </Button>
87 |         </div>
88 |       </div>
89 |     );
90 |   }
91 | 
92 |   return <NewChatSkeleton />;
93 | }
94 | 


--------------------------------------------------------------------------------
/src/components/chat/message.tsx:
--------------------------------------------------------------------------------
 1 | /** Originally from `vercel/ai-chatbot`
 2 |  * @link https://github.com/vercel/ai-chatbot/blob/main/components/message.tsx
 3 |  */
 4 | 
 5 | "use client";
 6 | 
 7 | import { Markdown } from "@/components/chat/markdown";
 8 | import { Icons } from "@/components/icons";
 9 | import { cn } from "@/lib/utils";
10 | import type { Message } from "ai";
11 | import equal from "fast-deep-equal";
12 | import { AnimatePresence, motion } from "framer-motion";
13 | import { memo } from "react";
14 | 
15 | export function PurePreviewMessage({ message }: { message: Message }) {
16 |   return (
17 |     <AnimatePresence>
18 |       <motion.div
19 |         className="group/message mx-auto w-full max-w-3xl px-0.5"
20 |         initial={{ y: 5, opacity: 0 }}
21 |         animate={{ y: 0, opacity: 1 }}
22 |         data-role={message.role}
23 |       >
24 |         <div className="flex w-full gap-4 group-data-[role=user]/message:ml-auto group-data-[role=user]/message:w-fit group-data-[role=user]/message:max-w-2xl">
25 |           {message.role === "assistant" && (
26 |             <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-background ring-1 ring-border">
27 |               <div className="translate-y-px">
28 |                 <Icons.sparkles size={14} />
29 |               </div>
30 |             </div>
31 |           )}
32 |           <div
33 |             className={cn("flex flex-col gap-4", {
34 |               "rounded-xl bg-primary px-3 py-2 text-primary-foreground":
35 |                 message.role === "user",
36 |             })}
37 |           >
38 |             {message.content.length > 0 ? (
39 |               <Markdown>{message.content as string}</Markdown>
40 |             ) : (
41 |               <span className="font-light italic">
42 |                 {"calling tool: " + message?.toolInvocations?.[0].toolName}
43 |               </span>
44 |             )}
45 |           </div>
46 |         </div>
47 |       </motion.div>
48 |     </AnimatePresence>
49 |   );
50 | }
51 | 
52 | export const PreviewMessage = memo(
53 |   PurePreviewMessage,
54 |   (prevProps, nextProps) => {
55 |     if (prevProps.message.content !== nextProps.message.content) return false;
56 |     if (
57 |       !equal(
58 |         prevProps.message.toolInvocations,
59 |         nextProps.message.toolInvocations,
60 |       )
61 |     )
62 |       return false;
63 |     return true;
64 |   },
65 | );
66 | 
67 | export const ThinkingMessage = () => {
68 |   const role = "assistant";
69 | 
70 |   return (
71 |     <motion.div
72 |       className="group/message mx-auto w-full max-w-3xl px-4"
73 |       initial={{ y: 5, opacity: 0 }}
74 |       animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
75 |       data-role={role}
76 |     >
77 |       <div
78 |         className={cn(
79 |           "flex w-full gap-4 rounded-xl group-data-[role=user]/message:ml-auto group-data-[role=user]/message:w-fit group-data-[role=user]/message:max-w-2xl group-data-[role=user]/message:px-3 group-data-[role=user]/message:py-2",
80 |           {
81 |             "group-data-[role=user]/message:bg-muted": true,
82 |           },
83 |         )}
84 |       >
85 |         <div className="flex size-8 shrink-0 items-center justify-center rounded-full ring-1 ring-border">
86 |           <Icons.sparkles size={14} />
87 |         </div>
88 | 
89 |         <div className="flex w-full flex-col gap-2">
90 |           <div className="flex flex-col gap-4 text-muted-foreground">
91 |             Thinking...
92 |           </div>
93 |         </div>
94 |       </div>
95 |     </motion.div>
96 |   );
97 | };
98 | 


--------------------------------------------------------------------------------
/src/app/chat/[id]/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { ChatContainer } from "@/components/chat/chat-container";
  4 | import { ChatContainerSkeleton } from "@/components/chat/skeletons";
  5 | import {
  6 |   AlertDialog,
  7 |   AlertDialogAction,
  8 |   AlertDialogCancel,
  9 |   AlertDialogContent,
 10 |   AlertDialogDescription,
 11 |   AlertDialogFooter,
 12 |   AlertDialogHeader,
 13 |   AlertDialogTitle,
 14 |   AlertDialogTrigger,
 15 | } from "@/components/ui/alert-dialog";
 16 | import {
 17 |   ContextMenu,
 18 |   ContextMenuContent,
 19 |   ContextMenuItem,
 20 |   ContextMenuTrigger,
 21 | } from "@/components/ui/context-menu";
 22 | import { ChatWithMessages, useChatStore } from "@/contexts/chat-store";
 23 | import { useRouter } from "next/navigation";
 24 | import { use, useEffect, useState } from "react";
 25 | 
 26 | export default function Page({ params }: { params: Promise<{ id: string }> }) {
 27 |   const { id } = use(params);
 28 |   const [chat, setChat] = useState<ChatWithMessages | null>(null);
 29 |   const [loading, setLoading] = useState(true);
 30 |   const [notFound, setNotFound] = useState(false);
 31 |   const { getChat, deleteChat } = useChatStore();
 32 |   const router = useRouter();
 33 | 
 34 |   useEffect(() => {
 35 |     async function fetchChat() {
 36 |       setLoading(true);
 37 |       setNotFound(false);
 38 | 
 39 |       const chat = await getChat(id);
 40 | 
 41 |       if (!chat) {
 42 |         setNotFound(true);
 43 |       } else {
 44 |         setChat(chat);
 45 |       }
 46 | 
 47 |       setLoading(false);
 48 |     }
 49 | 
 50 |     fetchChat();
 51 |   }, [id, getChat]);
 52 | 
 53 |   const handleDelete = async () => {
 54 |     await deleteChat(id);
 55 |     router.push("/");
 56 |   };
 57 | 
 58 |   if (notFound) {
 59 |     return (
 60 |       <div className="container flex h-[calc(100vh-4rem)] max-w-3xl flex-col items-center justify-center">
 61 |         <div className="text-center">
 62 |           <h2 className="text-2xl font-bold">Chat not found</h2>
 63 |           <p className="mt-2 text-muted-foreground">
 64 |             The chat you&apos;re looking for doesn&apos;t exist or has been
 65 |             deleted.
 66 |           </p>
 67 |         </div>
 68 |       </div>
 69 |     );
 70 |   }
 71 | 
 72 |   if (loading) {
 73 |     return <ChatContainerSkeleton />;
 74 |   }
 75 | 
 76 |   return (
 77 |     <div className="relative">
 78 |       <AlertDialog>
 79 |         <ContextMenu>
 80 |           <ContextMenuTrigger className="flex h-full w-full">
 81 |             <ChatContainer chat={chat!} />
 82 |           </ContextMenuTrigger>
 83 |           <ContextMenuContent>
 84 |             <ContextMenuItem>
 85 |               <AlertDialogTrigger className="w-full text-left text-destructive">
 86 |                 Delete Chat
 87 |               </AlertDialogTrigger>
 88 |             </ContextMenuItem>
 89 |           </ContextMenuContent>
 90 |         </ContextMenu>
 91 |         <AlertDialogContent>
 92 |           <AlertDialogHeader>
 93 |             <AlertDialogTitle>Are you sure?</AlertDialogTitle>
 94 |             <AlertDialogDescription>
 95 |               This action cannot be undone. This will permanently delete this
 96 |               chat and all its messages.
 97 |             </AlertDialogDescription>
 98 |           </AlertDialogHeader>
 99 |           <AlertDialogFooter>
100 |             <AlertDialogCancel>Cancel</AlertDialogCancel>
101 |             <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
102 |           </AlertDialogFooter>
103 |         </AlertDialogContent>
104 |       </AlertDialog>
105 |     </div>
106 |   );
107 | }
108 | 


--------------------------------------------------------------------------------
/src/app/(journal)/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useJournalUpdates } from "@/app/(journal)/use-journal-updates";
  4 | import { useJournals } from "@/app/(journal)/use-journals";
  5 | import Editor from "@/components/editor";
  6 | import { Icons } from "@/components/icons";
  7 | import { useEffect, useState } from "react";
  8 | import { useInView } from "react-intersection-observer";
  9 | 
 10 | function LoadingSpinner({ className }: { className?: string }) {
 11 |   return (
 12 |     <div className="flex justify-center py-6 text-secondary-foreground">
 13 |       <Icons.loader className={`h-7 w-7 animate-spin ${className ?? ""}`} />
 14 |     </div>
 15 |   );
 16 | }
 17 | 
 18 | export default function Page() {
 19 |   const {
 20 |     journals,
 21 |     totalCount,
 22 |     isLoading,
 23 |     error,
 24 |     loadInitialData,
 25 |     loadMoreJournals,
 26 |   } = useJournals();
 27 |   const { handleContentChange } = useJournalUpdates();
 28 |   const { ref, inView } = useInView();
 29 |   const [showScrollTop, setShowScrollTop] = useState(false);
 30 | 
 31 |   useEffect(() => {
 32 |     loadInitialData();
 33 |   }, [loadInitialData]);
 34 | 
 35 |   useEffect(() => {
 36 |     if (inView) {
 37 |       loadMoreJournals();
 38 |     }
 39 |   }, [inView, loadMoreJournals]);
 40 | 
 41 |   useEffect(() => {
 42 |     const handleScroll = () => {
 43 |       setShowScrollTop(window.scrollY > 500);
 44 |     };
 45 | 
 46 |     window.addEventListener("scroll", handleScroll);
 47 |     return () => window.removeEventListener("scroll", handleScroll);
 48 |   }, []);
 49 | 
 50 |   if (isLoading.initial) {
 51 |     return (
 52 |       <div className="flex h-[calc(100vh-64px)] items-center justify-center">
 53 |         <LoadingSpinner />
 54 |       </div>
 55 |     );
 56 |   }
 57 | 
 58 |   if (error) {
 59 |     return (
 60 |       <div className="flex h-[calc(100vh-64px)] items-center justify-center text-red-500">
 61 |         {error}
 62 |       </div>
 63 |     );
 64 |   }
 65 | 
 66 |   return (
 67 |     <div className="flex flex-col divide-y">
 68 |       {journals.map((journal, index) => (
 69 |         <div
 70 |           key={journal.id}
 71 |           className={`flex flex-col px-4 pb-6 ${
 72 |             index === 0 ? "min-h-[calc(100vh-128px)]" : "min-h-72"
 73 |           }`}
 74 |         >
 75 |           <div className="flex h-16 items-center justify-between">
 76 |             <h2 className="text-xl font-semibold">{journal.title}</h2>
 77 |           </div>
 78 |           <Editor
 79 |             markdown={journal.content ?? ""}
 80 |             placeholder="Start typing..."
 81 |             onValueChange={(value) => handleContentChange(journal.id, value)}
 82 |             contentEditableClassName={
 83 |               index === 0 ? "min-h-[calc(100vh-208px)]" : "min-h-56"
 84 |             }
 85 |           />
 86 |         </div>
 87 |       ))}
 88 | 
 89 |       <div ref={ref} className="h-10 w-full">
 90 |         {isLoading.more && <LoadingSpinner />}
 91 |         {journals.length >= totalCount && journals.length > 0 && (
 92 |           <div className="flex justify-center py-6 text-secondary-foreground">
 93 |             No more journals.
 94 |           </div>
 95 |         )}
 96 |       </div>
 97 | 
 98 |       {showScrollTop && (
 99 |         <button
100 |           onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
101 |           className="fixed bottom-6 right-6 flex h-9 w-9 items-center justify-center rounded-full bg-foreground text-background"
102 |         >
103 |           <Icons.arrowUp size={18} />
104 |         </button>
105 |       )}
106 |     </div>
107 |   );
108 | }
109 | 


--------------------------------------------------------------------------------
/src/components/chat/chat-input.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Icons } from "@/components/icons";
  4 | import { Button } from "@/components/ui/button";
  5 | import { Textarea } from "@/components/ui/textarea";
  6 | import { cn } from "@/lib/utils";
  7 | import * as React from "react";
  8 | import { useEffect, useRef } from "react";
  9 | 
 10 | interface ChatInputProps {
 11 |   className?: string;
 12 |   input: string;
 13 |   disabled?: boolean;
 14 |   handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
 15 |   handleSubmit: () => void;
 16 |   onStop?: () => void;
 17 | }
 18 | 
 19 | export function ChatInput({
 20 |   className,
 21 |   input,
 22 |   disabled,
 23 |   handleInputChange,
 24 |   handleSubmit,
 25 |   onStop,
 26 | }: ChatInputProps) {
 27 |   const textareaRef = useRef<HTMLTextAreaElement>(null);
 28 |   const isComposing = useRef(false);
 29 | 
 30 |   const adjustHeight = () => {
 31 |     if (textareaRef.current) {
 32 |       textareaRef.current.style.height = "auto";
 33 |       textareaRef.current.style.height = `${textareaRef.current.scrollHeight + 2}px`;
 34 |     }
 35 |   };
 36 | 
 37 |   const resetHeight = () => {
 38 |     if (textareaRef.current) {
 39 |       textareaRef.current.style.height = "auto";
 40 |       textareaRef.current.style.height = "98px";
 41 |     }
 42 |   };
 43 | 
 44 |   useEffect(() => {
 45 |     if (textareaRef.current) {
 46 |       adjustHeight();
 47 |     }
 48 |   }, []);
 49 | 
 50 |   const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
 51 |     handleInputChange(event);
 52 |     adjustHeight();
 53 |   };
 54 | 
 55 |   const submitForm = (e?: React.FormEvent) => {
 56 |     e?.preventDefault();
 57 |     if (!input.trim() || disabled) return;
 58 |     handleSubmit();
 59 |     resetHeight();
 60 |     textareaRef.current?.focus();
 61 |   };
 62 | 
 63 |   return (
 64 |     <form onSubmit={submitForm} className="relative flex w-full flex-col gap-4">
 65 |       <Textarea
 66 |         ref={textareaRef}
 67 |         placeholder="Send a message..."
 68 |         value={input}
 69 |         onChange={handleInput}
 70 |         className={cn(
 71 |           "max-h-[calc(75dvh)] min-h-[24px] resize-none overflow-hidden rounded-2xl bg-muted pb-10 !text-base",
 72 |           className,
 73 |         )}
 74 |         rows={2}
 75 |         autoFocus
 76 |         disabled={disabled}
 77 |         onCompositionStart={() => {
 78 |           isComposing.current = true;
 79 |         }}
 80 |         onCompositionEnd={() => {
 81 |           isComposing.current = false;
 82 |         }}
 83 |         onKeyDown={(event) => {
 84 |           if (event.key === "Enter" && !event.shiftKey) {
 85 |             if (isComposing.current || disabled) {
 86 |               return;
 87 |             }
 88 |             event.preventDefault();
 89 |             submitForm();
 90 |           }
 91 |         }}
 92 |       />
 93 | 
 94 |       <div className="absolute bottom-0 right-0 flex w-fit flex-row justify-end p-2">
 95 |         {onStop ? (
 96 |           <Button
 97 |             type="button"
 98 |             size="icon"
 99 |             variant="ghost"
100 |             className="h-8 w-8 hover:bg-accent/50"
101 |             onClick={onStop}
102 |           >
103 |             <Icons.stopCircle className="scale-150" />
104 |             <span className="sr-only">Stop generating</span>
105 |           </Button>
106 |         ) : (
107 |           <Button
108 |             type="submit"
109 |             size="icon"
110 |             variant="ghost"
111 |             className="h-8 w-8 hover:bg-accent/50"
112 |             disabled={disabled || !input.trim()}
113 |           >
114 |             <Icons.circleArrowUp className="scale-150" />
115 |             <span className="sr-only">Send message</span>
116 |           </Button>
117 |         )}
118 |       </div>
119 |     </form>
120 |   );
121 | }
122 | 


--------------------------------------------------------------------------------
/src/app/knowledge/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { KnowledgeDialog } from "@/app/knowledge/knowledge-dialog";
  4 | import { Input } from "@/components/ui/input";
  5 | import { generateEmbeddings } from "@/lib/ai/embedding";
  6 | import { db, Note, NoteType } from "@/lib/db";
  7 | import { SETTINGS } from "@/lib/settings";
  8 | import { Clock, Search } from "lucide-react";
  9 | import { useCookies } from "next-client-cookies";
 10 | import Link from "next/link";
 11 | import { useEffect, useState } from "react";
 12 | 
 13 | export default function KnowledgePage() {
 14 |   const [items, setItems] = useState<Note[]>([]);
 15 |   const [searchQuery, setSearchQuery] = useState("");
 16 |   const cookies = useCookies();
 17 |   const [autoUpdate] = useState(
 18 |     cookies.get(SETTINGS.ai.embeddings.autoUpdate) !== "false" &&
 19 |       cookies.get(SETTINGS.ai.provider.apiKey) !== undefined,
 20 |   );
 21 | 
 22 |   useEffect(() => {
 23 |     loadItems();
 24 |   }, []);
 25 | 
 26 |   const loadItems = async () => {
 27 |     try {
 28 |       const result = await db.notes
 29 |         .where("type")
 30 |         .equals(NoteType.Knowledge)
 31 |         .reverse()
 32 |         .toArray();
 33 |       setItems(result);
 34 |     } catch (error) {
 35 |       console.error("Failed to load items:", error);
 36 |     }
 37 |   };
 38 | 
 39 |   const handleSearch = async (query: string) => {
 40 |     setSearchQuery(query);
 41 |     if (query.trim()) {
 42 |       const results = await db.notes
 43 |         .where("type")
 44 |         .equals(NoteType.Knowledge)
 45 |         .filter(
 46 |           (item) =>
 47 |             item.title.toLowerCase().includes(query.toLowerCase()) ||
 48 |             item.content.toLowerCase().includes(query.toLowerCase()),
 49 |         )
 50 |         .toArray();
 51 |       setItems(results);
 52 |     } else {
 53 |       loadItems();
 54 |     }
 55 |   };
 56 | 
 57 |   const handleCreate = async (
 58 |     data: Omit<Note, "id" | "createdAt" | "updatedAt" | "embeddingUpdatedAt">,
 59 |   ) => {
 60 |     const now = new Date();
 61 |     const noteId = await db.notes.add({
 62 |       ...data,
 63 |       type: NoteType.Knowledge,
 64 |       createdAt: now,
 65 |       updatedAt: null,
 66 |       embeddingUpdatedAt: null,
 67 |     });
 68 |     if (autoUpdate) {
 69 |       db.embeddings.where("noteId").equals(Number(noteId)).delete();
 70 |       const embedding = await generateEmbeddings(data.content, data.title);
 71 |       await db.embeddings.bulkAdd(
 72 |         embedding.map((embedding) => ({
 73 |           noteId: Number(noteId),
 74 |           content: embedding.content,
 75 |           embedding: embedding.embedding,
 76 |         })),
 77 |       );
 78 |     }
 79 |     loadItems();
 80 |   };
 81 | 
 82 |   return (
 83 |     <div className="container mx-auto space-y-4 px-4 py-6">
 84 |       <div className="flex gap-4">
 85 |         <div className="relative flex-1">
 86 |           <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
 87 |           <Input
 88 |             placeholder="Search knowledge base..."
 89 |             className="pl-9"
 90 |             value={searchQuery}
 91 |             onChange={(e) => handleSearch(e.target.value)}
 92 |           />
 93 |         </div>
 94 |         <KnowledgeDialog onSubmit={handleCreate} />
 95 |       </div>
 96 | 
 97 |       <div className="grid gap-4">
 98 |         {items.map((item) => (
 99 |           <Link
100 |             key={item.id}
101 |             href={`/notes/${item.id}`}
102 |             className="cursor-pointer rounded-lg border px-4 py-2 transition-colors hover:bg-accent/50"
103 |           >
104 |             <div className="flex items-center justify-between">
105 |               <h2 className="font-medium">{item.title}</h2>
106 |               <div className="flex items-center text-sm text-muted-foreground">
107 |                 <Clock className="mr-1 h-4 w-4" />
108 |                 {new Date(item.createdAt).toLocaleDateString()}
109 |               </div>
110 |             </div>
111 |           </Link>
112 |         ))}
113 |       </div>
114 |     </div>
115 |   );
116 | }
117 | 


--------------------------------------------------------------------------------
/src/app/(journal)/use-journals.tsx:
--------------------------------------------------------------------------------
  1 | import { db, Note, NoteType } from "@/lib/db";
  2 | import { useCallback, useState } from "react";
  3 | 
  4 | function createJournalEntry(date: Date): Omit<Note, "id"> {
  5 |   return {
  6 |     type: NoteType.Journal,
  7 |     title: date.toLocaleDateString(),
  8 |     content: "",
  9 |     createdAt: date,
 10 |     updatedAt: null,
 11 |     embeddingUpdatedAt: null,
 12 |   };
 13 | }
 14 | 
 15 | async function createEmptyJournal(date: Date) {
 16 |   return db.notes.add(createJournalEntry(date));
 17 | }
 18 | 
 19 | async function createMissingJournals(fromDate: Date, toDate: Date) {
 20 |   const existingJournals = await db.notes
 21 |     .where("type")
 22 |     .equals(NoteType.Journal)
 23 |     .filter((note) => note.createdAt >= fromDate && note.createdAt <= toDate)
 24 |     .toArray();
 25 | 
 26 |   const existingDates = new Set(
 27 |     existingJournals.map((j) => j.createdAt.toDateString()),
 28 |   );
 29 | 
 30 |   const journalsToCreate = [];
 31 |   for (let d = new Date(fromDate); d <= toDate; d.setDate(d.getDate() + 1)) {
 32 |     if (!existingDates.has(d.toDateString())) {
 33 |       journalsToCreate.push(createJournalEntry(new Date(d)));
 34 |     }
 35 |   }
 36 | 
 37 |   if (journalsToCreate.length > 0) {
 38 |     await db.notes.bulkAdd(journalsToCreate);
 39 |   }
 40 | }
 41 | 
 42 | export function useJournals() {
 43 |   const [journals, setJournals] = useState<Note[]>([]);
 44 |   const [totalCount, setTotalCount] = useState(0);
 45 |   const [page, setPage] = useState(0);
 46 |   const [isLoading, setIsLoading] = useState({
 47 |     initial: true,
 48 |     more: false,
 49 |   });
 50 |   const [error, setError] = useState<string | null>(null);
 51 | 
 52 |   const ensureJournalExists = async () => {
 53 |     const today = new Date();
 54 |     today.setHours(0, 0, 0, 0);
 55 | 
 56 |     const latestJournal = await db.notes
 57 |       .where("type")
 58 |       .equals(NoteType.Journal)
 59 |       .reverse()
 60 |       .first();
 61 | 
 62 |     if (!latestJournal) {
 63 |       await createEmptyJournal(today);
 64 |       return;
 65 |     }
 66 | 
 67 |     const latestDate = new Date(latestJournal.createdAt);
 68 |     latestDate.setHours(0, 0, 0, 0);
 69 | 
 70 |     if (latestDate < today) {
 71 |       await createMissingJournals(latestDate, today);
 72 |     }
 73 |   };
 74 | 
 75 |   const loadInitialData = useCallback(async () => {
 76 |     try {
 77 |       setIsLoading((prev) => ({ ...prev, initial: true }));
 78 |       await ensureJournalExists();
 79 | 
 80 |       const [journalData, count] = await Promise.all([
 81 |         db.notes
 82 |           .where("type")
 83 |           .equals(NoteType.Journal)
 84 |           .reverse()
 85 |           .offset(0)
 86 |           .limit(10)
 87 |           .toArray(),
 88 |         db.notes.where("type").equals(NoteType.Journal).count(),
 89 |       ]);
 90 | 
 91 |       setJournals(journalData);
 92 |       setTotalCount(count);
 93 |       setPage(1);
 94 |     } catch (err) {
 95 |       setError(err instanceof Error ? err.message : "Failed to load journals.");
 96 |     } finally {
 97 |       setIsLoading((prev) => ({ ...prev, initial: false }));
 98 |     }
 99 |   }, []);
100 | 
101 |   const loadMoreJournals = useCallback(async () => {
102 |     if (isLoading.more || journals.length >= totalCount) return;
103 | 
104 |     try {
105 |       setIsLoading((prev) => ({ ...prev, more: true }));
106 |       const newJournals = await db.notes
107 |         .where("type")
108 |         .equals(NoteType.Journal)
109 |         .reverse()
110 |         .offset(page * 10)
111 |         .limit(10)
112 |         .toArray();
113 | 
114 |       setJournals((prev) => [...prev, ...newJournals]);
115 |       setPage((p) => p + 1);
116 |     } catch (err) {
117 |       setError(
118 |         err instanceof Error ? err.message : "Failed to load more journals",
119 |       );
120 |     } finally {
121 |       setIsLoading((prev) => ({ ...prev, more: false }));
122 |     }
123 |   }, [isLoading.more, journals.length, totalCount, page]);
124 | 
125 |   return {
126 |     journals,
127 |     totalCount,
128 |     isLoading,
129 |     error,
130 |     loadInitialData,
131 |     loadMoreJournals,
132 |   };
133 | }
134 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogTrigger,
116 |   DialogClose,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/src/app/knowledge/knowledge-dialog.tsx:
--------------------------------------------------------------------------------
  1 | import Editor from "@/components/editor";
  2 | import { FormButton } from "@/components/form-button";
  3 | import { Button } from "@/components/ui/button";
  4 | import {
  5 |   Dialog,
  6 |   DialogContent,
  7 |   DialogDescription,
  8 |   DialogHeader,
  9 |   DialogTitle,
 10 |   DialogTrigger,
 11 | } from "@/components/ui/dialog";
 12 | import {
 13 |   Form,
 14 |   FormControl,
 15 |   FormField,
 16 |   FormItem,
 17 |   FormLabel,
 18 |   FormMessage,
 19 | } from "@/components/ui/form";
 20 | import { Input } from "@/components/ui/input";
 21 | import { Note, NoteType } from "@/lib/db";
 22 | import { cn } from "@/lib/utils";
 23 | import { zodResolver } from "@hookform/resolvers/zod";
 24 | import { Plus } from "lucide-react";
 25 | import { useState } from "react";
 26 | import { useForm } from "react-hook-form";
 27 | import * as z from "zod";
 28 | 
 29 | const formSchema = z.object({
 30 |   title: z.string().min(1, "Title is required"),
 31 |   content: z.string(),
 32 |   type: z.nativeEnum(NoteType),
 33 | });
 34 | 
 35 | type FormData = z.infer<typeof formSchema>;
 36 | 
 37 | interface KnowledgeDialogProps {
 38 |   onSubmit: (
 39 |     data: Omit<Note, "id" | "createdAt" | "updatedAt" | "embeddingUpdatedAt">,
 40 |   ) => Promise<void>;
 41 |   trigger?: React.ReactNode;
 42 |   className?: string;
 43 | }
 44 | 
 45 | export function KnowledgeDialog({
 46 |   onSubmit,
 47 |   trigger,
 48 |   className,
 49 | }: KnowledgeDialogProps) {
 50 |   const [open, setOpen] = useState(false);
 51 |   const form = useForm<FormData>({
 52 |     resolver: zodResolver(formSchema),
 53 |     defaultValues: {
 54 |       title: "",
 55 |       content: "",
 56 |       type: NoteType.Knowledge,
 57 |     },
 58 |   });
 59 | 
 60 |   const handleSubmit = async (data: FormData) => {
 61 |     await onSubmit(data);
 62 |     setOpen(false);
 63 |     form.reset();
 64 |   };
 65 | 
 66 |   return (
 67 |     <Dialog open={open} onOpenChange={setOpen}>
 68 |       <DialogTrigger asChild>
 69 |         {trigger || (
 70 |           <Button
 71 |             variant="outline"
 72 |             className={cn(
 73 |               "gap-2 px-4 py-2 text-sm font-medium transition-all hover:bg-muted",
 74 |               className,
 75 |             )}
 76 |           >
 77 |             <Plus className="h-4 w-4" />
 78 |             <span>New Entry</span>
 79 |           </Button>
 80 |         )}
 81 |       </DialogTrigger>
 82 |       <DialogContent className="max-w-2xl gap-4 p-6">
 83 |         <DialogHeader className="space-y-1">
 84 |           <DialogTitle className="text-xl font-semibold">
 85 |             New Knowledge Entry
 86 |           </DialogTitle>
 87 |           <DialogDescription className="text-sm text-muted-foreground">
 88 |             Create a new entry in your knowledge base. Use markdown for rich
 89 |             text formatting.
 90 |           </DialogDescription>
 91 |         </DialogHeader>
 92 |         <Form {...form}>
 93 |           <form
 94 |             onSubmit={form.handleSubmit(handleSubmit)}
 95 |             className="mt-4 space-y-4"
 96 |           >
 97 |             <FormField
 98 |               control={form.control}
 99 |               name="title"
100 |               render={({ field }) => (
101 |                 <FormItem>
102 |                   <FormLabel>Title</FormLabel>
103 |                   <FormControl>
104 |                     <Input
105 |                       placeholder="Enter a descriptive title..."
106 |                       {...field}
107 |                     />
108 |                   </FormControl>
109 |                   <FormMessage />
110 |                 </FormItem>
111 |               )}
112 |             />
113 |             <FormField
114 |               control={form.control}
115 |               name="content"
116 |               render={({ field }) => (
117 |                 <FormItem>
118 |                   <FormLabel>Content</FormLabel>
119 |                   <FormControl>
120 |                     <Editor
121 |                       markdown={field.value}
122 |                       onValueChange={field.onChange}
123 |                       className="min-h-[400px] rounded-md border px-3 py-1"
124 |                       contentEditableClassName="min-h-[400px]"
125 |                     />
126 |                   </FormControl>
127 |                   <FormMessage />
128 |                 </FormItem>
129 |               )}
130 |             />
131 |             <FormButton type="submit" className="w-full">
132 |               Create Entry
133 |             </FormButton>
134 |           </form>
135 |         </Form>
136 |       </DialogContent>
137 |     </Dialog>
138 |   );
139 | }
140 | 


--------------------------------------------------------------------------------
/src/lib/ai/embedding.ts:
--------------------------------------------------------------------------------
  1 | "use server";
  2 | 
  3 | import { getProvider } from "@/lib/ai/provder";
  4 | import { embed, embedMany } from "ai";
  5 | 
  6 | // Optimized Markdown chunking function
  7 | const generateChunks = (input: string): string[] => {
  8 |   // Return empty array if input is empty
  9 |   if (!input || input.trim() === "") {
 10 |     return [];
 11 |   }
 12 | 
 13 |   const trimmedInput = input.trim();
 14 | 
 15 |   // Regex to identify Markdown headers
 16 |   const headerRegex = /^(#{1,6})\s+(.+)$/gm;
 17 | 
 18 |   // Regex to identify code blocks
 19 |   const codeBlockRegex = /```[\s\S]*?```/g;
 20 | 
 21 |   // Store all code blocks
 22 |   const codeBlocks: string[] = [];
 23 |   let codeBlockCounter = 0;
 24 | 
 25 |   // Replace code blocks with placeholders for processing
 26 |   const withoutCodeBlocks = trimmedInput.replace(codeBlockRegex, (match) => {
 27 |     codeBlocks.push(match);
 28 |     return `__CODE_BLOCK_${codeBlockCounter++}__`;
 29 |   });
 30 | 
 31 |   // Split text by headers
 32 |   const sections: string[] = [];
 33 |   let currentSection = "";
 34 |   let lastIndex = 0;
 35 | 
 36 |   // Find all headers
 37 |   const matches = [...withoutCodeBlocks.matchAll(headerRegex)];
 38 | 
 39 |   if (matches.length === 0) {
 40 |     // If no headers found, split by paragraphs
 41 |     return withoutCodeBlocks
 42 |       .split("\n\n")
 43 |       .filter((chunk) => chunk.trim() !== "")
 44 |       .map((chunk) => {
 45 |         // Restore code blocks
 46 |         return chunk.replace(/__CODE_BLOCK_(\d+)__/g, (_, index) => {
 47 |           return codeBlocks[parseInt(index, 10)];
 48 |         });
 49 |       });
 50 |   }
 51 | 
 52 |   // Split by headers
 53 |   matches.forEach((match, index) => {
 54 |     const [fullMatch] = match;
 55 |     const matchIndex = match.index as number;
 56 | 
 57 |     // If not the first header, add content between previous and current header as a chunk
 58 |     if (index > 0) {
 59 |       const sectionContent = withoutCodeBlocks
 60 |         .substring(lastIndex, matchIndex)
 61 |         .trim();
 62 |       if (sectionContent) {
 63 |         currentSection += sectionContent;
 64 |         sections.push(currentSection);
 65 |       }
 66 |     }
 67 | 
 68 |     // Update current section and lastIndex
 69 |     currentSection = fullMatch + "\n";
 70 |     lastIndex = matchIndex + fullMatch.length;
 71 | 
 72 |     // If it's the last header, add remaining content as a chunk
 73 |     if (index === matches.length - 1) {
 74 |       const remainingContent = withoutCodeBlocks.substring(lastIndex).trim();
 75 |       if (remainingContent) {
 76 |         currentSection += remainingContent;
 77 |         sections.push(currentSection);
 78 |       }
 79 |     }
 80 |   });
 81 | 
 82 |   // If there's content before the first header, add it as a chunk
 83 |   if (matches.length > 0 && matches[0].index! > 0) {
 84 |     const initialContent = withoutCodeBlocks
 85 |       .substring(0, matches[0].index)
 86 |       .trim();
 87 |     if (initialContent) {
 88 |       sections.unshift(initialContent);
 89 |     }
 90 |   }
 91 | 
 92 |   // If no sections found, return original input as a single chunk
 93 |   if (sections.length === 0) {
 94 |     sections.push(trimmedInput);
 95 |   }
 96 | 
 97 |   // Restore code blocks
 98 |   return sections.map((section) => {
 99 |     return section.replace(/__CODE_BLOCK_(\d+)__/g, (_, index) => {
100 |       return codeBlocks[parseInt(index, 10)];
101 |     });
102 |   });
103 | };
104 | 
105 | export const generateEmbeddings = async (
106 |   value: string,
107 |   context?: string,
108 | ): Promise<Array<{ embedding: number[]; content: string }>> => {
109 |   const input = value.replaceAll("\\n", " ");
110 |   const chunks = generateChunks(input);
111 |   const provider = await getProvider();
112 |   if (!provider) {
113 |     throw new Error("No provider found. Please set API credentials first.");
114 |   }
115 | 
116 |   // Combine context with each chunk if context is provided
117 |   const chunksWithContext = chunks.map((chunk) =>
118 |     context ? `${context}\n${chunk}` : chunk,
119 |   );
120 | 
121 |   const { embeddings } = await embedMany({
122 |     model: provider.embedding("text-embedding-ada-002"),
123 |     values: chunksWithContext,
124 |   });
125 | 
126 |   return embeddings.map((e, i) => ({
127 |     content: chunksWithContext[i],
128 |     embedding: e,
129 |   }));
130 | };
131 | 
132 | export const generateEmbedding = async (value: string): Promise<number[]> => {
133 |   const provider = await getProvider();
134 |   if (!provider) {
135 |     throw new Error("No provider found. Please set API credentials first.");
136 |   }
137 |   const input = value.replaceAll("\\n", " ");
138 |   const { embedding } = await embed({
139 |     model: provider.embedding("text-embedding-ada-002"),
140 |     value: input,
141 |   });
142 |   return embedding;
143 | };
144 | 


--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  5 | import { cva, type VariantProps } from "class-variance-authority"
  6 | import { X } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const Sheet = SheetPrimitive.Root
 11 | 
 12 | const SheetTrigger = SheetPrimitive.Trigger
 13 | 
 14 | const SheetClose = SheetPrimitive.Close
 15 | 
 16 | const SheetPortal = SheetPrimitive.Portal
 17 | 
 18 | const SheetOverlay = React.forwardRef<
 19 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 20 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 21 | >(({ className, ...props }, ref) => (
 22 |   <SheetPrimitive.Overlay
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |     ref={ref}
 29 |   />
 30 | ))
 31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 32 | 
 33 | const sheetVariants = cva(
 34 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
 35 |   {
 36 |     variants: {
 37 |       side: {
 38 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 39 |         bottom:
 40 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 41 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 42 |         right:
 43 |           "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 44 |       },
 45 |     },
 46 |     defaultVariants: {
 47 |       side: "right",
 48 |     },
 49 |   }
 50 | )
 51 | 
 52 | interface SheetContentProps
 53 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 54 |     VariantProps<typeof sheetVariants> {}
 55 | 
 56 | const SheetContent = React.forwardRef<
 57 |   React.ElementRef<typeof SheetPrimitive.Content>,
 58 |   SheetContentProps
 59 | >(({ side = "right", className, children, ...props }, ref) => (
 60 |   <SheetPortal>
 61 |     <SheetOverlay />
 62 |     <SheetPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(sheetVariants({ side }), className)}
 65 |       {...props}
 66 |     >
 67 |       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 68 |         <X className="h-4 w-4" />
 69 |         <span className="sr-only">Close</span>
 70 |       </SheetPrimitive.Close>
 71 |       {children}
 72 |     </SheetPrimitive.Content>
 73 |   </SheetPortal>
 74 | ))
 75 | SheetContent.displayName = SheetPrimitive.Content.displayName
 76 | 
 77 | const SheetHeader = ({
 78 |   className,
 79 |   ...props
 80 | }: React.HTMLAttributes<HTMLDivElement>) => (
 81 |   <div
 82 |     className={cn(
 83 |       "flex flex-col space-y-2 text-center sm:text-left",
 84 |       className
 85 |     )}
 86 |     {...props}
 87 |   />
 88 | )
 89 | SheetHeader.displayName = "SheetHeader"
 90 | 
 91 | const SheetFooter = ({
 92 |   className,
 93 |   ...props
 94 | }: React.HTMLAttributes<HTMLDivElement>) => (
 95 |   <div
 96 |     className={cn(
 97 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 98 |       className
 99 |     )}
100 |     {...props}
101 |   />
102 | )
103 | SheetFooter.displayName = "SheetFooter"
104 | 
105 | const SheetTitle = React.forwardRef<
106 |   React.ElementRef<typeof SheetPrimitive.Title>,
107 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108 | >(({ className, ...props }, ref) => (
109 |   <SheetPrimitive.Title
110 |     ref={ref}
111 |     className={cn("text-lg font-semibold text-foreground", className)}
112 |     {...props}
113 |   />
114 | ))
115 | SheetTitle.displayName = SheetPrimitive.Title.displayName
116 | 
117 | const SheetDescription = React.forwardRef<
118 |   React.ElementRef<typeof SheetPrimitive.Description>,
119 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120 | >(({ className, ...props }, ref) => (
121 |   <SheetPrimitive.Description
122 |     ref={ref}
123 |     className={cn("text-sm text-muted-foreground", className)}
124 |     {...props}
125 |   />
126 | ))
127 | SheetDescription.displayName = SheetPrimitive.Description.displayName
128 | 
129 | export {
130 |   Sheet,
131 |   SheetPortal,
132 |   SheetOverlay,
133 |   SheetTrigger,
134 |   SheetClose,
135 |   SheetContent,
136 |   SheetHeader,
137 |   SheetFooter,
138 |   SheetTitle,
139 |   SheetDescription,
140 | }
141 | 


--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as LabelPrimitive from "@radix-ui/react-label"
  5 | import { Slot } from "@radix-ui/react-slot"
  6 | import {
  7 |   Controller,
  8 |   FormProvider,
  9 |   useFormContext,
 10 |   type ControllerProps,
 11 |   type FieldPath,
 12 |   type FieldValues,
 13 | } from "react-hook-form"
 14 | 
 15 | import { cn } from "@/lib/utils"
 16 | import { Label } from "@/components/ui/label"
 17 | 
 18 | const Form = FormProvider
 19 | 
 20 | type FormFieldContextValue<
 21 |   TFieldValues extends FieldValues = FieldValues,
 22 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 23 | > = {
 24 |   name: TName
 25 | }
 26 | 
 27 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 28 |   {} as FormFieldContextValue
 29 | )
 30 | 
 31 | const FormField = <
 32 |   TFieldValues extends FieldValues = FieldValues,
 33 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 34 | >({
 35 |   ...props
 36 | }: ControllerProps<TFieldValues, TName>) => {
 37 |   return (
 38 |     <FormFieldContext.Provider value={{ name: props.name }}>
 39 |       <Controller {...props} />
 40 |     </FormFieldContext.Provider>
 41 |   )
 42 | }
 43 | 
 44 | const useFormField = () => {
 45 |   const fieldContext = React.useContext(FormFieldContext)
 46 |   const itemContext = React.useContext(FormItemContext)
 47 |   const { getFieldState, formState } = useFormContext()
 48 | 
 49 |   const fieldState = getFieldState(fieldContext.name, formState)
 50 | 
 51 |   if (!fieldContext) {
 52 |     throw new Error("useFormField should be used within <FormField>")
 53 |   }
 54 | 
 55 |   const { id } = itemContext
 56 | 
 57 |   return {
 58 |     id,
 59 |     name: fieldContext.name,
 60 |     formItemId: `${id}-form-item`,
 61 |     formDescriptionId: `${id}-form-item-description`,
 62 |     formMessageId: `${id}-form-item-message`,
 63 |     ...fieldState,
 64 |   }
 65 | }
 66 | 
 67 | type FormItemContextValue = {
 68 |   id: string
 69 | }
 70 | 
 71 | const FormItemContext = React.createContext<FormItemContextValue>(
 72 |   {} as FormItemContextValue
 73 | )
 74 | 
 75 | const FormItem = React.forwardRef<
 76 |   HTMLDivElement,
 77 |   React.HTMLAttributes<HTMLDivElement>
 78 | >(({ className, ...props }, ref) => {
 79 |   const id = React.useId()
 80 | 
 81 |   return (
 82 |     <FormItemContext.Provider value={{ id }}>
 83 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 84 |     </FormItemContext.Provider>
 85 |   )
 86 | })
 87 | FormItem.displayName = "FormItem"
 88 | 
 89 | const FormLabel = React.forwardRef<
 90 |   React.ElementRef<typeof LabelPrimitive.Root>,
 91 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 92 | >(({ className, ...props }, ref) => {
 93 |   const { error, formItemId } = useFormField()
 94 | 
 95 |   return (
 96 |     <Label
 97 |       ref={ref}
 98 |       className={cn(error && "text-destructive", className)}
 99 |       htmlFor={formItemId}
100 |       {...props}
101 |     />
102 |   )
103 | })
104 | FormLabel.displayName = "FormLabel"
105 | 
106 | const FormControl = React.forwardRef<
107 |   React.ElementRef<typeof Slot>,
108 |   React.ComponentPropsWithoutRef<typeof Slot>
109 | >(({ ...props }, ref) => {
110 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
111 | 
112 |   return (
113 |     <Slot
114 |       ref={ref}
115 |       id={formItemId}
116 |       aria-describedby={
117 |         !error
118 |           ? `${formDescriptionId}`
119 |           : `${formDescriptionId} ${formMessageId}`
120 |       }
121 |       aria-invalid={!!error}
122 |       {...props}
123 |     />
124 |   )
125 | })
126 | FormControl.displayName = "FormControl"
127 | 
128 | const FormDescription = React.forwardRef<
129 |   HTMLParagraphElement,
130 |   React.HTMLAttributes<HTMLParagraphElement>
131 | >(({ className, ...props }, ref) => {
132 |   const { formDescriptionId } = useFormField()
133 | 
134 |   return (
135 |     <p
136 |       ref={ref}
137 |       id={formDescriptionId}
138 |       className={cn("text-[0.8rem] text-muted-foreground", className)}
139 |       {...props}
140 |     />
141 |   )
142 | })
143 | FormDescription.displayName = "FormDescription"
144 | 
145 | const FormMessage = React.forwardRef<
146 |   HTMLParagraphElement,
147 |   React.HTMLAttributes<HTMLParagraphElement>
148 | >(({ className, children, ...props }, ref) => {
149 |   const { error, formMessageId } = useFormField()
150 |   const body = error ? String(error?.message ?? "") : children
151 | 
152 |   if (!body) {
153 |     return null
154 |   }
155 | 
156 |   return (
157 |     <p
158 |       ref={ref}
159 |       id={formMessageId}
160 |       className={cn("text-[0.8rem] font-medium text-destructive", className)}
161 |       {...props}
162 |     >
163 |       {body}
164 |     </p>
165 |   )
166 | })
167 | FormMessage.displayName = "FormMessage"
168 | 
169 | export {
170 |   useFormField,
171 |   Form,
172 |   FormItem,
173 |   FormLabel,
174 |   FormControl,
175 |   FormDescription,
176 |   FormMessage,
177 |   FormField,
178 | }
179 | 


--------------------------------------------------------------------------------
/src/components/chat/chat-container.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Messages } from "@/components/chat/messages";
  4 | import { ChatWithMessages, useChatStore } from "@/contexts/chat-store";
  5 | import { generateEmbedding } from "@/lib/ai/embedding";
  6 | import { generateChatTitle } from "@/lib/chat";
  7 | import { db } from "@/lib/db";
  8 | import { useChat } from "@ai-sdk/react";
  9 | import type { Message } from "ai";
 10 | import { ChatInput } from "./chat-input";
 11 | 
 12 | export function euclideanDistance(A: number[], B: number[]): number {
 13 |   return Math.sqrt(A.reduce((sum, a, i) => sum + Math.pow(a - B[i], 2), 0));
 14 | }
 15 | 
 16 | async function findSimilarContent(queryEmbedding: number[], limit = 4) {
 17 |   const BATCH_SIZE = 100;
 18 |   let offset = 0;
 19 |   let bestMatches: Array<{ content: string; distance: number }> = [];
 20 | 
 21 |   while (true) {
 22 |     const batch = await db.embeddings
 23 |       .offset(offset)
 24 |       .limit(BATCH_SIZE)
 25 |       .toArray();
 26 | 
 27 |     if (batch.length === 0) break;
 28 | 
 29 |     const distances = batch.map((doc) => ({
 30 |       content: doc.content,
 31 |       distance: euclideanDistance(queryEmbedding, doc.embedding),
 32 |     }));
 33 | 
 34 |     bestMatches = [...bestMatches, ...distances]
 35 |       .sort((a, b) => a.distance - b.distance)
 36 |       .slice(0, limit);
 37 | 
 38 |     offset += BATCH_SIZE;
 39 |   }
 40 | 
 41 |   return bestMatches;
 42 | }
 43 | 
 44 | interface ChatContainerProps {
 45 |   className?: string;
 46 |   containerClassName?: string;
 47 |   chat: ChatWithMessages;
 48 | }
 49 | 
 50 | export function ChatContainer({
 51 |   className,
 52 |   containerClassName,
 53 |   chat,
 54 | }: ChatContainerProps) {
 55 |   const {
 56 |     messages,
 57 |     input,
 58 |     handleInputChange,
 59 |     handleSubmit: handleChatSubmit,
 60 |     status,
 61 |     stop,
 62 |     error,
 63 |     reload,
 64 |     isLoading,
 65 |   } = useChat({
 66 |     maxSteps: 3,
 67 |     initialMessages: chat.messages,
 68 |     id: chat.id,
 69 |     sendExtraMessageFields: true,
 70 |     async onToolCall({ toolCall }) {
 71 |       if (toolCall.toolName === "retrieveNote") {
 72 |         const queryEmbedding = await generateEmbedding(
 73 |           (toolCall.args as { question: string }).question,
 74 |         );
 75 |         const embeddings = await findSimilarContent(queryEmbedding);
 76 |         return {
 77 |           relevantInformation: embeddings.map((e) => e.content).join("\n\n"),
 78 |           sourcesCount: embeddings.length,
 79 |         };
 80 |       }
 81 |     },
 82 |     onFinish: async (message) => {
 83 |       if (message.role === "assistant" && message.content) {
 84 |         await insertChatMessage({
 85 |           content: message.content,
 86 |           createdAt: new Date(),
 87 |           role: message.role as "assistant",
 88 |           chatId: chat.id,
 89 |         });
 90 |       }
 91 |     },
 92 |   });
 93 | 
 94 |   const { updateChat, insertChatMessage } = useChatStore();
 95 | 
 96 |   const handleSaveMessage = async () => {
 97 |     await insertChatMessage({
 98 |       content: input,
 99 |       createdAt: new Date(),
100 |       role: "user",
101 |       chatId: chat.id,
102 |     });
103 | 
104 |     // If this is the first user message and the chat title is "New Chat", generate a title
105 |     if (messages.length === 0 && chat.title === "New Chat") {
106 |       try {
107 |         const generatedTitle = generateChatTitle(input);
108 |         await updateChat(chat.id, {
109 |           title: generatedTitle,
110 |           updatedAt: new Date(),
111 |         });
112 |       } catch (error) {
113 |         console.error("Failed to generate chat title:", error);
114 |       }
115 |     }
116 |   };
117 | 
118 |   const handleSubmitWithSave = async () => {
119 |     if (input.trim()) {
120 |       await handleSaveMessage();
121 |       await handleChatSubmit({ preventDefault: () => {} });
122 |     }
123 |   };
124 | 
125 |   return (
126 |     <div
127 |       className={
128 |         containerClassName ??
129 |         "container flex h-[calc(100vh-64px)] max-w-3xl flex-col gap-4 py-6"
130 |       }
131 |     >
132 |       <div className="flex-1 overflow-auto">
133 |         <div className="space-y-4">
134 |           <Messages messages={messages as Message[]} isLoading={isLoading} />
135 |         </div>
136 |       </div>
137 |       {error && (
138 |         <>
139 |           <div>An error occurred.</div>
140 |           <button type="button" onClick={() => reload()}>
141 |             Retry
142 |           </button>
143 |         </>
144 |       )}
145 |       <div className="sticky bottom-6">
146 |         <ChatInput
147 |           className={className}
148 |           input={input}
149 |           disabled={status !== "ready"}
150 |           handleInputChange={handleInputChange}
151 |           handleSubmit={handleSubmitWithSave}
152 |           onStop={
153 |             status === "submitted" || status === "streaming" ? stop : undefined
154 |           }
155 |         />
156 |       </div>
157 |     </div>
158 |   );
159 | }
160 | 


--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { buttonVariants } from "@/components/ui/button"
  8 | 
  9 | const AlertDialog = AlertDialogPrimitive.Root
 10 | 
 11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 12 | 
 13 | const AlertDialogPortal = AlertDialogPrimitive.Portal
 14 | 
 15 | const AlertDialogOverlay = React.forwardRef<
 16 |   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
 17 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 18 | >(({ className, ...props }, ref) => (
 19 |   <AlertDialogPrimitive.Overlay
 20 |     className={cn(
 21 |       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 22 |       className
 23 |     )}
 24 |     {...props}
 25 |     ref={ref}
 26 |   />
 27 | ))
 28 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 29 | 
 30 | const AlertDialogContent = React.forwardRef<
 31 |   React.ElementRef<typeof AlertDialogPrimitive.Content>,
 32 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 33 | >(({ className, ...props }, ref) => (
 34 |   <AlertDialogPortal>
 35 |     <AlertDialogOverlay />
 36 |     <AlertDialogPrimitive.Content
 37 |       ref={ref}
 38 |       className={cn(
 39 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     />
 44 |   </AlertDialogPortal>
 45 | ))
 46 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 47 | 
 48 | const AlertDialogHeader = ({
 49 |   className,
 50 |   ...props
 51 | }: React.HTMLAttributes<HTMLDivElement>) => (
 52 |   <div
 53 |     className={cn(
 54 |       "flex flex-col space-y-2 text-center sm:text-left",
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | )
 60 | AlertDialogHeader.displayName = "AlertDialogHeader"
 61 | 
 62 | const AlertDialogFooter = ({
 63 |   className,
 64 |   ...props
 65 | }: React.HTMLAttributes<HTMLDivElement>) => (
 66 |   <div
 67 |     className={cn(
 68 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 69 |       className
 70 |     )}
 71 |     {...props}
 72 |   />
 73 | )
 74 | AlertDialogFooter.displayName = "AlertDialogFooter"
 75 | 
 76 | const AlertDialogTitle = React.forwardRef<
 77 |   React.ElementRef<typeof AlertDialogPrimitive.Title>,
 78 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 79 | >(({ className, ...props }, ref) => (
 80 |   <AlertDialogPrimitive.Title
 81 |     ref={ref}
 82 |     className={cn("text-lg font-semibold", className)}
 83 |     {...props}
 84 |   />
 85 | ))
 86 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 87 | 
 88 | const AlertDialogDescription = React.forwardRef<
 89 |   React.ElementRef<typeof AlertDialogPrimitive.Description>,
 90 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 91 | >(({ className, ...props }, ref) => (
 92 |   <AlertDialogPrimitive.Description
 93 |     ref={ref}
 94 |     className={cn("text-sm text-muted-foreground", className)}
 95 |     {...props}
 96 |   />
 97 | ))
 98 | AlertDialogDescription.displayName =
 99 |   AlertDialogPrimitive.Description.displayName
100 | 
101 | const AlertDialogAction = React.forwardRef<
102 |   React.ElementRef<typeof AlertDialogPrimitive.Action>,
103 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
104 | >(({ className, ...props }, ref) => (
105 |   <AlertDialogPrimitive.Action
106 |     ref={ref}
107 |     className={cn(buttonVariants(), className)}
108 |     {...props}
109 |   />
110 | ))
111 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
112 | 
113 | const AlertDialogCancel = React.forwardRef<
114 |   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
115 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
116 | >(({ className, ...props }, ref) => (
117 |   <AlertDialogPrimitive.Cancel
118 |     ref={ref}
119 |     className={cn(
120 |       buttonVariants({ variant: "outline" }),
121 |       "mt-2 sm:mt-0",
122 |       className
123 |     )}
124 |     {...props}
125 |   />
126 | ))
127 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
128 | 
129 | export {
130 |   AlertDialog,
131 |   AlertDialogPortal,
132 |   AlertDialogOverlay,
133 |   AlertDialogTrigger,
134 |   AlertDialogContent,
135 |   AlertDialogHeader,
136 |   AlertDialogFooter,
137 |   AlertDialogTitle,
138 |   AlertDialogDescription,
139 |   AlertDialogAction,
140 |   AlertDialogCancel,
141 | }
142 | 


--------------------------------------------------------------------------------
/src/app/notes/[id]/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Editor from "@/components/editor";
  4 | import {
  5 |   AlertDialog,
  6 |   AlertDialogAction,
  7 |   AlertDialogCancel,
  8 |   AlertDialogContent,
  9 |   AlertDialogDescription,
 10 |   AlertDialogFooter,
 11 |   AlertDialogHeader,
 12 |   AlertDialogTitle,
 13 |   AlertDialogTrigger,
 14 | } from "@/components/ui/alert-dialog";
 15 | import { Button } from "@/components/ui/button";
 16 | import { generateEmbeddings } from "@/lib/ai/embedding";
 17 | import { db, Note, NoteType } from "@/lib/db";
 18 | import { SETTINGS } from "@/lib/settings";
 19 | import { useDebounce } from "@uidotdev/usehooks";
 20 | import { ArrowLeft } from "lucide-react";
 21 | import { useCookies } from "next-client-cookies";
 22 | import Link from "next/link";
 23 | import { useRouter } from "next/navigation";
 24 | import { use, useCallback, useEffect, useState } from "react";
 25 | import { toast } from "sonner";
 26 | 
 27 | export default function Page({ params }: { params: Promise<{ id: string }> }) {
 28 |   const { id } = use(params);
 29 |   const router = useRouter();
 30 |   const [note, setNote] = useState<Note | null>(null);
 31 |   const [content, setContent] = useState("");
 32 |   const [title, setTitle] = useState("");
 33 |   const debouncedContent = useDebounce(content, 1000);
 34 |   const debouncedTitle = useDebounce(title, 1000);
 35 |   const cookies = useCookies();
 36 |   const [autoUpdate] = useState(
 37 |     cookies.get(SETTINGS.ai.embeddings.autoUpdate) !== "false" &&
 38 |       cookies.get(SETTINGS.ai.provider.apiKey) !== undefined,
 39 |   );
 40 | 
 41 |   const loadNote = useCallback(async () => {
 42 |     try {
 43 |       const result = await db.notes.get(parseInt(id));
 44 |       if (result) {
 45 |         setNote(result);
 46 |         setContent(result.content);
 47 |         setTitle(result.title);
 48 |       }
 49 |     } catch (error) {
 50 |       console.error("Failed to load note:", error);
 51 |     }
 52 |   }, [id]);
 53 | 
 54 |   useEffect(() => {
 55 |     loadNote();
 56 |   }, [loadNote]);
 57 | 
 58 |   useEffect(() => {
 59 |     const updateNote = async () => {
 60 |       if (!note) return;
 61 |       if (content === note.content && title === note.title) return;
 62 | 
 63 |       try {
 64 |         await db.notes.update(note.id, {
 65 |           content,
 66 |           title,
 67 |           updatedAt: new Date(),
 68 |         });
 69 |         if (autoUpdate) {
 70 |           await db.embeddings.where("noteId").equals(note.id).delete();
 71 |           const embedding = await generateEmbeddings(content, title);
 72 |           await db.embeddings.bulkAdd(
 73 |             embedding.map((embedding) => ({
 74 |               noteId: note.id,
 75 |               content: embedding.content,
 76 |               embedding: embedding.embedding,
 77 |             })),
 78 |           );
 79 |           await db.notes.update(note.id, {
 80 |             embeddingUpdatedAt: new Date(),
 81 |           });
 82 |         }
 83 |       } catch (error) {
 84 |         console.error("Failed to update note:", error);
 85 |       }
 86 |     };
 87 | 
 88 |     updateNote();
 89 |   }, [debouncedContent, debouncedTitle, note, content, title, autoUpdate]);
 90 | 
 91 |   const handleDelete = async () => {
 92 |     if (!note) return;
 93 | 
 94 |     try {
 95 |       // Delete all embeddings associated with this note
 96 |       await db.embeddings.where("noteId").equals(note.id).delete();
 97 |       // Then delete the note itself
 98 |       await db.notes.delete(note.id);
 99 |       toast.success("Note deleted.");
100 |       router.push(note.type === NoteType.Journal ? "/journal" : "/knowledge");
101 |     } catch (error) {
102 |       console.error("Failed to delete note:", error);
103 |       toast.error("Failed to delete the note. Please try again.");
104 |     }
105 |   };
106 | 
107 |   if (!note) {
108 |     return <div>Loading...</div>;
109 |   }
110 | 
111 |   const backUrl = note.type === NoteType.Journal ? "/journal" : "/knowledge";
112 | 
113 |   return (
114 |     <div className="container mx-auto space-y-4 px-4 py-6">
115 |       <div className="flex items-center justify-between pb-4">
116 |         <Link
117 |           href={backUrl}
118 |           className="flex items-center text-sm text-muted-foreground hover:text-foreground"
119 |         >
120 |           <ArrowLeft className="mr-1 h-4 w-4" />
121 |           Back to{" "}
122 |           {note.type === NoteType.Journal ? "Journal" : "Knowledge Base"}
123 |         </Link>
124 |         {note.type === NoteType.Knowledge && (
125 |           <AlertDialog>
126 |             <AlertDialogTrigger asChild>
127 |               <Button variant="destructive" className="h-8">
128 |                 Delete
129 |               </Button>
130 |             </AlertDialogTrigger>
131 |             <AlertDialogContent>
132 |               <AlertDialogHeader>
133 |                 <AlertDialogTitle>Are you sure?</AlertDialogTitle>
134 |                 <AlertDialogDescription>
135 |                   This action cannot be undone. This will permanently delete the
136 |                   note.
137 |                 </AlertDialogDescription>
138 |               </AlertDialogHeader>
139 |               <AlertDialogFooter>
140 |                 <AlertDialogCancel>Cancel</AlertDialogCancel>
141 |                 <AlertDialogAction onClick={handleDelete}>
142 |                   Delete
143 |                 </AlertDialogAction>
144 |               </AlertDialogFooter>
145 |             </AlertDialogContent>
146 |           </AlertDialog>
147 |         )}
148 |       </div>
149 | 
150 |       <div className="space-y-4">
151 |         <div className="flex items-center justify-between">
152 |           {note.type === NoteType.Knowledge ? (
153 |             <input
154 |               type="text"
155 |               value={title}
156 |               onChange={(e) => setTitle(e.target.value)}
157 |               className="-ml-2 w-full rounded border-none bg-transparent px-2 text-3xl font-bold focus:outline-none focus:ring-2 focus:ring-primary/20"
158 |             />
159 |           ) : (
160 |             <h1 className="text-3xl font-bold">{note.title}</h1>
161 |           )}
162 |           <div className="text-sm text-muted-foreground">
163 |             {new Date(note.createdAt).toLocaleDateString()}
164 |           </div>
165 |         </div>
166 | 
167 |         <Editor
168 |           markdown={content}
169 |           onValueChange={setContent}
170 |           contentEditableClassName="min-h-[calc(100vh-300px)]"
171 |         />
172 |       </div>
173 |     </div>
174 |   );
175 | }
176 | 


--------------------------------------------------------------------------------
/README.cn.md:
--------------------------------------------------------------------------------
  1 | <!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 -->
  2 | 
  3 | <a id="readme-top"></a>
  4 | 
  5 | <!--
  6 | *** Thanks for checking out the Best-README-Template. If you have a suggestion
  7 | *** that would make this better, please fork the repo and create a pull request
  8 | *** or simply open an issue with the tag "enhancement".
  9 | *** Don't forget to give the project a star!
 10 | *** Thanks again! Now go create something AMAZING! :D
 11 | -->
 12 | 
 13 | <!-- PROJECT SHIELDS -->
 14 | <!--
 15 | *** I'm using markdown "reference style" links for readability.
 16 | *** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
 17 | *** See the bottom of this document for the declaration of the reference variables
 18 | *** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
 19 | *** https://www.markdownguide.org/basic-syntax/#reference-style-links
 20 | -->
 21 | 
 22 | [![Contributors][contributors-shield]][contributors-url]
 23 | [![Forks][forks-shield]][forks-url]
 24 | [![Stargazers][stars-shield]][stars-url]
 25 | [![Issues][issues-shield]][issues-url]
 26 | [![AGPL-3.0 License][license-shield]][license-url]
 27 | 
 28 | <!-- PROJECT LOGO -->
 29 | <br />
 30 | <div align="center">
 31 |   <a href="https://github.com/celerforge/freenote">
 32 |     <img src="public/logo.png" alt="Logo" width="80" height="80">
 33 |   </a>
 34 | 
 35 |   <h3 align="center">Freenote</h3>
 36 | 
 37 |   <p align="center">
 38 |     一个支持 Markdown 的开源 AI 日记应用
 39 |     <br />
 40 |     <a href="https://freenote.app" style="display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 5px; font-weight: bold;"><strong>访问 Freenote 应用</strong></a>
 41 |     <br />
 42 |     <br />
 43 |     <a href="https://github.com/celerforge/freenote/issues/new?labels=bug&template=bug-report---.md">报告 Bug</a>
 44 |     &middot;
 45 |     <a href="https://github.com/celerforge/freenote/issues/new?labels=enhancement&template=feature-request---.md">请求新功能</a>
 46 |   </p>
 47 | </div>
 48 | 
 49 | <!-- TABLE OF CONTENTS -->
 50 | <details>
 51 |   <summary>目录</summary>
 52 |   <ol>
 53 |     <li><a href="#关于项目">关于项目</a></li>
 54 |     <li><a href="#使用方法">使用方法</a></li>
 55 |     <li>
 56 |       <a href="#开始使用">开始使用</a>
 57 |       <ul>
 58 |         <li><a href="#前提条件">前提条件</a></li>
 59 |         <li><a href="#安装">安装</a></li>
 60 |       </ul>
 61 |     </li>
 62 |     <li><a href="#路线图">路线图</a></li>
 63 |     <li><a href="#贡献">贡献</a></li>
 64 |     <li><a href="#许可证">许可证</a></li>
 65 |     <li><a href="#联系方式">联系方式</a></li>
 66 |   </ol>
 67 | </details>
 68 | 
 69 | <!-- ABOUT THE PROJECT -->
 70 | 
 71 | ## 关于项目
 72 | 
 73 | [![Freenote截图][product-screenshot]](https://freenote.app)
 74 | 
 75 | Freenote 是一个支持 Markdown 的开源 AI 日记应用。您可以自由记录笔记，并借助 AI 助手轻松搜索和总结过去的条目，增强创意捕捉和管理能力。所有数据都存储在您的设备本地，确保隐私和安全。
 76 | 
 77 | ### 主要特点
 78 | 
 79 | - **Markdown 编辑器**：丰富的格式化功能和直观的快捷键
 80 | - **AI 助手**：智能搜索和总结您的笔记
 81 | - **隐私优先**：所有数据存储在您的设备本地
 82 | - **无干扰界面**：专注于写作的简洁界面
 83 | 
 84 | <p align="right">(<a href="#readme-top">返回顶部</a>)</p>
 85 | 
 86 | <!-- USAGE EXAMPLES -->
 87 | 
 88 | ## 使用方法
 89 | 
 90 | ### 基本使用
 91 | 
 92 | 1. 点击日记部分，使用 Markdown 编写笔记
 93 | 2. 使用 Markdown 快捷键进行格式化：
 94 |    - 输入 `#` 到 `######` 创建标题（H1-H6）
 95 |    - 输入 `*` 或 `-` 创建项目符号列表
 96 |    - 输入 `>` 创建引用块
 97 |    - 选择文本 + `Ctrl/Cmd+B` 加粗，`Ctrl/Cmd+I` 斜体
 98 |    - 输入 `` ` `` 创建内联代码，或 ` ``` ` 创建代码块
 99 | 
100 | ### AI 功能
101 | 
102 | 1. 前往设置 → 添加您的 OpenAI API 密钥
103 | 2. 使用聊天功能询问有关您笔记的问题
104 | 3. 借助 AI 助手搜索所有条目
105 | 
106 | **注意：** AI 功能需要 OpenAI API 密钥
107 | 
108 | <p align="right">(<a href="#readme-top">返回顶部</a>)</p>
109 | 
110 | <!-- GETTING STARTED -->
111 | 
112 | ## 开始使用
113 | 
114 | 按照以下简单步骤获取本地副本并运行。
115 | 
116 | ### 前提条件
117 | 
118 | - Node.js（v18 或更高版本）
119 | - npm 或 pnpm
120 |   ```sh
121 |   npm install npm@latest -g
122 |   # 或
123 |   npm install -g pnpm
124 |   ```
125 | 
126 | ### 安装
127 | 
128 | 1. 克隆仓库
129 |    ```sh
130 |    git clone https://github.com/celerforge/freenote.git
131 |    ```
132 | 2. 安装依赖
133 |    ```sh
134 |    cd freenote
135 |    pnpm install
136 |    ```
137 | 3. 创建环境配置
138 |    ```sh
139 |    cp .env.example .env
140 |    ```
141 | 4. 启动开发服务器
142 |    ```sh
143 |    pnpm dev
144 |    ```
145 | 
146 | ### Docker 部署
147 | 
148 | 您也可以使用 Docker 运行 Freenote：
149 | 
150 | 1. 构建 Docker 镜像
151 | 
152 |    ```sh
153 |    docker build -t freenote .
154 |    ```
155 | 
156 | 2. 运行容器
157 | 
158 |    ```sh
159 |    docker run -p 3000:3000 freenote
160 |    ```
161 | 
162 | 3. 在 http://localhost:3000 访问应用
163 | 
164 | <p align="right">(<a href="#readme-top">返回顶部</a>)</p>
165 | 
166 | <!-- ROADMAP -->
167 | 
168 | ## 路线图
169 | 
170 | - [ ] 增强 AI 工具
171 |   - [ ] 关键词搜索的 AI 总结工具，显示相关笔记和连接
172 |   - [ ] 从笔记生成 AI 驱动的知识库
173 | - [ ] 存储代码可读性优化
174 | - [ ] 笔记导入/导出功能
175 | - [ ] 多设备数据同步
176 | - [ ] 使用 Tauri 添加桌面应用
177 | - [ ] 添加笔记标签
178 | 
179 | 查看[未解决的问题](https://github.com/celerforge/freenote/issues)获取完整的功能提议和已知问题列表。
180 | 
181 | <p align="right">(<a href="#readme-top">返回顶部</a>)</p>
182 | 
183 | <!-- CONTRIBUTING -->
184 | 
185 | ## 贡献
186 | 
187 | 贡献使开源社区成为一个令人惊叹的学习、启发和创造的地方。非常感谢您的任何贡献。
188 | 
189 | 1. Fork项目
190 | 2. 创建您的功能分支（`git checkout -b feature/AmazingFeature`）
191 | 3. 提交您的更改（`git commit -m 'Add some AmazingFeature'`）
192 | 4. 推送到分支（`git push origin feature/AmazingFeature`）
193 | 5. 开启Pull Request
194 | 
195 | <p align="right">(<a href="#readme-top">返回顶部</a>)</p>
196 | 
197 | <!-- LICENSE -->
198 | 
199 | ## 许可证
200 | 
201 | 根据 AGPL-3.0 许可证分发。有关更多信息，请参阅 `LICENSE`。
202 | 
203 | <p align="right">(<a href="#readme-top">返回顶部</a>)</p>
204 | 
205 | <!-- MARKDOWN LINKS & IMAGES -->
206 | <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
207 | 
208 | [contributors-shield]: https://img.shields.io/github/contributors/celerforge/freenote.svg?style=for-the-badge
209 | [contributors-url]: https://github.com/celerforge/freenote/graphs/contributors
210 | [forks-shield]: https://img.shields.io/github/forks/celerforge/freenote.svg?style=for-the-badge
211 | [forks-url]: https://github.com/celerforge/freenote/network/members
212 | [stars-shield]: https://img.shields.io/github/stars/celerforge/freenote.svg?style=for-the-badge
213 | [stars-url]: https://github.com/celerforge/freenote/stargazers
214 | [issues-shield]: https://img.shields.io/github/issues/celerforge/freenote.svg?style=for-the-badge
215 | [issues-url]: https://github.com/celerforge/freenote/issues
216 | [license-shield]: https://img.shields.io/github/license/celerforge/freenote.svg?style=for-the-badge
217 | [license-url]: https://github.com/celerforge/freenote/blob/main/LICENSE
218 | [product-screenshot]: public/screenshot.jpeg
219 | 


--------------------------------------------------------------------------------
/src/components/settings/settings-modal.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { EmbeddingsSettings } from "@/components/settings/embeddings-settings";
  4 | import { ProviderSettings } from "@/components/settings/provider-settings";
  5 | import {
  6 |   Dialog,
  7 |   DialogContent,
  8 |   DialogDescription,
  9 |   DialogTitle,
 10 | } from "@/components/ui/dialog";
 11 | import {
 12 |   Sidebar,
 13 |   SidebarContent,
 14 |   SidebarGroup,
 15 |   SidebarGroupContent,
 16 |   SidebarGroupLabel,
 17 |   SidebarMenu,
 18 |   SidebarMenuButton,
 19 |   SidebarMenuItem,
 20 |   SidebarProvider,
 21 | } from "@/components/ui/sidebar";
 22 | import { generateEmbeddings } from "@/lib/ai/embedding";
 23 | import { db } from "@/lib/db";
 24 | import { SETTINGS } from "@/lib/settings";
 25 | import { useCookies } from "next-client-cookies";
 26 | import { useRouter } from "next/navigation";
 27 | import { useState } from "react";
 28 | import { toast } from "sonner";
 29 | 
 30 | type SettingsTab = "provider" | "embeddings";
 31 | 
 32 | export default function SettingsModal({
 33 |   isOpen,
 34 |   onClose,
 35 | }: {
 36 |   isOpen: boolean;
 37 |   onClose: () => void;
 38 | }) {
 39 |   const router = useRouter();
 40 |   const cookies = useCookies();
 41 |   const [baseUrl, setBaseUrl] = useState(
 42 |     cookies.get(SETTINGS.ai.provider.baseUrl) ?? "",
 43 |   );
 44 |   const [apiKey, setApiKey] = useState(
 45 |     cookies.get(SETTINGS.ai.provider.apiKey) ?? "",
 46 |   );
 47 |   const [autoUpdateEmbeddings, setAutoUpdateEmbeddings] = useState(
 48 |     cookies.get(SETTINGS.ai.embeddings.autoUpdate) !== "false",
 49 |   );
 50 |   const [activeTab, setActiveTab] = useState<SettingsTab>("provider");
 51 |   const [isSyncing, setIsSyncing] = useState(false);
 52 | 
 53 |   const handleSave = () => {
 54 |     cookies.set(SETTINGS.ai.provider.baseUrl, baseUrl);
 55 |     cookies.set(SETTINGS.ai.provider.apiKey, apiKey);
 56 |     cookies.set(
 57 |       SETTINGS.ai.embeddings.autoUpdate,
 58 |       autoUpdateEmbeddings.toString(),
 59 |     );
 60 |     onClose();
 61 |     router.refresh();
 62 | 
 63 |     // Dispatch custom event to notify that settings have been updated
 64 |     window.dispatchEvent(new Event("settings-updated"));
 65 | 
 66 |     toast.success("Settings saved.", {
 67 |       description: "Your settings have been successfully updated.",
 68 |     });
 69 |   };
 70 | 
 71 |   const handleSync = async () => {
 72 |     if (isSyncing) return;
 73 |     setIsSyncing(true);
 74 |     try {
 75 |       // Get all notes that need embedding updates
 76 |       const notesToUpdate = await db.notes
 77 |         .filter((note) => {
 78 |           if (note.content.length === 0) return false;
 79 |           if (!note.embeddingUpdatedAt) return true;
 80 |           if (!note.updatedAt) return false;
 81 |           return note.updatedAt > note.embeddingUpdatedAt;
 82 |         })
 83 |         .toArray();
 84 | 
 85 |       if (notesToUpdate.length === 0) {
 86 |         toast.info("No updates needed", {
 87 |           description: "All notes are already synchronized.",
 88 |         });
 89 |         return;
 90 |       }
 91 | 
 92 |       // Process each note that needs updating
 93 |       for (const note of notesToUpdate) {
 94 |         const embedding = await generateEmbeddings(note.content, note.title);
 95 |         await db.transaction("rw", db.notes, db.embeddings, async () => {
 96 |           await db.embeddings.where("noteId").equals(note.id).delete();
 97 |           await db.embeddings.bulkAdd(
 98 |             embedding.map((embedding) => ({
 99 |               noteId: note.id,
100 |               content: embedding.content,
101 |               embedding: embedding.embedding,
102 |             })),
103 |           );
104 |           await db.notes.update(note.id, {
105 |             embeddingUpdatedAt: new Date(),
106 |           });
107 |         });
108 |       }
109 | 
110 |       toast.success("Embeddings synchronized", {
111 |         description: `Successfully updated ${notesToUpdate.length} notes.`,
112 |       });
113 | 
114 |       router.refresh();
115 |     } catch (error) {
116 |       console.error("Error syncing embeddings:", error);
117 |       toast.error("Sync failed", {
118 |         description: "Failed to synchronize embeddings. Please try again.",
119 |       });
120 |     } finally {
121 |       setIsSyncing(false);
122 |     }
123 |   };
124 | 
125 |   return (
126 |     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
127 |       <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
128 |         <DialogTitle className="sr-only">Settings</DialogTitle>
129 |         <DialogDescription className="sr-only">Settings</DialogDescription>
130 |         <SidebarProvider className="items-start">
131 |           <Sidebar collapsible="none" className="hidden md:flex">
132 |             <SidebarContent>
133 |               <SidebarGroup>
134 |                 <SidebarGroupLabel>AI</SidebarGroupLabel>
135 |                 <SidebarGroupContent>
136 |                   <SidebarMenu>
137 |                     <SidebarMenuItem>
138 |                       <SidebarMenuButton
139 |                         isActive={activeTab === "provider"}
140 |                         onClick={() => setActiveTab("provider")}
141 |                       >
142 |                         <span>Provider</span>
143 |                       </SidebarMenuButton>
144 |                     </SidebarMenuItem>
145 |                     <SidebarMenuItem>
146 |                       <SidebarMenuButton
147 |                         isActive={activeTab === "embeddings"}
148 |                         onClick={() => setActiveTab("embeddings")}
149 |                       >
150 |                         <span>Embeddings</span>
151 |                       </SidebarMenuButton>
152 |                     </SidebarMenuItem>
153 |                   </SidebarMenu>
154 |                 </SidebarGroupContent>
155 |               </SidebarGroup>
156 |             </SidebarContent>
157 |           </Sidebar>
158 |           <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
159 |             <div className="mb-4 flex border-b px-4 pt-4 md:hidden">
160 |               <button
161 |                 className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
162 |                   activeTab === "provider"
163 |                     ? "border-b-2 border-primary text-primary"
164 |                     : "text-muted-foreground hover:text-foreground"
165 |                 }`}
166 |                 onClick={() => setActiveTab("provider")}
167 |               >
168 |                 Provider
169 |               </button>
170 |               <button
171 |                 className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
172 |                   activeTab === "embeddings"
173 |                     ? "border-b-2 border-primary text-primary"
174 |                     : "text-muted-foreground hover:text-foreground"
175 |                 }`}
176 |                 onClick={() => setActiveTab("embeddings")}
177 |               >
178 |                 Embeddings
179 |               </button>
180 |             </div>
181 |             <div className="relative flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
182 |               {activeTab === "provider" && (
183 |                 <ProviderSettings
184 |                   baseUrl={baseUrl}
185 |                   apiKey={apiKey}
186 |                   onBaseUrlChange={setBaseUrl}
187 |                   onApiKeyChange={setApiKey}
188 |                   onSave={handleSave}
189 |                   onCancel={onClose}
190 |                 />
191 |               )}
192 |               {activeTab === "embeddings" && (
193 |                 <EmbeddingsSettings
194 |                   autoUpdate={autoUpdateEmbeddings}
195 |                   onAutoUpdateChange={setAutoUpdateEmbeddings}
196 |                   onSync={handleSync}
197 |                   isSyncing={isSyncing}
198 |                 />
199 |               )}
200 |             </div>
201 |           </main>
202 |         </SidebarProvider>
203 |       </DialogContent>
204 |     </Dialog>
205 |   );
206 | }
207 | 


--------------------------------------------------------------------------------
/src/components/ui/context-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const ContextMenu = ContextMenuPrimitive.Root
 10 | 
 11 | const ContextMenuTrigger = ContextMenuPrimitive.Trigger
 12 | 
 13 | const ContextMenuGroup = ContextMenuPrimitive.Group
 14 | 
 15 | const ContextMenuPortal = ContextMenuPrimitive.Portal
 16 | 
 17 | const ContextMenuSub = ContextMenuPrimitive.Sub
 18 | 
 19 | const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 20 | 
 21 | const ContextMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <ContextMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 31 |       inset && "pl-8",
 32 |       className
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto h-4 w-4" />
 38 |   </ContextMenuPrimitive.SubTrigger>
 39 | ))
 40 | ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 41 | 
 42 | const ContextMenuSubContent = React.forwardRef<
 43 |   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
 44 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
 45 | >(({ className, ...props }, ref) => (
 46 |   <ContextMenuPrimitive.SubContent
 47 |     ref={ref}
 48 |     className={cn(
 49 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 50 |       className
 51 |     )}
 52 |     {...props}
 53 |   />
 54 | ))
 55 | ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 56 | 
 57 | const ContextMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof ContextMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 60 | >(({ className, ...props }, ref) => (
 61 |   <ContextMenuPrimitive.Portal>
 62 |     <ContextMenuPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(
 65 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 66 |         className
 67 |       )}
 68 |       {...props}
 69 |     />
 70 |   </ContextMenuPrimitive.Portal>
 71 | ))
 72 | ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 73 | 
 74 | const ContextMenuItem = React.forwardRef<
 75 |   React.ElementRef<typeof ContextMenuPrimitive.Item>,
 76 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
 77 |     inset?: boolean
 78 |   }
 79 | >(({ className, inset, ...props }, ref) => (
 80 |   <ContextMenuPrimitive.Item
 81 |     ref={ref}
 82 |     className={cn(
 83 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 84 |       inset && "pl-8",
 85 |       className
 86 |     )}
 87 |     {...props}
 88 |   />
 89 | ))
 90 | ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 91 | 
 92 | const ContextMenuCheckboxItem = React.forwardRef<
 93 |   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
 94 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
 95 | >(({ className, children, checked, ...props }, ref) => (
 96 |   <ContextMenuPrimitive.CheckboxItem
 97 |     ref={ref}
 98 |     className={cn(
 99 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
100 |       className
101 |     )}
102 |     checked={checked}
103 |     {...props}
104 |   >
105 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
106 |       <ContextMenuPrimitive.ItemIndicator>
107 |         <Check className="h-4 w-4" />
108 |       </ContextMenuPrimitive.ItemIndicator>
109 |     </span>
110 |     {children}
111 |   </ContextMenuPrimitive.CheckboxItem>
112 | ))
113 | ContextMenuCheckboxItem.displayName =
114 |   ContextMenuPrimitive.CheckboxItem.displayName
115 | 
116 | const ContextMenuRadioItem = React.forwardRef<
117 |   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
118 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
119 | >(({ className, children, ...props }, ref) => (
120 |   <ContextMenuPrimitive.RadioItem
121 |     ref={ref}
122 |     className={cn(
123 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
124 |       className
125 |     )}
126 |     {...props}
127 |   >
128 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
129 |       <ContextMenuPrimitive.ItemIndicator>
130 |         <Circle className="h-4 w-4 fill-current" />
131 |       </ContextMenuPrimitive.ItemIndicator>
132 |     </span>
133 |     {children}
134 |   </ContextMenuPrimitive.RadioItem>
135 | ))
136 | ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
137 | 
138 | const ContextMenuLabel = React.forwardRef<
139 |   React.ElementRef<typeof ContextMenuPrimitive.Label>,
140 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
141 |     inset?: boolean
142 |   }
143 | >(({ className, inset, ...props }, ref) => (
144 |   <ContextMenuPrimitive.Label
145 |     ref={ref}
146 |     className={cn(
147 |       "px-2 py-1.5 text-sm font-semibold text-foreground",
148 |       inset && "pl-8",
149 |       className
150 |     )}
151 |     {...props}
152 |   />
153 | ))
154 | ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
155 | 
156 | const ContextMenuSeparator = React.forwardRef<
157 |   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
158 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
159 | >(({ className, ...props }, ref) => (
160 |   <ContextMenuPrimitive.Separator
161 |     ref={ref}
162 |     className={cn("-mx-1 my-1 h-px bg-border", className)}
163 |     {...props}
164 |   />
165 | ))
166 | ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
167 | 
168 | const ContextMenuShortcut = ({
169 |   className,
170 |   ...props
171 | }: React.HTMLAttributes<HTMLSpanElement>) => {
172 |   return (
173 |     <span
174 |       className={cn(
175 |         "ml-auto text-xs tracking-widest text-muted-foreground",
176 |         className
177 |       )}
178 |       {...props}
179 |     />
180 |   )
181 | }
182 | ContextMenuShortcut.displayName = "ContextMenuShortcut"
183 | 
184 | export {
185 |   ContextMenu,
186 |   ContextMenuTrigger,
187 |   ContextMenuContent,
188 |   ContextMenuItem,
189 |   ContextMenuCheckboxItem,
190 |   ContextMenuRadioItem,
191 |   ContextMenuLabel,
192 |   ContextMenuSeparator,
193 |   ContextMenuShortcut,
194 |   ContextMenuGroup,
195 |   ContextMenuPortal,
196 |   ContextMenuSub,
197 |   ContextMenuSubContent,
198 |   ContextMenuSubTrigger,
199 |   ContextMenuRadioGroup,
200 | }
201 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 -->
  2 | 
  3 | <a id="readme-top"></a>
  4 | 
  5 | <!--
  6 | *** Thanks for checking out the Best-README-Template. If you have a suggestion
  7 | *** that would make this better, please fork the repo and create a pull request
  8 | *** or simply open an issue with the tag "enhancement".
  9 | *** Don't forget to give the project a star!
 10 | *** Thanks again! Now go create something AMAZING! :D
 11 | -->
 12 | 
 13 | <!-- PROJECT SHIELDS -->
 14 | <!--
 15 | *** I'm using markdown "reference style" links for readability.
 16 | *** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
 17 | *** See the bottom of this document for the declaration of the reference variables
 18 | *** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
 19 | *** https://www.markdownguide.org/basic-syntax/#reference-style-links
 20 | -->
 21 | 
 22 | [![Contributors][contributors-shield]][contributors-url]
 23 | [![Forks][forks-shield]][forks-url]
 24 | [![Stargazers][stars-shield]][stars-url]
 25 | [![Issues][issues-shield]][issues-url]
 26 | [![AGPL-3.0 License][license-shield]][license-url]
 27 | 
 28 | <!-- PROJECT LOGO -->
 29 | <br />
 30 | <div align="center">
 31 |   <a href="https://github.com/celerforge/freenote">
 32 |     <img src="public/logo.png" alt="Logo" width="80" height="80">
 33 |   </a>
 34 | 
 35 |   <h3 align="center">Freenote</h3>
 36 | 
 37 |   <p align="center">
 38 |     An open-source AI journal app with Markdown support
 39 |     <br />
 40 |     <a href="https://freenote.app" style="display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 5px; font-weight: bold;"><strong>Visit Freenote App</strong></a>
 41 |     <br />
 42 |     <br />
 43 |     <a href="https://github.com/celerforge/freenote/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
 44 |     &middot;
 45 |     <a href="https://github.com/celerforge/freenote/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>
 46 |     &middot;
 47 |     <a href="README.cn.md">中文文档</a>
 48 |   </p>
 49 | </div>
 50 | 
 51 | <!-- TABLE OF CONTENTS -->
 52 | <details>
 53 |   <summary>Table of Contents</summary>
 54 |   <ol>
 55 |     <li><a href="#about-the-project">About The Project</a></li>
 56 |     <li><a href="#usage">Usage</a></li>
 57 |     <li>
 58 |       <a href="#getting-started">Getting Started</a>
 59 |       <ul>
 60 |         <li><a href="#prerequisites">Prerequisites</a></li>
 61 |         <li><a href="#installation">Installation</a></li>
 62 |       </ul>
 63 |     </li>
 64 |     <li><a href="#roadmap">Roadmap</a></li>
 65 |     <li><a href="#contributing">Contributing</a></li>
 66 |     <li><a href="#license">License</a></li>
 67 |     <li><a href="#contact">Contact</a></li>
 68 |   </ol>
 69 | </details>
 70 | 
 71 | <!-- ABOUT THE PROJECT -->
 72 | 
 73 | ## About The Project
 74 | 
 75 | [![Freenote Screen Shot][product-screenshot]](https://freenote.app)
 76 | 
 77 | Freenote is an open-source AI journal app with Markdown support. You can freely record your notes, and with AI assistance, easily search and summarize past entries, enhancing creativity capture and management. All data is stored locally on your device, ensuring privacy and security.
 78 | 
 79 | ### Key Features
 80 | 
 81 | - **Markdown Editor**: Rich formatting with intuitive shortcuts
 82 | - **AI Assistant**: Search and summarize your notes intelligently
 83 | - **Privacy First**: All data stored locally on your device
 84 | - **Distraction-Free**: Clean interface focused on writing
 85 | 
 86 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 87 | 
 88 | <!-- USAGE EXAMPLES -->
 89 | 
 90 | ## Usage
 91 | 
 92 | ### Basic Usage
 93 | 
 94 | 1. Click on the Journal section to write notes with Markdown
 95 | 2. Use Markdown shortcuts for formatting:
 96 |    - Type `#` to `######` for headings (H1-H6)
 97 |    - Type `*` or `-` for bullet lists
 98 |    - Type `>` for blockquotes
 99 |    - Select text + `Ctrl/Cmd+B` for bold, `Ctrl/Cmd+I` for italic
100 |    - Type `` ` `` for inline code, or ` ` ``` for code blocks
101 | 
102 | ### AI Features
103 | 
104 | 1. Go to Settings → Add your OpenAI API key
105 | 2. Use Chat to ask questions about your notes
106 | 3. Search across all entries with AI assistance
107 | 
108 | **Note:** AI features require an OpenAI API key
109 | 
110 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
111 | 
112 | <!-- GETTING STARTED -->
113 | 
114 | ## Getting Started
115 | 
116 | To get a local copy up and running, follow these simple steps.
117 | 
118 | ### Prerequisites
119 | 
120 | - Node.js (v18 or higher)
121 | - npm or pnpm
122 |   ```sh
123 |   npm install npm@latest -g
124 |   # or
125 |   npm install -g pnpm
126 |   ```
127 | 
128 | ### Installation
129 | 
130 | 1. Clone the repo
131 |    ```sh
132 |    git clone https://github.com/celerforge/freenote.git
133 |    ```
134 | 2. Install dependencies
135 |    ```sh
136 |    cd freenote
137 |    pnpm install
138 |    ```
139 | 3. Create environment configuration
140 |    ```sh
141 |    cp .env.example .env
142 |    ```
143 | 4. Start the development server
144 |    ```sh
145 |    pnpm dev
146 |    ```
147 | 
148 | ### Docker Deployment
149 | 
150 | You can also run Freenote using Docker:
151 | 
152 | 1. Build the Docker image
153 | 
154 |    ```sh
155 |    docker build -t freenote .
156 |    ```
157 | 
158 | 2. Run the container
159 | 
160 |    ```sh
161 |    docker run -p 3000:3000 freenote
162 |    ```
163 | 
164 | 3. Access the application at http://localhost:3000
165 | 
166 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
167 | 
168 | <!-- ROADMAP -->
169 | 
170 | ## Roadmap
171 | 
172 | - [ ] Enhanced AI Tools
173 |   - [ ] AI summarization tool for keyword searches with related notes and connections
174 |   - [ ] AI-powered knowledge base generation from notes
175 | - [ ] Storage code readability optimization
176 | - [ ] Note import/export functionality
177 | - [ ] Multi-device data synchronization
178 | - [ ] Add desktop app using Tauri
179 | - [ ] Add tags to notes
180 | 
181 | See the [open issues](https://github.com/celerforge/freenote/issues) for a full list of proposed features and known issues.
182 | 
183 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
184 | 
185 | <!-- CONTRIBUTING -->
186 | 
187 | ## Contributing
188 | 
189 | Contributions make the open source community an amazing place to learn, inspire, and create. Any contributions are greatly appreciated.
190 | 
191 | 1. Fork the Project
192 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
193 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
194 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
195 | 5. Open a Pull Request
196 | 
197 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
198 | 
199 | <!-- LICENSE -->
200 | 
201 | ## License
202 | 
203 | Distributed under the AGPL-3.0 License. See `LICENSE` for more information.
204 | 
205 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
206 | 
207 | ## Star History
208 | 
209 | [![Star History Chart](https://api.star-history.com/svg?repos=celerforge-dev/freenote&type=Date)](https://www.star-history.com/#celerforge-dev/freenote&Date)
210 | 
211 | <!-- MARKDOWN LINKS & IMAGES -->
212 | <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
213 | 
214 | [contributors-shield]: https://img.shields.io/github/contributors/celerforge/freenote.svg?style=for-the-badge
215 | [contributors-url]: https://github.com/celerforge/freenote/graphs/contributors
216 | [forks-shield]: https://img.shields.io/github/forks/celerforge/freenote.svg?style=for-the-badge
217 | [forks-url]: https://github.com/celerforge/freenote/network/members
218 | [stars-shield]: https://img.shields.io/github/stars/celerforge/freenote.svg?style=for-the-badge
219 | [stars-url]: https://github.com/celerforge/freenote/stargazers
220 | [issues-shield]: https://img.shields.io/github/issues/celerforge/freenote.svg?style=for-the-badge
221 | [issues-url]: https://github.com/celerforge/freenote/issues
222 | [license-shield]: https://img.shields.io/github/license/celerforge/freenote.svg?style=for-the-badge
223 | [license-url]: https://github.com/celerforge/freenote/blob/main/LICENSE
224 | [product-screenshot]: public/screenshot.jpeg
225 | 


--------------------------------------------------------------------------------
/src/components/app-sidebar.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Icons } from "@/components/icons";
  4 | import { Logo } from "@/components/logo";
  5 | import {
  6 |   AlertDialog,
  7 |   AlertDialogAction,
  8 |   AlertDialogCancel,
  9 |   AlertDialogContent,
 10 |   AlertDialogDescription,
 11 |   AlertDialogFooter,
 12 |   AlertDialogHeader,
 13 |   AlertDialogTitle,
 14 |   AlertDialogTrigger,
 15 | } from "@/components/ui/alert-dialog";
 16 | import {
 17 |   Collapsible,
 18 |   CollapsibleContent,
 19 |   CollapsibleTrigger,
 20 | } from "@/components/ui/collapsible";
 21 | import {
 22 |   ContextMenu,
 23 |   ContextMenuContent,
 24 |   ContextMenuItem,
 25 |   ContextMenuTrigger,
 26 | } from "@/components/ui/context-menu";
 27 | import {
 28 |   Sidebar,
 29 |   SidebarContent,
 30 |   SidebarFooter,
 31 |   SidebarGroup,
 32 |   SidebarGroupLabel,
 33 |   SidebarHeader,
 34 |   SidebarMenu,
 35 |   SidebarMenuButton,
 36 |   SidebarMenuItem,
 37 |   SidebarMenuSub,
 38 |   SidebarMenuSubButton,
 39 |   SidebarMenuSubItem,
 40 | } from "@/components/ui/sidebar";
 41 | import { useChatStore } from "@/contexts/chat-store";
 42 | import Link from "next/link";
 43 | import { usePathname, useRouter } from "next/navigation";
 44 | 
 45 | export function AppSidebar() {
 46 |   const pathname = usePathname();
 47 |   const router = useRouter();
 48 |   const { chats, isLoading, deleteChat } = useChatStore();
 49 | 
 50 |   const handleDelete = async (chatId: string) => {
 51 |     await deleteChat(chatId);
 52 |     router.push("/chat");
 53 |   };
 54 | 
 55 |   return (
 56 |     <Sidebar>
 57 |       <SidebarHeader className="px-4 pt-4">
 58 |         <Logo />
 59 |       </SidebarHeader>
 60 |       <SidebarContent>
 61 |         <SidebarGroup>
 62 |           <SidebarGroupLabel>Notes</SidebarGroupLabel>
 63 |           <SidebarMenu className="mb-1">
 64 |             <SidebarMenuItem>
 65 |               <SidebarMenuButton asChild isActive={pathname === "/"}>
 66 |                 <Link href="/">
 67 |                   <Icons.notebookPen />
 68 |                   <span>Journal</span>
 69 |                 </Link>
 70 |               </SidebarMenuButton>
 71 |             </SidebarMenuItem>
 72 |           </SidebarMenu>
 73 |           <SidebarMenu>
 74 |             <SidebarMenuItem>
 75 |               <SidebarMenuButton asChild isActive={pathname === "/knowledge"}>
 76 |                 <Link href="/knowledge">
 77 |                   <Icons.bookOpenText />
 78 |                   <span>Knowledge</span>
 79 |                 </Link>
 80 |               </SidebarMenuButton>
 81 |             </SidebarMenuItem>
 82 |           </SidebarMenu>
 83 |         </SidebarGroup>
 84 |         <SidebarGroup>
 85 |           <SidebarGroupLabel>AI</SidebarGroupLabel>
 86 |           <SidebarMenu>
 87 |             <Collapsible className="group/collapsible" defaultOpen={false}>
 88 |               <SidebarMenuItem>
 89 |                 <SidebarMenuButton
 90 |                   isActive={pathname === "/chat"}
 91 |                   className="group/chat flex"
 92 |                 >
 93 |                   <div className="flex h-4 w-4 items-center justify-center">
 94 |                     <Icons.botMessageSquare className="block transition-opacity duration-200 group-hover/chat:hidden" />
 95 |                     <CollapsibleTrigger asChild>
 96 |                       <Icons.chevronRight className="-ml-1 hidden h-5 w-5 rounded transition-transform duration-200 hover:bg-neutral-200 group-hover/chat:block group-data-[state=open]/collapsible:rotate-90" />
 97 |                     </CollapsibleTrigger>
 98 |                   </div>
 99 |                   <Link
100 |                     href="/chat"
101 |                     className="flex flex-1 items-center justify-between"
102 |                     title="New chat"
103 |                   >
104 |                     Chat
105 |                     <Icons.circlePlus className="hidden h-4 w-4 group-hover/chat:block" />
106 |                   </Link>
107 |                 </SidebarMenuButton>
108 |                 <CollapsibleContent>
109 |                   <SidebarMenuSub>
110 |                     {isLoading ? (
111 |                       <SidebarMenuSubItem>
112 |                         <div className="px-4 py-2 text-sm text-muted-foreground">
113 |                           Loading chats...
114 |                         </div>
115 |                       </SidebarMenuSubItem>
116 |                     ) : chats.length === 0 ? (
117 |                       <SidebarMenuSubItem>
118 |                         <div className="px-4 py-2 text-sm text-muted-foreground">
119 |                           No chats yet
120 |                         </div>
121 |                       </SidebarMenuSubItem>
122 |                     ) : (
123 |                       chats.map((chat) => (
124 |                         <SidebarMenuSubItem key={chat.id}>
125 |                           <AlertDialog>
126 |                             <ContextMenu>
127 |                               <ContextMenuTrigger>
128 |                                 <SidebarMenuSubButton
129 |                                   asChild
130 |                                   isActive={pathname === `/chat/${chat.id}`}
131 |                                 >
132 |                                   <Link href={`/chat/${chat.id}`}>
133 |                                     <span>{chat.title}</span>
134 |                                   </Link>
135 |                                 </SidebarMenuSubButton>
136 |                               </ContextMenuTrigger>
137 |                               <ContextMenuContent>
138 |                                 <ContextMenuItem>
139 |                                   <AlertDialogTrigger className="w-full text-left text-destructive">
140 |                                     Delete Chat
141 |                                   </AlertDialogTrigger>
142 |                                 </ContextMenuItem>
143 |                               </ContextMenuContent>
144 |                             </ContextMenu>
145 |                             <AlertDialogContent>
146 |                               <AlertDialogHeader>
147 |                                 <AlertDialogTitle>
148 |                                   Are you sure?
149 |                                 </AlertDialogTitle>
150 |                                 <AlertDialogDescription>
151 |                                   This action cannot be undone. This will
152 |                                   permanently delete this chat and all its
153 |                                   messages.
154 |                                 </AlertDialogDescription>
155 |                               </AlertDialogHeader>
156 |                               <AlertDialogFooter>
157 |                                 <AlertDialogCancel>Cancel</AlertDialogCancel>
158 |                                 <AlertDialogAction
159 |                                   onClick={() => handleDelete(chat.id)}
160 |                                 >
161 |                                   Delete
162 |                                 </AlertDialogAction>
163 |                               </AlertDialogFooter>
164 |                             </AlertDialogContent>
165 |                           </AlertDialog>
166 |                         </SidebarMenuSubItem>
167 |                       ))
168 |                     )}
169 |                   </SidebarMenuSub>
170 |                 </CollapsibleContent>
171 |               </SidebarMenuItem>
172 |             </Collapsible>
173 |           </SidebarMenu>
174 |         </SidebarGroup>
175 |         <SidebarGroup>
176 |           <SidebarMenu>
177 |             <SidebarMenuItem>
178 |               <SidebarMenuButton asChild isActive={pathname === "/settings"}>
179 |                 <Link href="/settings" scroll={false}>
180 |                   <Icons.settings />
181 |                   <span>Settings</span>
182 |                 </Link>
183 |               </SidebarMenuButton>
184 |             </SidebarMenuItem>
185 |           </SidebarMenu>
186 |         </SidebarGroup>
187 |       </SidebarContent>
188 |       <SidebarFooter>
189 |         <div className="flex items-center gap-2 p-2">
190 |           <Link
191 |             href="https://github.com/celerforge/freenote"
192 |             target="_blank"
193 |             rel="noopener noreferrer"
194 |             className="text-secondary-foreground transition-colors hover:text-sidebar-accent-foreground"
195 |             title="GitHub"
196 |           >
197 |             <Icons.github className="h-5 w-5" />
198 |           </Link>
199 |           <Link
200 |             href="https://github.com/celerforge/freenote/issues/new"
201 |             target="_blank"
202 |             rel="noopener noreferrer"
203 |             className="text-secondary-foreground transition-colors hover:text-sidebar-accent-foreground"
204 |             title="FAQ & Help"
205 |           >
206 |             <Icons.circleHelp className="h-5 w-5" />
207 |           </Link>
208 |         </div>
209 |       </SidebarFooter>
210 |     </Sidebar>
211 |   );
212 | }
213 | 


--------------------------------------------------------------------------------
/src/components/ui/sidebar.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Slot } from "@radix-ui/react-slot";
  4 | import { VariantProps, cva } from "class-variance-authority";
  5 | import { PanelLeft } from "lucide-react";
  6 | import * as React from "react";
  7 | 
  8 | import { Button } from "@/components/ui/button";
  9 | import { Input } from "@/components/ui/input";
 10 | import { Separator } from "@/components/ui/separator";
 11 | import {
 12 |   Sheet,
 13 |   SheetContent,
 14 |   SheetDescription,
 15 |   SheetHeader,
 16 |   SheetTitle,
 17 | } from "@/components/ui/sheet";
 18 | import { Skeleton } from "@/components/ui/skeleton";
 19 | import {
 20 |   Tooltip,
 21 |   TooltipContent,
 22 |   TooltipProvider,
 23 |   TooltipTrigger,
 24 | } from "@/components/ui/tooltip";
 25 | import { useIsMobile } from "@/hooks/use-mobile";
 26 | import { cn } from "@/lib/utils";
 27 | 
 28 | const SIDEBAR_COOKIE_NAME = "sidebar:state";
 29 | const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 30 | const SIDEBAR_WIDTH = "16rem";
 31 | const SIDEBAR_WIDTH_MOBILE = "18rem";
 32 | const SIDEBAR_WIDTH_ICON = "3rem";
 33 | const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 34 | 
 35 | type SidebarContext = {
 36 |   state: "expanded" | "collapsed";
 37 |   open: boolean;
 38 |   setOpen: (open: boolean) => void;
 39 |   openMobile: boolean;
 40 |   setOpenMobile: (open: boolean) => void;
 41 |   isMobile: boolean;
 42 |   toggleSidebar: () => void;
 43 | };
 44 | 
 45 | const SidebarContext = React.createContext<SidebarContext | null>(null);
 46 | 
 47 | function useSidebar() {
 48 |   const context = React.useContext(SidebarContext);
 49 |   if (!context) {
 50 |     throw new Error("useSidebar must be used within a SidebarProvider.");
 51 |   }
 52 | 
 53 |   return context;
 54 | }
 55 | 
 56 | const SidebarProvider = React.forwardRef<
 57 |   HTMLDivElement,
 58 |   React.ComponentProps<"div"> & {
 59 |     defaultOpen?: boolean;
 60 |     open?: boolean;
 61 |     onOpenChange?: (open: boolean) => void;
 62 |   }
 63 | >(
 64 |   (
 65 |     {
 66 |       defaultOpen = true,
 67 |       open: openProp,
 68 |       onOpenChange: setOpenProp,
 69 |       className,
 70 |       style,
 71 |       children,
 72 |       ...props
 73 |     },
 74 |     ref,
 75 |   ) => {
 76 |     const isMobile = useIsMobile();
 77 |     const [openMobile, setOpenMobile] = React.useState(false);
 78 | 
 79 |     // This is the internal state of the sidebar.
 80 |     // We use openProp and setOpenProp for control from outside the component.
 81 |     const [_open, _setOpen] = React.useState(defaultOpen);
 82 |     const open = openProp ?? _open;
 83 |     const setOpen = React.useCallback(
 84 |       (value: boolean | ((value: boolean) => boolean)) => {
 85 |         const openState = typeof value === "function" ? value(open) : value;
 86 |         if (setOpenProp) {
 87 |           setOpenProp(openState);
 88 |         } else {
 89 |           _setOpen(openState);
 90 |         }
 91 | 
 92 |         // This sets the cookie to keep the sidebar state.
 93 |         document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 94 |       },
 95 |       [setOpenProp, open],
 96 |     );
 97 | 
 98 |     // Helper to toggle the sidebar.
 99 |     const toggleSidebar = React.useCallback(() => {
100 |       return isMobile
101 |         ? setOpenMobile((open) => !open)
102 |         : setOpen((open) => !open);
103 |     }, [isMobile, setOpen, setOpenMobile]);
104 | 
105 |     // Adds a keyboard shortcut to toggle the sidebar.
106 |     React.useEffect(() => {
107 |       const handleKeyDown = (event: KeyboardEvent) => {
108 |         if (
109 |           event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
110 |           (event.metaKey || event.ctrlKey)
111 |         ) {
112 |           event.preventDefault();
113 |           toggleSidebar();
114 |         }
115 |       };
116 | 
117 |       window.addEventListener("keydown", handleKeyDown);
118 |       return () => window.removeEventListener("keydown", handleKeyDown);
119 |     }, [toggleSidebar]);
120 | 
121 |     // We add a state so that we can do data-state="expanded" or "collapsed".
122 |     // This makes it easier to style the sidebar with Tailwind classes.
123 |     const state = open ? "expanded" : "collapsed";
124 | 
125 |     const contextValue = React.useMemo<SidebarContext>(
126 |       () => ({
127 |         state,
128 |         open,
129 |         setOpen,
130 |         isMobile,
131 |         openMobile,
132 |         setOpenMobile,
133 |         toggleSidebar,
134 |       }),
135 |       [
136 |         state,
137 |         open,
138 |         setOpen,
139 |         isMobile,
140 |         openMobile,
141 |         setOpenMobile,
142 |         toggleSidebar,
143 |       ],
144 |     );
145 | 
146 |     return (
147 |       <SidebarContext.Provider value={contextValue}>
148 |         <TooltipProvider delayDuration={0}>
149 |           <div
150 |             style={
151 |               {
152 |                 "--sidebar-width": SIDEBAR_WIDTH,
153 |                 "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
154 |                 ...style,
155 |               } as React.CSSProperties
156 |             }
157 |             className={cn(
158 |               "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
159 |               className,
160 |             )}
161 |             ref={ref}
162 |             {...props}
163 |           >
164 |             {children}
165 |           </div>
166 |         </TooltipProvider>
167 |       </SidebarContext.Provider>
168 |     );
169 |   },
170 | );
171 | SidebarProvider.displayName = "SidebarProvider";
172 | 
173 | const Sidebar = React.forwardRef<
174 |   HTMLDivElement,
175 |   React.ComponentProps<"div"> & {
176 |     side?: "left" | "right";
177 |     variant?: "sidebar" | "floating" | "inset";
178 |     collapsible?: "offcanvas" | "icon" | "none";
179 |   }
180 | >(
181 |   (
182 |     {
183 |       side = "left",
184 |       variant = "sidebar",
185 |       collapsible = "offcanvas",
186 |       className,
187 |       children,
188 |       ...props
189 |     },
190 |     ref,
191 |   ) => {
192 |     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
193 | 
194 |     if (collapsible === "none") {
195 |       return (
196 |         <div
197 |           className={cn(
198 |             "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
199 |             className,
200 |           )}
201 |           ref={ref}
202 |           {...props}
203 |         >
204 |           {children}
205 |         </div>
206 |       );
207 |     }
208 | 
209 |     if (isMobile) {
210 |       return (
211 |         <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
212 |           <SheetContent
213 |             data-sidebar="sidebar"
214 |             data-mobile="true"
215 |             className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
216 |             style={
217 |               {
218 |                 "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
219 |               } as React.CSSProperties
220 |             }
221 |             side={side}
222 |           >
223 |             <SheetHeader className="sr-only">
224 |               <SheetTitle>Sidebar</SheetTitle>
225 |               <SheetDescription>Sidebar</SheetDescription>
226 |             </SheetHeader>
227 |             <div className="flex h-full w-full flex-col">{children}</div>
228 |           </SheetContent>
229 |         </Sheet>
230 |       );
231 |     }
232 | 
233 |     return (
234 |       <div
235 |         ref={ref}
236 |         className="group peer hidden text-sidebar-foreground md:block"
237 |         data-state={state}
238 |         data-collapsible={state === "collapsed" ? collapsible : ""}
239 |         data-variant={variant}
240 |         data-side={side}
241 |       >
242 |         {/* This is what handles the sidebar gap on desktop */}
243 |         <div
244 |           className={cn(
245 |             "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
246 |             "group-data-[collapsible=offcanvas]:w-0",
247 |             "group-data-[side=right]:rotate-180",
248 |             variant === "floating" || variant === "inset"
249 |               ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
250 |               : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
251 |           )}
252 |         />
253 |         <div
254 |           className={cn(
255 |             "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
256 |             side === "left"
257 |               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
258 |               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
259 |             // Adjust the padding for floating and inset variants.
260 |             variant === "floating" || variant === "inset"
261 |               ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
262 |               : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
263 |             className,
264 |           )}
265 |           {...props}
266 |         >
267 |           <div
268 |             data-sidebar="sidebar"
269 |             className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
270 |           >
271 |             {children}
272 |           </div>
273 |         </div>
274 |       </div>
275 |     );
276 |   },
277 | );
278 | Sidebar.displayName = "Sidebar";
279 | 
280 | const SidebarTrigger = React.forwardRef<
281 |   React.ElementRef<typeof Button>,
282 |   React.ComponentProps<typeof Button>
283 | >(({ className, onClick, ...props }, ref) => {
284 |   const { toggleSidebar } = useSidebar();
285 | 
286 |   return (
287 |     <Button
288 |       ref={ref}
289 |       data-sidebar="trigger"
290 |       variant="ghost"
291 |       size="icon"
292 |       className={cn("h-7 w-7", className)}
293 |       onClick={(event) => {
294 |         onClick?.(event);
295 |         toggleSidebar();
296 |       }}
297 |       {...props}
298 |     >
299 |       <PanelLeft />
300 |       <span className="sr-only">Toggle Sidebar</span>
301 |     </Button>
302 |   );
303 | });
304 | SidebarTrigger.displayName = "SidebarTrigger";
305 | 
306 | const SidebarRail = React.forwardRef<
307 |   HTMLButtonElement,
308 |   React.ComponentProps<"button">
309 | >(({ className, ...props }, ref) => {
310 |   const { toggleSidebar } = useSidebar();
311 | 
312 |   return (
313 |     <button
314 |       ref={ref}
315 |       data-sidebar="rail"
316 |       aria-label="Toggle Sidebar"
317 |       tabIndex={-1}
318 |       onClick={toggleSidebar}
319 |       title="Toggle Sidebar"
320 |       className={cn(
321 |         "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
322 |         "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
323 |         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
324 |         "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
325 |         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
326 |         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
327 |         className,
328 |       )}
329 |       {...props}
330 |     />
331 |   );
332 | });
333 | SidebarRail.displayName = "SidebarRail";
334 | 
335 | const SidebarInset = React.forwardRef<
336 |   HTMLDivElement,
337 |   React.ComponentProps<"main">
338 | >(({ className, ...props }, ref) => {
339 |   return (
340 |     <main
341 |       ref={ref}
342 |       className={cn(
343 |         "relative flex min-h-svh flex-1 flex-col bg-background",
344 |         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
345 |         className,
346 |       )}
347 |       {...props}
348 |     />
349 |   );
350 | });
351 | SidebarInset.displayName = "SidebarInset";
352 | 
353 | const SidebarInput = React.forwardRef<
354 |   React.ElementRef<typeof Input>,
355 |   React.ComponentProps<typeof Input>
356 | >(({ className, ...props }, ref) => {
357 |   return (
358 |     <Input
359 |       ref={ref}
360 |       data-sidebar="input"
361 |       className={cn(
362 |         "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
363 |         className,
364 |       )}
365 |       {...props}
366 |     />
367 |   );
368 | });
369 | SidebarInput.displayName = "SidebarInput";
370 | 
371 | const SidebarHeader = React.forwardRef<
372 |   HTMLDivElement,
373 |   React.ComponentProps<"div">
374 | >(({ className, ...props }, ref) => {
375 |   return (
376 |     <div
377 |       ref={ref}
378 |       data-sidebar="header"
379 |       className={cn("flex flex-col gap-2 p-2", className)}
380 |       {...props}
381 |     />
382 |   );
383 | });
384 | SidebarHeader.displayName = "SidebarHeader";
385 | 
386 | const SidebarFooter = React.forwardRef<
387 |   HTMLDivElement,
388 |   React.ComponentProps<"div">
389 | >(({ className, ...props }, ref) => {
390 |   return (
391 |     <div
392 |       ref={ref}
393 |       data-sidebar="footer"
394 |       className={cn("flex flex-col gap-2 p-2", className)}
395 |       {...props}
396 |     />
397 |   );
398 | });
399 | SidebarFooter.displayName = "SidebarFooter";
400 | 
401 | const SidebarSeparator = React.forwardRef<
402 |   React.ElementRef<typeof Separator>,
403 |   React.ComponentProps<typeof Separator>
404 | >(({ className, ...props }, ref) => {
405 |   return (
406 |     <Separator
407 |       ref={ref}
408 |       data-sidebar="separator"
409 |       className={cn("mx-2 w-auto bg-sidebar-border", className)}
410 |       {...props}
411 |     />
412 |   );
413 | });
414 | SidebarSeparator.displayName = "SidebarSeparator";
415 | 
416 | const SidebarContent = React.forwardRef<
417 |   HTMLDivElement,
418 |   React.ComponentProps<"div">
419 | >(({ className, ...props }, ref) => {
420 |   return (
421 |     <div
422 |       ref={ref}
423 |       data-sidebar="content"
424 |       className={cn(
425 |         "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
426 |         className,
427 |       )}
428 |       {...props}
429 |     />
430 |   );
431 | });
432 | SidebarContent.displayName = "SidebarContent";
433 | 
434 | const SidebarGroup = React.forwardRef<
435 |   HTMLDivElement,
436 |   React.ComponentProps<"div">
437 | >(({ className, ...props }, ref) => {
438 |   return (
439 |     <div
440 |       ref={ref}
441 |       data-sidebar="group"
442 |       className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
443 |       {...props}
444 |     />
445 |   );
446 | });
447 | SidebarGroup.displayName = "SidebarGroup";
448 | 
449 | const SidebarGroupLabel = React.forwardRef<
450 |   HTMLDivElement,
451 |   React.ComponentProps<"div"> & { asChild?: boolean }
452 | >(({ className, asChild = false, ...props }, ref) => {
453 |   const Comp = asChild ? Slot : "div";
454 | 
455 |   return (
456 |     <Comp
457 |       ref={ref}
458 |       data-sidebar="group-label"
459 |       className={cn(
460 |         "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
461 |         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
462 |         className,
463 |       )}
464 |       {...props}
465 |     />
466 |   );
467 | });
468 | SidebarGroupLabel.displayName = "SidebarGroupLabel";
469 | 
470 | const SidebarGroupAction = React.forwardRef<
471 |   HTMLButtonElement,
472 |   React.ComponentProps<"button"> & { asChild?: boolean }
473 | >(({ className, asChild = false, ...props }, ref) => {
474 |   const Comp = asChild ? Slot : "button";
475 | 
476 |   return (
477 |     <Comp
478 |       ref={ref}
479 |       data-sidebar="group-action"
480 |       className={cn(
481 |         "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
482 |         // Increases the hit area of the button on mobile.
483 |         "after:absolute after:-inset-2 after:md:hidden",
484 |         "group-data-[collapsible=icon]:hidden",
485 |         className,
486 |       )}
487 |       {...props}
488 |     />
489 |   );
490 | });
491 | SidebarGroupAction.displayName = "SidebarGroupAction";
492 | 
493 | const SidebarGroupContent = React.forwardRef<
494 |   HTMLDivElement,
495 |   React.ComponentProps<"div">
496 | >(({ className, ...props }, ref) => (
497 |   <div
498 |     ref={ref}
499 |     data-sidebar="group-content"
500 |     className={cn("w-full text-sm", className)}
501 |     {...props}
502 |   />
503 | ));
504 | SidebarGroupContent.displayName = "SidebarGroupContent";
505 | 
506 | const SidebarMenu = React.forwardRef<
507 |   HTMLUListElement,
508 |   React.ComponentProps<"ul">
509 | >(({ className, ...props }, ref) => (
510 |   <ul
511 |     ref={ref}
512 |     data-sidebar="menu"
513 |     className={cn("flex w-full min-w-0 flex-col gap-1", className)}
514 |     {...props}
515 |   />
516 | ));
517 | SidebarMenu.displayName = "SidebarMenu";
518 | 
519 | const SidebarMenuItem = React.forwardRef<
520 |   HTMLLIElement,
521 |   React.ComponentProps<"li">
522 | >(({ className, ...props }, ref) => (
523 |   <li
524 |     ref={ref}
525 |     data-sidebar="menu-item"
526 |     className={cn("group/menu-item relative", className)}
527 |     {...props}
528 |   />
529 | ));
530 | SidebarMenuItem.displayName = "SidebarMenuItem";
531 | 
532 | const sidebarMenuButtonVariants = cva(
533 |   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent font-medium text-secondary-foreground data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
534 |   {
535 |     variants: {
536 |       variant: {
537 |         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
538 |         outline:
539 |           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
540 |       },
541 |       size: {
542 |         default: "h-8 text-sm",
543 |         sm: "h-7 text-xs",
544 |         lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
545 |       },
546 |     },
547 |     defaultVariants: {
548 |       variant: "default",
549 |       size: "default",
550 |     },
551 |   },
552 | );
553 | 
554 | const SidebarMenuButton = React.forwardRef<
555 |   HTMLButtonElement,
556 |   React.ComponentProps<"button"> & {
557 |     asChild?: boolean;
558 |     isActive?: boolean;
559 |     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
560 |   } & VariantProps<typeof sidebarMenuButtonVariants>
561 | >(
562 |   (
563 |     {
564 |       asChild = false,
565 |       isActive = false,
566 |       variant = "default",
567 |       size = "default",
568 |       tooltip,
569 |       className,
570 |       ...props
571 |     },
572 |     ref,
573 |   ) => {
574 |     const Comp = asChild ? Slot : "button";
575 |     const { isMobile, state } = useSidebar();
576 | 
577 |     const button = (
578 |       <Comp
579 |         ref={ref}
580 |         data-sidebar="menu-button"
581 |         data-size={size}
582 |         data-active={isActive}
583 |         className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
584 |         {...props}
585 |       />
586 |     );
587 | 
588 |     if (!tooltip) {
589 |       return button;
590 |     }
591 | 
592 |     if (typeof tooltip === "string") {
593 |       tooltip = {
594 |         children: tooltip,
595 |       };
596 |     }
597 | 
598 |     return (
599 |       <Tooltip>
600 |         <TooltipTrigger asChild>{button}</TooltipTrigger>
601 |         <TooltipContent
602 |           side="right"
603 |           align="center"
604 |           hidden={state !== "collapsed" || isMobile}
605 |           {...tooltip}
606 |         />
607 |       </Tooltip>
608 |     );
609 |   },
610 | );
611 | SidebarMenuButton.displayName = "SidebarMenuButton";
612 | 
613 | const SidebarMenuAction = React.forwardRef<
614 |   HTMLButtonElement,
615 |   React.ComponentProps<"button"> & {
616 |     asChild?: boolean;
617 |     showOnHover?: boolean;
618 |   }
619 | >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
620 |   const Comp = asChild ? Slot : "button";
621 | 
622 |   return (
623 |     <Comp
624 |       ref={ref}
625 |       data-sidebar="menu-action"
626 |       className={cn(
627 |         "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
628 |         // Increases the hit area of the button on mobile.
629 |         "after:absolute after:-inset-2 after:md:hidden",
630 |         "peer-data-[size=sm]/menu-button:top-1",
631 |         "peer-data-[size=default]/menu-button:top-1.5",
632 |         "peer-data-[size=lg]/menu-button:top-2.5",
633 |         "group-data-[collapsible=icon]:hidden",
634 |         showOnHover &&
635 |           "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
636 |         className,
637 |       )}
638 |       {...props}
639 |     />
640 |   );
641 | });
642 | SidebarMenuAction.displayName = "SidebarMenuAction";
643 | 
644 | const SidebarMenuBadge = React.forwardRef<
645 |   HTMLDivElement,
646 |   React.ComponentProps<"div">
647 | >(({ className, ...props }, ref) => (
648 |   <div
649 |     ref={ref}
650 |     data-sidebar="menu-badge"
651 |     className={cn(
652 |       "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
653 |       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
654 |       "peer-data-[size=sm]/menu-button:top-1",
655 |       "peer-data-[size=default]/menu-button:top-1.5",
656 |       "peer-data-[size=lg]/menu-button:top-2.5",
657 |       "group-data-[collapsible=icon]:hidden",
658 |       className,
659 |     )}
660 |     {...props}
661 |   />
662 | ));
663 | SidebarMenuBadge.displayName = "SidebarMenuBadge";
664 | 
665 | const SidebarMenuSkeleton = React.forwardRef<
666 |   HTMLDivElement,
667 |   React.ComponentProps<"div"> & {
668 |     showIcon?: boolean;
669 |   }
670 | >(({ className, showIcon = false, ...props }, ref) => {
671 |   // Random width between 50 to 90%.
672 |   const width = React.useMemo(() => {
673 |     return `${Math.floor(Math.random() * 40) + 50}%`;
674 |   }, []);
675 | 
676 |   return (
677 |     <div
678 |       ref={ref}
679 |       data-sidebar="menu-skeleton"
680 |       className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
681 |       {...props}
682 |     >
683 |       {showIcon && (
684 |         <Skeleton
685 |           className="size-4 rounded-md"
686 |           data-sidebar="menu-skeleton-icon"
687 |         />
688 |       )}
689 |       <Skeleton
690 |         className="h-4 max-w-[--skeleton-width] flex-1"
691 |         data-sidebar="menu-skeleton-text"
692 |         style={
693 |           {
694 |             "--skeleton-width": width,
695 |           } as React.CSSProperties
696 |         }
697 |       />
698 |     </div>
699 |   );
700 | });
701 | SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
702 | 
703 | const SidebarMenuSub = React.forwardRef<
704 |   HTMLUListElement,
705 |   React.ComponentProps<"ul">
706 | >(({ className, ...props }, ref) => (
707 |   <ul
708 |     ref={ref}
709 |     data-sidebar="menu-sub"
710 |     className={cn(
711 |       "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
712 |       "group-data-[collapsible=icon]:hidden",
713 |       className,
714 |     )}
715 |     {...props}
716 |   />
717 | ));
718 | SidebarMenuSub.displayName = "SidebarMenuSub";
719 | 
720 | const SidebarMenuSubItem = React.forwardRef<
721 |   HTMLLIElement,
722 |   React.ComponentProps<"li">
723 | >(({ ...props }, ref) => <li ref={ref} {...props} />);
724 | SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
725 | 
726 | const SidebarMenuSubButton = React.forwardRef<
727 |   HTMLAnchorElement,
728 |   React.ComponentProps<"a"> & {
729 |     asChild?: boolean;
730 |     size?: "sm" | "md";
731 |     isActive?: boolean;
732 |   }
733 | >(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
734 |   const Comp = asChild ? Slot : "a";
735 | 
736 |   return (
737 |     <Comp
738 |       ref={ref}
739 |       data-sidebar="menu-sub-button"
740 |       data-size={size}
741 |       data-active={isActive}
742 |       className={cn(
743 |         "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
744 |         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
745 |         size === "sm" && "text-xs",
746 |         size === "md" && "text-sm",
747 |         "group-data-[collapsible=icon]:hidden",
748 |         className,
749 |       )}
750 |       {...props}
751 |     />
752 |   );
753 | });
754 | SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
755 | 
756 | export {
757 |   Sidebar,
758 |   SidebarContent,
759 |   SidebarFooter,
760 |   SidebarGroup,
761 |   SidebarGroupAction,
762 |   SidebarGroupContent,
763 |   SidebarGroupLabel,
764 |   SidebarHeader,
765 |   SidebarInput,
766 |   SidebarInset,
767 |   SidebarMenu,
768 |   SidebarMenuAction,
769 |   SidebarMenuBadge,
770 |   SidebarMenuButton,
771 |   SidebarMenuItem,
772 |   SidebarMenuSkeleton,
773 |   SidebarMenuSub,
774 |   SidebarMenuSubButton,
775 |   SidebarMenuSubItem,
776 |   SidebarProvider,
777 |   SidebarRail,
778 |   SidebarSeparator,
779 |   SidebarTrigger,
780 |   useSidebar,
781 | };
782 | 


--------------------------------------------------------------------------------