NikitolProject/miniperplx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Complete Animations and fix system prompt for Claude

Browse Source
This commit is contained in:
zaidmukaddam 2024-08-07 19:40:41 +05:30
parent fa71a0a683
commit 24f8613409
2 changed files with 62 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/api/chat/route.ts
View File

@ -23,6 +23,7 @@ export async function POST(req: Request) {
system:
"You are an AI web search engine that helps users find information on the internet." +
"You use the 'web_search' tool to search for information on the internet." +
"Always call the 'web_search' tool to get the information, no need to do a chain of thought or say anything else, go straight to the point." +
"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." +
@ -36,7 +37,7 @@ export async function POST(req: Request) {
})
.replace(/(\w+), (\w+) (\d+), (\d+)/, "$4-$2-$3 ($1)") +
"Never use the heading format in your response!." +
"You always have to call the 'web_search' tool to get the information, no need to do a chain of thoughts.",
"Refrain from saying things like 'Certainly! I'll search for information about OpenAI GPT-4o mini using the web search tool.'",
tools: {
web_search: {
description: 'Search the web for information with the given query, max results and search depth.',
@ -82,6 +83,9 @@ export async function POST(req: Request) {
}
}
},
},
onFinish: async (event) => {
console.log(event.text);
}
});

62
app/page.tsx
View File

@ -32,6 +32,7 @@ export default function Home() {
const inputRef = useRef<HTMLInputElement>(null);
const [lastSubmittedQuery, setLastSubmittedQuery] = useState("");
const [hasSubmitted, setHasSubmitted] = useState(false);
const [isAnimating, setIsAnimating] = useState(false);
const bottomRef = useRef<HTMLDivElement>(null);
const [showToolResults, setShowToolResults] = useState<{ [key: number]: boolean }>({});
const [isModelSelectorOpen, setIsModelSelectorOpen] = useState(false);
@ -55,8 +56,6 @@ export default function Home() {
{ name: 'Quality (Claude)', description: 'High quality generation.', details: '(Anthropic/Claude-3.5-Sonnet)', icon: Sparkles },
];
const renderToolInvocation = (toolInvocation: ToolInvocation, index: number) => {
const args = JSON.parse(JSON.stringify(toolInvocation.args));
const result = 'result' in toolInvocation ? JSON.parse(JSON.stringify(toolInvocation.result)) : null;
@ -148,6 +147,9 @@ export default function Home() {
.replace(boldRegex, '<strong>$1</strong>')
.replace(italicRegex, '<em>$1</em>');
// Remove double new lines
content = content.replace("\n\n", "")
// Replace unordered and ordered lists
content = content
.replace(unorderedListRegex, '<li class="list-disc ml-6">$1</li>')
@ -227,6 +229,7 @@ export default function Home() {
setLastSubmittedQuery(input.trim());
handleSubmit(e);
setHasSubmitted(true);
setIsAnimating(true);
setShowToolResults({});
} else {
toast.error("Please enter a search query.");
@ -355,9 +358,22 @@ export default function Home() {
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 50 }}
transition={{ duration: 0.5 }}
className="flex items-center space-x-2 mb-4"
onAnimationComplete={() => setIsAnimating(false)}
>
<div className="flex items-center space-x-2 mb-4">
<motion.p
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"
>
{lastSubmittedQuery}
</motion.p>
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 0.4 }}
>
<p className="text-lg sm:text-2xl font-medium font-serif">{lastSubmittedQuery}</p>
<Badge
variant="secondary"
className={`text-xs sm:text-sm ${selectedModel.includes('Quality') ? 'bg-purple-500 hover:bg-purple-500' : 'bg-green-500 hover:bg-green-500'} text-white`}
@ -368,15 +384,28 @@ export default function Home() {
{selectedModel}
</Badge>
</motion.div>
</div>
</motion.div>
)}
</AnimatePresence>
{messages.length > 0 && (
<div className="space-y-4 sm:space-y-6">
<AnimatePresence>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.5, delay: 0.6 }}
className="space-y-4 sm:space-y-6"
>
{messages.map((message, index) => (
<React.Fragment key={index}>
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
>
{message.role === 'assistant' && message.content && (
<Card className="bg-card text-card-foreground border border-muted !mb-20 sm:!mb-16">
<Card className="bg-card text-card-foreground border border-muted !mb-8 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">
@ -386,19 +415,24 @@ export default function Home() {
</Card>
)}
{message.toolInvocations?.map((toolInvocation: ToolInvocation, toolIndex: number) => (
<React.Fragment key={toolIndex}>
<motion.div
key={`tool-${toolIndex}`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: (index + toolIndex) * 0.1 + 0.2 }}
>
{renderToolInvocation(toolInvocation, toolIndex)}
</React.Fragment>
</motion.div>
))}
</React.Fragment>
</motion.div>
))}
<div ref={bottomRef} />
</div>
)}
</motion.div>
</AnimatePresence>
</div>
<AnimatePresence>
{hasSubmitted && (
{hasSubmitted && !isAnimating && (
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}