├── .eslintrc.json
├── bun.lockb
├── image.png
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── commit-mono.woff2
    │   ├── loading.tsx
    │   ├── page.tsx
    │   ├── layout.tsx
    │   ├── globals.css
    │   ├── icon.svg
    │   └── home.tsx
    ├── components
    │   ├── home
    │   │   ├── spacer.tsx
    │   │   ├── entries-container.tsx
    │   │   ├── container.tsx
    │   │   ├── footer.tsx
    │   │   ├── ai-button.tsx
    │   │   ├── day-progress.tsx
    │   │   ├── entry.tsx
    │   │   ├── ai-chat.tsx
    │   │   ├── entry-dialog.tsx
    │   │   └── header.tsx
    │   ├── theme-provider.tsx
    │   ├── current-time.tsx
    │   └── ui
    │   │   ├── theme-toggle.tsx
    │   │   ├── button.tsx
    │   │   ├── dialog.tsx
    │   │   ├── select.tsx
    │   │   └── dropdown-menu.tsx
    ├── lib
    │   ├── typings.d.ts
    │   ├── index-db.ts
    │   ├── utils.ts
    │   ├── llm.ts
    │   └── langchain.ts
    └── hooks
    │   └── use-local-storage.ts
├── postcss.config.js
├── kirimase.config.json
├── components.json
├── .gitignore
├── next.config.mjs
├── tsconfig.json
├── package.json
├── README.md
├── public
    └── kisahari.svg
└── tailwind.config.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xN1/kisahari/HEAD/bun.lockb


--------------------------------------------------------------------------------
/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xN1/kisahari/HEAD/image.png


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xN1/kisahari/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/commit-mono.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xN1/kisahari/HEAD/src/app/commit-mono.woff2


--------------------------------------------------------------------------------
/src/components/home/spacer.tsx:
--------------------------------------------------------------------------------
1 | export const Spacer = () => <div className="spacer my-1"></div>;
2 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/src/lib/typings.d.ts:
--------------------------------------------------------------------------------
1 | type JournalEntry = {
2 |   content: string;
3 |   created: string;
4 |   id: number;
5 |   title: string;
6 |   tldr: string;
7 |   updated: string;
8 | };
9 | 


--------------------------------------------------------------------------------
/kirimase.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hasSrc": true,
 3 |   "packages": [
 4 |     "shadcn-ui"
 5 |   ],
 6 |   "preferredPackageManager": "bun",
 7 |   "t3": false,
 8 |   "alias": "@",
 9 |   "rootPath": "src/",
10 |   "componentLib": "shadcn-ui",
11 |   "auth": null
12 | }


--------------------------------------------------------------------------------
/src/lib/index-db.ts:
--------------------------------------------------------------------------------
 1 | import Dexie from "dexie";
 2 | 
 3 | const db = new Dexie("kisahariDB");
 4 | db.version(1).stores({
 5 |   entries: "++id, title , content, tldr, created, updated",
 6 | });
 7 | 
 8 | const entries = db.table("entries");
 9 | 
10 | export { db, entries };
11 | 


