run-llama/chat-ui
1
0
Fork 0
mirror of https://github.com/run-llama/chat-ui.git synced 2026-07-22 11:45:34 -04:00
Code Issues 13 Packages Projects Releases 10 Wiki Activity

feat: update for vercel ai 4.0 (#29)

Browse Source
This commit is contained in:
Marcus Schiesser
2024-11-19 12:40:51 +07:00
committed by GitHub
parent c34d2bc646
commit 4f27d579d0
16 changed files with 434 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/old-schools-divide.md
+5
View File
@@ -0,0 +1,5 @@
---
'@llamaindex/chat-ui': patch
---
Add support for Vercel ai 4.0.0
README.md
+3 -2
View File
@@ -20,7 +20,7 @@ npm install @llamaindex/chat-ui
- Minimal styling, fully customizable with Tailwind CSS
- Custom widgets to extend components (e.g., for rendering generated or retrieved documents)
- TypeScript support for type safety
- Easy integration with LLM backends
- Easy integration with LLM backends like Vercel Ai
- Code and Latex styling with highlight.js and katex
## Usage
@@ -175,7 +175,8 @@ You can use any of them by copying [their CSS](https://github.com/highlightjs/hi
## Example
See the [example app](./apps/web/README.md) for a complete example.
See the [example app](./apps/web/README.md) for a complete example. The generate a full-featured project to
get started with, use [create-llama](https://github.com/run-llama/create-llama).
## License
apps/web/app/custom-demo.tsx
+3 -3
View File
@@ -11,8 +11,8 @@ import {
import { Markdown } from '@llamaindex/chat-ui/widgets'
import { Message, useChat } from 'ai/react'
import { User2 } from 'lucide-react'
import { Code } from './ui/code'
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
import { Code } from '@/components/code'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
const code = `
import {
@@ -200,7 +200,7 @@ export function CustomChat() {
export function CustomChatSection() {
return (
<div className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">Custom Chat Section</h2>
<h2 className="text-2xl font-semibold">Custom Chat Demo</h2>
<Tabs defaultValue="preview" className="w-[800px]">
<TabsList>
<TabsTrigger value="preview">Preview</TabsTrigger>
apps/web/app/globals.css
+42 -33
View File
@@ -5,24 +5,24 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;
--primary: 262.1 83.3% 57.8%;
--primary-foreground: 210 20% 98%;
--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;
--muted: 220 14.3% 95.9%;
--muted-foreground: 220 8.9% 46.1%;
--accent: 220 14.3% 95.9%;
--accent-foreground: 220.9 39.3% 11%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 20% 98%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 262.1 83.3% 57.8%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--radius: 0.5rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
@@ -32,25 +32,25 @@
}
.dark {
--background: 224 71.4% 4.1%;
--foreground: 210 20% 98%;
--card: 224 71.4% 4.1%;
--card-foreground: 210 20% 98%;
--popover: 224 71.4% 4.1%;
--popover-foreground: 210 20% 98%;
--primary: 263.4 70% 50.4%;
--primary-foreground: 210 20% 98%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
--muted-foreground: 217.9 10.6% 64.9%;
--accent: 215 27.9% 16.9%;
--accent-foreground: 210 20% 98%;
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 20% 98%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--ring: 263.4 70% 50.4%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
@@ -58,3 +58,12 @@
--chart-5: 340 75% 55%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
apps/web/app/guide.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
'use client'
import { Code } from './ui/code'
import { Code } from '@/components/code'
export default function Guide(): JSX.Element {
return <Code content="npm install @llamaindex/chat-ui" language="bash" />
apps/web/app/page.tsx
+2 -2
View File
@@ -4,13 +4,13 @@ import Guide from './guide'
export default function Page(): JSX.Element {
return (
<main className="bg-glow-conic min-h-screen p-20">
<main className="min-h-screen p-20">
<div className="mb-10 flex flex-col items-center justify-center space-y-4">
<h1 className="text-6xl font-bold">LlamaIndex ChatUI</h1>
<p className="text-2xl">Build powerful AI chat interfaces with ease</p>
</div>
<div className="mx-auto w-[72%] space-y-16 divide-y-4 divide-zinc-700">
<div className="mx-auto w-[72%] space-y-16 divide-y-4">
<div className="mx-auto w-fit rounded-lg bg-zinc-800 p-3">
<Guide />
</div>
apps/web/app/simple-demo.tsx
+14 -9
View File
@@ -2,7 +2,8 @@
import { ChatSection } from '@llamaindex/chat-ui'
import { Message, useChat } from 'ai/react'
import { Code } from './ui/code'
import { Code } from '@/components/code'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
const code = `
import { ChatSection } from '@llamaindex/chat-ui'
@@ -36,15 +37,19 @@ function SimpleChat() {
export function SimpleChatSection() {
return (
<div className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">Primitive Chat Section</h2>
<div className="flex gap-4">
<div>
<Code content={code} language="jsx" />
</div>
<div className="flex-1">
<h2 className="text-2xl font-semibold">Simple Chat Demo</h2>
<Tabs defaultValue="preview" className="w-[800px]">
<TabsList>
<TabsTrigger value="preview">Preview</TabsTrigger>
<TabsTrigger value="code">Code</TabsTrigger>
</TabsList>
<TabsContent value="preview">
<SimpleChat />
</div>
</div>
</TabsContent>
<TabsContent value="code">
<Code content={code} language="jsx" />
</TabsContent>
</Tabs>
</div>
)
}
apps/web/components.json
+21
View File
@@ -0,0 +1,21 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "zinc",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
apps/web/app/ui/code.tsx → apps/web/components/code.tsx
View File
apps/web/app/ui/tabs.tsx → apps/web/components/ui/tabs.tsx
+7 -6
View File
@@ -2,7 +2,8 @@
import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'
import { cn } from '../lib/utils'
import { cn } from '@/lib/utils'
const Tabs = TabsPrimitive.Root
@@ -11,11 +12,11 @@ const TabsList = React.forwardRef<
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
<TabsPrimitive.List
ref={ref}
className={cn(
'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
'bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1',
className
)}
ref={ref}
{...props}
/>
))
@@ -26,11 +27,11 @@ const TabsTrigger = React.forwardRef<
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow',
className
)}
ref={ref}
{...props}
/>
))
@@ -41,11 +42,11 @@ const TabsContent = React.forwardRef<
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Content
ref={ref}
className={cn(
'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
className
)}
ref={ref}
{...props}
/>
))
apps/web/app/lib/utils.ts → apps/web/lib/utils.ts
View File
apps/web/package.json
+8 -6
View File
@@ -11,14 +11,16 @@
},
"dependencies": {
"@llamaindex/chat-ui": "workspace:*",
"@radix-ui/react-tabs": "^1.1.0",
"highlight.js": "^11.10.0",
"@radix-ui/react-tabs": "^1.1.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"highlight.js": "^11.10.0",
"lucide-react": "^0.453.0",
"tailwind-merge": "^2.1.0",
"next": "^14.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@llamaindex/eslint-config": "workspace:*",
@@ -28,11 +30,11 @@
"@types/node": "^20.11.24",
"@types/react": "^18.2.61",
"@types/react-dom": "^18.2.19",
"ai": "3.3.42",
"ai": "4.0.0",
"autoprefixer": "^10.4.18",
"llamaindex": "0.6.22",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"tailwindcss": "^3.4.15",
"tiktoken": "^1.0.15",
"typescript": "^5.3.3"
}
apps/web/tailwind.config.ts
+53 -1
View File
@@ -1,7 +1,11 @@
import type { Config } from 'tailwindcss'
import sharedConfig from '@llamaindex/tailwind-config'
const config: Pick<Config, 'content' | 'presets' | 'theme'> = {
const config: Pick<
Config,
'content' | 'presets' | 'theme' | 'darkMode' | 'plugins'
> = {
darkMode: ['class'],
content: [
'app/**/*.{ts,tsx}',
'node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}',
@@ -13,8 +17,56 @@ const config: Pick<Config, 'content' | 'presets' | 'theme'> = {
'glow-conic':
'radial-gradient(at 21% 11%, rgba(186, 186, 233, 0.53) 0, transparent 50%), radial-gradient(at 85% 0, hsla(46, 57%, 78%, 0.52) 0, transparent 50%), radial-gradient(at 91% 36%, rgba(194, 213, 255, 0.68) 0, transparent 50%), radial-gradient(at 8% 40%, rgba(251, 218, 239, 0.46) 0, transparent 50%)',
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))',
},
},
},
},
plugins: [require('tailwindcss-animate')],
}
export default config
apps/web/tsconfig.json
+20 -4
View File
@@ -1,8 +1,24 @@
{
"extends": "@llamaindex/typescript-config/nextjs.json",
"compilerOptions": {
"plugins": [{ "name": "next" }]
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": [
"./*"
]
},
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"
],
}
packages/chat-ui/src/chat/chat.interface.ts
+1 -7
View File
@@ -1,10 +1,4 @@
export type MessageRole =
| 'system'
| 'user'
| 'assistant'
| 'function'
| 'data'
| 'tool'
type MessageRole = 'system' | 'user' | 'assistant' | 'data'
export interface Message {
content: string
pnpm-lock.yaml
Generated
+254 -433
View File
File diff suppressed because it is too large Load Diff