mirror of
https://github.com/run-llama/chat-ui.git
synced 2026-07-21 11:25:22 -04:00
feat: enhance style for chat-ui (#72)
* feat: enhance style for chat-ui * dont show upload by default * move stop button to chat input * update avatar * enhance UI * move regenerate to the right side * fix: lint * move chat message to the right * reduce padding * update demo * fix wrong order * Create clean-lemons-cheat.md * fix lint * set minor version * remove initial messages in simple demo * update responsive for landing pages * fix: lint * make document viewer responsive * update style for stater questions
This commit is contained in:
Thuc Pham
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@llamaindex/chat-ui': minor
|
||||
---
|
||||
|
||||
feat: enhance style for chat-ui
|
||||
@@ -1,261 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { Code } from '@/components/code'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import {
|
||||
ChatInput,
|
||||
ChatMessage,
|
||||
ChatMessages,
|
||||
ChatSection,
|
||||
useChatUI,
|
||||
useFile,
|
||||
} from '@llamaindex/chat-ui'
|
||||
import { Message, useChat } from 'ai/react'
|
||||
import { User2 } from 'lucide-react'
|
||||
|
||||
const code = `
|
||||
import {
|
||||
ChatInput,
|
||||
ChatMessage,
|
||||
ChatMessages,
|
||||
ChatSection,
|
||||
useChatUI,
|
||||
useFile,
|
||||
} from '@llamaindex/chat-ui'
|
||||
import { useChat } from 'ai/react'
|
||||
import { User2 } from 'lucide-react'
|
||||
|
||||
export function CustomChat() {
|
||||
const handler = useChat()
|
||||
const { imageUrl, getAnnotations, uploadFile, reset } = useFile({
|
||||
uploadAPI: '/chat/upload',
|
||||
})
|
||||
const annotations = getAnnotations()
|
||||
const handleUpload = async (file: File) => {
|
||||
try {
|
||||
await uploadFile(file)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl shadow-xl">
|
||||
<ChatSection handler={handler} className="max-h-[72vh]">
|
||||
<ChatMessages className="rounded-xl shadow-xl">
|
||||
<CustomChatMessagesList />
|
||||
<ChatMessages.Actions />
|
||||
</ChatMessages>
|
||||
<ChatInput
|
||||
className="rounded-xl shadow-xl"
|
||||
annotations={annotations}
|
||||
resetUploadedFiles={reset}
|
||||
>
|
||||
<div>
|
||||
{imageUrl ? (
|
||||
<img
|
||||
className="max-h-[100px] object-contain"
|
||||
src={imageUrl}
|
||||
alt="uploaded"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<ChatInput.Form>
|
||||
<ChatInput.Field />
|
||||
<ChatInput.Upload onUpload={handleUpload} />
|
||||
<ChatInput.Submit />
|
||||
</ChatInput.Form>
|
||||
</ChatInput>
|
||||
</ChatSection>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CustomChatMessagesList() {
|
||||
const { messages, isLoading, append } = useChatUI()
|
||||
return (
|
||||
<ChatMessages.List>
|
||||
{messages.map((message, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
message={message}
|
||||
isLast={index === messages.length - 1}
|
||||
className="items-start"
|
||||
>
|
||||
<ChatMessage.Avatar>
|
||||
{message.role === 'user' ? (
|
||||
<User2 className="h-4 w-4" />
|
||||
) : (
|
||||
<img alt="LlamaIndex" src="/llama.png" />
|
||||
)}
|
||||
</ChatMessage.Avatar>
|
||||
<ChatMessage.Content
|
||||
className="items-start"
|
||||
isLoading={isLoading}
|
||||
append={append}
|
||||
>
|
||||
<ChatMessage.Content.Image />
|
||||
<ChatMessage.Content.Markdown />
|
||||
<ChatMessage.Content.DocumentFile />
|
||||
</ChatMessage.Content>
|
||||
<ChatMessage.Actions />
|
||||
</ChatMessage>
|
||||
))}
|
||||
</ChatMessages.List>
|
||||
)
|
||||
}
|
||||
`
|
||||
|
||||
const initialMessages: Message[] = [
|
||||
{
|
||||
id: '1',
|
||||
content: 'Generate a logo for LlamaIndex',
|
||||
role: 'user',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
role: 'assistant',
|
||||
content:
|
||||
'Got it! Here is the logo for LlamaIndex. The logo features a friendly llama mascot that represents our AI-powered document indexing and chat capabilities.',
|
||||
annotations: [
|
||||
{
|
||||
type: 'image',
|
||||
data: {
|
||||
url: '/llama.png',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
role: 'user',
|
||||
content: 'Show me a pdf file',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
role: 'assistant',
|
||||
content:
|
||||
'Got it! Here is a sample PDF file that demonstrates PDF handling capabilities. This PDF contains some basic text and formatting examples that you can use to test PDF viewing functionality.',
|
||||
annotations: [
|
||||
{
|
||||
type: 'document_file',
|
||||
data: {
|
||||
files: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'sample.pdf',
|
||||
url: 'https://pdfobject.com/pdf/sample.pdf',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
function CustomChatMessagesList() {
|
||||
const { messages, isLoading, append } = useChatUI()
|
||||
return (
|
||||
<ChatMessages.List>
|
||||
{messages.map((message, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
message={message}
|
||||
isLast={index === messages.length - 1}
|
||||
className="items-start"
|
||||
>
|
||||
<ChatMessage.Avatar>
|
||||
{message.role === 'user' ? (
|
||||
<User2 className="h-4 w-4" />
|
||||
) : (
|
||||
<img alt="LlamaIndex" src="/llama.png" />
|
||||
)}
|
||||
</ChatMessage.Avatar>
|
||||
<ChatMessage.Content
|
||||
className="items-start"
|
||||
isLoading={isLoading}
|
||||
append={append}
|
||||
>
|
||||
<ChatMessage.Content.Image />
|
||||
<ChatMessage.Content.Markdown />
|
||||
<ChatMessage.Content.DocumentFile />
|
||||
</ChatMessage.Content>
|
||||
<ChatMessage.Actions />
|
||||
</ChatMessage>
|
||||
))}
|
||||
</ChatMessages.List>
|
||||
)
|
||||
}
|
||||
|
||||
export function CustomChat() {
|
||||
const handler = useChat({ initialMessages })
|
||||
const { imageUrl, getAnnotations, uploadFile, reset } = useFile({
|
||||
uploadAPI: '/chat/upload',
|
||||
})
|
||||
const annotations = getAnnotations()
|
||||
const handleUpload = async (file: File) => {
|
||||
try {
|
||||
await uploadFile(file)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl shadow-xl">
|
||||
<ChatSection handler={handler} className="max-h-[72vh]">
|
||||
<ChatMessages className="rounded-xl shadow-xl">
|
||||
<CustomChatMessagesList />
|
||||
<ChatMessages.Actions />
|
||||
</ChatMessages>
|
||||
<ChatInput
|
||||
className="rounded-xl shadow-xl"
|
||||
annotations={annotations}
|
||||
resetUploadedFiles={reset}
|
||||
>
|
||||
<div>
|
||||
{imageUrl ? (
|
||||
<img
|
||||
className="max-h-[100px] object-contain"
|
||||
src={imageUrl}
|
||||
alt="uploaded"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<ChatInput.Form>
|
||||
<ChatInput.Field />
|
||||
<ChatInput.Upload
|
||||
allowedExtensions={['jpg', 'png', 'jpeg']}
|
||||
onUpload={handleUpload}
|
||||
/>
|
||||
<ChatInput.Submit />
|
||||
</ChatInput.Form>
|
||||
</ChatInput>
|
||||
</ChatSection>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function CustomChatSection() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-2xl font-bold text-white">Custom Chat Demo</h2>
|
||||
<p className="text-zinc-400">
|
||||
A more advanced implementation with custom components and file uploads
|
||||
</p>
|
||||
</div>
|
||||
<Tabs defaultValue="preview" className="w-full">
|
||||
<TabsList className="mb-4">
|
||||
<TabsTrigger value="preview">Preview</TabsTrigger>
|
||||
<TabsTrigger value="code">Code</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="preview">
|
||||
<CustomChat />
|
||||
</TabsContent>
|
||||
<TabsContent value="code">
|
||||
<Code content={code} language="jsx" />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
'use client'
|
||||
|
||||
import { Code } from '@/components/code'
|
||||
import {
|
||||
ChatInput,
|
||||
ChatMessage,
|
||||
ChatMessages,
|
||||
ChatSection,
|
||||
useChatUI,
|
||||
useFile,
|
||||
} from '@llamaindex/chat-ui'
|
||||
import { Message, useChat } from 'ai/react'
|
||||
|
||||
const code = `
|
||||
import {
|
||||
ChatInput,
|
||||
ChatMessage,
|
||||
ChatMessages,
|
||||
ChatSection,
|
||||
useChatUI,
|
||||
useFile,
|
||||
} from '@llamaindex/chat-ui'
|
||||
import { useChat } from 'ai/react'
|
||||
|
||||
export function CustomChat() {
|
||||
const handler = useChat()
|
||||
const { imageUrl, getAnnotations, uploadFile, reset } = useFile({
|
||||
uploadAPI: '/chat/upload',
|
||||
})
|
||||
const annotations = getAnnotations()
|
||||
const handleUpload = async (file: File) => {
|
||||
try {
|
||||
await uploadFile(file)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<ChatSection
|
||||
handler={handler}
|
||||
className="mx-auto h-screen max-w-3xl overflow-hidden"
|
||||
>
|
||||
<CustomChatMessages />
|
||||
<ChatInput annotations={annotations} resetUploadedFiles={reset}>
|
||||
<div>
|
||||
{imageUrl ? (
|
||||
<img
|
||||
className="max-h-[100px] object-contain"
|
||||
src={imageUrl}
|
||||
alt="uploaded"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<ChatInput.Form>
|
||||
<ChatInput.Field />
|
||||
<ChatInput.Upload
|
||||
allowedExtensions={['jpg', 'png', 'jpeg']}
|
||||
onUpload={handleUpload}
|
||||
/>
|
||||
<ChatInput.Submit />
|
||||
</ChatInput.Form>
|
||||
</ChatInput>
|
||||
</ChatSection>
|
||||
)
|
||||
}
|
||||
|
||||
function CustomChatMessages() {
|
||||
const { messages, isLoading, append } = useChatUI()
|
||||
return (
|
||||
<ChatMessages>
|
||||
<ChatMessages.List>
|
||||
{messages.map((message, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
message={message}
|
||||
isLast={index === messages.length - 1}
|
||||
className="items-start"
|
||||
>
|
||||
<ChatMessage.Avatar>
|
||||
<img
|
||||
className="border-1 rounded-full border-[#e711dd]"
|
||||
alt="LlamaIndex"
|
||||
src="/llama.png"
|
||||
/>
|
||||
</ChatMessage.Avatar>
|
||||
<ChatMessage.Content isLoading={isLoading} append={append}>
|
||||
<ChatMessage.Content.Image />
|
||||
<ChatMessage.Content.Markdown />
|
||||
<ChatMessage.Content.DocumentFile />
|
||||
</ChatMessage.Content>
|
||||
<ChatMessage.Actions />
|
||||
</ChatMessage>
|
||||
))}
|
||||
</ChatMessages.List>
|
||||
</ChatMessages>
|
||||
)
|
||||
}
|
||||
`
|
||||
|
||||
const initialMessages: Message[] = [
|
||||
{
|
||||
id: '1',
|
||||
content: 'Generate a logo for LlamaIndex',
|
||||
role: 'user',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
role: 'assistant',
|
||||
content:
|
||||
'Got it! Here is the logo for LlamaIndex. The logo features a friendly llama mascot that represents our AI-powered document indexing and chat capabilities.',
|
||||
annotations: [
|
||||
{
|
||||
type: 'image',
|
||||
data: {
|
||||
url: '/llama.png',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
role: 'user',
|
||||
content: 'Show me a pdf file',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
role: 'assistant',
|
||||
content:
|
||||
'Got it! Here is a sample PDF file that demonstrates PDF handling capabilities. This PDF contains some basic text and formatting examples that you can use to test PDF viewing functionality.',
|
||||
annotations: [
|
||||
{
|
||||
type: 'document_file',
|
||||
data: {
|
||||
files: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'sample.pdf',
|
||||
url: 'https://pdfobject.com/pdf/sample.pdf',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default function Page(): JSX.Element {
|
||||
return (
|
||||
<div className="flex gap-10">
|
||||
<div className="hidden max-h-screen w-1/2 justify-center space-y-10 self-center overflow-y-auto p-10 md:block">
|
||||
<h1 className="bg-gradient-to-r from-[#e711dd] to-[#b5f2fd] bg-clip-text text-6xl font-bold text-transparent">
|
||||
LlamaIndex ChatUI
|
||||
</h1>
|
||||
<h1 className="mb-4 text-2xl font-bold">Custom Chat Demo</h1>
|
||||
<Code content={code} language="jsx" />
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 md:border-l">
|
||||
<CustomChat />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CustomChat() {
|
||||
const handler = useChat({ initialMessages })
|
||||
const { imageUrl, getAnnotations, uploadFile, reset } = useFile({
|
||||
uploadAPI: '/chat/upload',
|
||||
})
|
||||
const annotations = getAnnotations()
|
||||
const handleUpload = async (file: File) => {
|
||||
try {
|
||||
await uploadFile(file)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<ChatSection
|
||||
handler={handler}
|
||||
className="h-screen overflow-hidden p-0 md:p-5"
|
||||
>
|
||||
<CustomChatMessages />
|
||||
<ChatInput annotations={annotations} resetUploadedFiles={reset}>
|
||||
<div>
|
||||
{imageUrl ? (
|
||||
<img
|
||||
className="max-h-[100px] object-contain"
|
||||
src={imageUrl}
|
||||
alt="uploaded"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<ChatInput.Form>
|
||||
<ChatInput.Field />
|
||||
<ChatInput.Upload
|
||||
allowedExtensions={['jpg', 'png', 'jpeg']}
|
||||
onUpload={handleUpload}
|
||||
/>
|
||||
<ChatInput.Submit />
|
||||
</ChatInput.Form>
|
||||
</ChatInput>
|
||||
</ChatSection>
|
||||
)
|
||||
}
|
||||
|
||||
function CustomChatMessages() {
|
||||
const { messages, isLoading, append } = useChatUI()
|
||||
return (
|
||||
<ChatMessages>
|
||||
<ChatMessages.List className="px-0 md:px-16">
|
||||
{messages.map((message, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
message={message}
|
||||
isLast={index === messages.length - 1}
|
||||
className="items-start"
|
||||
>
|
||||
<ChatMessage.Avatar>
|
||||
<img
|
||||
className="border-1 rounded-full border-[#e711dd]"
|
||||
alt="LlamaIndex"
|
||||
src="/llama.png"
|
||||
/>
|
||||
</ChatMessage.Avatar>
|
||||
<ChatMessage.Content isLoading={isLoading} append={append}>
|
||||
<ChatMessage.Content.Image />
|
||||
<ChatMessage.Content.Markdown />
|
||||
<ChatMessage.Content.DocumentFile />
|
||||
</ChatMessage.Content>
|
||||
<ChatMessage.Actions />
|
||||
</ChatMessage>
|
||||
))}
|
||||
</ChatMessages.List>
|
||||
</ChatMessages>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
'use client'
|
||||
|
||||
import { useChat } from 'ai/react'
|
||||
import { ChatSection } from '@llamaindex/chat-ui'
|
||||
import { Code } from '@/components/code'
|
||||
|
||||
const code = `
|
||||
import { ChatSection } from '@llamaindex/chat-ui'
|
||||
import { useChat } from 'ai/react'
|
||||
|
||||
function SimpleChat() {
|
||||
const handler = useChat()
|
||||
return <ChatSection handler={handler} />
|
||||
}
|
||||
`
|
||||
|
||||
export default function Page(): JSX.Element {
|
||||
const handler = useChat()
|
||||
return (
|
||||
<div className="flex gap-10">
|
||||
<div className="hidden w-1/3 justify-center space-y-10 self-center p-10 md:block">
|
||||
<h1 className="bg-gradient-to-r from-[#e711dd] to-[#b5f2fd] bg-clip-text text-6xl font-bold text-transparent">
|
||||
LlamaIndex ChatUI
|
||||
</h1>
|
||||
<h1 className="mb-4 text-2xl font-bold">Simple Chat Demo</h1>
|
||||
<Code content={code} language="jsx" />
|
||||
</div>
|
||||
<div className="w-full md:w-2/3 md:border-l">
|
||||
<ChatSection
|
||||
handler={handler}
|
||||
className="mx-auto h-screen max-w-3xl overflow-hidden p-0 md:p-5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+25
-15
@@ -1,28 +1,27 @@
|
||||
import { SimpleChatSection } from './simple-demo'
|
||||
import { CustomChatSection } from './custom-demo'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function Page(): JSX.Element {
|
||||
return (
|
||||
<main className="min-h-screen bg-gradient-to-b from-zinc-900 to-black">
|
||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
||||
<main className="h-screen overflow-hidden bg-gradient-to-b from-zinc-900 to-black">
|
||||
<div className="container mx-auto px-4 py-10 md:py-24">
|
||||
<div className="mb-16 flex flex-col items-center justify-center space-y-6 text-center">
|
||||
<div className="rounded-full bg-gradient-to-r from-[#fad6f8] to-[#b5f2fd] p-1">
|
||||
<div className="rounded-full bg-black p-2">
|
||||
<img
|
||||
src="/llama.png"
|
||||
alt="LlamaIndex Logo"
|
||||
className="h-16 w-16 rounded-full"
|
||||
className="h-12 w-12 rounded-full sm:h-16 sm:w-16"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="bg-gradient-to-r from-[#fad6f8] to-[#b5f2fd] bg-clip-text text-6xl font-bold text-transparent">
|
||||
<h1 className="bg-gradient-to-r from-[#fad6f8] to-[#b5f2fd] bg-clip-text text-4xl font-bold text-transparent sm:text-6xl">
|
||||
LlamaIndex ChatUI
|
||||
</h1>
|
||||
<p className="max-w-2xl text-xl text-zinc-300">
|
||||
<p className="max-w-2xl text-lg text-zinc-300 sm:text-xl">
|
||||
A powerful React component library for building chat interfaces in
|
||||
LLM applications
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 pt-4">
|
||||
<div className="flex flex-col gap-4 pt-4 sm:flex-row sm:items-center">
|
||||
<a
|
||||
href="https://github.com/run-llama/chat-ui"
|
||||
target="_blank"
|
||||
@@ -40,10 +39,26 @@ export default function Page(): JSX.Element {
|
||||
npm install @llamaindex/chat-ui
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<Link
|
||||
href="/demo/simple"
|
||||
className="rounded-full bg-gradient-to-r from-[#ff6b6b] to-[#4ecdc4] px-6 py-2 font-medium text-white transition hover:opacity-90"
|
||||
>
|
||||
Simple Chat
|
||||
</Link>
|
||||
<Link
|
||||
href="/demo/custom"
|
||||
className="rounded-full bg-gradient-to-r from-[#ff6b6b] to-[#4ecdc4] px-6 py-2 font-medium text-white transition hover:opacity-90"
|
||||
>
|
||||
Custom Chat
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mb-16 max-w-4xl rounded-xl bg-zinc-800/50 p-6 backdrop-blur">
|
||||
<h2 className="mb-4 text-2xl font-bold text-white">Quick Start</h2>
|
||||
<div className="mx-auto mb-16 max-w-full rounded-xl bg-zinc-800/50 p-6 backdrop-blur sm:max-w-4xl">
|
||||
<h2 className="mb-4 text-xl font-bold text-white sm:text-2xl">
|
||||
Quick Start
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<p className="text-zinc-300">
|
||||
Add a chatbot to your project with Shadcn CLI:
|
||||
@@ -61,11 +76,6 @@ export default function Page(): JSX.Element {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto grid w-full max-w-4xl gap-16">
|
||||
<SimpleChatSection />
|
||||
<CustomChatSection />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { ChatSection } from '@llamaindex/chat-ui'
|
||||
import { Message, useChat } from 'ai/react'
|
||||
import { Code } from '@/components/code'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
|
||||
const code = `
|
||||
import { ChatSection } from '@llamaindex/chat-ui'
|
||||
import { useChat } from 'ai/react'
|
||||
|
||||
function SimpleChat() {
|
||||
const handler = useChat()
|
||||
return <ChatSection handler={handler} />
|
||||
}
|
||||
`
|
||||
|
||||
const initialMessages: Message[] = [
|
||||
{
|
||||
id: '1',
|
||||
content: 'Write simple Javascript hello world code',
|
||||
role: 'user',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
role: 'assistant',
|
||||
content:
|
||||
'Got it! Here\'s the simplest JavaScript code to print "Hello, World!" to the console:\n\n```javascript\nconsole.log("Hello, World!");\n```\n\nYou can run this code in any JavaScript environment, such as a web browser\'s console or a Node.js environment. Just paste the code and execute it to see the output.',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
content: 'Write a simple math equation',
|
||||
role: 'user',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
role: 'assistant',
|
||||
content:
|
||||
"Let's explore a simple mathematical equation using LaTeX:\n\n The quadratic formula is: \\[x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\\]\n\nThis formula helps us solve quadratic equations in the form \\(ax^2 + bx + c = 0\\). The solution gives us the x-values where the parabola intersects the x-axis.",
|
||||
},
|
||||
]
|
||||
|
||||
function SimpleChat() {
|
||||
const handler = useChat({ initialMessages })
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl shadow-xl">
|
||||
<ChatSection className="max-h-[72vh]" handler={handler} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function SimpleChatSection() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-2xl font-bold text-white">Simple Chat Demo</h2>
|
||||
<p className="text-zinc-400">
|
||||
A minimal implementation using just a few lines of code
|
||||
</p>
|
||||
</div>
|
||||
<Tabs defaultValue="preview">
|
||||
<TabsList className="mb-4">
|
||||
<TabsTrigger value="preview">Preview</TabsTrigger>
|
||||
<TabsTrigger value="code">Code</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="preview">
|
||||
<SimpleChat />
|
||||
</TabsContent>
|
||||
<TabsContent value="code">
|
||||
<Code content={code} language="jsx" />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { createContext, useContext, useState } from 'react'
|
||||
import { Send, Square } from 'lucide-react'
|
||||
import { createContext, useContext, useRef, useState } from 'react'
|
||||
import { cn } from '../lib/utils'
|
||||
import { Button } from '../ui/button'
|
||||
import { Input } from '../ui/input'
|
||||
import { Textarea } from '../ui/textarea'
|
||||
import { FileUploader } from '../widgets/index.js' // this import needs the file extension as it's importing the widget bundle
|
||||
import { useChatUI } from './chat.context'
|
||||
@@ -21,7 +21,6 @@ interface ChatInputFormProps extends React.PropsWithChildren {
|
||||
|
||||
interface ChatInputFieldProps {
|
||||
className?: string
|
||||
type?: 'input' | 'textarea'
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
@@ -102,7 +101,7 @@ function ChatInput(props: ChatInputProps) {
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'bg-background flex shrink-0 flex-col gap-4 p-4',
|
||||
'bg-background flex shrink-0 flex-col gap-4 p-4 pt-0',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
@@ -122,7 +121,10 @@ function ChatInputForm(props: ChatInputFormProps) {
|
||||
)
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className={cn(props.className, 'flex gap-2')}>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className={cn('relative flex gap-2', props.className)}
|
||||
>
|
||||
{children}
|
||||
</form>
|
||||
)
|
||||
@@ -131,30 +133,36 @@ function ChatInputForm(props: ChatInputFormProps) {
|
||||
function ChatInputField(props: ChatInputFieldProps) {
|
||||
const { input, setInput } = useChatUI()
|
||||
const { handleKeyDown, setIsComposing } = useChatInput()
|
||||
const type = props.type ?? 'textarea'
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
||||
|
||||
if (type === 'input') {
|
||||
return (
|
||||
<Input
|
||||
name="input"
|
||||
placeholder={props.placeholder ?? 'Type a message'}
|
||||
className={cn(props.className, 'min-h-0')}
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
/>
|
||||
)
|
||||
// auto resize the textarea based on the content
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setInput(e.target.value)
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'auto'
|
||||
let newHeight = Math.max(textareaRef.current.scrollHeight, 100)
|
||||
if (textareaRef.current.scrollHeight > 80) {
|
||||
newHeight += 40 // offset for the textarea padding
|
||||
}
|
||||
textareaRef.current.style.height = `${newHeight}px`
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
name="input"
|
||||
placeholder={props.placeholder ?? 'Type a message'}
|
||||
className={cn(props.className, 'h-[40px] min-h-0 flex-1')}
|
||||
placeholder={props.placeholder ?? 'Type a message...'}
|
||||
className={cn(
|
||||
'bg-secondary h-[100px] max-h-[400px] min-h-0 flex-1 resize-none overflow-y-auto rounded-2xl p-4',
|
||||
props.className
|
||||
)}
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onCompositionStart={() => setIsComposing(true)}
|
||||
onCompositionEnd={() => setIsComposing(false)}
|
||||
spellCheck={false}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -178,19 +186,38 @@ function ChatInputUpload(props: ChatInputUploadProps) {
|
||||
allowedExtensions: props.allowedExtensions ?? ALLOWED_EXTENSIONS,
|
||||
multiple: props.multiple ?? true,
|
||||
}}
|
||||
className={cn(
|
||||
'hover:bg-primary absolute bottom-2 left-2 rounded-full',
|
||||
props.className
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ChatInputSubmit(props: ChatInputSubmitProps) {
|
||||
const { stop, isLoading } = useChatUI()
|
||||
const { isDisabled } = useChatInput()
|
||||
|
||||
if (stop && isLoading) {
|
||||
return (
|
||||
<Button
|
||||
size="icon"
|
||||
onClick={stop}
|
||||
className="absolute bottom-2 right-2 rounded-full"
|
||||
>
|
||||
<Square className="size-3" fill="white" stroke="white" />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
type="submit"
|
||||
size="icon"
|
||||
disabled={props.disabled ?? isDisabled}
|
||||
className={cn(props.className)}
|
||||
className={cn('absolute bottom-2 right-2 rounded-full', props.className)}
|
||||
>
|
||||
{props.children ?? 'Send message'}
|
||||
{props.children ?? <Send className="size-4" />}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Bot, Check, Copy, MessageCircle, User2 } from 'lucide-react'
|
||||
import { memo, ComponentType } from 'react'
|
||||
import { Bot, Check, Copy, RefreshCw } from 'lucide-react'
|
||||
import { ComponentType, memo } from 'react'
|
||||
import { useCopyToClipboard } from '../hook/use-copy-to-clipboard'
|
||||
import { cn } from '../lib/utils'
|
||||
import { Button } from '../ui/button'
|
||||
import { Markdown, CitationComponentProps } from '../widgets/index.js'
|
||||
import { CitationComponentProps, Markdown } from '../widgets/index.js'
|
||||
import { getSourceAnnotationData, MessageAnnotation } from './annotation'
|
||||
import {
|
||||
AgentEventAnnotations,
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
SuggestedQuestionsAnnotations,
|
||||
} from './chat-annotations'
|
||||
import { ChatMessageProvider, useChatMessage } from './chat-message.context.js'
|
||||
import { useChatUI } from './chat.context.js'
|
||||
import { ChatHandler, Message } from './chat.interface'
|
||||
|
||||
interface ChatMessageProps extends React.PropsWithChildren {
|
||||
@@ -61,6 +62,7 @@ interface ChatMessageActionsProps extends React.PropsWithChildren {
|
||||
|
||||
interface ChatMarkdownProps extends React.PropsWithChildren {
|
||||
citationComponent?: ComponentType<CitationComponentProps>
|
||||
className?: string
|
||||
}
|
||||
|
||||
function ChatMessage(props: ChatMessageProps) {
|
||||
@@ -91,17 +93,17 @@ function ChatMessage(props: ChatMessageProps) {
|
||||
function ChatMessageAvatar(props: ChatMessageAvatarProps) {
|
||||
const { message } = useChatMessage()
|
||||
|
||||
const roleIconMap: Record<string, React.ReactNode> = {
|
||||
user: <User2 className="h-4 w-4" />,
|
||||
assistant: <Bot className="h-4 w-4" />,
|
||||
}
|
||||
if (message.role !== 'assistant') return null
|
||||
|
||||
const children = props.children ?? roleIconMap[message.role] ?? (
|
||||
<MessageCircle className="h-4 w-4" />
|
||||
)
|
||||
const children = props.children ?? <Bot className="h-4 w-4" />
|
||||
|
||||
return (
|
||||
<div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center border">
|
||||
<div
|
||||
className={cn(
|
||||
'bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-full border',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
@@ -138,31 +140,57 @@ function ChatMarkdown(props: ChatMarkdownProps) {
|
||||
annotations ? getSourceAnnotationData(annotations)[0] : undefined
|
||||
}
|
||||
citationComponent={props.citationComponent}
|
||||
className={cn(
|
||||
{
|
||||
'bg-primary text-primary-foreground ml-auto w-fit max-w-[80%] rounded-xl px-3 py-2':
|
||||
message.role === 'user',
|
||||
},
|
||||
props.className
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ChatMessageActions(props: ChatMessageActionsProps) {
|
||||
const { reload, requestData, isLoading } = useChatUI()
|
||||
const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })
|
||||
const { message } = useChatMessage()
|
||||
const { message, isLast } = useChatMessage()
|
||||
|
||||
if (message.role !== 'assistant') return null
|
||||
|
||||
const isLastMessageFromAssistant = message.role === 'assistant' && isLast
|
||||
const showReload = reload && !isLoading && isLastMessageFromAssistant
|
||||
|
||||
const children = props.children ?? (
|
||||
<Button
|
||||
onClick={() => copyToClipboard(message.content)}
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 w-8"
|
||||
>
|
||||
{isCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
<>
|
||||
<Button
|
||||
title="Copy"
|
||||
onClick={() => copyToClipboard(message.content)}
|
||||
size="icon"
|
||||
variant="outline"
|
||||
className="h-8 w-8"
|
||||
>
|
||||
{isCopied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
{showReload && (
|
||||
<Button
|
||||
title="Regenerate"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => reload?.({ data: requestData })}
|
||||
className="h-8 w-8"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex shrink-0 flex-col gap-2 opacity-0 group-hover:opacity-100',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
<div className={cn('flex shrink-0 flex-col gap-2', props.className)}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -18,6 +18,12 @@ interface ChatMessagesLoadingProps extends React.PropsWithChildren {
|
||||
className?: string
|
||||
}
|
||||
|
||||
interface ChatMessagesEmptyProps extends React.PropsWithChildren {
|
||||
className?: string
|
||||
heading?: string
|
||||
subheading?: string
|
||||
}
|
||||
|
||||
interface ChatActionsProps extends React.PropsWithChildren {
|
||||
className?: string
|
||||
}
|
||||
@@ -59,12 +65,7 @@ function ChatMessages(props: ChatMessagesProps) {
|
||||
// so we show a loading indicator to give a better UX.
|
||||
const isPending = isLoading && !isLastMessageFromAssistant
|
||||
|
||||
const children = props.children ?? (
|
||||
<>
|
||||
<ChatMessagesList />
|
||||
<ChatActions />
|
||||
</>
|
||||
)
|
||||
const children = props.children ?? <ChatMessagesList />
|
||||
|
||||
return (
|
||||
<ChatMessagesProvider
|
||||
@@ -72,7 +73,7 @@ function ChatMessages(props: ChatMessagesProps) {
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'bg-background relative flex min-h-0 flex-1 flex-col space-y-6 p-4',
|
||||
'bg-background relative flex min-h-0 flex-1 flex-col space-y-6 p-4 pb-0',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
@@ -111,6 +112,7 @@ function ChatMessagesList(props: ChatMessagesListProps) {
|
||||
/>
|
||||
)
|
||||
})}
|
||||
<ChatMessagesEmpty />
|
||||
<ChatMessagesLoading />
|
||||
</>
|
||||
)
|
||||
@@ -128,6 +130,55 @@ function ChatMessagesList(props: ChatMessagesListProps) {
|
||||
)
|
||||
}
|
||||
|
||||
function ChatMessagesEmpty(props: ChatMessagesEmptyProps) {
|
||||
const { messages } = useChatUI()
|
||||
if (messages.length > 0) return null
|
||||
|
||||
if (props.children) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-full flex-col justify-center pt-4',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-full flex-col justify-center pt-4',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
<p className="mb-2 animate-[slide-up_0.5s_ease-out] text-3xl font-bold opacity-0 [animation-delay:100ms] [animation-fill-mode:forwards]">
|
||||
{props.heading ?? 'Hello there!'}
|
||||
</p>
|
||||
<p className="text-muted-foreground animate-[slide-up_0.5s_ease-out] text-xl opacity-0 [animation-delay:300ms] [animation-fill-mode:forwards]">
|
||||
{props.subheading ?? "I'm here to help you with your questions."}
|
||||
</p>
|
||||
<style>{`
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.5s ease-out;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ChatMessagesLoading(props: ChatMessagesLoadingProps) {
|
||||
const { isPending } = useChatMessages()
|
||||
if (!isPending) return null
|
||||
@@ -180,6 +231,7 @@ function ChatActions(props: ChatActionsProps) {
|
||||
|
||||
ChatMessages.List = ChatMessagesList
|
||||
ChatMessages.Loading = ChatMessagesLoading
|
||||
ChatMessages.Empty = ChatMessagesEmpty
|
||||
ChatMessages.Actions = ChatActions
|
||||
|
||||
export default ChatMessages
|
||||
|
||||
@@ -23,7 +23,9 @@ export default function ChatSection(props: ChatSectionProps) {
|
||||
|
||||
return (
|
||||
<ChatProvider value={{ ...handler, requestData, setRequestData }}>
|
||||
<div className={cn('flex flex-col gap-4', className)}>{children}</div>
|
||||
<div className={cn('flex h-full w-full flex-col gap-4 p-5', className)}>
|
||||
{children}
|
||||
</div>
|
||||
</ChatProvider>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1 +1,12 @@
|
||||
@import '@llamaindex/pdf-viewer/index.css';
|
||||
@import '@llamaindex/pdf-viewer/index.css';
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.pdf-viewer-container .optionBar {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 20px !important;
|
||||
}
|
||||
|
||||
.pdf-viewer-container .optionBar .title {
|
||||
border-right: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ export interface FileUploaderProps {
|
||||
}
|
||||
onFileUpload: (file: File) => Promise<void>
|
||||
onFileError?: (errMsg: string) => void
|
||||
className?: string
|
||||
}
|
||||
|
||||
const DEFAULT_INPUT_ID = 'fileInput'
|
||||
@@ -23,6 +24,7 @@ export function FileUploader({
|
||||
config,
|
||||
onFileUpload,
|
||||
onFileError,
|
||||
className,
|
||||
}: FileUploaderProps) {
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [remainingFiles, setRemainingFiles] = useState<number>(0)
|
||||
@@ -98,7 +100,7 @@ export function FileUploader({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="self-stretch">
|
||||
<div className={cn('self-stretch', className)}>
|
||||
<input
|
||||
type="file"
|
||||
id={inputId}
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
} from '../chat/annotation'
|
||||
import { DocumentInfo } from './document-info'
|
||||
import { Citation, CitationComponentProps } from './citation'
|
||||
import { cn } from '../lib/utils'
|
||||
|
||||
const MemoizedReactMarkdown: FC<Options> = memo(
|
||||
ReactMarkdown,
|
||||
@@ -77,18 +78,23 @@ export function Markdown({
|
||||
sources,
|
||||
backend,
|
||||
citationComponent: CitationComponent,
|
||||
className: customClassName,
|
||||
}: {
|
||||
content: string
|
||||
sources?: SourceData
|
||||
backend?: string
|
||||
citationComponent?: ComponentType<CitationComponentProps>
|
||||
className?: string
|
||||
}) {
|
||||
const processedContent = preprocessContent(content)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MemoizedReactMarkdown
|
||||
className="prose dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 custom-markdown break-words"
|
||||
className={cn(
|
||||
'prose dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 custom-markdown break-words',
|
||||
customClassName
|
||||
)}
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeKatex as any]}
|
||||
components={{
|
||||
@@ -173,9 +179,8 @@ export function Markdown({
|
||||
) : (
|
||||
<Citation index={nodeIndex} node={sourceNode} />
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<a href={href} target="_blank" rel="noopener">
|
||||
|
||||
@@ -27,11 +27,11 @@ export function PdfDialog(props: PdfDialogProps) {
|
||||
return (
|
||||
<Drawer direction="left">
|
||||
<DrawerTrigger asChild>{props.trigger}</DrawerTrigger>
|
||||
<DrawerContent className="mt-24 h-full max-h-[96%] w-3/5 ">
|
||||
<DrawerHeader className="flex justify-between">
|
||||
<DrawerContent className="mt-24 h-full max-h-[96%] w-full md:w-3/5 ">
|
||||
<DrawerHeader className="flex flex-col gap-4 sm:flex-row sm:justify-between">
|
||||
<div className="space-y-2">
|
||||
<DrawerTitle>PDF Content</DrawerTitle>
|
||||
<DrawerDescription>
|
||||
<DrawerDescription className="break-all">
|
||||
File URL:{' '}
|
||||
<a
|
||||
className="hover:text-blue-900"
|
||||
@@ -44,7 +44,9 @@ export function PdfDialog(props: PdfDialogProps) {
|
||||
</DrawerDescription>
|
||||
</div>
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
<Button variant="outline" className="w-full sm:w-auto">
|
||||
Close
|
||||
</Button>
|
||||
</DrawerClose>
|
||||
</DrawerHeader>
|
||||
<div className="m-4">
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import { ChatHandler } from '../chat/chat.interface'
|
||||
import { cn } from '../lib/utils'
|
||||
import { Button } from '../ui/button'
|
||||
|
||||
interface StarterQuestionsProps {
|
||||
questions: string[]
|
||||
append: ChatHandler['append']
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function StarterQuestions(props: StarterQuestionsProps) {
|
||||
return (
|
||||
<div className="absolute bottom-6 left-0 w-full">
|
||||
<div className="mx-10 grid grid-cols-2 gap-2">
|
||||
<div className={cn('w-full', props.className)}>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{props.questions.map((question, i) => (
|
||||
<Button
|
||||
key={i}
|
||||
|
||||
Reference in New Issue
Block a user