--------------------------------------------------------------------------------
/src/app/loading.tsx:
--------------------------------------------------------------------------------
 1 | import Container from "@/components/home/container";
 2 | 
 3 | export default function Loading() {
 4 |   return (
 5 |     <Container className="justify-center">
 6 |       <img
 7 |         src="/icon.svg"
 8 |         alt="loading"
 9 |         className="w-[vw20] h-[vw20] animate-pulse"
10 |       />
11 |     </Container>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes";
 5 | import { type ThemeProviderProps } from "next-themes/dist/types";
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/home/entries-container.tsx:
--------------------------------------------------------------------------------
 1 | const EntriesContainer = ({ children }: { children: React.ReactNode }) => {
 2 |   return (
 3 |     <div
 4 |       className="flex-1 relative h-full flex flex-col gap-0 sm:gap-4 p-2 sm:p-4 md:p-8 lg:p-16 pt-[14vh] sm:pt-0 items-start w-full ring-1 ring-zinc-700
 5 |         overflow-y-auto max-h-[85vh] sm:max-h-[78vh] md:max-h-[82vh] rounded-sm scrollbar-thin scrollbar-thumb-zinc-800 scrollbar-track-transparent"
 6 |     >
 7 |       {children}
 8 |     </div>
 9 |   );
10 | };
11 | 
12 | export default EntriesContainer;
13 | 


--------------------------------------------------------------------------------
/.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.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/src/components/home/container.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | 
 3 | const Container = ({
 4 |   children,
 5 |   className,
 6 | }: {
 7 |   children: React.ReactNode;
 8 |   className?: string;
 9 | }) => {
10 |   return (
11 |     <main
12 |       className={cn(
13 |         "flex relative flex-col min-h-screen items-center justify-between w-full h-full p-2 sm:p-4 md:p-8 bg-zinc-100/15 dark:bg-zinc-900/10 font-extralight z-10 max-h-screen",
14 |         className
15 |       )}
16 |     >
17 |       {children}
18 |     </main>
19 |   );
20 | };
21 | 
22 | export default Container;
23 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import HomePage from "@/app/home";
 4 | import { useLiveQuery } from "dexie-react-hooks";
 5 | import { entries } from "@/lib/index-db";
 6 | 
 7 | export default function Home() {
 8 |   const allEntries = useLiveQuery(
 9 |     () => entries.toArray(),
10 |     [entries]
11 |   ) as JournalEntry[];
12 | 
13 |   const sortedEntries = allEntries?.sort(
14 |     (a, b) => new Date(b.created).getTime() - new Date(a.created).getTime()
15 |   );
16 | 
17 |   if (sortedEntries) {
18 |     return <HomePage entries={sortedEntries} />;
19 |   } else {
20 |     return <HomePage entries={[]} />;
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/components/current-time.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { formatDate } from "@/lib/utils";
 4 | import { useEffect, useState } from "react";
 5 | 
 6 | type Props = {};
 7 | 
 8 | const CurrentTime = (props: Props) => {
 9 |   const [currentTime, setCurrentTime] = useState<string>(
10 |     formatDate(new Date(), "time")
11 |   );
12 |   useEffect(() => {
13 |     const interval = setInterval(() => {
14 |       setCurrentTime(formatDate(new Date(), "time"));
15 |     }, 1000);
16 |     return () => clearInterval(interval);
17 |   });
18 |   return <div className="text-xs sm:text-sm">{currentTime}</div>;
19 | };
20 | 
21 | export default CurrentTime;
22 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   webpack: (config) => {
 4 |     config.resolve.alias = {
 5 |       ...config.resolve.alias,
 6 |       sharp$: false,
 7 |       "onnxruntime-node$": false,
 8 |       mongodb$: false,
 9 |       fs: false,
10 |     };
11 | 
12 |     return config;
13 |   },
14 | 
15 |   experimental: {
16 |     serverComponentsExternalPackages: [
17 |       //   "llamaindex",
18 |       "onnxruntime-node",
19 |       "sharp",
20 |       "mongodb",
21 |     ],
22 |     outputFileTracingIncludes: {
23 |       "/*": ["./cache/**/*"],
24 |     },
25 |   },
26 |   output: "export",
27 | };
28 | 
29 | export default nextConfig;
30 | 


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


--------------------------------------------------------------------------------
/src/components/home/footer.tsx:
--------------------------------------------------------------------------------
 1 | import EntryDialog from "@/components/home/entry-dialog";
 2 | 
 3 | const Footer = (data: {
 4 |   footer: {
 5 |     left_copy: string;
 6 |     right_copy: string;
 7 |   };
 8 | }) => {
 9 |   return (
10 |     <div className="flex flex-row justify-between w-full items-center ring-1 ring-zinc-700 px-2 sm:px-4 md:px-6 py-2 rounded-b-xl rounded-t-sm">
11 |       <div className="text-[10px] hidden sm:block sm:text-xs">
12 |         {data.footer.left_copy}
13 |       </div>
14 |       <EntryDialog />
15 |       <div className="text-[10px] sm:text-xs">
16 |         {data.footer.right_copy} <span>{new Date().getFullYear()}</span>
17 |       </div>
18 |     </div>
19 |   );
20 | };
21 | 
22 | export default Footer;
23 | 


--------------------------------------------------------------------------------
/src/components/home/ai-button.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | import { Atom } from "lucide-react";
 3 | 
 4 | const AIButton = ({
 5 |   showAI,
 6 |   setShowAI,
 7 | }: {
 8 |   showAI: boolean;
 9 |   setShowAI: (showAI: boolean) => void;
10 | }) => {
11 |   return (
12 |     <div className="absolute right-2 sm:right-4 md:right-8 sm:top-[14vh] top-[9vh]">
13 |       <button
14 |         onClick={() => {
15 |           setShowAI(!showAI);
16 |         }}
17 |         className={cn(
18 |           "bg-zinc-800 group transition-colors ease-in-out duration-200 hover:bg-lime-500 px-2 py-2 rounded-l-md",
19 |           showAI && "bg-lime-500 hover:bg-zinc-800"
20 |         )}
21 |       >
22 |         <Atom
23 |           className={cn(
24 |             "w-4 h-4 text-zinc-800 hover:text-lime-500 transition-colors ease-in-out duration-200 group-hover:text-lime-500",
25 |             !showAI &&
26 |               "text-lime-500 group-hover:text-zinc-800 animate-pulse duration-1000 ease-linear"
27 |           )}
28 |         />
29 |       </button>
30 |     </div>
31 |   );
32 | };
33 | 
34 | export default AIButton;
35 | 


--------------------------------------------------------------------------------
/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 const formatDate = (date: Date, option?: "all" | "time" | "date") => {
 9 |   // format in 22:11 - Tue 5 feb 24
10 |   const d = new Date(date);
11 |   const day = d.toLocaleString("en-US", { weekday: "short" });
12 |   const month = d.toLocaleString("en-US", { month: "short" });
13 |   const year = d.toLocaleString("en-US", { year: "2-digit" });
14 | 
15 |   const hour = d.getHours() < 10 ? `0${d.getHours()}` : d.getHours();
16 | 
17 |   const minute = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
18 |   const second = d.getSeconds() < 10 ? `0${d.getSeconds()}` : d.getSeconds();
19 | 
20 |   if (option === "time") {
21 |     return `${hour}:${minute}:${second}`;
22 |   }
23 | 
24 |   if (option === "date") {
25 |     return `${
26 |       d.getDate() < 10 ? "0" + d.getDate() : d.getDate()
27 |     } ${month} ${year}`;
28 |   }
29 | 
30 |   return `${hour}:${minute} - ${day} ${
31 |     d.getDate() < 10 ? "0" + d.getDate() : d.getDate()
32 |   } ${month} ${year}`;
33 | };
34 | 


--------------------------------------------------------------------------------
/src/components/ui/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { MoonIcon, SunIcon } from "lucide-react";
 5 | import { useTheme } from "next-themes";
 6 | 
 7 | import { Button } from "@/components/ui/button";
 8 | import {
 9 |   DropdownMenu,
10 |   DropdownMenuContent,
11 |   DropdownMenuItem,
12 |   DropdownMenuTrigger,
13 | } from "@/components/ui/dropdown-menu";
14 | 
15 | export function ModeToggle() {
16 |   const { setTheme } = useTheme();
17 | 
18 |   return (
19 |     <DropdownMenu>
20 |       <DropdownMenuTrigger asChild>
21 |         <Button variant="ghost" size="icon">
22 |           <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23 |           <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24 |           <span className="sr-only">Toggle theme</span>
25 |         </Button>
26 |       </DropdownMenuTrigger>
27 |       <DropdownMenuContent align="end">
28 |         <DropdownMenuItem onClick={() => setTheme("light")}>
29 |           <span className="font-mono">Light</span>
30 |         </DropdownMenuItem>
31 |         <DropdownMenuItem onClick={() => setTheme("dark")}>
32 |           <span className="font-mono">Dark</span>
33 |         </DropdownMenuItem>
34 |         <DropdownMenuItem onClick={() => setTheme("system")}>
35 |           <span className="font-mono">System</span>
36 |         </DropdownMenuItem>
37 |       </DropdownMenuContent>
38 |     </DropdownMenu>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "kisahari",
 3 |   "version": "0.4.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@langchain/community": "^0.0.27",
13 |     "@langchain/openai": "^0.0.14",
14 |     "@radix-ui/react-avatar": "^1.0.4",
15 |     "@radix-ui/react-dialog": "^1.0.5",
16 |     "@radix-ui/react-dropdown-menu": "^2.0.6",
17 |     "@radix-ui/react-label": "^2.0.2",
18 |     "@radix-ui/react-select": "^2.0.0",
19 |     "@radix-ui/react-slot": "^1.0.2",
20 |     "@radix-ui/react-toast": "^1.1.5",
21 |     "caniuse-lite": "^1.0.30001702",
22 |     "class-variance-authority": "^0.7.0",
23 |     "clsx": "^2.1.0",
24 |     "dexie": "^3.2.5",
25 |     "dexie-react-hooks": "^1.1.7",
26 |     "langchain": "^0.1.17",
27 |     "lucide-react": "^0.323.0",
28 |     "next": "14.1.0",
29 |     "next-themes": "^0.2.1",
30 |     "ollama": "^0.4.6",
31 |     "react": "^18",
32 |     "react-dom": "^18",
33 |     "tailwind-merge": "^2.2.1",
34 |     "tailwindcss-animate": "^1.0.7",
35 |     "usehooks-ts": "^2.14.0"
36 |   },
37 |   "devDependencies": {
38 |     "@tailwindcss/typography": "^0.5.10",
39 |     "@types/node": "^20",
40 |     "@types/react": "^18",
41 |     "@types/react-dom": "^18",
42 |     "autoprefixer": "^10.0.1",
43 |     "eslint": "^8",
44 |     "eslint-config-next": "14.1.0",
45 |     "postcss": "^8",
46 |     "tailwind-scrollbar": "^3.0.5",
47 |     "tailwindcss": "^3.3.0",
48 |     "typescript": "^5"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Alt text](image.png)
 2 | 
 3 | Kisahari, a personal journaling app where you can chat with your entries locally.
 4 | 
 5 | ## Motivation
 6 | 
 7 | A personal journal app where we keep the data locally, while having the power to chat with it using local LLM.
 8 | 
 9 | ## Features
10 | 
11 | - Minimal techy look
12 | - NextJS + TailwindCSS
13 | - Keyboard shortcut
14 | - Local LLM support through Ollama
15 | - Langchain for RAG
16 | - Local embedding
17 | - In-memory Vector DB
18 | - Entries stored in IndexedDB
19 | - Model selection for Ollama & OpenAI
20 | 
21 | ## Todo / Ideas
22 | 
23 | - [x] Option to use OpenAI API
24 | - [x] Model selection for OpenAI
25 | - [x] Mobile responsive design
26 | - [ ] Allow ollama model pull from within the app
27 | - [ ] Allow theme customization
28 | - [ ] Support markdown
29 | - [ ] Turn into PWA
30 | - [ ] Turn into Tauri app (Desktop)
31 | 
32 | ## Develop
33 | 
34 | clone the repo
35 | 
36 | ```
37 | git clone https://github.com/0xn1/kisahari.git
38 | ```
39 | 
40 | install dependencies
41 | 
42 | ```
43 | cd kisahari && bun i
44 | ```
45 | 
46 | run development server
47 | 
48 | ```
49 | bun run dev
50 | ```
51 | 
52 | build the app
53 | 
54 | ```
55 | bun run build
56 | ```
57 | 
58 | ## Contribute
59 | 
60 | Feel free to open issue and create PR :)
61 | 
62 | ## Contributors
63 | 
64 | [<img src="https://github.com/0xn1.png" width="48">](https://github.com/0xn1) [<img src="https://github.com/apikmeister.png" width="48">](https://github.com/apikmeister) [<img src="https://github.com/luqmanrom.png" width="48">](https://github.com/luqmanrom)
65 | 


--------------------------------------------------------------------------------
/src/components/home/day-progress.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | import { useEffect, useState } from "react";
 3 | 
 4 | const DayProgress = () => {
 5 |   const [progressWidth, setProgressWidth] = useState(0);
 6 | 
 7 |   const calcDayProgress = () => {
 8 |     const now = new Date();
 9 |     const start = new Date(now.getFullYear(), 0, 0);
10 |     const diff = now.getTime() - start.getTime();
11 |     const oneDay = 1000 * 60 * 60 * 24;
12 |     const day = Math.floor(diff / oneDay);
13 |     const year = now.getFullYear();
14 |     const daysInYear = year % 4 === 0 ? 366 : 365;
15 |     return (day / daysInYear) * 100;
16 |   };
17 | 
18 |   useEffect(() => {
19 |     setProgressWidth(calcDayProgress());
20 | 
21 |     const interval = setInterval(() => {
22 |       setProgressWidth(calcDayProgress());
23 |     }, 60000);
24 | 
25 |     return () => clearInterval(interval);
26 |   }, []);
27 | 
28 |   return (
29 |     <div className="w-full relative flex flex-row text-xs justify-between items-center">
30 |       <div className="w-full bg-zinc-800 h-3 sm:h-6 rounded-[2px] overflow-hidden">
31 |         <div
32 |           className="h-full bg-lime-400 rounded-[2px] text-zinc-800 transition-width duration-300"
33 |           style={{ width: `${progressWidth}%` }}
34 |         ></div>
35 |       </div>
36 |       <span
37 |         className={cn(
38 |           progressWidth > 92 ? "text-zinc-800" : "text-lime-400",
39 |           "absolute right-2 sm:right-4 md:right-6 font-medium text-[0.9em]"
40 |         )}
41 |       >
42 |         {progressWidth.toFixed(1)}%
43 |       </span>
44 |     </div>
45 |   );
46 | };
47 | 
48 | export default DayProgress;
49 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import "./globals.css";
 3 | import { ThemeProvider } from "@/components/theme-provider";
 4 | import localFont from "next/font/local";
 5 | import { ReactNode } from "react";
 6 | 
 7 | const commitMono = localFont({
 8 |   src: "./commit-mono.woff2",
 9 |   variable: "--font-commit-mono",
10 |   display: "swap",
11 | });
12 | 
13 | export const metadata: Metadata = {
14 |   title: "Kisahari",
15 |   description: "A personal journaling app.",
16 | };
17 | 
18 | export default function RootLayout({
19 |   children,
20 | }: Readonly<{
21 |   children: ReactNode;
22 | }>) {
23 |   return (
24 |     <html lang="en">
25 |       <body className={`${commitMono.variable}`}>
26 |         <ThemeProvider
27 |           attribute="class"
28 |           defaultTheme="dark"
29 |           enableSystem
30 |           disableTransitionOnChange
31 |         >
32 |           <div className="flex flex-col font-mono w-full h-screen selection:bg-lime-500 selection:text-zinc-800">
33 |             <main className="">
34 |               <Background />
35 |               {children}
36 |             </main>
37 |           </div>
38 |         </ThemeProvider>
39 |       </body>
40 |     </html>
41 |   );
42 | }
43 | 
44 | const Background = () => {
45 |   return (
46 |     <>
47 |       {/* <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#777_1px,transparent_1px),linear-gradient(to_bottom,#777_1px,transparent_1px)] bg-[size:60px_60px] pointer-events-none"></div> */}
48 |       <div className="fixed inset-0 -z-10 h-full w-full items-center px-5 py-24 [background:radial-gradient(200%_125%_at_50%_10%,#111_40%,#7d11_55%)] pointer-events-none" />
49 |       <div className="fixed inset-0 h-full w-full bg-transparent bg-[radial-gradient(#333_1px,transparent_1px)] [background-size:16px_16px] pointer-events-none -z-10" />
50 |     </>
51 |   );
52 | };
53 | 


--------------------------------------------------------------------------------
/src/components/home/entry.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Spacer } from "@/components/home/spacer";
 4 | import { cn } from "@/lib/utils";
 5 | import { useState } from "react";
 6 | 
 7 | const Entry = ({
 8 |   date,
 9 |   title,
10 |   content,
11 |   tldr,
12 | }: {
13 |   date: string;
14 |   title: string;
15 |   content: string;
16 |   tldr?: string;
17 | }) => {
18 |   const [closed, setClosed] = useState(false);
19 | 
20 |   return (
21 |     <>
22 |       <div
23 |         onClick={() => {
24 |           setClosed(!closed);
25 |         }}
26 |         className="flex flex-row items-center mt-2 sm:mt-0 gap-2 group cursor-pointer hover:text-lime-300 hover:animate-pulse transition-colors duration-200 ease-in-out"
27 |       >
28 |         <div className="p-2 sm:p-3 scale-50 ring-2 ring-zinc-500 group-hover:bg-lime-500 group-hover:ring-0 group-hover:animate-pulse rounded-full" />
29 |         <div
30 |           className={cn(
31 |             "uppercase text-xs sm:text-sm text-zinc-500 group-hover:text-lime-300",
32 |             !closed && "text-zinc-200"
33 |           )}
34 |         >
35 |           {date}
36 |         </div>
37 |       </div>
38 |       {!closed && (
39 |         <div
40 |           className="border-l-0 sm:border-l-2 px-6 sm:pl-4 md:pl-8 sm:ml-3 flex flex-col gap-2 sm:gap-4 text-xs sm:text-sm
41 |             text-zinc-300 whitespace-pre-line"
42 |         >
43 |           <Spacer />
44 |           <h1 className="uppercase text-base sm:text-xl font-light">{title}</h1>
45 |           {tldr && (
46 |             <h1 className="text-xs font-light text-zinc-500 -my-1 sm:-my-2">
47 |               {tldr}
48 |             </h1>
49 |           )}
50 |           <div
51 |             dangerouslySetInnerHTML={{ __html: content }}
52 |             className="whitespace-pre-line max-w-prose text-xs sm:text-sm text-zinc-300"
53 |           />
54 |           <Spacer />
55 |         </div>
56 |       )}
57 |     </>
58 |   );
59 | };
60 | 
61 | export default Entry;
62 | 


--------------------------------------------------------------------------------
/src/hooks/use-local-storage.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | const isServer = typeof window === "undefined";
 4 | 
 5 | const useLocalStorage = (key: string, initialValue: any) => {
 6 |   // State to store our value
 7 |   // Pass initial state function to useState so logic is only executed once
 8 |   const [storedValue, setStoredValue] = useState(() => initialValue);
 9 | 
10 |   const initialize = () => {
11 |     if (isServer) {
12 |       return initialValue;
13 |     }
14 |     try {
15 |       // Get from local storage by key
16 |       const item = window.localStorage.getItem(key);
17 |       // Parse stored json or if none return initialValue
18 |       return item ? JSON.parse(item) : initialValue;
19 |     } catch (error) {
20 |       // If error also return initialValue
21 |       console.log(error);
22 |       return initialValue;
23 |     }
24 |   };
25 | 
26 |   /* prevents hydration error so that state is only initialized after server is defined */
27 |   useEffect(() => {
28 |     if (!isServer) {
29 |       setStoredValue(initialize());
30 |     }
31 |     // eslint-disable-next-line react-hooks/exhaustive-deps
32 |   }, []);
33 | 
34 |   // Return a wrapped version of useState's setter function that ...
35 |   // ... persists the new value to localStorage.
36 |   const setValue = (value: any) => {
37 |     try {
38 |       // Allow value to be a function so we have same API as useState
39 |       const valueToStore =
40 |         value instanceof Function ? value(storedValue) : value;
41 |       // Save state
42 |       setStoredValue(valueToStore);
43 |       // Save to local storage
44 |       if (typeof window !== "undefined") {
45 |         window.localStorage.setItem(key, JSON.stringify(valueToStore));
46 |       }
47 |     } catch (error) {
48 |       // A more advanced implementation would handle the error case
49 |       console.log(error);
50 |     }
51 |   };
52 |   return [storedValue, setValue];
53 | };
54 | 
55 | export default useLocalStorage;
56 | 


--------------------------------------------------------------------------------
/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 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 0 0% 3.9%;
 9 | 
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 0 0% 3.9%;
12 | 
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 0 0% 3.9%;
15 | 
16 |     --primary: 0 0% 9%;
17 |     --primary-foreground: 0 0% 98%;
18 | 
19 |     --secondary: 0 0% 96.1%;
20 |     --secondary-foreground: 0 0% 9%;
21 | 
22 |     --muted: 0 0% 96.1%;
23 |     --muted-foreground: 0 0% 45.1%;
24 | 
25 |     --accent: 0 0% 96.1%;
26 |     --accent-foreground: 0 0% 9%;
27 | 
28 |     --destructive: 0 84.2% 60.2%;
29 |     --destructive-foreground: 0 0% 98%;
30 | 
31 |     --border: 0 0% 89.8%;
32 |     --input: 0 0% 89.8%;
33 |     --ring: 0 0% 3.9%;
34 | 
35 |     --radius: 0.5rem;
36 |   }
37 | 
38 |   .dark {
39 |     --background: 0 0% 3.9%;
40 |     --foreground: 0 0% 98%;
41 | 
42 |     --card: 0 0% 3.9%;
43 |     --card-foreground: 0 0% 98%;
44 | 
45 |     --popover: 0 0% 3.9%;
46 |     --popover-foreground: 0 0% 98%;
47 | 
48 |     --primary: 0 0% 98%;
49 |     --primary-foreground: 0 0% 9%;
50 | 
51 |     --secondary: 0 0% 14.9%;
52 |     --secondary-foreground: 0 0% 98%;
53 | 
54 |     --muted: 0 0% 14.9%;
55 |     --muted-foreground: 0 0% 63.9%;
56 | 
57 |     --accent: 0 0% 14.9%;
58 |     --accent-foreground: 0 0% 98%;
59 | 
60 |     --destructive: 0 62.8% 30.6%;
61 |     --destructive-foreground: 0 0% 98%;
62 | 
63 |     --border: 0 0% 14.9%;
64 |     --input: 0 0% 14.9%;
65 |     --ring: 0 0% 83.1%;
66 |   }
67 | }
68 | 
69 | @layer base {
70 |   * {
71 |     @apply border-border;
72 |   }
73 |   body {
74 |     @apply bg-background text-foreground;
75 |   }
76 | }
77 | 
78 | /* Mobile responsive adjustments */
79 | @media (max-width: 640px) {
80 |   .prose {
81 |     font-size: 0.875rem;
82 |   }
83 | 
84 |   input,
85 |   textarea,
86 |   select,
87 |   button {
88 |     font-size: 0.875rem;
89 |   }
90 | }
91 | 
92 | /* Ensure content doesn't overflow on small screens */
93 | html,
94 | body {
95 |   max-width: 100vw;
96 |   overflow-x: hidden;
97 | }
98 | 


--------------------------------------------------------------------------------
/src/lib/llm.ts:
--------------------------------------------------------------------------------
 1 | import ollama from "ollama";
 2 | 
 3 | export const chatStream = async (
 4 |   data: JournalEntry[],
 5 |   query: string,
 6 |   model?: string
 7 | ) => {
 8 |   const q = query || "who are you?";
 9 |   const selectedModel = model || "nous-hermes2:latest";
10 | 
11 |   const cleanData = data.map((e) => {
12 |     return {
13 |       content: e.content,
14 |       created: e.created,
15 |       title: e.title,
16 |       tldr: e.tldr,
17 |     };
18 |   });
19 | 
20 |   const flattenedData = cleanData.map((e) => {
21 |     return `{content:${e.content},title:${e.title},tldr:${e.tldr},created:${e.created}}`;
22 |   });
23 | 
24 |   function compressString(inputStr: string) {
25 |     const cleanInput = inputStr
26 |       .replace(/(&nbsp;)+/g, " ") // Remove HTML entities
27 |       .replace(/[.\/#!$%\^&\*;\[\]_\\]+/g, "") // Remove special characters
28 |       .replace(/<[^>]*>/g, "") // Remove HTML tags
29 |       .toLowerCase();
30 | 
31 |     return cleanInput;
32 |   }
33 | 
34 |   const cleanerData = compressString(flattenedData.join("|"));
35 | 
36 |   const response = await ollama.chat({
37 |     model: selectedModel,
38 |     messages: [
39 |       {
40 |         content: `your name is kisahari. you are an AI within a journaling app. 
41 |         Your purpose is to assist the user in reflecting on their thoughts through a thoughtful and empathetic approach. 
42 |         The user will not respond to your prompts. You need to be particularly mindful of time and date.
43 |         Your goal is to provide fresh perspectives, encouragement, or even constructive debate, while maintaining concise yet meaningful responses.
44 |         current time is ${new Date().toLocaleString()} gmt+8. answer the user based on the following journal entries: ${cleanerData}`,
45 |         role: "system",
46 |       },
47 |       // { content: "my journal entries\n" + cleanerData, role: "user" },
48 |       {
49 |         content: q,
50 |         role: "user",
51 |       },
52 |     ],
53 |     keep_alive: 60,
54 |     stream: true,
55 |   });
56 | 
57 |   return response;
58 | };
59 | 
60 | export const getAllModels = async () => {
61 |   try {
62 |     const models = await ollama.list();
63 |     return models;
64 |   } catch (e) {
65 |     console.error(e);
66 |   }
67 | };
68 | 


--------------------------------------------------------------------------------
/src/app/icon.svg:
--------------------------------------------------------------------------------
1 | <svg width="425" height="425" viewBox="0 0 425 425" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path fill-rule="evenodd" clip-rule="evenodd"
3 |         d="M290.365 375.229C230.76 403.835 163.281 396.902 111.903 362.853C107.647 360.032 110.295 353.756 115.376 354.262C157.541 358.469 197.43 352.756 235.374 331.195C241.772 327.561 248.073 323.497 254.286 318.989C255.508 318.102 257.059 317.797 258.525 318.161C283.797 324.44 311.311 327.408 340.918 327.173C345.218 327.139 347.628 332.111 344.702 335.263C329.694 351.43 311.457 365.106 290.365 375.229ZM303.778 403.177C210.904 447.75 101.709 418.655 42.3041 339.123C42.1603 338.93 41.9579 338.788 41.7278 338.718C41.6075 338.682 41.4872 338.646 41.3669 338.609C40.9746 338.491 40.7533 338.076 40.8723 337.684V337.684C40.94 337.461 40.8989 337.22 40.7618 337.031C33.2791 326.752 26.6196 315.651 20.9213 303.778C-29.7392 198.221 14.7631 71.5818 120.32 20.9213C225.877 -29.7392 352.516 14.7631 403.177 120.32C453.837 225.877 409.335 352.516 303.778 403.177ZM48.8692 290.365C52.2496 297.408 56.0262 304.133 60.1595 310.526C60.8132 311.537 61.8284 312.27 62.9893 312.589C119.838 328.201 167.212 329.9 210.057 309.465C213.79 307.684 213.577 302.418 209.865 300.597C193.948 292.789 179.243 283.231 165.806 271.882C120.438 233.566 91.4897 176.493 78.1465 102.663C77.394 98.4991 72.1861 97.014 69.578 100.346C28.4728 152.855 18.0625 226.175 48.8692 290.365ZM185.809 248.199C203.213 262.898 223.486 274.349 246.718 282.373C248.384 282.949 250.224 282.586 251.54 281.413C287.954 248.961 323.472 195.206 359.266 110.785C359.936 109.204 359.751 107.365 358.746 105.973C308.452 36.2478 213.96 10.3654 133.733 48.8692C124.052 53.5154 114.973 58.9101 106.531 64.9506C105.079 65.9895 104.322 67.7562 104.534 69.529C114.472 152.89 142.53 211.647 185.809 248.199ZM374.372 292.143C373.61 293.69 372.084 294.712 370.365 294.849C342.916 297.034 317.709 296.542 294.69 293.484C290.687 292.952 289.075 288.093 291.802 285.115C320.769 253.466 347.991 210.156 374.406 153.146C376.247 149.171 381.887 149.284 383.311 153.427C399.375 200.166 395.134 249.993 374.372 292.143ZM280.326 131.965C282.231 103.737 260.892 79.3079 232.663 77.4024C204.434 75.497 180.005 96.8363 178.1 125.065C176.194 153.294 197.534 177.723 225.762 179.628C253.991 181.534 278.42 160.194 280.326 131.965ZM311.255 134.053C314.314 88.7423 280.061 49.5313 234.75 46.4728C189.44 43.4143 150.229 77.6666 147.17 122.977C144.112 168.288 178.364 207.499 223.675 210.558C268.986 213.616 308.197 179.364 311.255 134.053Z"
4 |         fill="white" />
5 | </svg>


--------------------------------------------------------------------------------
/public/kisahari.svg:
--------------------------------------------------------------------------------
1 | <svg width="425" height="425" viewBox="0 0 425 425" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path fill-rule="evenodd" clip-rule="evenodd"
3 |         d="M290.365 375.229C230.76 403.835 163.281 396.902 111.903 362.853C107.647 360.032 110.295 353.756 115.376 354.262C157.541 358.469 197.43 352.756 235.374 331.195C241.772 327.561 248.073 323.497 254.286 318.989C255.508 318.102 257.059 317.797 258.525 318.161C283.797 324.44 311.311 327.408 340.918 327.173C345.218 327.139 347.628 332.111 344.702 335.263C329.694 351.43 311.457 365.106 290.365 375.229ZM303.778 403.177C210.904 447.75 101.709 418.655 42.3041 339.123C42.1603 338.93 41.9579 338.788 41.7278 338.718C41.6075 338.682 41.4872 338.646 41.3669 338.609C40.9746 338.491 40.7533 338.076 40.8723 337.684V337.684C40.94 337.461 40.8989 337.22 40.7618 337.031C33.2791 326.752 26.6196 315.651 20.9213 303.778C-29.7392 198.221 14.7631 71.5818 120.32 20.9213C225.877 -29.7392 352.516 14.7631 403.177 120.32C453.837 225.877 409.335 352.516 303.778 403.177ZM48.8692 290.365C52.2496 297.408 56.0262 304.133 60.1595 310.526C60.8132 311.537 61.8284 312.27 62.9893 312.589C119.838 328.201 167.212 329.9 210.057 309.465C213.79 307.684 213.577 302.418 209.865 300.597C193.948 292.789 179.243 283.231 165.806 271.882C120.438 233.566 91.4897 176.493 78.1465 102.663C77.394 98.4991 72.1861 97.014 69.578 100.346C28.4728 152.855 18.0625 226.175 48.8692 290.365ZM185.809 248.199C203.213 262.898 223.486 274.349 246.718 282.373C248.384 282.949 250.224 282.586 251.54 281.413C287.954 248.961 323.472 195.206 359.266 110.785C359.936 109.204 359.751 107.365 358.746 105.973C308.452 36.2478 213.96 10.3654 133.733 48.8692C124.052 53.5154 114.973 58.9101 106.531 64.9506C105.079 65.9895 104.322 67.7562 104.534 69.529C114.472 152.89 142.53 211.647 185.809 248.199ZM374.372 292.143C373.61 293.69 372.084 294.712 370.365 294.849C342.916 297.034 317.709 296.542 294.69 293.484C290.687 292.952 289.075 288.093 291.802 285.115C320.769 253.466 347.991 210.156 374.406 153.146C376.247 149.171 381.887 149.284 383.311 153.427C399.375 200.166 395.134 249.993 374.372 292.143ZM280.326 131.965C282.231 103.737 260.892 79.3079 232.663 77.4024C204.434 75.497 180.005 96.8363 178.1 125.065C176.194 153.294 197.534 177.723 225.762 179.628C253.991 181.534 278.42 160.194 280.326 131.965ZM311.255 134.053C314.314 88.7423 280.061 49.5313 234.75 46.4728C189.44 43.4143 150.229 77.6666 147.17 122.977C144.112 168.288 178.364 207.499 223.675 210.558C268.986 213.616 308.197 179.364 311.255 134.053Z"
4 |         fill="white" />
5 | </svg>


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | const { fontFamily } = require("tailwindcss/defaultTheme");
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   darkMode: ["class"],
 6 |   content: ["src/app/**/*.{ts,tsx}", "src/components/**/*.{ts,tsx}"],
 7 |   theme: {
 8 |     container: {
 9 |       center: true,
10 |       padding: "2rem",
11 |       screens: {
12 |         "2xl": "1400px",
13 |       },
14 |     },
15 |     extend: {
16 |       fontFamily: {
17 |         mono: ["var(--font-commit-mono)"],
18 |       },
19 |       colors: {
20 |         border: "hsl(var(--border))",
21 |         input: "hsl(var(--input))",
22 |         ring: "hsl(var(--ring))",
23 |         background: "hsl(var(--background))",
24 |         foreground: "hsl(var(--foreground))",
25 |         primary: {
26 |           DEFAULT: "hsl(var(--primary))",
27 |           foreground: "hsl(var(--primary-foreground))",
28 |         },
29 |         secondary: {
30 |           DEFAULT: "hsl(var(--secondary))",
31 |           foreground: "hsl(var(--secondary-foreground))",
32 |         },
33 |         destructive: {
34 |           DEFAULT: "hsl(var(--destructive))",
35 |           foreground: "hsl(var(--destructive-foreground))",
36 |         },
37 |         muted: {
38 |           DEFAULT: "hsl(var(--muted))",
39 |           foreground: "hsl(var(--muted-foreground))",
40 |         },
41 |         accent: {
42 |           DEFAULT: "hsl(var(--accent))",
43 |           foreground: "hsl(var(--accent-foreground))",
44 |         },
45 |         popover: {
46 |           DEFAULT: "hsl(var(--popover))",
47 |           foreground: "hsl(var(--popover-foreground))",
48 |         },
49 |         card: {
50 |           DEFAULT: "hsl(var(--card))",
51 |           foreground: "hsl(var(--card-foreground))",
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: `var(--radius)`,
56 |         md: `calc(var(--radius) - 2px)`,
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 | 
60 |       keyframes: {
61 |         "accordion-down": {
62 |           from: { height: 0 },
63 |           to: { height: "var(--radix-accordion-content-height)" },
64 |         },
65 |         "accordion-up": {
66 |           from: { height: "var(--radix-accordion-content-height)" },
67 |           to: { height: 0 },
68 |         },
69 |       },
70 |       animation: {
71 |         "accordion-down": "accordion-down 0.2s ease-out",
72 |         "accordion-up": "accordion-up 0.2s ease-out",
73 |       },
74 |     },
75 |   },
76 |   plugins: [
77 |     require("@tailwindcss/typography"),
78 |     require("tailwindcss-animate"),
79 |     require("tailwind-scrollbar"),
80 |   ],
81 | };
82 | 


--------------------------------------------------------------------------------
/src/components/home/ai-chat.tsx:
--------------------------------------------------------------------------------
 1 | import { Loader2Icon, RotateCcwIcon, SparklesIcon } from "lucide-react";
 2 | 
 3 | const AIChat = ({
 4 |   answer,
 5 |   time,
 6 |   loading,
 7 |   askLLM,
 8 |   setAnswer,
 9 |   setTime,
10 |   setLoading,
11 | }: {
12 |   answer: string;
13 |   time: string;
14 |   loading: boolean;
15 |   askLLM: (formData: FormData) => void;
16 |   setAnswer: (answer: string) => void;
17 |   setTime: (time: string) => void;
18 |   setLoading: (loading: boolean) => void;
19 | }) => {
20 |   return (
21 |     <div
22 |       className="absolute inset-0 flex flex-col items-end justify-start top-[10vh] sm:top-[11vh] py-2 px-2 sm:px-4 md:px-16 pointer-events-none
23 |     from-zinc-900 to-zinc-950/20 bg-gradient-to-b mx-2 sm:mx-0 sm:bg-transparent
24 |     [background:radial-gradient(200%_150%_at_50%_15%,#111_25%,#7d11_100%)] sm:[background:none]"
25 |     >
26 |       <div className="px-2 sm:px-4 py-2 rounded-md flex flex-col justify-evenly items-center w-full max-w-full sm:max-w-md pointer-events-auto">
27 |         <form
28 |           className="w-full p-2 sm:p-4"
29 |           onSubmit={(e) => {
30 |             e.preventDefault();
31 |             askLLM(new FormData(e.target as HTMLFormElement));
32 |           }}
33 |         >
34 |           <div className="flex flex-row w-full gap-2 sm:gap-4 justify-between">
35 |             <input
36 |               autoFocus
37 |               type="text"
38 |               name="q"
39 |               autoComplete="off"
40 |               minLength={1}
41 |               placeholder="Ask me anything"
42 |               className="max-w-prose w-full text-xs bg-transparent focus:outline-none break-words ring-zinc-400 ring-1 px-2 sm:px-3 py-2 rounded-lg"
43 |             />
44 |             <button
45 |               onClick={() => {
46 |                 setAnswer("");
47 |                 setTime("");
48 |               }}
49 |               type="reset"
50 |             >
51 |               <RotateCcwIcon className="w-4 h-4 sm:w-5 sm:h-5 text-zinc-600 hover:text-zinc-300" />
52 |             </button>
53 |             <button
54 |               onClick={() => {
55 |                 setLoading(true);
56 |                 setAnswer("");
57 |                 setTime("");
58 |               }}
59 |               type="submit"
60 |             >
61 |               {!loading ? (
62 |                 <SparklesIcon className="w-4 h-4 sm:w-5 sm:h-5 text-zinc-300 hover:text-lime-500" />
63 |               ) : (
64 |                 <Loader2Icon className="w-4 h-4 sm:w-5 sm:h-5 text-zinc-300 hover:text-lime-500 animate-spin" />
65 |               )}
66 |             </button>
67 |           </div>
68 |         </form>
69 | 
70 |         {answer.length > 1 && (
71 |           <div className="whitespace-pre-line self-start prose prose-zinc break-words max-w-prose max-h-[40vh] sm:max-h-[50vh] overflow-y-scroll scrollbar-thin scrollbar-thumb-lime-500 scrollbar-track-transparent text-xs sm:text-sm text-zinc-300 p-2 sm:p-4">
72 |             {answer}
73 |           </div>
74 |         )}
75 |         {loading && (
76 |           <div className="max-w-prose text-xs self-start text-zinc-500 p-2 sm:p-4">
77 |             <div className="animate-pulse uppercase">
78 |               {answer.length < 1 ? "thinking" : "streaming answers"}
79 |             </div>
80 |           </div>
81 |         )}
82 |         {time && (
83 |           <div className="max-w-prose self-start text-xs text-zinc-500 p-2 sm:p-4">
84 |             <div className="">{time}</div>
85 |           </div>
86 |         )}
87 |       </div>
88 |     </div>
89 |   );
90 | };
91 | 
92 | export default AIChat;
93 | 


--------------------------------------------------------------------------------
/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 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/src/lib/langchain.ts:
--------------------------------------------------------------------------------
  1 | import { Document } from "langchain/document";
  2 | import { OllamaEmbeddings } from "@langchain/community/embeddings/ollama";
  3 | import { MemoryVectorStore } from "langchain/vectorstores/memory";
  4 | import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";
  5 | import { createRetrievalChain } from "langchain/chains/retrieval";
  6 | import { createStuffDocumentsChain } from "langchain/chains/combine_documents";
  7 | import { ChatPromptTemplate } from "@langchain/core/prompts";
  8 | import { ChatOllama } from "@langchain/community/chat_models/ollama";
  9 | import { ChatOpenAI, OpenAIEmbeddings } from "@langchain/openai";
 10 | 
 11 | const askAI = async (data: JournalEntry[], llmModel: string, query: string) => {
 12 |   let docs: Document<Record<string, any>>[] = [];
 13 | 
 14 |   data.forEach((entry) => {
 15 |     docs.push({
 16 |       pageContent: `{content:${entry.content}|tldr:${entry.tldr}|title:${entry.title}}`,
 17 |       metadata: {
 18 |         title: entry.title,
 19 |         created: entry.created,
 20 |         tldr: entry.tldr,
 21 |         content: entry.content,
 22 |         updated: entry.updated,
 23 |         id: entry.id,
 24 |       },
 25 |     });
 26 |   });
 27 | 
 28 |   const splitter = new RecursiveCharacterTextSplitter({
 29 |     chunkSize: 1000,
 30 |     chunkOverlap: 200,
 31 |   });
 32 | 
 33 |   const splitDocs = await splitter.splitDocuments(docs);
 34 | 
 35 |   const embeddings = new OllamaEmbeddings({
 36 |     model: llmModel || "nous-hermes2:latest",
 37 |   });
 38 | 
 39 |   const vectorstore = await MemoryVectorStore.fromDocuments(
 40 |     splitDocs,
 41 |     embeddings
 42 |   );
 43 | 
 44 |   const prompt = ChatPromptTemplate.fromTemplate(`
 45 |     your name is kisahari. you are an AI within a journaling app. 
 46 |         Your purpose is to assist the user in reflecting on their thoughts through a thoughtful and empathetic approach. 
 47 |         The user will not respond to your prompts. You need to be particularly mindful of time and date.
 48 |         Your goal is to provide fresh perspectives, encouragement, or even constructive debate, while maintaining concise yet meaningful responses.
 49 |         current time is ${new Date().toLocaleString()} gmt+8.
 50 |         Answer the following question based only on the provided context:
 51 | <context>
 52 | {context}
 53 | </context>
 54 | 
 55 | Question: {input}`);
 56 | 
 57 |   const model = new ChatOllama({
 58 |     baseUrl: "http://localhost:11434",
 59 |     model: llmModel || "nous-hermes2:latest",
 60 |   });
 61 | 
 62 |   const documentChain = await createStuffDocumentsChain({
 63 |     llm: model,
 64 |     prompt,
 65 |   });
 66 | 
 67 |   const retriever = vectorstore.asRetriever();
 68 | 
 69 |   const retrievalChain = await createRetrievalChain({
 70 |     combineDocsChain: documentChain,
 71 |     retriever,
 72 |   });
 73 | 
 74 |   const result = await retrievalChain.stream({
 75 |     input: query || "What are the journal entry for today?",
 76 |   });
 77 | 
 78 |   return result;
 79 | };
 80 | 
 81 | const askOpenAI = async (
 82 |   data: JournalEntry[],
 83 |   query: string,
 84 |   openAIKey: string,
 85 |   modelName: string = "gpt-3.5-turbo"
 86 | ) => {
 87 |   let docs: Document<Record<string, any>>[] = [];
 88 | 
 89 |   data.forEach((entry) => {
 90 |     docs.push({
 91 |       pageContent: `{content:${entry.content}|tldr:${entry.tldr}|title:${entry.title}}`,
 92 |       metadata: {
 93 |         title: entry.title,
 94 |         created: entry.created,
 95 |         tldr: entry.tldr,
 96 |         content: entry.content,
 97 |         updated: entry.updated,
 98 |         id: entry.id,
 99 |       },
100 |     });
101 |   });
102 | 
103 |   const splitter = new RecursiveCharacterTextSplitter({
104 |     chunkSize: 1000,
105 |     chunkOverlap: 200,
106 |   });
107 | 
108 |   const splitDocs = await splitter.splitDocuments(docs);
109 | 
110 |   const embeddings = new OpenAIEmbeddings({
111 |     openAIApiKey: openAIKey,
112 |   });
113 | 
114 |   const vectorstore = await MemoryVectorStore.fromDocuments(
115 |     splitDocs,
116 |     embeddings
117 |   );
118 | 
119 |   const prompt = ChatPromptTemplate.fromTemplate(`
120 |     your name is kisahari. you are an AI within a journaling app. 
121 |         Your purpose is to assist the user in reflecting on their thoughts through a thoughtful and empathetic approach. 
122 |         The user will not respond to your prompts. You need to be particularly mindful of time and date.
123 |         Your goal is to provide fresh perspectives, encouragement, or even constructive debate, while maintaining concise yet meaningful responses.
124 |         current time is ${new Date().toLocaleString()} gmt+8.
125 |         Answer the following question based only on the provided context:
126 | <context>
127 | {context}
128 | </context>
129 | 
130 | Question: {input}`);
131 | 
132 |   const model = new ChatOpenAI({
133 |     openAIApiKey: openAIKey,
134 |     modelName,
135 |   });
136 | 
137 |   const documentChain = await createStuffDocumentsChain({
138 |     llm: model,
139 |     prompt,
140 |   });
141 | 
142 |   const retriever = vectorstore.asRetriever();
143 | 
144 |   const retrievalChain = await createRetrievalChain({
145 |     combineDocsChain: documentChain,
146 |     retriever,
147 |   });
148 | 
149 |   const result = await retrievalChain.stream({
150 |     input: query || "What are the journal entry for today?",
151 |   });
152 | 
153 |   return result;
154 | };
155 | 
156 | export { askAI, askOpenAI };
157 | 


--------------------------------------------------------------------------------
/src/app/home.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { formatDate } from "@/lib/utils";
  4 | import { useCallback, useEffect, useState } from "react";
  5 | import { getAllModels } from "@/lib/llm";
  6 | import type { ListResponse } from "ollama";
  7 | 
  8 | import AIChat from "@/components/home/ai-chat";
  9 | import Footer from "@/components/home/footer";
 10 | import Container from "@/components/home/container";
 11 | import EntriesContainer from "@/components/home/entries-container";
 12 | import Entry from "@/components/home/entry";
 13 | import Header from "@/components/home/header";
 14 | import AIButton from "@/components/home/ai-button";
 15 | import DayProgress from "@/components/home/day-progress";
 16 | import { askAI, askOpenAI } from "@/lib/langchain";
 17 | import useLocalStorage from "@/hooks/use-local-storage";
 18 | 
 19 | const data = {
 20 |   title: "KISAHARI",
 21 |   version: "v040",
 22 |   footer: {
 23 |     left_copy: "YOUR PERSONAL JOURNAL",
 24 |     right_copy: "KISAHARI © ",
 25 |   },
 26 | };
 27 | 
 28 | export default function HomePage({ entries }: { entries: JournalEntry[] }) {
 29 |   const [loading, setLoading] = useState(false);
 30 |   const [answer, setAnswer] = useState("");
 31 |   const [time, setTime] = useState("");
 32 |   const [showAI, setShowAI] = useState(false);
 33 |   const [ollamaModels, setOllamaModels] = useState<ListResponse>();
 34 |   const [selectedOllamaModel, setSelectedOllamaModel] = useState<string>("");
 35 | 
 36 |   const [openAiModels] = useState({
 37 |     models: [
 38 |       {
 39 |         name: "gpt-3.5-turbo",
 40 |       },
 41 |       {
 42 |         name: "gpt-4",
 43 |       },
 44 |     ],
 45 |   });
 46 | 
 47 |   const [selectedOpenAiModel, setSelectedOpenAiModel] =
 48 |     useState<string>("gpt-3.5-turbo");
 49 |   const [modelType, setModelType] = useLocalStorage("modelType", "ollama");
 50 |   const [openAIKey, setOpenAIKey] = useLocalStorage("openAIKey", null);
 51 |   const [isLoading, setIsLoading] = useState(true);
 52 | 
 53 |   // const openAIKey = useReadLocalStorage<string>("openAIKey");
 54 | 
 55 |   const askLLM = useCallback(
 56 |     async (formData: FormData) => {
 57 |       performance.mark("start");
 58 |       const q = formData.get("q") as string;
 59 |       setLoading(true);
 60 | 
 61 |       try {
 62 |         const processStream = async (stream: any) => {
 63 |           let answer = [];
 64 |           try {
 65 |             for await (const chat of stream) {
 66 |               answer.push(chat.answer);
 67 |               const ans = answer.join("");
 68 | 
 69 |               setAnswer(ans);
 70 |             }
 71 |             performance.mark("end");
 72 |             setLoading(false);
 73 |             performance.measure("askAI", "start", "end");
 74 |             setTime(
 75 |               `TIME:${(
 76 |                 performance.getEntriesByName("askAI")[0].duration / 1000
 77 |               ).toFixed(1)}s`
 78 |             );
 79 |           } catch (error) {
 80 |             setLoading(false);
 81 |             setAnswer("Error: " + error);
 82 |           }
 83 |         };
 84 | 
 85 |         if (modelType === "openAI") {
 86 |           const stream = await askOpenAI(
 87 |             entries,
 88 |             q,
 89 |             openAIKey,
 90 |             selectedOpenAiModel
 91 |           );
 92 |           processStream(stream);
 93 |         }
 94 | 
 95 |         if (modelType === "ollama") {
 96 |           const stream = await askAI(entries, selectedOllamaModel, q);
 97 |           processStream(stream);
 98 |         }
 99 |       } catch (error) {
100 |         setLoading(false);
101 |         setAnswer("Error: " + error);
102 |       }
103 |     },
104 |     [entries, selectedOllamaModel, selectedOpenAiModel, modelType, openAIKey]
105 |   );
106 | 
107 |   useEffect(() => {
108 |     const getModels = async () => {
109 |       const models = await getAllModels();
110 |       setOllamaModels(models);
111 |       setIsLoading(false);
112 |     };
113 |     getModels();
114 |   }, []);
115 | 
116 |   useEffect(() => {
117 |     setSelectedOllamaModel(ollamaModels?.models[0]?.name || "");
118 |   }, [ollamaModels]);
119 | 
120 |   useEffect(() => {
121 |     const handleKeyDown = (e: KeyboardEvent) => {
122 |       if (e.metaKey && e.key === "k") {
123 |         setShowAI(!showAI);
124 |       }
125 |     };
126 |     window.addEventListener("keydown", handleKeyDown);
127 |     return () => {
128 |       window.removeEventListener("keydown", handleKeyDown);
129 |     };
130 |   }, [showAI]);
131 | 
132 |   return (
133 |     <Container>
134 |       <Header
135 |         models={ollamaModels!}
136 |         {...{
137 |           openAiModels,
138 |           selectedOllamaModel,
139 |           data,
140 |           setSelectedOllamaModel,
141 |           setModelType,
142 |           modelType,
143 |           openAIKey,
144 |           setOpenAIKey,
145 |           isLoading,
146 |           setSelectedOpenAiModel,
147 |           selectedOpenAiModel,
148 |         }}
149 |       />
150 | 
151 |       <EntriesContainer>
152 |         {entries.map((entry) => (
153 |           <Entry
154 |             key={entry.id}
155 |             date={formatDate(new Date(entry.created))}
156 |             title={entry.title}
157 |             content={entry.content}
158 |             tldr={entry.tldr}
159 |           />
160 |         ))}
161 |       </EntriesContainer>
162 | 
163 |       <DayProgress />
164 | 
165 |       {showAI && (
166 |         <AIChat
167 |           {...{
168 |             answer,
169 |             time,
170 |             loading,
171 |             askLLM,
172 |             setAnswer,
173 |             setTime,
174 |             setLoading,
175 |           }}
176 |         />
177 |       )}
178 | 
179 |       <AIButton {...{ showAI, setShowAI }} />
180 | 
181 |       <Footer {...data} />
182 |     </Container>
183 |   );
184 | }
185 | 


--------------------------------------------------------------------------------
/src/components/home/entry-dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Spacer } from "@/components/home/spacer";
  4 | import {
  5 |   Dialog,
  6 |   DialogContent,
  7 |   DialogDescription,
  8 |   DialogHeader,
  9 |   DialogTitle,
 10 |   DialogTrigger,
 11 | } from "@/components/ui/dialog";
 12 | import { entries } from "@/lib/index-db";
 13 | import { RotateCcw } from "lucide-react";
 14 | import { useState } from "react";
 15 | 
 16 | const EntryDialog = () => {
 17 |   const [open, setOpen] = useState(false);
 18 | 
 19 |   const handleSubmit = async (formData: FormData) => {
 20 |     const title = formData.get("title") as string;
 21 |     const content = formData.get("content") as string;
 22 |     const tldr = formData.get("tldr") as string;
 23 | 
 24 |     const entry = {
 25 |       title,
 26 |       content,
 27 |       tldr,
 28 |       created: new Date().toISOString(),
 29 |       updated: new Date().toISOString(),
 30 |     };
 31 | 
 32 |     if (title.length < 1 || content.length < 1 || content.length < 1) {
 33 |       alert("Invalid input");
 34 |       return;
 35 |     }
 36 | 
 37 |     const res = await entries.add(entry);
 38 | 
 39 |     if (res) {
 40 |       setOpen(false);
 41 |     } else {
 42 |       alert("Entry not added");
 43 |     }
 44 |   };
 45 | 
 46 |   return (
 47 |     <Dialog open={open} onOpenChange={setOpen}>
 48 |       <DialogTrigger className="text-[10px] sm:text-xs uppercase hover:bg-lime-500 px-2 sm:px-4 md:px-6 py-1 sm:py-2 hover:text-zinc-800">
 49 |         ADD ENTRY
 50 |       </DialogTrigger>
 51 |       <DialogContent className="max-w-[90vw] sm:max-w-md md:max-w-lg">
 52 |         <DialogHeader>
 53 |           <DialogTitle className="font-mono uppercase text-xs sm:text-sm font-thin">
 54 |             Add entry
 55 |           </DialogTitle>
 56 | 
 57 |           <Spacer />
 58 |           <span className="py-[0.4px] bg-zinc-700"></span>
 59 |           <Spacer />
 60 | 
 61 |           <form
 62 |             onSubmit={(e) => {
 63 |               e.preventDefault();
 64 |               handleSubmit(new FormData(e.target as HTMLFormElement));
 65 |             }}
 66 |             className="w-full h-full flex flex-col items-center justify-center gap-2 sm:gap-4 font-mono"
 67 |           >
 68 |             <div className="text-start w-full items-start h-auto max-w-prose flex justify-center flex-col gap-1 sm:gap-2">
 69 |               <h3 className="font-light text-xs sm:text-sm font-mono uppercase">
 70 |                 Title
 71 |               </h3>
 72 |               <input
 73 |                 minLength={2}
 74 |                 maxLength={50}
 75 |                 className="max-w-prose w-full text-xs bg-transparent focus:outline-none break-words ring-zinc-400 ring-1 px-2 sm:px-3 py-1 sm:py-2 rounded-lg"
 76 |                 name="title"
 77 |                 placeholder="Neon Circuits"
 78 |               />
 79 |               <h4 className="ml-1 text-[10px] sm:text-xs uppercase text-zinc-600">
 80 |                 Make it pop
 81 |               </h4>
 82 |             </div>
 83 |             <div className="text-start w-full items-start h-auto max-w-prose flex justify-center flex-col gap-1 sm:gap-2">
 84 |               <h3 className="font-light text-xs sm:text-sm font-mono uppercase">
 85 |                 TL;DR{" "}
 86 |               </h3>
 87 |               <textarea
 88 |                 maxLength={100}
 89 |                 rows={2}
 90 |                 className="max-w-prose w-full text-xs bg-transparent focus:outline-none break-words ring-zinc-400 ring-1 px-2 sm:px-3 py-1 sm:py-2 rounded-lg"
 91 |                 name="tldr"
 92 |                 placeholder="Cyberpunk-themed city with neon lights and AR technology exploring the mysteries of the future."
 93 |               />
 94 |               <h4 className="ml-1 text-[10px] sm:text-xs uppercase text-zinc-600">
 95 |                 Keep it concise, short
 96 |               </h4>
 97 |             </div>
 98 |             <div className="text-start w-full items-start h-auto max-w-prose flex justify-center flex-col gap-1 sm:gap-2">
 99 |               <h3 className="font-light text-xs sm:text-sm font-mono uppercase">
100 |                 Content
101 |               </h3>
102 |               <textarea
103 |                 maxLength={500}
104 |                 rows={5}
105 |                 className="max-w-prose w-full text-xs bg-transparent focus:outline-none break-words ring-zinc-400 ring-1 px-2 sm:px-3 py-1 sm:py-2 rounded-lg"
106 |                 name="content"
107 |                 placeholder="Neon circuits intertwine in the shadows of a megacity. Augmented reality transcends reality itself, unveiling the mysteries of the future. Welcome to the cybernetic age."
108 |               />
109 |               <h4 className="ml-1 text-[10px] sm:text-xs uppercase text-zinc-600">
110 |                 Min 10 chars, Max 500 chars, HTML allowed
111 |               </h4>
112 |             </div>
113 | 
114 |             <div className="flex gap-4 sm:gap-8 w-full justify-end items-center relative">
115 |               <div className="flex gap-2">
116 |                 <button
117 |                   type="reset"
118 |                   className="px-2 sm:px-4 py-1 sm:py-2 text-zinc-400 hover:text-lime-300 rounded-md"
119 |                 >
120 |                   <RotateCcw className="w-3 h-3 sm:w-4 sm:h-4" />
121 |                 </button>
122 |                 <button
123 |                   className="px-2 sm:px-4 py-1 sm:py-2 text-xs sm:text-sm hover:bg-lime-500 text-zinc-200 ring-1 ring-zinc-300 rounded-sm hover:text-zinc-800 uppercase"
124 |                   type="submit"
125 |                 >
126 |                   Submit
127 |                 </button>
128 |               </div>
129 |             </div>
130 |           </form>
131 |         </DialogHeader>
132 |       </DialogContent>
133 |     </Dialog>
134 |   );
135 | };
136 | 
137 | export default EntryDialog;
138 | 


--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as SelectPrimitive from "@radix-ui/react-select";
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | const Select = SelectPrimitive.Root;
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group;
 12 | 
 13 | const SelectValue = SelectPrimitive.Value;
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-lime-500 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ));
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ));
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ));
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName;
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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",
 79 |         position === "popper" &&
 80 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ));
