├── src
    ├── app
    │   ├── favicon.ico
    │   ├── fonts
    │   │   ├── GeistVF.woff
    │   │   └── GeistMonoVF.woff
    │   ├── layout.tsx
    │   ├── globals.css
    │   └── page.tsx
    ├── pages
    │   └── api
    │   │   └── auth
    │   │       └── [...nextauth].ts
    ├── lib
    │   ├── utils.ts
    │   ├── prisma.ts
    │   └── auth.ts
    ├── components
    │   ├── AuthProvider.tsx
    │   ├── Footer.tsx
    │   ├── Navbar.tsx
    │   ├── ui
    │   │   ├── label.tsx
    │   │   ├── textarea.tsx
    │   │   ├── separator.tsx
    │   │   ├── input.tsx
    │   │   ├── tooltip.tsx
    │   │   ├── avatar.tsx
    │   │   ├── scroll-area.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── dialog.tsx
    │   │   ├── select.tsx
    │   │   └── dropdown-menu.tsx
    │   ├── SignInButton.tsx
    │   └── MessageDisplay.tsx
    ├── utils
    │   └── supabase.ts
    └── types
    │   └── next-auth.d.ts
├── public
    └── images
    │   └── chat-dify.png
├── .env.example
├── postcss.config.mjs
├── next.config.mjs
├── components.json
├── .gitignore
├── .eslintrc.json
├── tsconfig.json
├── prisma
    └── schema.prisma
├── README.md
├── package.json
├── tailwind.config.ts
└── LICENSE


/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sugarforever/chat-dify/main/src/app/favicon.ico


--------------------------------------------------------------------------------
/public/images/chat-dify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sugarforever/chat-dify/main/public/images/chat-dify.png


--------------------------------------------------------------------------------
/src/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sugarforever/chat-dify/main/src/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/src/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sugarforever/chat-dify/main/src/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/src/pages/api/auth/[...nextauth].ts:
--------------------------------------------------------------------------------
1 | import NextAuth from "next-auth";
2 | import { authOptions } from "@/lib/auth";
3 | 
4 | export default NextAuth(authOptions);


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | GOOGLE_CLIENT_ID=
2 | GOOGLE_CLIENT_SECRET=
3 | NEXTAUTH_URL=http://localhost:3000
4 | NEXTAUTH_SECRET=
5 | DATABASE_URL=postgresql://localhost:5432/example


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


--------------------------------------------------------------------------------
/src/lib/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 | 


--------------------------------------------------------------------------------
/src/components/AuthProvider.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | 
3 | import { SessionProvider } from "next-auth/react"
4 | 
5 | export default function AuthProvider({ children }: { children: React.ReactNode }) {
6 |   return <SessionProvider>{children}</SessionProvider>
7 | }


--------------------------------------------------------------------------------
/src/utils/supabase.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from '@supabase/supabase-js'
2 | 
3 | const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
4 | const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
5 | 
6 | export const supabase = createClient(supabaseUrl, supabaseAnonKey)


--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | const Footer = () => {
 2 |   return (
 3 |     <footer className="bg-white text-black py-4">
 4 |       <div className="container mx-auto flex justify-center items-center">
 5 |         <p className="text-sm">&copy; {new Date().getFullYear()}</p>
 6 |       </div>
 7 |     </footer>
 8 |   );
 9 | };
10 | 
11 | export default Footer;


--------------------------------------------------------------------------------
/src/types/next-auth.d.ts:
--------------------------------------------------------------------------------
 1 | import { DefaultSession } from "next-auth";
 2 | 
 3 | declare module "next-auth" {
 4 |   interface Session {
 5 |     user?: {
 6 |       id: string;
 7 |       name?: string | null;
 8 |       email?: string | null;
 9 |       image?: string | null;
10 |       balance: number;
11 |       // add other properties you need
12 |     } & DefaultSession["user"];
13 |   }
14 | }


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   env: {
 4 |     GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
 5 |     GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
 6 |     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
 7 |     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
 8 |     DATABASE_URL: process.env.DATABASE_URL,
 9 |   }
10 | };
11 | 
12 | export default nextConfig;
13 | 


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


--------------------------------------------------------------------------------
/src/lib/prisma.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from '@prisma/client'
 2 | 
 3 | const prismaClientSingleton = () => {
 4 |   return new PrismaClient()
 5 | }
 6 | 
 7 | type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>
 8 | 
 9 | const globalForPrisma = globalThis as unknown as {
10 |   prisma: PrismaClientSingleton | undefined
11 | }
12 | 
13 | const prisma = globalForPrisma.prisma ?? prismaClientSingleton()
14 | 
15 | export default prisma
16 | 
17 | if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma


--------------------------------------------------------------------------------
/.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 | .env
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 
39 | # env files
40 | .env*.local
41 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "next/core-web-vitals",
 4 |     "next/typescript",
 5 |     "plugin:@typescript-eslint/recommended",
 6 |     "prettier"
 7 |   ],
 8 |   "plugins": ["@typescript-eslint"],
 9 |   "parser": "@typescript-eslint/parser",
10 |   "rules": {
11 |     "@typescript-eslint/no-empty-object-type": "off",
12 |     "react/react-in-jsx-scope": "off",
13 |     "react/prop-types": "off",
14 |     "@typescript-eslint/explicit-module-boundary-types": "off",
15 |     "@typescript-eslint/no-explicit-any": "warn",
16 |     "no-unused-vars": "off",
17 |     "@typescript-eslint/no-unused-vars": ["error"]
18 |   }
19 | }


--------------------------------------------------------------------------------
/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 |     "typeRoots": ["./node_modules/@types", "./src/types"]
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Link from "next/link";
 4 | import Image from "next/image";
 5 | export default function Navbar() {
 6 |   return (
 7 |     <nav className="bg-background border-b h-16">
 8 |       <div className="container mx-auto h-full">
 9 |         <div className="flex justify-between items-center h-full">
10 |           <div className="flex items-center gap-2">
11 |             <Image 
12 |               src="/images/chat-dify.png"
13 |               alt="ChatDify Logo"
14 |               width={50}
15 |               height={50}
16 |               className="object-contain"
17 |             />
18 |             <Link href="/" className="text-xl font-semibold hover:text-primary">
19 |               ChatDify
20 |             </Link>
21 |           </div>
22 |         </div>
23 |       </div>
24 |     </nav>
25 |   );
26 | }


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


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


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


