Ling0925
/
suna
mirror of https://github.com/kortix-ai/suna.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add streaming and conditionaly show usage

This commit is contained in:
Vukasin 2025-07-18 21:49:10 +02:00
parent 9c62b8e805
commit 6468f0ab08
5 changed files with 97 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/thread/chat-input/chat-input.tsx
View File

@ -24,10 +24,11 @@ import { SiNotion } from 'react-icons/si';
import { AgentConfigModal } from '@/components/agents/agent-config-modal';
import { PipedreamRegistry } from '@/components/agents/pipedream/pipedream-registry';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { useSubscription } from '@/hooks/react-query/subscriptions/use-subscriptions';
import { useSubscriptionWithStreaming } from '@/hooks/react-query/subscriptions/use-subscriptions';
import { isLocalMode } from '@/lib/config';
import { Button } from '@/components/ui/button';
import { AnimatePresence } from 'framer-motion';
import { BillingModal } from '@/components/billing/billing-modal';
export interface ChatInputHandles {
getPendingFiles: () => File[];
@ -64,6 +65,7 @@ export interface ChatInputProps {
onConfigureAgent?: (agentId: string) => void;
hideAgentSelection?: boolean;
defaultShowSnackbar?: 'tokens' | 'upgrade' | false;
showToLowCreditUsers?: boolean;
}
export interface UploadedFile {
@ -105,6 +107,7 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
onConfigureAgent,
hideAgentSelection = false,
defaultShowSnackbar = false,
showToLowCreditUsers = true,
},
ref,
) => {
@ -122,6 +125,7 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
const [configModalTab, setConfigModalTab] = useState('integrations');
const [registryDialogOpen, setRegistryDialogOpen] = useState(false);
const [showSnackbar, setShowSnackbar] = useState(defaultShowSnackbar);
const [billingModalOpen, setBillingModalOpen] = useState(false);
const {
selectedModel,
@ -133,19 +137,34 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
refreshCustomModels,
} = useModelSelection();
const { data: subscriptionData } = useSubscription();
const { data: subscriptionData } = useSubscriptionWithStreaming(isAgentRunning);
const deleteFileMutation = useFileDelete();
const queryClient = useQueryClient();
// Simple logic: show usage preview if we have subscription data and not in local mode
const shouldShowUsage = !isLocalMode() && subscriptionData;
// Show usage preview logic:
// - Always show to free users when showToLowCreditUsers is true
// - For paid users, only show when they're at 70% or more of their cost limit (30% or below remaining)
const shouldShowUsage = !isLocalMode() && subscriptionData && showToLowCreditUsers && (() => {
// Free users: always show
if (subscriptionStatus === 'no_subscription') {
return true;
}
// Paid users: only show when at 70% or more of cost limit
const currentUsage = subscriptionData.current_usage || 0;
const costLimit = subscriptionData.cost_limit || 0;
if (costLimit === 0) return false; // No limit set
return currentUsage >= (costLimit * 0.7); // 70% or more used (30% or less remaining)
})();
// Auto-show usage preview when we have subscription data
useEffect(() => {
if (shouldShowUsage && defaultShowSnackbar !== false && (showSnackbar === false || showSnackbar === defaultShowSnackbar)) {
setShowSnackbar('upgrade');
}
}, [subscriptionData, showSnackbar, defaultShowSnackbar, shouldShowUsage]);
}, [subscriptionData, showSnackbar, defaultShowSnackbar, shouldShowUsage, subscriptionStatus, showToLowCreditUsers]);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
@ -320,6 +339,7 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
showUsagePreview={showSnackbar}
subscriptionData={subscriptionData}
onCloseUsage={() => setShowSnackbar(false)}
onOpenUpgrade={() => setBillingModalOpen(true)}
isVisible={showToolPreview || !!showSnackbar}
/>
<Card
@ -494,6 +514,10 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
/>
</DialogContent>
</Dialog>
<BillingModal
open={billingModalOpen}
onOpenChange={setBillingModalOpen}
/>
</div>
</div>
);

31
frontend/src/components/thread/chat-input/chat-snack.tsx
View File