100 | SelectContent.displayName = SelectPrimitive.Content.displayName;
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ));
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName;
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-lime-500 focus:text-zinc-800 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 | 
132 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
133 |   </SelectPrimitive.Item>
134 | ));
135 | SelectItem.displayName = SelectPrimitive.Item.displayName;
136 | 
137 | const SelectSeparator = React.forwardRef<
138 |   React.ElementRef<typeof SelectPrimitive.Separator>,
139 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
140 | >(({ className, ...props }, ref) => (
141 |   <SelectPrimitive.Separator
142 |     ref={ref}
143 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
144 |     {...props}
145 |   />
146 | ));
147 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
148 | 
149 | export {
150 |   Select,
151 |   SelectGroup,
152 |   SelectValue,
153 |   SelectTrigger,
154 |   SelectContent,
155 |   SelectLabel,
156 |   SelectItem,
157 |   SelectSeparator,
158 |   SelectScrollUpButton,
159 |   SelectScrollDownButton,
160 | };
161 | 


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


--------------------------------------------------------------------------------
/src/components/home/header.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { ListResponse } from "ollama";
  4 | import {
  5 |   Select,
  6 |   SelectContent,
  7 |   SelectItem,
  8 |   SelectTrigger,
  9 |   SelectValue,
 10 | } from "@/components/ui/select";
 11 | import CurrentTime from "@/components/current-time";
 12 | import { useState } from "react";
 13 | import { KeyIcon, LockIcon, MenuIcon, XIcon } from "lucide-react";
 14 | 
 15 | type ModelType = "ollama" | "openAI";
 16 | 
 17 | const Header = ({
 18 |   data,
 19 |   models,
 20 |   setModelType,
 21 |   modelType,
 22 |   selectedOllamaModel,
 23 |   setSelectedOllamaModel,
 24 |   openAIKey,
 25 |   setOpenAIKey,
 26 |   isLoading,
 27 |   openAiModels,
 28 |   setSelectedOpenAiModel,
 29 |   selectedOpenAiModel,
 30 | }: {
 31 |   data: { title: string; version: string };
 32 |   models: ListResponse;
 33 |   setSelectedOllamaModel: (model: string) => void;
 34 |   setModelType: (modelType: ModelType) => void;
 35 |   modelType: ModelType;
 36 |   selectedOllamaModel: string;
 37 |   openAIKey: string;
 38 |   setOpenAIKey: (key: string) => void;
 39 |   isLoading: boolean;
 40 |   openAiModels: any;
 41 |   setSelectedOpenAiModel: (model: string) => void;
 42 |   selectedOpenAiModel: string;
 43 | }) => {
 44 |   const [showKey, setShowKey] = useState(false);
 45 |   const [showMobileMenu, setShowMobileMenu] = useState(false);
 46 | 
 47 |   return (
 48 |     <div className="flex flex-row justify-between w-full items-center ring-1 ring-zinc-700 px-2 sm:px-4 md:px-6 py-2 rounded-t-xl rounded-b-sm">
 49 |       <div className="flex-1 flex flex-row gap-2 items-center">
 50 |         <img src="/icon.svg" alt="icon" className="h-6 w-6" />
 51 |         <h1 className="text-lg sm:text-xl font-normal">[{data.title}]</h1>
 52 |         <span className="text-xs sm:text-sm">{data.version}</span>
 53 |       </div>
 54 | 
 55 |       {isLoading ? (
 56 |         <div className="uppercase py-2 animate-pulse">LOADING...</div>
 57 |       ) : (
 58 |         <>
 59 |           <div className="md:hidden">
 60 |             <button
 61 |               onClick={() => setShowMobileMenu(!showMobileMenu)}
 62 |               className="p-2 text-zinc-400 hover:text-lime-300"
 63 |             >
 64 |               <MenuIcon className="h-5 w-5" />
 65 |             </button>
 66 |           </div>
 67 | 
 68 |           <div
 69 |             className={`hidden sm:flex flex-col md:flex-row items-center gap-2 md:gap-4 max-w-fit w-full self-end mt-2 md:mt-0`}
 70 |           >
 71 |             {modelType === "ollama" ? (
 72 |               <LocalModelSelector
 73 |                 models={models}
 74 |                 setModel={setSelectedOllamaModel}
 75 |                 model={selectedOllamaModel}
 76 |               />
 77 |             ) : (
 78 |               <>
 79 |                 <APIKeyInput
 80 |                   openAIKey={openAIKey}
 81 |                   setOpenAIKey={setOpenAIKey}
 82 |                   showKey={showKey}
 83 |                   setShowKey={setShowKey}
 84 |                 />
 85 | 
 86 |                 <LocalModelSelector
 87 |                   models={openAiModels}
 88 |                   setModel={setSelectedOpenAiModel}
 89 |                   model={selectedOpenAiModel}
 90 |                 />
 91 |               </>
 92 |             )}
 93 | 
 94 |             <ModelTypeSelector
 95 |               modelType={modelType}
 96 |               setModelType={setModelType}
 97 |             />
 98 | 
 99 |             <div className="uppercase py-2">
100 |               <CurrentTime />
101 |             </div>
102 |           </div>
103 | 
104 |           {showMobileMenu && (
105 |             <div className="sm:hidden fixed z-30 top-0 left-0 w-screen h-screen flex flex-col items-center justify-center bg-zinc-900/80 backdrop-blur-sm">
106 |               <button
107 |                 onClick={() => setShowMobileMenu(false)}
108 |                 className="absolute top-6 right-6"
109 |               >
110 |                 <XIcon className="h-5 w-5" />
111 |               </button>
112 |               <div className=" gap-2 flex flex-col w-full px-4 py-2">
113 |                 {modelType === "ollama" ? (
114 |                   <LocalModelSelector
115 |                     models={models}
116 |                     setModel={setSelectedOllamaModel}
117 |                     model={selectedOllamaModel}
118 |                   />
119 |                 ) : (
120 |                   <>
121 |                     <APIKeyInput
122 |                       openAIKey={openAIKey}
123 |                       setOpenAIKey={setOpenAIKey}
124 |                       showKey={showKey}
125 |                       setShowKey={setShowKey}
126 |                     />
127 | 
128 |                     <LocalModelSelector
129 |                       models={openAiModels}
130 |                       setModel={setSelectedOpenAiModel}
131 |                       model={selectedOpenAiModel}
132 |                     />
133 |                   </>
134 |                 )}
135 | 
136 |                 <ModelTypeSelector
137 |                   modelType={modelType}
138 |                   setModelType={setModelType}
139 |                 />
140 |               </div>
141 |               <div className="text-xs text-zinc-400 p-8 mt-8 text-center flex flex-col gap-4 border border-zinc-700 rounded-sm m-4">
142 |                 <p className="p-2">
143 |                   If you are not seeing any models for ollama, please serve your
144 |                   ollama with the following command:
145 |                 </p>
146 |                 <pre className="pt-2 bg-zinc-800 p-2 rounded-sm w-max mx-auto">
147 |                   $ OLLAMA_HOST=0.0.0.0 ollama serve
148 |                 </pre>
149 |               </div>
150 |             </div>
151 |           )}
152 |         </>
153 |       )}
154 |     </div>
155 |   );
156 | };
157 | 
158 | export default Header;
159 | 
160 | const APIKeyInput = ({
161 |   openAIKey,
162 |   setOpenAIKey,
163 |   showKey,
164 |   setShowKey,
165 | }: {
166 |   openAIKey: string;
167 |   setOpenAIKey: (key: string) => void;
168 |   showKey: boolean;
169 |   setShowKey: (showKey: boolean) => void;
170 | }) => {
171 |   return (
172 |     <>
173 |       <button
174 |         onClick={() => setShowKey(!showKey)}
175 |         className="flex h-10 items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 ring-offset-background focus:outline-none focus:ring-1 focus:ring-lime-500 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 text-xs"
176 |       >
177 |         {showKey ? (
178 |           <LockIcon className="h-5 w-5" />
179 |         ) : (
180 |           <KeyIcon className="h-5 w-5" />
181 |         )}
182 |       </button>
183 | 
184 |       {showKey && (
185 |         <input
186 |           type="text"
187 |           className="flex h-10 w-full min-w-fit items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-lime-500 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 text-xs"
188 |           placeholder="OPENAI API KEY"
189 |           value={openAIKey}
190 |           onChange={(e) => setOpenAIKey(e.target.value)}
191 |         />
192 |       )}
193 |     </>
194 |   );
195 | };
196 | 
197 | const LocalModelSelector = ({
198 |   models,
199 |   setModel,
200 |   model,
201 | }: {
202 |   models: ListResponse;
203 |   setModel: (model: string) => void;
204 |   model: string;
205 | }) => {
206 |   return (
207 |     <Select
208 |       onValueChange={(value) => {
209 |         setModel(value);
210 |       }}
211 |       value={model}
212 |     >
213 |       <SelectTrigger className="min-w-fit text-xs uppercase bg-transparent">
214 |         <SelectValue placeholder="Models" />
215 |       </SelectTrigger>
216 |       <SelectContent className="text-sm">
217 |         {models?.models.map((m) => (
218 |           <SelectItem
219 |             className="font-mono uppercase font-thin text-xs"
220 |             value={m.name}
221 |             key={m.digest}
222 |           >
223 |             {m.name}
224 |           </SelectItem>
225 |         ))}
226 |       </SelectContent>
227 |     </Select>
228 |   );
229 | };
230 | 
231 | const ModelTypeSelector = ({
232 |   modelType,
233 |   setModelType,
234 | }: {
235 |   modelType: ModelType;
236 |   setModelType: (modelType: ModelType) => void;
237 | }) => {
238 |   return (
239 |     <Select
240 |       onValueChange={(value) => {
241 |         setModelType(value as ModelType);
242 |       }}
243 |       value={modelType}
244 |     >
245 |       <SelectTrigger className="min-w-fit text-xs uppercase bg-transparent">
246 |         <SelectValue placeholder="Mode" />
247 |       </SelectTrigger>
248 |       <SelectContent className="text-sm">
249 |         <SelectItem
250 |           className="font-mono uppercase font-thin text-xs"
251 |           value="ollama"
252 |         >
253 |           ollama
254 |         </SelectItem>
255 |         <SelectItem
256 |           className="font-mono uppercase font-thin text-xs"
257 |           value="openAI"
258 |         >
259 |           openAI
260 |         </SelectItem>
261 |       </SelectContent>
262 |     </Select>
263 |   );
264 | };
265 | 


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