--------------------------------------------------------------------------------
/src/lib/auth.ts:
--------------------------------------------------------------------------------
 1 | import { NextAuthOptions } from "next-auth";
 2 | import GoogleProvider from "next-auth/providers/google";
 3 | import { PrismaAdapter } from "@next-auth/prisma-adapter";
 4 | import prisma from './prisma';
 5 | 
 6 | export const authOptions: NextAuthOptions = {
 7 |   adapter: PrismaAdapter(prisma),
 8 |   providers: [
 9 |     GoogleProvider({
10 |       clientId: process.env.GOOGLE_CLIENT_ID!,
11 |       clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
12 |     }),
13 |   ],
14 |   callbacks: {
15 |     async session({ session, user }) {
16 |       if (session.user) {
17 |         session.user.id = user.id;
18 |         const dbUser = await prisma.user.findUnique({
19 |           where: { id: user.id },
20 |           select: { balance: true },
21 |         });
22 | 
23 |         session.user.balance = dbUser?.balance ?? 0;
24 |       }
25 |       return session;
26 |     },
27 |   },
28 |   secret: process.env.NEXTAUTH_SECRET,
29 | };


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


--------------------------------------------------------------------------------
/src/components/SignInButton.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { signIn, signOut, useSession } from "next-auth/react";
 4 | import Image from "next/image";
 5 | 
 6 | export default function SignInButton() {
 7 |   const { data: session } = useSession();
 8 | 
 9 |   if (session && session.user) {
10 |     return (
11 |       <div className="flex gap-4 ml-auto items-center">
12 |         {session.user.image && (
13 |           <Image
14 |             src={session.user.image}
15 |             alt={session.user.name || "用户"}
16 |             width={32}
17 |             height={32}
18 |             className="rounded-full"
19 |           />
20 |         )}
21 |         <p className="text-sky-600">{session.user.name}</p>
22 |         <p className="text-green-600">余额: {session.user.balance}</p>
23 |         <button onClick={() => signOut()} className="text-red-600">
24 |           登出
25 |         </button>
26 |       </div>
27 |     );
28 |   }
29 |   return (
30 |     <button onClick={() => signIn("google")} className="text-green-600 ml-auto">
31 |       登录
32 |     </button>
33 |   );
34 | }


--------------------------------------------------------------------------------
/src/components/MessageDisplay.tsx:
--------------------------------------------------------------------------------
 1 | import ReactMarkdown from 'react-markdown'
 2 | import remarkBreaks from 'remark-breaks'
 3 | 
 4 | interface MessageDisplayProps {
 5 |   content: string
 6 | }
 7 | 
 8 | export function MessageDisplay({ content }: MessageDisplayProps) {
 9 |   return (
10 |     <div className="max-w-[80%] mr-auto">
11 |       <ReactMarkdown 
12 |         remarkPlugins={[remarkBreaks]}
13 |         className="prose dark:prose-invert max-w-none"
14 |         components={{
15 |           a: ({ ...props }) => (
16 |             <a {...props} className="text-blue-500 hover:underline" target="_blank" rel="noopener noreferrer" />
17 |           ),
18 |           code: ({ ...props }) => (
19 |             <code
20 |               {...props}
21 |               className={`${
22 |                 !props.className
23 |                   ? 'bg-muted px-1.5 py-0.5 rounded-sm font-mono text-sm'
24 |                   : 'block bg-muted p-4 rounded-lg font-mono text-sm'
25 |               }`}
26 |             />
27 |           ),
28 |         }}
29 |       >
30 |         {content}
31 |       </ReactMarkdown>
32 |     </div>
33 |   )
34 | } 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import localFont from "next/font/local";
 2 | import "./globals.css";
 3 | import AuthProvider from "../components/AuthProvider";
 4 | import Navbar from "@/components/Navbar";
 5 | import { Analytics } from "@vercel/analytics/react"
 6 | import React from 'react';
 7 | 
 8 | const geistSans = localFont({
 9 |   src: "./fonts/GeistVF.woff",
10 |   variable: "--font-geist-sans",
11 |   weight: "100 900",
12 | });
13 | const geistMono = localFont({
14 |   src: "./fonts/GeistMonoVF.woff",
15 |   variable: "--font-geist-mono",
16 |   weight: "100 900",
17 | });
18 | 
19 | export default function RootLayout({
20 |   children,
21 | }: Readonly<{
22 |   children: React.ReactNode;
23 | }>) {
24 |   return (
25 |     <html lang="en">
26 |       <AuthProvider>
27 |         <body
28 |           className={`${geistSans.variable} ${geistMono.variable} antialiased h-screen flex flex-col`}
29 |         >
30 |           <Navbar />
31 |           <main className="flex-1 w-full mx-auto overflow-hidden">
32 |             {children}
33 |           </main>
34 |           <Analytics />
35 |         </body>
36 |       </AuthProvider>
37 |     </html>
38 |   );
39 | }
40 | 


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


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | generator client {
 2 |   provider = "prisma-client-js"
 3 | }
 4 | 
 5 | datasource db {
 6 |   provider = "postgresql"
 7 |   url      = env("DATABASE_URL")
 8 | }
 9 | 
10 | model Account {
11 |    id                 String  @id @default(cuid())
12 |    userId             String
13 |    type               String
14 |    provider           String
15 |    providerAccountId  String
16 |    refresh_token      String?  @db.Text
17 |    access_token       String?  @db.Text
18 |    expires_at         Int?
19 |    token_type         String?
20 |    scope              String?
21 |    id_token           String?  @db.Text
22 |    session_state      String?
23 |  
24 |    user User @relation(fields: [userId], references: [id], onDelete: Cascade)
25 |  
26 |    @@unique([provider, providerAccountId])
27 |  }
28 |  
29 |  model Session {
30 |    id           String   @id @default(cuid())
31 |    sessionToken String   @unique
32 |    userId       String
33 |    expires      DateTime
34 |    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
35 |  }
36 |  
37 |  model User {
38 |    id            String    @id @default(cuid())
39 |    name          String?
40 |    email         String?   @unique
41 |    emailVerified DateTime?
42 |    image         String?
43 |    balance       Int       @default(5)
44 |    accounts      Account[]
45 |    sessions      Session[]
46 |  }
47 | 
48 | model VerificationToken {
49 |    identifier String
50 |    token      String   @unique
51 |    expires    DateTime
52 |     @@unique([identifier, token])
53 |  }