@ -4,6 +4,7 @@ import { X } from 'lucide-react';
import { cn } from '@/lib/utils';
import { UsagePreview } from './usage-preview';
import { FloatingToolPreview, ToolCallInput } from './floating-tool-preview';
import { isLocalMode } from '@/lib/config';
export interface ChatSnackProps {
// Tool preview props
@ -17,6 +18,7 @@ export interface ChatSnackProps {
showUsagePreview?: 'tokens' | 'upgrade' | false;
subscriptionData?: any;
onCloseUsage?: () => void;
onOpenUpgrade?: () => void;
// General props
isVisible?: boolean;
@ -34,16 +36,21 @@ export const ChatSnack: React.FC<ChatSnackProps> = ({
showUsagePreview = false,
subscriptionData,
onCloseUsage,
onOpenUpgrade,
isVisible = false,
}) => {
const [currentView, setCurrentView] = React.useState(0);
// Determine what notifications we have
// Determine what notifications we have - match exact rendering conditions
const notifications = [];
// Tool notification: only if we have tool calls and showToolPreview is true
if (showToolPreview && toolCalls.length > 0) {
notifications.push('tool');
}
if (showUsagePreview) {
// Usage notification: must match ALL rendering conditions
if (showUsagePreview && !isLocalMode() && subscriptionData) {
notifications.push('usage');
}
@ -89,7 +96,7 @@ export const ChatSnack: React.FC<ChatSnackProps> = ({
);
}
if (currentNotification === 'usage' && showUsagePreview) {
if (currentNotification === 'usage' && showUsagePreview && !isLocalMode()) {
return (
<motion.div
layoutId={SNACK_LAYOUT_ID}
@ -106,7 +113,22 @@ export const ChatSnack: React.FC<ChatSnackProps> = ({
>
<motion.div
layoutId={SNACK_CONTENT_LAYOUT_ID}
className="bg-card border border-border rounded-3xl p-2 w-full"
className={cn(
"bg-card border border-border rounded-3xl p-2 w-full transition-all duration-200",
onOpenUpgrade && "cursor-pointer hover:shadow-md"
)}
whileHover={onOpenUpgrade ? { scale: 1.02 } : undefined}
whileTap={onOpenUpgrade ? { scale: 0.98 } : undefined}
onClick={(e) => {
// Don't trigger if clicking on indicators or close button
const target = e.target as HTMLElement;
const isIndicatorClick = target.closest('[data-indicator-click]');
const isCloseClick = target.closest('[data-close-click]');
if (!isIndicatorClick && !isCloseClick && onOpenUpgrade) {
onOpenUpgrade();
}
}}
>
<UsagePreview
type={showUsagePreview}
@ -126,6 +148,7 @@ export const ChatSnack: React.FC<ChatSnackProps> = ({
currentIndex={currentView}
totalCount={totalNotifications}
onIndicatorClick={(index) => setCurrentView(index)}
onOpenUpgrade={onOpenUpgrade}
/>
</motion.div>
</motion.div>

4
frontend/src/components/thread/chat-input/message-input.tsx
View File

@ -277,13 +277,13 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
</Button>
</div>
</div>
{subscriptionStatus === 'no_subscription' && !isLocalMode() &&
{/* {subscriptionStatus === 'no_subscription' && !isLocalMode() &&
<div className='sm:hidden absolute -bottom-8 left-0 right-0 flex justify-center'>
<p className='text-xs text-amber-500 px-2 py-1'>
Upgrade for better performance
</p>
</div>
}
} */}
</div>
);
},

5
frontend/src/components/thread/chat-input/usage-preview.tsx
View File

@ -9,6 +9,7 @@ export interface UsagePreviewProps {
type: 'tokens' | 'upgrade';
subscriptionData?: any;
onClose?: () => void;
onOpenUpgrade?: () => void;
hasMultiple?: boolean;
showIndicators?: boolean;
currentIndex?: number;
@ -20,6 +21,7 @@ export const UsagePreview: React.FC<UsagePreviewProps> = ({
type,
subscriptionData,
onClose,
onOpenUpgrade,
hasMultiple = false,
showIndicators = false,
currentIndex = 0,
@ -100,6 +102,7 @@ export const UsagePreview: React.FC<UsagePreviewProps> = ({
{/* Apple-style notification indicators - only for multiple notification types */}
{showIndicators && totalCount === 2 && (
<button
data-indicator-click
onClick={(e) => {
e.stopPropagation();
const nextIndex = currentIndex === 0 ? 1 : 0;
@ -121,7 +124,7 @@ export const UsagePreview: React.FC<UsagePreviewProps> = ({
</button>
)}
<Button value='ghost' className="bg-transparent hover:bg-transparent flex-shrink-0" onClick={onClose}>
<Button value='ghost' data-close-click className="bg-transparent hover:bg-transparent flex-shrink-0" onClick={onClose}>
<X className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors" />
</Button>
</div>

35
frontend/src/hooks/react-query/subscriptions/use-subscriptions.ts
View File

@ -7,6 +7,8 @@ import {
SubscriptionStatus,
} from '@/lib/api';
import { subscriptionKeys } from './keys';
import { useQuery } from '@tanstack/react-query';
import { useState, useEffect } from 'react';
export const useSubscription = createQueryHook(
subscriptionKeys.details(),
@ -17,6 +19,39 @@ export const useSubscription = createQueryHook(
},
);
// Smart subscription hook that adapts refresh based on streaming state
export const useSubscriptionWithStreaming = (isStreaming: boolean = false) => {
const [isVisible, setIsVisible] = useState(true);
// Track page visibility
useEffect(() => {
const handleVisibilityChange = () => {
setIsVisible(!document.hidden);
};
document.addEventListener('visibilitychange', handleVisibilityChange);
return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
}, []);
return useQuery({
queryKey: subscriptionKeys.details(),
queryFn: getSubscription,
staleTime: 1000 * 60 * 2, // 2 minutes
refetchOnWindowFocus: true,
refetchInterval: (data) => {
// No refresh if tab is hidden
if (!isVisible) return false;
// If actively streaming: refresh every 5s (costs are changing)
if (isStreaming) return 5 * 1000;
// If visible but not streaming: refresh every 5min
return 5 * 60 * 1000;
},
refetchIntervalInBackground: false, // Stop when tab backgrounded
});
};
export const useCreatePortalSession = createMutationHook(
(params: { return_url: string }) => createPortalSession(params),
{