feat(ui): enhance MessageInput and Focus components; improve layout and tooltip functionality
This commit is contained in:
Willie Zutz
parent
00e483f975
commit
01bd3adaa4
5 changed files with 274 additions and 252 deletions
|
|
@ -141,16 +141,25 @@ const MessageInput = ({
|
|||
}}
|
||||
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">
|
||||
<TextareaAutosize
|
||||
ref={inputRef}
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
minRows={2}
|
||||
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"
|
||||
placeholder={firstMessage ? 'Ask anything...' : 'Ask a follow-up'}
|
||||
/>
|
||||
<div className="flex flex-row items-center justify-between mt-4">
|
||||
<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">
|
||||
<div className="flex flex-row items-end space-x-2 mb-2">
|
||||
<TextareaAutosize
|
||||
ref={inputRef}
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
minRows={1}
|
||||
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'}
|
||||
/>
|
||||
<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">
|
||||
<Focus focusMode={focusMode} setFocusMode={setFocusMode} />
|
||||
<Attach
|
||||
|
|
@ -163,6 +172,7 @@ const MessageInput = ({
|
|||
</div>
|
||||
<div className="flex flex-row items-center space-x-2">
|
||||
<ModelSelector
|
||||
showModelName={false}
|
||||
selectedModel={selectedModel}
|
||||
setSelectedModel={(selectedModel) => {
|
||||
setSelectedModel(selectedModel);
|
||||
|
|
@ -177,13 +187,6 @@ const MessageInput = ({
|
|||
selectedPromptIds={systemPromptIds}
|
||||
onSelectedPromptIdsChange={setSystemPromptIds}
|
||||
/>
|
||||
<Optimization
|
||||
optimizationMode={optimizationMode}
|
||||
setOptimizationMode={(optimizationMode) => {
|
||||
setOptimizationMode(optimizationMode);
|
||||
localStorage.setItem('optimizationMode', optimizationMode);
|
||||
}}
|
||||
/>
|
||||
{loading ? (
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -1,65 +1,26 @@
|
|||
import {
|
||||
BadgePercent,
|
||||
ChevronDown,
|
||||
Globe,
|
||||
MessageCircle,
|
||||
Pencil,
|
||||
ScanEye,
|
||||
SwatchBook,
|
||||
} from 'lucide-react';
|
||||
import { Globe, MessageCircle, Pencil } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverPanel,
|
||||
Transition,
|
||||
} from '@headlessui/react';
|
||||
import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons';
|
||||
import { Fragment } from 'react';
|
||||
import { useState } from 'react';
|
||||
|
||||
const focusModes = [
|
||||
{
|
||||
key: 'webSearch',
|
||||
title: 'All',
|
||||
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',
|
||||
title: 'Chat',
|
||||
description: 'Have a creative conversation',
|
||||
icon: <MessageCircle size={16} />,
|
||||
icon: <MessageCircle size={16} className="text-[#10B981]" />,
|
||||
},
|
||||
{
|
||||
key: 'localResearch',
|
||||
title: 'Local Research',
|
||||
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 = ({
|
||||
|
|
@ -69,62 +30,136 @@ const Focus = ({
|
|||
focusMode: string;
|
||||
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 (
|
||||
<Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg mt-[6.5px]">
|
||||
<PopoverButton
|
||||
type="button"
|
||||
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">
|
||||
{focusModes.find((mode) => mode.key === focusMode)?.icon}
|
||||
<p className="text-xs font-medium hidden lg:block">
|
||||
{focusModes.find((mode) => mode.key === focusMode)?.title}
|
||||
</p>
|
||||
<ChevronDown size={20} className="-translate-x-1" />
|
||||
</div>
|
||||
</PopoverButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-150"
|
||||
enterFrom="opacity-0 -translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 -translate-y-1"
|
||||
>
|
||||
<PopoverPanel className="absolute z-10 w-64 md:w-[500px] left-0 bottom-full mb-2">
|
||||
<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">
|
||||
{focusModes.map((mode, i) => (
|
||||
<PopoverButton
|
||||
onClick={() => setFocusMode(mode.key)}
|
||||
key={i}
|
||||
className={cn(
|
||||
'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-2 duration-200 cursor-pointer transition',
|
||||
focusMode === mode.key
|
||||
? 'bg-light-secondary dark:bg-dark-secondary'
|
||||
: 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-row items-center space-x-1',
|
||||
focusMode === mode.key
|
||||
? 'text-[#24A0ED]'
|
||||
: '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 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">
|
||||
<div className="flex flex-row items-center space-x-1">
|
||||
<div className="relative">
|
||||
<div className="flex items-center border border-light-200 dark:border-dark-200 rounded-lg overflow-hidden">
|
||||
{/* Web Search Mode Icon */}
|
||||
<button
|
||||
className={cn(
|
||||
'p-2 transition-all duration-200',
|
||||
focusMode === 'webSearch'
|
||||
? 'bg-[#24A0ED]/20 text-[#24A0ED] 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={() => setShowWebSearchTooltip(true)}
|
||||
onMouseLeave={() => setShowWebSearchTooltip(false)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFocusMode('webSearch');
|
||||
}}
|
||||
>
|
||||
<Globe size={18} />
|
||||
</button>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="h-6 w-px bg-light-200 dark:bg-dark-200"></div>
|
||||
|
||||
{/* Chat Mode Icon */}
|
||||
<button
|
||||
className={cn(
|
||||
'p-2 transition-all duration-200',
|
||||
focusMode === 'chat'
|
||||
? 'bg-[#10B981]/20 text-[#10B981] 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={() => setShowChatTooltip(true)}
|
||||
onMouseLeave={() => setShowChatTooltip(false)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFocusMode('chat');
|
||||
}}
|
||||
>
|
||||
<MessageCircle size={18} />
|
||||
</button>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="h-6 w-px bg-light-200 dark:bg-dark-200"></div>
|
||||
|
||||
{/* Local Research Mode Icon */}
|
||||
<button
|
||||
className={cn(
|
||||
'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>
|
||||
</PopoverPanel>
|
||||
</Transition>
|
||||
</Popover>
|
||||
|
||||
{/* Web Search Mode Tooltip */}
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -26,10 +26,12 @@ const ModelSelector = ({
|
|||
selectedModel,
|
||||
setSelectedModel,
|
||||
truncateModelName = true,
|
||||
showModelName = true,
|
||||
}: {
|
||||
selectedModel: { provider: string; model: string } | null;
|
||||
setSelectedModel: (model: { provider: string; model: string }) => void;
|
||||
truncateModelName?: boolean;
|
||||
showModelName?: boolean;
|
||||
}) => {
|
||||
const [providerModels, setProviderModels] = useState<ProviderModelMap>({});
|
||||
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"
|
||||
>
|
||||
<Cpu size={18} />
|
||||
<span
|
||||
className={cn(
|
||||
'mx-2 text-xs font-medium overflow-hidden text-ellipsis whitespace-nowrap hidden lg:block',
|
||||
{
|
||||
'max-w-44': truncateModelName,
|
||||
},
|
||||
)}
|
||||
>
|
||||
{getDisplayText()}
|
||||
</span>
|
||||
{showModelName && (
|
||||
<span
|
||||
className={cn(
|
||||
'ml-2 text-xs font-medium overflow-hidden text-ellipsis whitespace-nowrap',
|
||||
{
|
||||
'max-w-44': truncateModelName,
|
||||
},
|
||||
)}
|
||||
>
|
||||
{getDisplayText()}
|
||||
</span>
|
||||
)}
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={cn(
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverPanel,
|
||||
Transition,
|
||||
} from '@headlessui/react';
|
||||
import { Fragment } from 'react';
|
||||
import { useState } from 'react';
|
||||
|
||||
const OptimizationModes = [
|
||||
{
|
||||
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.',
|
||||
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',
|
||||
title: 'Agent (Experimental)',
|
||||
|
|
@ -52,59 +28,103 @@ const Optimization = ({
|
|||
setOptimizationMode: (mode: string) => void;
|
||||
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 (
|
||||
<Popover className="relative">
|
||||
<PopoverButton
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
<div className="flex flex-row items-center space-x-1">
|
||||
{OptimizationModes.find((mode) => mode.key === optimizationMode)
|
||||
?.icon || <Minimize2 size={20} className="text-gray-400" />}
|
||||
{showTitle && (
|
||||
<p className="text-xs font-medium">
|
||||
{OptimizationModes.find((mode) => mode.key === optimizationMode)
|
||||
?.title || 'Select mode'}
|
||||
</p>
|
||||
)}
|
||||
<ChevronDown size={20} />
|
||||
</div>
|
||||
</PopoverButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-150"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<PopoverPanel className="absolute z-10 bottom-[100%] mb-2 left-1/2 transform -translate-x-1/2">
|
||||
<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">
|
||||
{OptimizationModes.map((mode, i) => (
|
||||
<PopoverButton
|
||||
onClick={() => setOptimizationMode(mode.key)}
|
||||
key={i}
|
||||
className={cn(
|
||||
'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-1 duration-200 cursor-pointer transition',
|
||||
optimizationMode === mode.key
|
||||
? 'bg-light-secondary dark:bg-dark-secondary'
|
||||
: 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
|
||||
)}
|
||||
>
|
||||
<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>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleToggle}
|
||||
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="relative">
|
||||
<div className="flex items-center border border-light-200 dark:border-dark-200 rounded-lg overflow-hidden">
|
||||
{/* Speed Mode Icon */}
|
||||
<div
|
||||
className={cn(
|
||||
'p-2 transition-all duration-200',
|
||||
!isAgentMode
|
||||
? 'bg-[#FF9800]/20 text-[#FF9800] 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={() => setShowSpeedTooltip(true)}
|
||||
onMouseLeave={() => setShowSpeedTooltip(false)}
|
||||
>
|
||||
<Zap size={18} />
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="h-6 w-px bg-light-200 dark:bg-dark-200"></div>
|
||||
|
||||
{/* Agent Mode Icon */}
|
||||
<div
|
||||
className={cn(
|
||||
'p-2 transition-all duration-200',
|
||||
isAgentMode
|
||||
? 'bg-[#9C27B0]/20 text-[#9C27B0] 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={() => setShowAgentTooltip(true)}
|
||||
onMouseLeave={() => setShowAgentTooltip(false)}
|
||||
>
|
||||
<Bot size={18} />
|
||||
</div>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</Transition>
|
||||
</Popover>
|
||||
|
||||
{/* Speed Mode Tooltip */}
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ export const webSearchRetrieverAgentPrompt = `
|
|||
- 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
|
||||
- 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.
|
||||
- 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
|
||||
|
|
@ -189,16 +189,16 @@ export const webSearchRetrieverAgentPrompt = `
|
|||
|
||||
# Data
|
||||
- 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
|
||||
- The searchQuery should contain the optimized search query
|
||||
- The reasoning should explain how you optimized the query for better search results
|
||||
- Current date is: {date}
|
||||
|
||||
# System Instructions
|
||||
- These instructions are provided by the user in the <systemInstructions> tag
|
||||
- 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
|
||||
|
||||
|
|
@ -219,6 +219,7 @@ There are several examples attached for your reference inside the below examples
|
|||
}}
|
||||
</output>
|
||||
</example>
|
||||
|
||||
<example>
|
||||
<input>
|
||||
<question>
|
||||
|
|
@ -236,34 +237,6 @@ There are several examples attached for your reference inside the below examples
|
|||
</output>
|
||||
</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>
|
||||
<input>
|
||||
<question>
|
||||
|
|
@ -281,21 +254,7 @@ There are several examples attached for your reference inside the below examples
|
|||
<example>
|
||||
<input>
|
||||
<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
|
||||
</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?
|
||||
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>
|
||||
<supervisor>
|
||||
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>
|
||||
<output>
|
||||
{{
|
||||
"searchQuery": "Top 10 restaurants in New York on {date}",
|
||||
"reasoning": "Following supervisor instructions to focus specifically on New York restaurants, ignoring Chicago and Boston for this search iteration."
|
||||
"searchQuery": "Top 10 restaurants in New York, Chicago, and Boston 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. Ignored Chicago and Boston for this search iteration."
|
||||
}}
|
||||
</output>
|
||||
</example>
|
||||
</examples>
|
||||
|
||||
Everything below is the part of the actual conversation
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue