chore: Improve Input and Examples UI
This commit is contained in:
zaidmukaddam
parent
f8747586ab
commit
f4db1c968f
@ -1,6 +1,6 @@
|
||||
import { openai } from "@ai-sdk/openai";
|
||||
import { anthropic } from '@ai-sdk/anthropic'
|
||||
import { convertToCoreMessages, streamText } from "ai";
|
||||
import { convertToCoreMessages, streamText, tool } from "ai";
|
||||
import { z } from "zod";
|
||||
|
||||
// Allow streaming responses up to 30 seconds
|
||||
@ -27,6 +27,7 @@ export async function POST(req: Request) {
|
||||
"Once you have found the information, you provide the user with the information you found in brief like a news paper detail." +
|
||||
"The detail should be 3-5 paragraphs in 10-12 sentences, some time pointers, each with citations in the [Text](link) format always!" +
|
||||
"Citations can be inline of the text like this: Hey there! [Google](https://google.com) is a search engine." +
|
||||
"Do not start the responses with newline characters, always start with the first sentence." +
|
||||
"The current date is: " +
|
||||
new Date()
|
||||
.toLocaleDateString("en-US", {
|
||||
@ -39,7 +40,7 @@ export async function POST(req: Request) {
|
||||
"Never use the heading format in your response!." +
|
||||
"Refrain from saying things like 'Certainly! I'll search for information about OpenAI GPT-4o mini using the web search tool.'",
|
||||
tools: {
|
||||
web_search: {
|
||||
web_search: tool({
|
||||
description: 'Search the web for information with the given query, max results and search depth.',
|
||||
parameters: z.object({
|
||||
query: z.string()
|
||||
@ -82,7 +83,7 @@ export async function POST(req: Request) {
|
||||
results: context
|
||||
}
|
||||
}
|
||||
},
|
||||
}),
|
||||
},
|
||||
onFinish: async (event) => {
|
||||
console.log(event.text);
|
||||
|
||||
57
app/page.tsx
57
app/page.tsx
@ -37,6 +37,7 @@ export default function Home() {
|
||||
const [showToolResults, setShowToolResults] = useState<{ [key: number]: boolean }>({});
|
||||
const [isModelSelectorOpen, setIsModelSelectorOpen] = useState(false);
|
||||
const [selectedModel, setSelectedModel] = useState('Speed');
|
||||
const [showExamples, setShowExamples] = useState(false)
|
||||
|
||||
const { isLoading, input, messages, setInput, append, handleSubmit, setMessages } = useChat({
|
||||
api: '/api/chat',
|
||||
@ -315,34 +316,40 @@ export default function Home() {
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
disabled={isLoading}
|
||||
className="w-full h-10 py-3 px-4 bg-gray-100 rounded-full pr-12 focus:outline-none focus:ring-2 focus:ring-green-500 text-sm sm:text-base"
|
||||
className="w-full min-h-12 py-3 px-4 bg-muted border border-input rounded-full pr-12 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-sm sm:text-base"
|
||||
onFocus={() => setShowExamples(true)}
|
||||
onBlur={() => setShowExamples(false)}
|
||||
/>
|
||||
<Button
|
||||
size="icon"
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
disabled={isLoading}
|
||||
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-transparent hover:bg-transparent"
|
||||
size={'icon'}
|
||||
variant={'ghost'}
|
||||
className="absolute right-2 top-1/2 transform -translate-y-1/2"
|
||||
disabled={input.length === 0}
|
||||
>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="#9CA3AF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<ArrowRight size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="flex flex-col gap-2 text-left items-start justify-start">
|
||||
{exampleQueries.map((query, index) => (
|
||||
<button
|
||||
<div className={`mx-auto w-full transition-all ${showExamples ? 'visible' : 'invisible'}`}>
|
||||
<div className="bg-background p-2">
|
||||
<div className="flex flex-col items-start space-y-2">
|
||||
{exampleQueries.map((message, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
onClick={() => handleExampleClick(query)}
|
||||
className="mb-1 hover:underline flex flex-row"
|
||||
variant="link"
|
||||
className="h-auto p-0 text-base"
|
||||
name={message}
|
||||
onClick={() => handleExampleClick(message)}
|
||||
>
|
||||
<ArrowRight className="w-5 h-5 mr-1" />
|
||||
{query}
|
||||
</button>
|
||||
<ArrowRight size={16} className="mr-2 text-muted-foreground" />
|
||||
{message}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
@ -362,7 +369,7 @@ export default function Home() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="text-lg sm:text-2xl font-medium font-serif"
|
||||
className="text-2xl font-medium font-serif"
|
||||
>
|
||||
{lastSubmittedQuery}
|
||||
</motion.p>
|
||||
@ -390,7 +397,7 @@ export default function Home() {
|
||||
{messages.map((message, index) => (
|
||||
<div key={index}>
|
||||
{message.role === 'assistant' && message.content && (
|
||||
<Card className="bg-card text-card-foreground border border-muted !mb-8 sm:!mb-16">
|
||||
<Card className="bg-card text-card-foreground border border-muted !mb-20 sm:!mb-16">
|
||||
<CardContent className="p-3 sm:p-4">
|
||||
<h2 className="text-lg sm:text-xl font-semibold mb-2">Answer</h2>
|
||||
<div className="text-sm sm:text-base">
|
||||
@ -428,18 +435,16 @@ export default function Home() {
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
disabled={isLoading}
|
||||
className="w-full h-10 py-3 px-4 bg-gray-100 rounded-full pr-12 focus:outline-none focus:ring-2 focus:ring-green-500 text-sm"
|
||||
className="w-full min-h-12 py-3 px-4 bg-muted border border-input rounded-full pr-12 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-sm sm:text-base"
|
||||
/>
|
||||
<Button
|
||||
size="icon"
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
disabled={isLoading}
|
||||
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-transparent hover:bg-transparent"
|
||||
size={'icon'}
|
||||
variant={'ghost'}
|
||||
className="absolute right-2 top-1/2 transform -translate-y-1/2"
|
||||
disabled={input.length === 0}
|
||||
>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="#9CA3AF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<ArrowRight size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user