--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ChatDify
 2 | 
 3 | ChatDify is a local first modern chat interface for [Dify.AI](https://dify.ai) applications. It provides a clean and intuitive way to interact with your Dify chatbots and assistants.
 4 | 
 5 | All your data including Dify API key is stored locally.
 6 | 
 7 | ## Features
 8 | 
 9 | - 🚀 Multiple Dify Apps Support
10 | - 💾 Local Storage Persistence
11 | - 🎨 Clean UI with Dark/Light Mode
12 | - 📱 Responsive Design
13 | - 🔒 Secure API Key Management
14 | - 📝 Markdown Support
15 | - 💬 Real-time Streaming Responses
16 | - 🔗 Smart Link Handling
17 | - 📊 Code Block Formatting
18 | 
19 | ## Getting Started
20 | 
21 | First, install the dependencies:
22 | 
23 | ```bash
24 | npm install
25 | # or
26 | yarn install
27 | # or
28 | pnpm install
29 | ```
30 | 
31 | Then, run the development server:
32 | 
33 | ```bash
34 | npm run dev
35 | # or
36 | yarn dev
37 | # or
38 | pnpm dev
39 | ```
40 | 
41 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
42 | 
43 | ## Configuration
44 | 
45 | 1. Get your Dify API key from [Dify Console](https://cloud.dify.ai)
46 | 2. Add a new app in ChatDify using your API key
47 | 3. Start chatting with your Dify assistant
48 | 
49 | ## Tech Stack
50 | 
51 | - [Next.js 14](https://nextjs.org/) - React Framework
52 | - [Tailwind CSS](https://tailwindcss.com) - Styling
53 | - [shadcn/ui](https://ui.shadcn.com/) - UI Components
54 | - [React Markdown](https://github.com/remarkjs/react-markdown) - Markdown Rendering
55 | 
56 | ## Development
57 | 
58 | This project uses:
59 | - TypeScript for type safety
60 | - ESLint for code linting
61 | - Prettier for code formatting
62 | - Tailwind CSS for styling
63 | 
64 | ## License
65 | 
66 | [MIT](LICENSE)
67 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-boilerplate",
 3 |   "version": "0.1.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 |     "@next-auth/prisma-adapter": "^1.0.7",
13 |     "@prisma/client": "^5.19.1",
14 |     "@radix-ui/react-avatar": "^1.1.0",
15 |     "@radix-ui/react-dialog": "^1.1.2",
16 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
17 |     "@radix-ui/react-icons": "^1.3.0",
18 |     "@radix-ui/react-label": "^2.1.0",
19 |     "@radix-ui/react-scroll-area": "^1.2.1",
20 |     "@radix-ui/react-select": "^2.1.1",
21 |     "@radix-ui/react-separator": "^1.1.0",
22 |     "@radix-ui/react-slot": "^1.1.0",
23 |     "@radix-ui/react-tooltip": "^1.1.2",
24 |     "@shadcn/ui": "^0.0.4",
25 |     "@supabase/supabase-js": "^2.45.4",
26 |     "@vercel/analytics": "^1.4.1",
27 |     "class-variance-authority": "^0.7.0",
28 |     "clsx": "^2.1.1",
29 |     "framer-motion": "^11.13.1",
30 |     "lucide-react": "^0.441.0",
31 |     "next": "14.2.12",
32 |     "next-auth": "^4.24.7",
33 |     "react": "^18",
34 |     "react-dom": "^18",
35 |     "react-markdown": "^9.0.1",
36 |     "remark-breaks": "^4.0.0",
37 |     "tailwind-merge": "^2.5.2",
38 |     "tailwindcss-animate": "^1.0.7"
39 |   },
40 |   "devDependencies": {
41 |     "@tailwindcss/typography": "^0.5.15",
42 |     "@types/node": "^20",
43 |     "@types/react": "^18",
44 |     "@types/react-dom": "^18",
45 |     "@typescript-eslint/eslint-plugin": "^8.8.1",
46 |     "@typescript-eslint/parser": "^8.8.1",
47 |     "eslint": "^8",
48 |     "eslint-config-next": "14.2.12",
49 |     "eslint-config-prettier": "^9.1.0",
50 |     "postcss": "^8",
51 |     "prisma": "^5.19.1",
52 |     "tailwindcss": "^3.4.1",
53 |     "typescript": "^5"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ScrollArea = React.forwardRef<
 9 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11 | >(({ className, children, ...props }, ref) => (
12 |   <ScrollAreaPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative overflow-hidden", className)}
15 |     {...props}
16 |   >
17 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18 |       {children}
19 |     </ScrollAreaPrimitive.Viewport>
20 |     <ScrollBar />
21 |     <ScrollAreaPrimitive.Corner />
22 |   </ScrollAreaPrimitive.Root>
23 | ))
24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25 | 
26 | const ScrollBar = React.forwardRef<
27 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29 | >(({ className, orientation = "vertical", ...props }, ref) => (
30 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
31 |     ref={ref}
32 |     orientation={orientation}
33 |     className={cn(
34 |       "flex touch-none select-none transition-colors",
35 |       orientation === "vertical" &&
36 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
37 |       orientation === "horizontal" &&
38 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39 |       className
40 |     )}
41 |     {...props}
42 |   >
43 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 | ))
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47 | 
48 | export { ScrollArea, ScrollBar }
49 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |     darkMode: ["class"],
 5 |     content: [
 6 |     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   theme: {
11 |   	extend: {
12 |   		colors: {
13 |   			background: 'hsl(var(--background))',
14 |   			foreground: 'hsl(var(--foreground))',
15 |   			card: {
16 |   				DEFAULT: 'hsl(var(--card))',
17 |   				foreground: 'hsl(var(--card-foreground))'
18 |   			},
19 |   			popover: {
20 |   				DEFAULT: 'hsl(var(--popover))',
21 |   				foreground: 'hsl(var(--popover-foreground))'
22 |   			},
23 |   			primary: {
24 |   				DEFAULT: 'hsl(var(--primary))',
25 |   				foreground: 'hsl(var(--primary-foreground))'
26 |   			},
27 |   			secondary: {
28 |   				DEFAULT: 'hsl(var(--secondary))',
29 |   				foreground: 'hsl(var(--secondary-foreground))'
30 |   			},
31 |   			muted: {
32 |   				DEFAULT: 'hsl(var(--muted))',
33 |   				foreground: 'hsl(var(--muted-foreground))'
34 |   			},
35 |   			accent: {
36 |   				DEFAULT: 'hsl(var(--accent))',
37 |   				foreground: 'hsl(var(--accent-foreground))'
38 |   			},
39 |   			destructive: {
40 |   				DEFAULT: 'hsl(var(--destructive))',
41 |   				foreground: 'hsl(var(--destructive-foreground))'
42 |   			},
43 |   			border: 'hsl(var(--border))',
44 |   			input: 'hsl(var(--input))',
45 |   			ring: 'hsl(var(--ring))',
46 |   			chart: {
47 |   				'1': 'hsl(var(--chart-1))',
48 |   				'2': 'hsl(var(--chart-2))',
49 |   				'3': 'hsl(var(--chart-3))',
50 |   				'4': 'hsl(var(--chart-4))',
51 |   				'5': 'hsl(var(--chart-5))'
52 |   			}
53 |   		},
54 |   		borderRadius: {
55 |   			lg: 'var(--radius)',
56 |   			md: 'calc(var(--radius) - 2px)',
57 |   			sm: 'calc(var(--radius) - 4px)'
58 |   		}
59 |   	}
60 |   },
61 |   plugins: [
62 |     require("@tailwindcss/typography"),
63 |     require("tailwindcss-animate")
64 |   ],
65 | };
66 | export default config;
67 | 


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


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | # Open Source License
 2 | 
 3 | ChatDify is licensed under the Apache License 2.0, with the following additional conditions:
 4 | 
 5 | 1. ChatDify may be utilized commercially, including as a frontend service. Should the conditions below be met, a commercial license must be obtained from the producer:
 6 | 
 7 | a. Public Service: Unless explicitly authorized by ChatDify in writing, you may not use the ChatDify source code to operate a public-facing service that serves customers. 
 8 |     - Service Definition: A public-facing service refers to any deployment that provides ChatDify's functionality to external users or customers, whether through a website, API, or any other means of access.
 9 |     
10 | b. LOGO and copyright information: In the process of using ChatDify, you may not remove or modify the LOGO or copyright information in the ChatDify application.
11 |     - Frontend Definition: For the purposes of this license, the "frontend" of ChatDify includes all components located in the repository.
12 | 
13 | Please contact 0001coder@gmail.com by email to inquire about licensing matters.
14 | 
15 | 2. As a contributor, you should agree that:
16 | 
17 | a. The producer can adjust the open-source agreement to be more strict or relaxed as deemed necessary.
18 | b. Your contributed code may be used for commercial purposes, including but not limited to its cloud business operations.
19 | 
20 | Apart from the specific conditions mentioned above, all other rights and restrictions follow the Apache License 2.0. Detailed information about the Apache License 2.0 can be found at http://www.apache.org/licenses/LICENSE-2.0.
21 | 
22 | The interactive design of this product is protected by appearance patent.
23 | 
24 | © 2024 VerySmallWoods (sugarforever).
25 | 
26 | 
27 | ----------
28 | 
29 | Licensed under the Apache License, Version 2.0 (the "License");
30 | you may not use this file except in compliance with the License.
31 | You may obtain a copy of the License at
32 | 
33 |     http://www.apache.org/licenses/LICENSE-2.0
34 | 
35 | Unless required by applicable law or agreed to in writing, software
36 | distributed under the License is distributed on an "AS IS" BASIS,
37 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
38 | See the License for the specific language governing permissions and
39 | limitations under the License.


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


--------------------------------------------------------------------------------
/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 { cn } from "@/lib/utils"
  6 | import { Cross2Icon } from "@radix-ui/react-icons"
  7 | 
  8 | const Dialog = DialogPrimitive.Root
  9 | 
 10 | const DialogTrigger = DialogPrimitive.Trigger
 11 | 
 12 | const DialogPortal = DialogPrimitive.Portal
 13 | 
 14 | const DialogClose = DialogPrimitive.Close
 15 | 
 16 | const DialogOverlay = React.forwardRef<
 17 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 18 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 19 | >(({ className, ...props }, ref) => (
 20 |   <DialogPrimitive.Overlay
 21 |     ref={ref}
 22 |     className={cn(
 23 |       "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",
 24 |       className
 25 |     )}
 26 |     {...props}
 27 |   />
 28 | ))
 29 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 30 | 
 31 | const DialogContent = React.forwardRef<
 32 |   React.ElementRef<typeof DialogPrimitive.Content>,
 33 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 34 | >(({ className, children, ...props }, ref) => (
 35 |   <DialogPortal>
 36 |     <DialogOverlay />
 37 |     <DialogPrimitive.Content
 38 |       ref={ref}
 39 |       className={cn(
 40 |         "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",
 41 |         className
 42 |       )}
 43 |       {...props}
 44 |     >
 45 |       {children}
 46 |       <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">
 47 |         <Cross2Icon className="h-4 w-4" />
 48 |         <span className="sr-only">Close</span>
 49 |       </DialogPrimitive.Close>
 50 |     </DialogPrimitive.Content>
 51 |   </DialogPortal>
 52 | ))
 53 | DialogContent.displayName = DialogPrimitive.Content.displayName
 54 | 
 55 | const DialogHeader = ({
 56 |   className,
 57 |   ...props
 58 | }: React.HTMLAttributes<HTMLDivElement>) => (
 59 |   <div
 60 |     className={cn(
 61 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | )
 67 | DialogHeader.displayName = "DialogHeader"
 68 | 
 69 | const DialogFooter = ({
 70 |   className,
 71 |   ...props
 72 | }: React.HTMLAttributes<HTMLDivElement>) => (
 73 |   <div
 74 |     className={cn(
 75 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 76 |       className
 77 |     )}
 78 |     {...props}
 79 |   />
 80 | )
 81 | DialogFooter.displayName = "DialogFooter"
 82 | 
 83 | const DialogTitle = React.forwardRef<
 84 |   React.ElementRef<typeof DialogPrimitive.Title>,
 85 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 86 | >(({ className, ...props }, ref) => (
 87 |   <DialogPrimitive.Title
 88 |     ref={ref}
 89 |     className={cn(
 90 |       "text-lg font-semibold leading-none tracking-tight",
 91 |       className
 92 |     )}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 97 | 
 98 | const DialogDescription = React.forwardRef<
 99 |   React.ElementRef<typeof DialogPrimitive.Description>,
100 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
101 | >(({ className, ...props }, ref) => (
102 |   <DialogPrimitive.Description
103 |     ref={ref}
104 |     className={cn("text-sm text-muted-foreground", className)}
105 |     {...props}
106 |   />
107 | ))
108 | DialogDescription.displayName = DialogPrimitive.Description.displayName
109 | 
110 | export {
111 |   Dialog,
112 |   DialogPortal,
113 |   DialogOverlay,
114 |   DialogTrigger,
115 |   DialogClose,
116 |   DialogContent,
117 |   DialogHeader,
118 |   DialogFooter,
119 |   DialogTitle,
120 |   DialogDescription,
121 | }
122 | 


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


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


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import { Button } from "@/components/ui/button";
  5 | import { Input } from "@/components/ui/input";
  6 | import { ScrollArea } from "@/components/ui/scroll-area";
  7 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
  8 | import {
  9 |   MoreVertical,
 10 |   Plus,
 11 |   Send,
 12 |   MessageSquare,
 13 |   Key,
 14 |   Eye,
 15 |   EyeOff,
 16 |   Trash2,
 17 |   ChevronRight,
 18 | } from "lucide-react";
 19 | import {
 20 |   Dialog,
 21 |   DialogContent,
 22 |   DialogHeader,
 23 |   DialogTitle,
 24 |   DialogTrigger,
 25 |   DialogClose,
 26 | } from "@/components/ui/dialog";
 27 | import { MessageDisplay } from "@/components/MessageDisplay";
 28 | import { motion, AnimatePresence } from "framer-motion";
 29 | import React from "react";
 30 | 
 31 | interface Message {
 32 |   id: string;
 33 |   content: string;
 34 |   sender: string;
 35 |   timestamp: string;
 36 |   avatar?: string;
 37 | }
 38 | 
 39 | interface DifyResponse {
 40 |   event: string;
 41 |   message_id?: string;
 42 |   conversation_id?: string;
 43 |   answer?: string;
 44 |   created_at?: number;
 45 |   code?: string;
 46 |   status?: number;
 47 |   message?: string;
 48 | }
 49 | 
 50 | interface AppMessage extends Message {
 51 |   conversation_id?: string;
 52 | }
 53 | 
 54 | interface App {
 55 |   name: string;
 56 |   apiKey: string;
 57 |   type: string;
 58 |   messages?: AppMessage[];
 59 |   conversation_id?: string;
 60 | }
 61 | 
 62 | const steps = [
 63 |   {
 64 |     icon: MessageSquare,
 65 |     title: "Create a Chatbot",
 66 |     description: "Visit cloud.dify.ai to create your chatbot application",
 67 |     link: "https://cloud.dify.ai",
 68 |   },
 69 |   {
 70 |     icon: Key,
 71 |     title: "Enable API Access",
 72 |     description: "Go to your app configuration and create an API key",
 73 |   },
 74 |   {
 75 |     icon: Plus,
 76 |     title: "Add Your App",
 77 |     description: "Click the + button on the left panel to add your app",
 78 |   },
 79 | ];
 80 | 
 81 | export default function Home() {
 82 |   const [apps, setApps] = useState<App[]>([]);
 83 |   const [selectedApp, setSelectedApp] = useState<App | null>(null);
 84 |   const [newAppName, setNewAppName] = useState("");
 85 |   const [newApiKey, setNewApiKey] = useState("");
 86 |   const [newMessage, setNewMessage] = useState("");
 87 |   const [newAppType, setNewAppType] = useState("chatbot");
 88 |   const [showApiKey, setShowApiKey] = useState(false);
 89 | 
 90 |   useEffect(() => {
 91 |     const savedApps = localStorage.getItem("difyApps");
 92 |     if (savedApps) {
 93 |       setApps(JSON.parse(savedApps));
 94 |     }
 95 |   }, []);
 96 | 
 97 |   useEffect(() => {
 98 |     if (apps.length > 0) {
 99 |       localStorage.setItem("difyApps", JSON.stringify(apps));
100 |     }
101 |   }, [apps]);
102 | 
103 |   const handleAddApp = () => {
104 |     if (newAppName && newApiKey) {
105 |       const newApps = [
106 |         ...apps,
107 |         {
108 |           name: newAppName,
109 |           apiKey: newApiKey,
110 |           type: newAppType,
111 |           messages: [
112 |             {
113 |               id: "1",
114 |               content: "Hello! How can I help you today?",
115 |               sender: "Assistant",
116 |               timestamp: new Date().toLocaleTimeString([], {
117 |                 hour: "2-digit",
118 |                 minute: "2-digit",
119 |               }),
120 |             },
121 |           ],
122 |         },
123 |       ];
124 |       setApps(newApps);
125 |       localStorage.setItem("difyApps", JSON.stringify(newApps));
126 |       setNewApiKey("");
127 |       setNewAppName("");
128 |       setNewAppType("chatbot");
129 |     }
130 |   };
131 | 
132 |   const handleSendMessage = async () => {
133 |     if (!newMessage.trim() || !selectedApp) return;
134 | 
135 |     const userMessage = {
136 |       id: Date.now().toString(),
137 |       content: newMessage,
138 |       sender: "User",
139 |       timestamp: new Date().toLocaleTimeString([], {
140 |         hour: "2-digit",
141 |         minute: "2-digit",
142 |       }),
143 |     };
144 | 
145 |     const updatedApps = apps.map((app) => {
146 |       if (app.name === selectedApp.name) {
147 |         const updatedApp = {
148 |           ...app,
149 |           messages: [...(app.messages || []), userMessage],
150 |         };
151 |         setSelectedApp(updatedApp);
152 |         return updatedApp;
153 |       }
154 |       return app;
155 |     });
156 | 
157 |     setApps(updatedApps);
158 |     setNewMessage("");
159 | 
160 |     try {
161 |       const endpoint = selectedApp.type === 'workflow' 
162 |         ? 'https://api.dify.ai/v1/workflows/run'
163 |         : 'https://api.dify.ai/v1/chat-messages';
164 | 
165 |       const payload = selectedApp.type === 'workflow' 
166 |         ? {
167 |             inputs: { url: newMessage },
168 |             response_mode: "blocking",
169 |             user: "user-123",
170 |           }
171 |         : {
172 |             inputs: {},
173 |             query: newMessage,
174 |             response_mode: "streaming",
175 |             conversation_id: selectedApp.conversation_id || "",
176 |             user: "user-123",
177 |           };
178 | 
179 |       const response = await fetch(endpoint, {
180 |         method: "POST",
181 |         headers: {
182 |           Authorization: `Bearer ${selectedApp.apiKey}`,
183 |           "Content-Type": "application/json",
184 |         },
185 |         body: JSON.stringify(payload),
186 |       });
187 | 
188 |       if (selectedApp.type === 'workflow') {
189 |         const data = await response.json();
190 |         const assistantMessage = {
191 |           id: Date.now().toString(),
192 |           content: data.data.outputs.keywords || "No response",
193 |           sender: "Assistant",
194 |           timestamp: new Date().toLocaleTimeString([], {
195 |             hour: "2-digit",
196 |             minute: "2-digit",
197 |           }),
198 |         };
199 | 
200 |         setApps((prevApps) => {
201 |           const newApps = prevApps.map((app) => {
202 |             if (app.name === selectedApp.name) {
203 |               const updatedApp = {
204 |                 ...app,
205 |                 messages: [...(app.messages || []), assistantMessage],
206 |               };
207 |               setSelectedApp(updatedApp);
208 |               return updatedApp;
209 |             }
210 |             return app;
211 |           });
212 |           return newApps;
213 |         });
214 |       } else {
215 |         const reader = response.body?.getReader();
216 |         if (!reader) return;
217 | 
218 |         const assistantMessage = {
219 |           id: Date.now().toString(),
220 |           content: "",
221 |           sender: "Assistant",
222 |           timestamp: new Date().toLocaleTimeString([], {
223 |             hour: "2-digit",
224 |             minute: "2-digit",
225 |           }),
226 |           conversation_id: "",
227 |         };
228 | 
229 |         while (true) {
230 |           const { done, value } = await reader.read();
231 |           if (done) break;
232 | 
233 |           const chunk = new TextDecoder().decode(value);
234 |           const lines = chunk.split("\n");
235 | 
236 |           for (const line of lines) {
237 |             console.log(line);
238 |             if (line.startsWith("data: ")) {
239 |               const data: DifyResponse = JSON.parse(line.slice(6));
240 | 
241 |               if (data.event === "error") {
242 |                 const errorMessage = {
243 |                   id: Date.now().toString(),
244 |                   content: `Error: ${data.message || "An error occurred"}`,
245 |                   sender: "Assistant",
246 |                   timestamp: new Date().toLocaleTimeString([], {
247 |                     hour: "2-digit",
248 |                     minute: "2-digit",
249 |                   }),
250 |                   conversation_id: data.conversation_id,
251 |                 };
252 | 
253 |                 setApps((prevApps) => {
254 |                   const newApps = prevApps.map((app) => {
255 |                     if (app.name === selectedApp.name) {
256 |                       const updatedApp = {
257 |                         ...app,
258 |                         messages: [...(app.messages || []), errorMessage],
259 |                         conversation_id: data.conversation_id,
260 |                       };
261 |                       setSelectedApp(updatedApp);
262 |                       return updatedApp;
263 |                     }
264 |                     return app;
265 |                   });
266 |                   return newApps;
267 |                 });
268 | 
269 |                 reader.cancel();
270 |                 break;
271 |               } else if (data.event === "message") {
272 |                 assistantMessage.content += data.answer || "";
273 |                 assistantMessage.conversation_id = data.conversation_id || "";
274 | 
275 |                 setApps((prevApps) => {
276 |                   const newApps = prevApps.map((app) => {
277 |                     if (app.name === selectedApp.name) {
278 |                       const messages = [...(app.messages || [])];
279 |                       const lastMessage = messages[messages.length - 1];
280 | 
281 |                       if (lastMessage.sender === "Assistant") {
282 |                         messages[messages.length - 1] = assistantMessage;
283 |                       } else {
284 |                         messages.push(assistantMessage);
285 |                       }
286 | 
287 |                       const updatedApp = {
288 |                         ...app,
289 |                         messages,
290 |                         conversation_id: data.conversation_id,
291 |                       };
292 |                       setSelectedApp(updatedApp);
293 |                       return updatedApp;
294 |                     }
295 |                     return app;
296 |                   });
297 |                   return newApps;
298 |                 });
299 |               }
300 |             }
301 |           }
302 |         }
303 |       }
304 |     } catch (error) {
305 |       console.error("Error sending message:", error);
306 |     }
307 |   };
308 | 
309 |   const GuideContent = () => {
310 |     const [activeStep, setActiveStep] = useState(0)
311 |   
312 |     return (
313 |       <div className="min-h-screen bg-black text-white flex items-center justify-center p-4">
314 |         <div className="w-full max-w-4xl">
315 |           <motion.h1 
316 |             className="text-5xl md:text-7xl font-bold mb-12 tracking-tight"
317 |             initial={{ opacity: 0, y: -20 }}
318 |             animate={{ opacity: 1, y: 0 }}
319 |             transition={{ duration: 0.8, ease: "easeOut" }}
320 |           >
321 |             Welcome to ChatDify
322 |           </motion.h1>
323 |           
324 |           <div className="grid md:grid-cols-[1fr,2fr] gap-8">
325 |             <div className="space-y-4">
326 |               {steps.map((step, index) => (
327 |                 <motion.button
328 |                   key={step.title}
329 |                   className={`w-full text-left p-4 rounded-lg transition-colors duration-300 ${
330 |                     index === activeStep ? 'bg-white text-black' : 'bg-zinc-900 hover:bg-zinc-800'
331 |                   }`}
332 |                   onClick={() => setActiveStep(index)}
333 |                   initial={{ opacity: 0, x: -20 }}
334 |                   animate={{ opacity: 1, x: 0 }}
335 |                   transition={{ delay: index * 0.1, duration: 0.5 }}
336 |                 >
337 |                   <div className="flex items-center justify-between">
338 |                     <span className="text-lg font-medium">{step.title}</span>
339 |                     <ChevronRight className={`w-5 h-5 transition-transform duration-300 ${
340 |                       index === activeStep ? 'rotate-90' : ''
341 |                     }`} />
342 |                   </div>
343 |                 </motion.button>
344 |               ))}
345 |             </div>
346 |             
347 |             <div className="relative h-[300px] bg-zinc-900 rounded-lg p-6 overflow-hidden">
348 |               <AnimatePresence mode="wait">
349 |                 <motion.div
350 |                   key={activeStep}
351 |                   initial={{ opacity: 0, y: 20 }}
352 |                   animate={{ opacity: 1, y: 0 }}
353 |                   exit={{ opacity: 0, y: -20 }}
354 |                   transition={{ duration: 0.5 }}
355 |                   className="absolute inset-6"
356 |                 >
357 |                   <div className="flex items-start gap-4">
358 |                     <div className="p-3 rounded-full bg-zinc-800">
359 |                       {steps[activeStep].icon && React.createElement(steps[activeStep].icon, { className: "w-6 h-6" })}
360 |                     </div>
361 |                     <div>
362 |                       <h2 className="text-2xl font-semibold mb-4">{steps[activeStep].title}</h2>
363 |                       <p className="text-zinc-400 mb-4">{steps[activeStep].description}</p>
364 |                       {steps[activeStep].link && (
365 |                         <a
366 |                           href={steps[activeStep].link}
367 |                           target="_blank"
368 |                           rel="noopener noreferrer"
369 |                           className="inline-flex items-center text-white hover:underline"
370 |                         >
371 |                           Learn more
372 |                           <ChevronRight className="w-4 h-4 ml-1" />
373 |                         </a>
374 |                       )}
375 |                     </div>
376 |                   </div>
377 |                 </motion.div>
378 |               </AnimatePresence>
379 |             </div>
380 |           </div>
381 |           
382 |           <motion.div
383 |             className="mt-12 text-center"
384 |             initial={{ opacity: 0 }}
385 |             animate={{ opacity: 1 }}
386 |             transition={{ delay: 0.5, duration: 0.5 }}
387 |           >
388 |             <p className="text-xl text-zinc-400">
389 |               Once you&apos;ve added your app, select it to start chatting!
390 |             </p>
391 |           </motion.div>
392 |         </div>
393 |       </div>
394 |     )
395 |   }
396 | 
397 |   return (
398 |     <div className="flex h-full">
399 |       {/* Left Panel - Apps Management */}
400 |       <div className="w-80 border-r flex flex-col h-full">
401 |         <div className="p-4 flex-1">
402 |           <div className="flex items-center justify-between mb-4">
403 |             <h2 className="text-lg font-semibold">Dify Apps</h2>
404 |             <Dialog>
405 |               <DialogTrigger asChild>
406 |                 <Button variant="ghost" size="icon">
407 |                   <Plus className="h-4 w-4" />
408 |                 </Button>
409 |               </DialogTrigger>
410 |               <DialogContent className="sm:max-w-[425px] bg-white dark:bg-zinc-900">
411 |                 <DialogHeader className="space-y-4 pb-4">
412 |                   <div className="flex items-center gap-3">
413 |                     <div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800">
414 |                       <Plus className="h-5 w-5" />
415 |                     </div>
416 |                     <div>
417 |                       <DialogTitle className="text-xl font-semibold">
418 |                         Add New App
419 |                       </DialogTitle>
420 |                       <p className="text-sm text-muted-foreground">
421 |                         Add attributes and manage access
422 |                       </p>
423 |                     </div>
424 |                   </div>
425 |                 </DialogHeader>
426 | 
427 |                 <form onSubmit={(e) => e.preventDefault()} autoComplete="off">
428 |                   <div className="space-y-6">
429 |                     <div className="space-y-2">
430 |                       <label htmlFor="name" className="text-sm font-medium">
431 |                         App Name
432 |                       </label>
433 |                       <Input
434 |                         id="name"
435 |                         placeholder="Enter app name"
436 |                         className="h-10"
437 |                         value={newAppName}
438 |                         onChange={(e) => setNewAppName(e.target.value)}
439 |                         autoComplete="off"
440 |                         data-form-type="other"
441 |                         autoCapitalize="off"
442 |                         autoCorrect="off"
443 |                       />
444 |                       <p className="text-xs text-muted-foreground">
445 |                         This is a local name to help you identify your Dify app.
446 |                         It can be different from your Dify app name
447 |                       </p>
448 |                     </div>
449 | 
450 |                     <div className="space-y-2">
451 |                       <label htmlFor="apiKey" className="text-sm font-medium">
452 |                         API Key
453 |                       </label>
454 |                       <div className="relative">
455 |                         <Input
456 |                           id="apiKey"
457 |                           type={showApiKey ? "text" : "password"}
458 |                           placeholder="Dify API Key"
459 |                           className="h-10 pr-10"
460 |                           value={newApiKey}
461 |                           onChange={(e) => setNewApiKey(e.target.value)}
462 |                           autoComplete="off"
463 |                           data-form-type="other"
464 |                           autoCapitalize="off"
465 |                           autoCorrect="off"
466 |                         />
467 |                         <Button
468 |                           type="button"
469 |                           variant="ghost"
470 |                           size="icon"
471 |                           className="absolute right-0 top-0 h-10 w-10"
472 |                           onClick={() => setShowApiKey(!showApiKey)}
473 |                         >
474 |                           {showApiKey ? (
475 |                             <EyeOff className="h-4 w-4" />
476 |                           ) : (
477 |                             <Eye className="h-4 w-4" />
478 |                           )}
479 |                         </Button>
480 |                       </div>
481 |                       <p className="text-xs text-muted-foreground">
482 |                         Enter your Dify API key to connect your app
483 |                       </p>
484 |                     </div>
485 | 
486 |                     <div className="space-y-2">
487 |                       <label htmlFor="type" className="text-sm font-medium">
488 |                         App Type
489 |                       </label>
490 |                       <select
491 |                         id="type"
492 |                         className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus:outline-none focus:ring-1 focus:ring-ring"
493 |                         value={newAppType}
494 |                         onChange={(e) => setNewAppType(e.target.value)}
495 |                       >
496 |                         <option value="chatbot">Chatbot</option>
497 |                         <option value="workflow">Workflow</option>
498 |                       </select>
499 |                       <p className="text-xs text-muted-foreground">
500 |                         Choose between a Chatbot or Workflow application type
501 |                       </p>
502 |                     </div>
503 |                   </div>
504 |                 </form>
505 | 
506 |                 <div className="flex justify-end gap-3 mt-6">
507 |                   <DialogClose asChild>
508 |                     <Button variant="outline">Cancel</Button>
509 |                   </DialogClose>
510 |                   <DialogClose asChild>
511 |                     <Button
512 |                       onClick={handleAddApp}
513 |                       disabled={!newAppName || !newApiKey}
514 |                     >
515 |                       Save changes
516 |                     </Button>
517 |                   </DialogClose>
518 |                 </div>
519 |               </DialogContent>
520 |             </Dialog>
521 |           </div>
522 | 
523 |           <ScrollArea className="h-[calc(100vh-12rem)]">
524 |             <div className="space-y-1 pr-4">
525 |               {apps.map((app, index) => (
526 |                 <div
527 |                   key={index}
528 |                   className={`group flex items-center justify-between px-3 py-2 rounded-md cursor-pointer transition-colors hover:bg-muted/50 ${
529 |                     selectedApp?.name === app.name ? "bg-muted" : ""
530 |                   }`}
531 |                 >
532 |                   <div className="flex-1" onClick={() => setSelectedApp(app)}>
533 |                     <div className="font-medium">{app.name}</div>
534 |                     <div className="text-sm text-muted-foreground">
535 |                       API Key: {app.apiKey.slice(0, 2)}•••••
536 |                       {app.apiKey.slice(-2)}
537 |                     </div>
538 |                   </div>
539 |                   <Button
540 |                     variant="ghost"
541 |                     size="icon"
542 |                     className="opacity-0 group-hover:opacity-100 transition-opacity"
543 |                     onClick={(e) => {
544 |                       e.stopPropagation();
545 |                       const confirmed = window.confirm(
546 |                         `Are you sure you want to delete ${app.name}?`
547 |                       );
548 |                       if (confirmed) {
549 |                         const newApps = apps.filter((a) => a.name !== app.name);
550 |                         setApps(newApps);
551 |                         if (selectedApp?.name === app.name) {
552 |                           setSelectedApp(null);
553 |                         }
554 |                         localStorage.setItem(
555 |                           "difyApps",
556 |                           JSON.stringify(newApps)
557 |                         );
558 |                       }
559 |                     }}
560 |                   >
561 |                     <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive" />
562 |                   </Button>
563 |                 </div>
564 |               ))}
565 |             </div>
566 |           </ScrollArea>
567 |         </div>
568 |       </div>
569 | 
570 |       {/* Right Panel - Chat UI */}
571 |       <div className="flex-1 h-full overflow-hidden flex flex-col bg-background">
572 |         {selectedApp ? (
573 |           <>
574 |             <div className="border-b p-4 flex justify-between items-center">
575 |               <h2 className="text-xl font-semibold">
576 |                 Chat with {selectedApp.name}
577 |               </h2>
578 |               <Button variant="ghost" size="icon">
579 |                 <MoreVertical className="h-5 w-5" />
580 |               </Button>
581 |             </div>
582 | 
583 |             <ScrollArea className="flex-1 p-4">
584 |               <div className="space-y-6">
585 |                 {selectedApp.messages?.map((message, index) => (
586 |                   <div key={message.id} className="space-y-4">
587 |                     {index === 0 && (
588 |                       <div className="text-center">
589 |                         <span className="text-sm text-muted-foreground bg-muted px-2 py-1 rounded-md">
590 |                           {new Date().toLocaleDateString("en-US", {
591 |                             weekday: "long",
592 |                             month: "long",
593 |                             day: "numeric",
594 |                           })}
595 |                         </span>
596 |                       </div>
597 |                     )}
598 |                     <div className="flex items-start gap-3">
599 |                       <Avatar>
600 |                         <AvatarImage src={message.avatar} />
601 |                         <AvatarFallback>
602 |                           {message.sender === "Assistant"
603 |                             ? selectedApp.name[0]
604 |                             : "U"}
605 |                         </AvatarFallback>
606 |                       </Avatar>
607 |                       <div className="flex-1">
608 |                         <div className="flex items-center gap-2">
609 |                           <span className="font-medium">{message.sender}</span>
610 |                           <span className="text-sm text-muted-foreground">
611 |                             {message.timestamp}
612 |                           </span>
613 |                         </div>
614 |                         <MessageDisplay content={message.content} />
615 |                       </div>
616 |                     </div>
617 |                   </div>
618 |                 ))}
619 |               </div>
620 |             </ScrollArea>
621 | 
622 |             <div className="border-t p-4">
623 |               <div className="flex gap-2">
624 |                 <Button variant="outline" size="icon">
625 |                   <Plus className="h-5 w-5" />
626 |                 </Button>
627 |                 <Input
628 |                   placeholder="Message"
629 |                   value={newMessage}
630 |                   onChange={(e) => setNewMessage(e.target.value)}
631 |                   onKeyDown={(e) => e.key === "Enter" && handleSendMessage()}
632 |                   className="flex-1"
633 |                   autoComplete="new-password"
634 |                   spellCheck="false"
635 |                 />
636 |                 <Button onClick={handleSendMessage} size="icon">
637 |                   <Send className="h-5 w-5" />
638 |                 </Button>
639 |               </div>
640 |             </div>
641 |           </>
642 |         ) : (
643 |           <GuideContent />
644 |         )}
645 |       </div>
646 |     </div>
647 |   );
648 | }
649 | 


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