feat: Added Q/A Mode in Research Agent

This commit is contained in:
DESKTOP-RTLN3BA\$punk 2025-06-03 00:10:35 -07:00
parent 4820caf901
commit 0c07898f4a
18 changed files with 792 additions and 42 deletions

View file

@ -45,7 +45,7 @@ import {
scrollTabsRight as scrollTabsRightUtil,
Source,
ResearchMode,
researcherOptions
ResearchModeControl
} from '@/components/chat';
import { MarkdownViewer } from '@/components/markdown-viewer';
import { Logo } from '@/components/Logo';
@ -250,7 +250,7 @@ const ChatPage = () => {
const [terminalExpanded, setTerminalExpanded] = useState(false);
const [selectedConnectors, setSelectedConnectors] = useState<string[]>(["CRAWLED_URL"]);
const [searchMode, setSearchMode] = useState<'DOCUMENTS' | 'CHUNKS'>('DOCUMENTS');
const [researchMode, setResearchMode] = useState<ResearchMode>("GENERAL");
const [researchMode, setResearchMode] = useState<ResearchMode>("QNA");
const [currentTime, setCurrentTime] = useState<string>('');
const [currentDate, setCurrentDate] = useState<string>('');
const terminalMessagesRef = useRef<HTMLDivElement>(null);
@ -1079,12 +1079,11 @@ const ChatPage = () => {
</button>
</div>
{/* Research Mode Segmented Control */}
{/* Research Mode Control */}
<div className="h-8">
<SegmentedControl<ResearchMode>
<ResearchModeControl
value={researchMode}
onChange={setResearchMode}
options={researcherOptions}
/>
</div>
</div>

View file

@ -29,7 +29,7 @@ const ResearcherPage = () => {
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({
type: "GENERAL",
type: "QNA",
title: "Untitled Chat", // Empty title initially
initial_connectors: ["CRAWLED_URL"], // Default connector
messages: [],

View file

@ -10,6 +10,8 @@ import {
File,
Link,
Webhook,
MessageCircle,
FileText,
} from 'lucide-react';
import { IconBrandNotion, IconBrandSlack, IconBrandYoutube, IconBrandGithub, IconLayoutKanban, IconLinkPlus, IconBrandDiscord } from "@tabler/icons-react";
import { Button } from '@/components/ui/button';
@ -56,17 +58,22 @@ export const getConnectorIcon = (connectorType: string) => {
export const researcherOptions: { value: ResearchMode; label: string; icon: React.ReactNode }[] = [
{
value: 'GENERAL',
value: 'QNA',
label: 'Q/A',
icon: getConnectorIcon('GENERAL')
},
{
value: 'REPORT_GENERAL',
label: 'General',
icon: getConnectorIcon('GENERAL')
},
{
value: 'DEEP',
value: 'REPORT_DEEP',
label: 'Deep',
icon: getConnectorIcon('DEEP')
},
{
value: 'DEEPER',
value: 'REPORT_DEEPER',
label: 'Deeper',
icon: getConnectorIcon('DEEPER')
},
@ -168,4 +175,94 @@ export const ConnectorButton = ({ selectedConnectors, onClick, connectorSources
</div>
</Button>
);
};
// New component for Research Mode Control with Q/A and Report toggle
type ResearchModeControlProps = {
value: ResearchMode;
onChange: (value: ResearchMode) => void;
};
export const ResearchModeControl = ({ value, onChange }: ResearchModeControlProps) => {
// Determine if we're in Q/A mode or Report mode
const isQnaMode = value === 'QNA';
const isReportMode = value.startsWith('REPORT_');
// Get the current report sub-mode
const getCurrentReportMode = () => {
if (!isReportMode) return 'GENERAL';
return value.replace('REPORT_', '') as 'GENERAL' | 'DEEP' | 'DEEPER';
};
const reportSubOptions = [
{ value: 'GENERAL', label: 'General', icon: getConnectorIcon('GENERAL') },
{ value: 'DEEP', label: 'Deep', icon: getConnectorIcon('DEEP') },
{ value: 'DEEPER', label: 'Deeper', icon: getConnectorIcon('DEEPER') },
];
const handleModeToggle = (mode: 'QNA' | 'REPORT') => {
if (mode === 'QNA') {
onChange('QNA');
} else {
// Default to GENERAL for Report mode
onChange('REPORT_GENERAL');
}
};
const handleReportSubModeChange = (subMode: string) => {
onChange(`REPORT_${subMode}` as ResearchMode);
};
return (
<div className="flex items-center gap-2">
{/* Main Q/A vs Report Toggle */}
<div className="flex h-8 rounded-md border border-border overflow-hidden">
<button
className={`flex h-full items-center gap-1 px-3 text-xs font-medium transition-colors whitespace-nowrap ${
isQnaMode
? 'bg-primary text-primary-foreground'
: 'hover:bg-muted text-muted-foreground hover:text-foreground'
}`}
onClick={() => handleModeToggle('QNA')}
aria-pressed={isQnaMode}
>
<MessageCircle className="h-3 w-3" />
<span>Q/A</span>
</button>
<button
className={`flex h-full items-center gap-1 px-3 text-xs font-medium transition-colors whitespace-nowrap ${
isReportMode
? 'bg-primary text-primary-foreground'
: 'hover:bg-muted text-muted-foreground hover:text-foreground'
}`}
onClick={() => handleModeToggle('REPORT')}
aria-pressed={isReportMode}
>
<FileText className="h-3 w-3" />
<span>Report</span>
</button>
</div>
{/* Report Sub-options (only show when in Report mode) */}
{isReportMode && (
<div className="flex h-8 rounded-md border border-border overflow-hidden">
{reportSubOptions.map((option) => (
<button
key={option.value}
className={`flex h-full items-center gap-1 px-2 text-xs font-medium transition-colors whitespace-nowrap ${
getCurrentReportMode() === option.value
? 'bg-primary text-primary-foreground'
: 'hover:bg-muted text-muted-foreground hover:text-foreground'
}`}
onClick={() => handleReportSubModeChange(option.value)}
aria-pressed={getCurrentReportMode() === option.value}
>
{option.icon}
<span>{option.label}</span>
</button>
))}
</div>
)}
</div>
);
};

View file

@ -48,4 +48,4 @@ export interface ToolInvocationUIPart {
}
export type ResearchMode = 'GENERAL' | 'DEEP' | 'DEEPER' | 'DEEPEST';
export type ResearchMode = 'QNA' | 'REPORT_GENERAL' | 'REPORT_DEEP' | 'REPORT_DEEPER';