sk/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): enhance MessageInput and Focus components; improve layout and tooltip functionality

Browse source
This commit is contained in:
Willie Zutz 2025-07-17 23:29:21 -06:00
parent 00e483f975
commit 01bd3adaa4
5 changed files with 274 additions and 252 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/components/MessageInput.tsx
View file

@ -141,16 +141,25 @@ const MessageInput = ({
}} }}
className="w-full" className="w-full"
> >
<div className="flex flex-col bg-light-secondary dark:bg-dark-secondary px-5 pt-5 pb-2 rounded-lg w-full border border-light-200 dark:border-dark-200"> <div className="flex flex-col bg-light-secondary dark:bg-dark-secondary px-3 pt-4 pb-2 rounded-lg w-full border border-light-200 dark:border-dark-200">
<TextareaAutosize <div className="flex flex-row items-end space-x-2 mb-2">
ref={inputRef} <TextareaAutosize
value={message} ref={inputRef}
onChange={(e) => setMessage(e.target.value)} value={message}
minRows={2} onChange={(e) => setMessage(e.target.value)}
className="bg-transparent placeholder:text-black/50 dark:placeholder:text-white/50 text-sm text-black dark:text-white resize-none focus:outline-none w-full max-h-24 lg:max-h-36 xl:max-h-48" minRows={1}
placeholder={firstMessage ? 'Ask anything...' : 'Ask a follow-up'} className="mb-2 bg-transparent placeholder:text-black/50 dark:placeholder:text-white/50 text-sm text-black dark:text-white resize-none focus:outline-none w-full max-h-24 lg:max-h-36 xl:max-h-48"
/> placeholder={firstMessage ? 'Ask anything...' : 'Ask a follow-up'}
<div className="flex flex-row items-center justify-between mt-4"> />
<Optimization
optimizationMode={optimizationMode}
setOptimizationMode={(optimizationMode) => {
setOptimizationMode(optimizationMode);
localStorage.setItem('optimizationMode', optimizationMode);
}}
/>
</div>
<div className="flex flex-row items-center justify-between">
<div className="flex flex-row items-center space-x-2"> <div className="flex flex-row items-center space-x-2">
<Focus focusMode={focusMode} setFocusMode={setFocusMode} /> <Focus focusMode={focusMode} setFocusMode={setFocusMode} />
<Attach <Attach
@ -163,6 +172,7 @@ const MessageInput = ({
</div> </div>
<div className="flex flex-row items-center space-x-2"> <div className="flex flex-row items-center space-x-2">
<ModelSelector <ModelSelector
showModelName={false}
selectedModel={selectedModel} selectedModel={selectedModel}
setSelectedModel={(selectedModel) => { setSelectedModel={(selectedModel) => {
setSelectedModel(selectedModel); setSelectedModel(selectedModel);
@ -177,13 +187,6 @@ const MessageInput = ({
selectedPromptIds={systemPromptIds} selectedPromptIds={systemPromptIds}
onSelectedPromptIdsChange={setSystemPromptIds} onSelectedPromptIdsChange={setSystemPromptIds}
/> />
<Optimization
optimizationMode={optimizationMode}
setOptimizationMode={(optimizationMode) => {
setOptimizationMode(optimizationMode);
localStorage.setItem('optimizationMode', optimizationMode);
}}
/>
{loading ? ( {loading ? (
<button <button
type="button" type="button"

231
src/components/MessageInputActions/Focus.tsx
View file

@ -1,65 +1,26 @@
import { import { Globe, MessageCircle, Pencil } from 'lucide-react';
BadgePercent,
ChevronDown,
Globe,
MessageCircle,
Pencil,
ScanEye,
SwatchBook,
} from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { import { useState } from 'react';
Popover,
PopoverButton,
PopoverPanel,
Transition,
} from '@headlessui/react';
import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons';
import { Fragment } from 'react';
const focusModes = [ const focusModes = [
{ {
key: 'webSearch', key: 'webSearch',
title: 'All', title: 'All',
description: 'Searches across all of the internet', description: 'Searches across all of the internet',
icon: <Globe size={20} />, icon: <Globe size={20} className="text-[#24A0ED]" />,
}, },
// {
// key: 'academicSearch',
// title: 'Academic',
// description: 'Search in published academic papers',
// icon: <SwatchBook size={20} />,
// },
{ {
key: 'chat', key: 'chat',
title: 'Chat', title: 'Chat',
description: 'Have a creative conversation', description: 'Have a creative conversation',
icon: <MessageCircle size={16} />, icon: <MessageCircle size={16} className="text-[#10B981]" />,
}, },
{ {
key: 'localResearch', key: 'localResearch',
title: 'Local Research', title: 'Local Research',
description: 'Research and interact with local files with citations', description: 'Research and interact with local files with citations',
icon: <Pencil size={16} />, icon: <Pencil size={16} className="text-[#8B5CF6]" />,
}, },
// {
// key: 'redditSearch',
// title: 'Reddit',
// description: 'Search for discussions and opinions',
// icon: <SiReddit className="h-5 w-auto mr-0.5" />,
// },
// {
// key: 'wolframAlphaSearch',
// title: 'Wolfram Alpha',
// description: 'Computational knowledge engine',
// icon: <BadgePercent size={20} />,
// },
// {
// key: 'youtubeSearch',
// title: 'Youtube',
// description: 'Search and watch videos',
// icon: <SiYoutube className="h-5 w-auto mr-0.5" />,
// },
]; ];
const Focus = ({ const Focus = ({
@ -69,62 +30,136 @@ const Focus = ({
focusMode: string; focusMode: string;
setFocusMode: (mode: string) => void; setFocusMode: (mode: string) => void;
}) => { }) => {
const [showWebSearchTooltip, setShowWebSearchTooltip] = useState(false);
const [showChatTooltip, setShowChatTooltip] = useState(false);
const [showLocalResearchTooltip, setShowLocalResearchTooltip] =
useState(false);
const webSearchMode = focusModes.find((mode) => mode.key === 'webSearch');
const chatMode = focusModes.find((mode) => mode.key === 'chat');
const localResearchMode = focusModes.find(
(mode) => mode.key === 'localResearch',
);
return ( return (
<Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg mt-[6.5px]"> <div className="text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white">
<PopoverButton <div className="flex flex-row items-center space-x-1">
type="button" <div className="relative">
className=" text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white" <div className="flex items-center border border-light-200 dark:border-dark-200 rounded-lg overflow-hidden">
> {/* Web Search Mode Icon */}
<div className="flex flex-row items-center space-x-1"> <button
{focusModes.find((mode) => mode.key === focusMode)?.icon} className={cn(
<p className="text-xs font-medium hidden lg:block"> 'p-2 transition-all duration-200',
{focusModes.find((mode) => mode.key === focusMode)?.title} focusMode === 'webSearch'
</p> ? 'bg-[#24A0ED]/20 text-[#24A0ED] scale-105'
<ChevronDown size={20} className="-translate-x-1" /> : 'text-black/30 dark:text-white/30 hover:text-black/50 dark:hover:text-white/50 hover:bg-light-secondary/50 dark:hover:bg-dark-secondary/50',
</div> )}
</PopoverButton> onMouseEnter={() => setShowWebSearchTooltip(true)}
<Transition onMouseLeave={() => setShowWebSearchTooltip(false)}
as={Fragment} onClick={(e) => {
enter="transition ease-out duration-150" e.stopPropagation();
enterFrom="opacity-0 -translate-y-1" setFocusMode('webSearch');
enterTo="opacity-100 translate-y-0" }}
leave="transition ease-in duration-150" >
leaveFrom="opacity-100 translate-y-0" <Globe size={18} />
leaveTo="opacity-0 -translate-y-1" </button>
>
<PopoverPanel className="absolute z-10 w-64 md:w-[500px] left-0 bottom-full mb-2"> {/* Divider */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-4 max-h-[200px] md:max-h-none overflow-y-auto"> <div className="h-6 w-px bg-light-200 dark:bg-dark-200"></div>
{focusModes.map((mode, i) => (
<PopoverButton {/* Chat Mode Icon */}
onClick={() => setFocusMode(mode.key)} <button
key={i} className={cn(
className={cn( 'p-2 transition-all duration-200',
'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-2 duration-200 cursor-pointer transition', focusMode === 'chat'
focusMode === mode.key ? 'bg-[#10B981]/20 text-[#10B981] scale-105'
? 'bg-light-secondary dark:bg-dark-secondary' : 'text-black/30 dark:text-white/30 hover:text-black/50 dark:hover:text-white/50 hover:bg-light-secondary/50 dark:hover:bg-dark-secondary/50',
: 'hover:bg-light-secondary dark:hover:bg-dark-secondary', )}
)} onMouseEnter={() => setShowChatTooltip(true)}
> onMouseLeave={() => setShowChatTooltip(false)}
<div onClick={(e) => {
className={cn( e.stopPropagation();
'flex flex-row items-center space-x-1', setFocusMode('chat');
focusMode === mode.key }}
? 'text-[#24A0ED]' >
: 'text-black dark:text-white', <MessageCircle size={18} />
)} </button>
>
{mode.icon} {/* Divider */}
<p className="text-sm font-medium">{mode.title}</p> <div className="h-6 w-px bg-light-200 dark:bg-dark-200"></div>
</div>
<p className="text-black/70 dark:text-white/70 text-xs"> {/* Local Research Mode Icon */}
{mode.description} <button
</p> className={cn(
</PopoverButton> 'p-2 transition-all duration-200',
))} focusMode === 'localResearch'
? 'bg-[#8B5CF6]/20 text-[#8B5CF6] scale-105'
: 'text-black/30 dark:text-white/30 hover:text-black/50 dark:hover:text-white/50 hover:bg-light-secondary/50 dark:hover:bg-dark-secondary/50',
)}
onMouseEnter={() => setShowLocalResearchTooltip(true)}
onMouseLeave={() => setShowLocalResearchTooltip(false)}
onClick={(e) => {
e.stopPropagation();
setFocusMode('localResearch');
}}
>
<Pencil size={18} />
</button>
</div> </div>
</PopoverPanel>
</Transition> {/* Web Search Mode Tooltip */}
</Popover> {showWebSearchTooltip && (
<div className="absolute z-20 bottom-[100%] mb-2 left-0 animate-in fade-in-0 duration-150">
<div className="bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 p-4 w-80 shadow-lg">
<div className="flex items-center space-x-2 mb-2">
<Globe size={16} className="text-[#24A0ED]" />
<h3 className="font-medium text-sm text-black dark:text-white text-left">
{webSearchMode?.title}
</h3>
</div>
<p className="text-sm text-black/70 dark:text-white/70 leading-relaxed text-left">
{webSearchMode?.description}
</p>
</div>
</div>
)}
{/* Chat Mode Tooltip */}
{showChatTooltip && (
<div className="absolute z-20 bottom-[100%] mb-2 left-0 transform animate-in fade-in-0 duration-150">
<div className="bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 p-4 w-80 shadow-lg">
<div className="flex items-center space-x-2 mb-2">
<MessageCircle size={16} className="text-[#10B981]" />
<h3 className="font-medium text-sm text-black dark:text-white text-left">
{chatMode?.title}
</h3>
</div>
<p className="text-sm text-black/70 dark:text-white/70 leading-relaxed text-left">
{chatMode?.description}
</p>
</div>
</div>
)}
{/* Local Research Mode Tooltip */}
{showLocalResearchTooltip && (
<div className="absolute z-20 bottom-[100%] mb-2 left-0 animate-in fade-in-0 duration-150">
<div className="bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 p-4 w-80 shadow-lg">
<div className="flex items-center space-x-2 mb-2">
<Pencil size={16} className="text-[#8B5CF6]" />
<h3 className="font-medium text-sm text-black dark:text-white text-left">
{localResearchMode?.title}
</h3>
</div>
<p className="text-sm text-black/70 dark:text-white/70 leading-relaxed text-left">
{localResearchMode?.description}
</p>
</div>
</div>
)}
</div>
</div>
</div>
); );
}; };

24
src/components/MessageInputActions/ModelSelector.tsx
View file

@ -26,10 +26,12 @@ const ModelSelector = ({
selectedModel, selectedModel,
setSelectedModel, setSelectedModel,
truncateModelName = true, truncateModelName = true,
showModelName = true,
}: { }: {
selectedModel: { provider: string; model: string } | null; selectedModel: { provider: string; model: string } | null;
setSelectedModel: (model: { provider: string; model: string }) => void; setSelectedModel: (model: { provider: string; model: string }) => void;
truncateModelName?: boolean; truncateModelName?: boolean;
showModelName?: boolean;
}) => { }) => {
const [providerModels, setProviderModels] = useState<ProviderModelMap>({}); const [providerModels, setProviderModels] = useState<ProviderModelMap>({});
const [providersList, setProvidersList] = useState<string[]>([]); const [providersList, setProvidersList] = useState<string[]>([]);
@ -171,16 +173,18 @@ const ModelSelector = ({
className="p-2 group flex text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white" className="p-2 group flex text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
> >
<Cpu size={18} /> <Cpu size={18} />
<span {showModelName && (
className={cn( <span
'mx-2 text-xs font-medium overflow-hidden text-ellipsis whitespace-nowrap hidden lg:block', className={cn(
{ 'ml-2 text-xs font-medium overflow-hidden text-ellipsis whitespace-nowrap',
'max-w-44': truncateModelName, {
}, 'max-w-44': truncateModelName,
)} },
> )}
{getDisplayText()} >
</span> {getDisplayText()}
</span>
)}
<ChevronDown <ChevronDown
size={16} size={16}
className={cn( className={cn(

176
src/components/MessageInputActions/Optimization.tsx
View file

@ -1,12 +1,7 @@
import { ChevronDown, Minimize2, Sliders, Star, Zap, Bot } from 'lucide-react'; import { Zap, Bot } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { import { useState } from 'react';
Popover,
PopoverButton,
PopoverPanel,
Transition,
} from '@headlessui/react';
import { Fragment } from 'react';
const OptimizationModes = [ const OptimizationModes = [
{ {
key: 'speed', key: 'speed',
@ -15,25 +10,6 @@ const OptimizationModes = [
'Prioritize speed and get the quickest possible answer. Uses only web search results - attached files will not be processed.', 'Prioritize speed and get the quickest possible answer. Uses only web search results - attached files will not be processed.',
icon: <Zap size={20} className="text-[#FF9800]" />, icon: <Zap size={20} className="text-[#FF9800]" />,
}, },
// {
// key: 'balanced',
// title: 'Balanced',
// description:
// 'Find the right balance between speed and accuracy. Medium effort retrieving web content.',
// icon: <Sliders size={20} className="text-[#4CAF50]" />,
// },
// {
// key: 'quality',
// title: 'Quality',
// description:
// 'Get the most thorough and accurate answer. High effort retrieving web content. Requires a good AI model. May take a long time.',
// icon: (
// <Star
// size={16}
// className="text-[#2196F3] dark:text-[#BBDEFB] fill-[#BBDEFB] dark:fill-[#2196F3]"
// />
// ),
// },
{ {
key: 'agent', key: 'agent',
title: 'Agent (Experimental)', title: 'Agent (Experimental)',
@ -52,59 +28,103 @@ const Optimization = ({
setOptimizationMode: (mode: string) => void; setOptimizationMode: (mode: string) => void;
showTitle?: boolean; showTitle?: boolean;
}) => { }) => {
const currentMode = OptimizationModes.find(
(mode) => mode.key === optimizationMode,
);
const isAgentMode = optimizationMode === 'agent';
const [showSpeedTooltip, setShowSpeedTooltip] = useState(false);
const [showAgentTooltip, setShowAgentTooltip] = useState(false);
const handleToggle = () => {
setOptimizationMode(isAgentMode ? 'speed' : 'agent');
};
const speedMode = OptimizationModes.find((mode) => mode.key === 'speed');
const agentMode = OptimizationModes.find((mode) => mode.key === 'agent');
return ( return (
<Popover className="relative"> <button
<PopoverButton type="button"
type="button" onClick={handleToggle}
className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white" className="text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
> >
<div className="flex flex-row items-center space-x-1"> <div className="flex flex-row items-center space-x-1">
{OptimizationModes.find((mode) => mode.key === optimizationMode) <div className="relative">
?.icon || <Minimize2 size={20} className="text-gray-400" />} <div className="flex items-center border border-light-200 dark:border-dark-200 rounded-lg overflow-hidden">
{showTitle && ( {/* Speed Mode Icon */}
<p className="text-xs font-medium"> <div
{OptimizationModes.find((mode) => mode.key === optimizationMode) className={cn(
?.title || 'Select mode'} 'p-2 transition-all duration-200',
</p> !isAgentMode
)} ? 'bg-[#FF9800]/20 text-[#FF9800] scale-105'
<ChevronDown size={20} /> : 'text-black/30 dark:text-white/30 hover:text-black/50 dark:hover:text-white/50 hover:bg-light-secondary/50 dark:hover:bg-dark-secondary/50',
</div> )}
</PopoverButton> onMouseEnter={() => setShowSpeedTooltip(true)}
<Transition onMouseLeave={() => setShowSpeedTooltip(false)}
as={Fragment} >
enter="transition ease-out duration-150" <Zap size={18} />
enterFrom="opacity-0 translate-y-1" </div>
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" {/* Divider */}
leaveFrom="opacity-100 translate-y-0" <div className="h-6 w-px bg-light-200 dark:bg-dark-200"></div>
leaveTo="opacity-0 translate-y-1"
> {/* Agent Mode Icon */}
<PopoverPanel className="absolute z-10 bottom-[100%] mb-2 left-1/2 transform -translate-x-1/2"> <div
<div className="flex flex-col gap-2 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-max max-w-[300px] p-4 max-h-[200px] md:max-h-none overflow-y-auto"> className={cn(
{OptimizationModes.map((mode, i) => ( 'p-2 transition-all duration-200',
<PopoverButton isAgentMode
onClick={() => setOptimizationMode(mode.key)} ? 'bg-[#9C27B0]/20 text-[#9C27B0] scale-105'
key={i} : 'text-black/30 dark:text-white/30 hover:text-black/50 dark:hover:text-white/50 hover:bg-light-secondary/50 dark:hover:bg-dark-secondary/50',
className={cn( )}
'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-1 duration-200 cursor-pointer transition', onMouseEnter={() => setShowAgentTooltip(true)}
optimizationMode === mode.key onMouseLeave={() => setShowAgentTooltip(false)}
? 'bg-light-secondary dark:bg-dark-secondary' >
: 'hover:bg-light-secondary dark:hover:bg-dark-secondary', <Bot size={18} />
)} </div>
>
<div className="flex flex-row items-center space-x-1 text-black dark:text-white">
{mode.icon}
<p className="text-sm font-medium">{mode.title}</p>
</div>
<p className="text-black/70 dark:text-white/70 text-xs">
{mode.description}
</p>
</PopoverButton>
))}
</div> </div>
</PopoverPanel>
</Transition> {/* Speed Mode Tooltip */}
</Popover> {showSpeedTooltip && (
<div className="absolute z-20 bottom-[100%] mb-2 right-0 animate-in fade-in-0 duration-150">
<div className="bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 p-4 w-80 shadow-lg">
<div className="flex items-center space-x-2 mb-2">
<Zap size={16} className="text-[#FF9800]" />
<h3 className="font-medium text-sm text-black dark:text-white text-left">
{speedMode?.title}
</h3>
</div>
<p className="text-sm text-black/70 dark:text-white/70 leading-relaxed text-left">
{speedMode?.description}
</p>
</div>
</div>
)}
{/* Agent Mode Tooltip */}
{showAgentTooltip && (
<div className="absolute z-20 bottom-[100%] mb-2 right-0 animate-in fade-in-0 duration-150">
<div className="bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 p-4 w-80 shadow-lg">
<div className="flex items-center space-x-2 mb-2">
<Bot size={16} className="text-[#9C27B0]" />
<h3 className="font-medium text-sm text-black dark:text-white text-left">
{agentMode?.title}
</h3>
</div>
<p className="text-sm text-black/70 dark:text-white/70 leading-relaxed text-left">
{agentMode?.description}
</p>
</div>
</div>
)}
</div>{' '}
{showTitle && (
<p className="text-xs font-medium ml-1">
{currentMode?.title || 'Speed'}
</p>
)}
</div>
</button>
); );
}; };

58
src/lib/prompts/webSearch.ts
View file

@ -181,7 +181,7 @@ export const webSearchRetrieverAgentPrompt = `
- Condense the question to its essence and remove any unnecessary details - Condense the question to its essence and remove any unnecessary details
- Search queries should be short and to the point, focusing on the main topic or question - Search queries should be short and to the point, focusing on the main topic or question
- Ensure the question is grammatically correct and free of spelling errors - Ensure the question is grammatically correct and free of spelling errors
- If applicable, use the provided date to ensure the rephrased question is relevant to the current date and time - If applicable, use the provided date to ensure the rephrased question is relevant to the current day and/or year
- This includes but is not limited to things like sports scores, standings, weather, current events, etc. - This includes but is not limited to things like sports scores, standings, weather, current events, etc.
- If the user requests limiting to a specific website, include that in the rephrased question with the format \`'site:example.com'\`, be sure to include the quotes. Only do this if the limiting is explicitly mentioned in the question - If the user requests limiting to a specific website, include that in the rephrased question with the format \`'site:example.com'\`, be sure to include the quotes. Only do this if the limiting is explicitly mentioned in the question
- You will be given additional instructions from a supervisor in the <supervisor> tag that will direct you to refine the question further or to include specific details. Follow these instructions carefully and incorporate them into your rephrased question - You will be given additional instructions from a supervisor in the <supervisor> tag that will direct you to refine the question further or to include specific details. Follow these instructions carefully and incorporate them into your rephrased question
@ -189,16 +189,16 @@ export const webSearchRetrieverAgentPrompt = `
# Data # Data
- The user question is contained in the <question> tag after the <examples> below - The user question is contained in the <question> tag after the <examples> below
- Current date is: {date}
# Output Format
- You must return your response as a JSON object with "searchQuery" and "reasoning" fields - You must return your response as a JSON object with "searchQuery" and "reasoning" fields
- The searchQuery should contain the optimized search query - The searchQuery should contain the optimized search query
- The reasoning should explain how you optimized the query for better search results - The reasoning should explain how you optimized the query for better search results
- Current date is: {date}
# System Instructions # System Instructions
- These instructions are provided by the user in the <systemInstructions> tag - These instructions are provided by the user in the <systemInstructions> tag
- Give them less priority than the above instructions - Give them less priority than the above instructions
- Incorporate them into your response while adhering to the overall guidelines
- Only use them for additional context on how to retrieve search results (E.g. if the user has provided a specific website to search, or if they have provided a specific date to use in the search)
There are several examples attached for your reference inside the below examples XML block There are several examples attached for your reference inside the below examples XML block
@ -219,6 +219,7 @@ There are several examples attached for your reference inside the below examples
}} }}
</output> </output>
</example> </example>
<example> <example>
<input> <input>
<question> <question>
@ -236,34 +237,6 @@ There are several examples attached for your reference inside the below examples
</output> </output>
</example> </example>
<example>
<input>
<question>
What is the capital of France
</question>
</input>
<output>
{{
"searchQuery": "Capital of France",
"reasoning": "Simplified the query to essential keywords for better search engine optimization while maintaining the core meaning."
}}
</output>
</example>
<example>
<input>
<question>
What is the weather like there? Use weather.com
</question>
</input>
<output>
{{
"searchQuery": "Weather in Albany, New York {date} 'site:weather.com'",
"reasoning": "Added location context and current date for weather relevance, included site restriction as requested by user."
}}
</output>
</example>
<example> <example>
<input> <input>
<question> <question>
@ -281,21 +254,7 @@ There are several examples attached for your reference inside the below examples
<example> <example>
<input> <input>
<question> <question>
What are the top 10 restaurants in New York? Show the results in a table and include a short description of each restaurant. Only include results from yelp.com What are the top 10 restaurants in New York, Chicago, and Boston? Show the results in a table and include a short description of each restaurant. Only include results from yelp.com
</question>
</input>
<output>
{{
"searchQuery": "Top 10 restaurants in New York on {date} 'site:yelp.com'",
"reasoning": "Focused on the core query about top restaurants, added current date for relevance, and included the site restriction to yelp.com as requested."
}}
</output>
</example>
<example>
<input>
<question>
What are the top 10 restaurants in New York, Chicago, and Boston?
</question> </question>
<supervisor> <supervisor>
Find the top 10 restaurants in New York. Find the top 10 restaurants in New York.
@ -303,10 +262,11 @@ There are several examples attached for your reference inside the below examples
</input> </input>
<output> <output>
{{ {{
"searchQuery": "Top 10 restaurants in New York on {date}", "searchQuery": "Top 10 restaurants in New York, Chicago, and Boston on {date} 'site:yelp.com'",
"reasoning": "Following supervisor instructions to focus specifically on New York restaurants, ignoring Chicago and Boston for this search iteration." "reasoning": "Focused on the core query about top restaurants, added current date for relevance, and included the site restriction to yelp.com as requested. Ignored Chicago and Boston for this search iteration."
}} }}
</output> </output>
</example>
</examples> </examples>
Everything below is the part of the actual conversation Everything below is the part of the actual conversation