apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-04-28 09:56:23 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use streaming in Copilot

Browse source
This commit is contained in:
Ramnique Singh 2025-04-15 00:56:15 +05:30
parent ba14bc9bd8
commit 49ca5a7154
19 changed files with 1303 additions and 839 deletions
Download patch file Download diff file Expand all files Collapse all files

36
apps/rowboat/components/common/compose-box-copilot.tsx
View file

@ -18,20 +18,20 @@ interface ComposeBoxCopilotProps {
handleUserMessage: (message: string) => void;
messages: any[];
loading: boolean;
disabled?: boolean;
initialFocus?: boolean;
shouldAutoFocus?: boolean;
onFocus?: () => void;
onCancel?: () => void;
}
export function ComposeBoxCopilot({
handleUserMessage,
messages,
loading,
disabled = false,
initialFocus = false,
shouldAutoFocus = false,
onFocus,
onCancel,
}: ComposeBoxCopilotProps) {
const [input, setInput] = useState('');
const [isFocused, setIsFocused] = useState(false);
@ -94,7 +94,7 @@ export function ComposeBoxCopilot({
onKeyDown={handleInputKeyDown}
onFocus={handleFocus}
onBlur={() => setIsFocused(false)}
disabled={disabled || loading}
disabled={loading}
placeholder="Type a message..."
autoResize={true}
maxHeight={120}
@ -118,13 +118,15 @@ export function ComposeBoxCopilot({
<Button
size="sm"
isIconOnly
disabled={disabled || loading || !input.trim()}
onPress={handleInput}
disabled={!loading && !input.trim()}
onPress={loading ? onCancel : handleInput}
className={`
transition-all duration-200
${input.trim()
? 'bg-indigo-50 hover:bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:hover:bg-indigo-800/60 dark:text-indigo-300'
: 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
${loading
? 'bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-900/50 dark:hover:bg-red-800/60 dark:text-red-300'
: input.trim()
? 'bg-indigo-50 hover:bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:hover:bg-indigo-800/60 dark:text-indigo-300'
: 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
}
scale-100 hover:scale-105 active:scale-95
disabled:opacity-50 disabled:scale-95
@ -133,7 +135,7 @@ export function ComposeBoxCopilot({
`}
>
{loading ? (
<Spinner size="sm" color={input.trim() ? "primary" : "default"} />
<StopIcon size={16} />
) : (
<SendIcon
size={16}
@ -165,3 +167,19 @@ function SendIcon({ size, className }: { size: number, className?: string }) {
</svg>
);
}
// Custom StopIcon component for better visual alignment
function StopIcon({ size, className }: { size: number, className?: string }) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="currentColor"
stroke="none"
className={className}
>
<rect x="6" y="6" width="12" height="12" rx="1" />
</svg>
);
}