Context window display

Author: Sg312

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/components/context-usage-indicator/context-usage-indicator.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useMemo } from 'react'
+import { Tooltip } from '@/components/emcn'
+
+interface ContextUsageIndicatorProps {
+  /** Usage percentage (0-100) */
+  percentage: number
+  /** Size of the indicator in pixels */
+  size?: number
+  /** Stroke width in pixels */
+  strokeWidth?: number
+}
+
+/**
+ * Circular context usage indicator showing percentage of context window used.
+ * Displays a progress ring that changes color based on usage level.
+ *
+ * @param props - Component props
+ * @returns Rendered context usage indicator
+ */
+export function ContextUsageIndicator({
+  percentage,
+  size = 20,
+  strokeWidth = 2,
+}: ContextUsageIndicatorProps) {
+  const radius = (size - strokeWidth) / 2
+  const circumference = radius * 2 * Math.PI
+  const offset = circumference - (percentage / 100) * circumference
+
+  const color = useMemo(() => {
+    if (percentage >= 90) return '#dc2626'
+    if (percentage >= 75) return '#d97706'
+    return '#6b7280'
+  }, [percentage])
+
+  const displayPercentage = useMemo(() => {
+    return Math.round(percentage)
+  }, [percentage])
+
+  return (
+    <Tooltip.Root delayDuration={100}>
+      <Tooltip.Trigger asChild>
+        <div
+          className='flex cursor-pointer items-center justify-center transition-opacity hover:opacity-80'
+          style={{ width: size, height: size }}
+        >
+          <svg width={size} height={size} className='rotate-[-90deg]'>
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke='currentColor'
+          strokeWidth={strokeWidth}
+          fill='none'
+          className='text-muted-foreground/20'
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          fill='none'
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          className='transition-all duration-300 ease-in-out'
+          strokeLinecap='round'
+        />
+          </svg>
+        </div>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='top'>
+        {displayPercentage}% context used
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/components/index.ts

@@ -1,5 +1,6 @@
 export { AttachedFilesDisplay } from './attached-files-display/attached-files-display'
 export { ContextPills } from './context-pills/context-pills'
+export { ContextUsageIndicator } from './context-usage-indicator/context-usage-indicator'
 export { MentionMenu } from './mention-menu/mention-menu'
 export { ModeSelector } from './mode-selector/mode-selector'
 export { ModelSelector } from './model-selector/model-selector'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/user-input.tsx

@@ -21,6 +21,7 @@ import type { ChatContext } from '@/stores/panel-new/copilot/types'
 import {
   AttachedFilesDisplay,
   ContextPills,
+  ContextUsageIndicator,
   MentionMenu,
   ModelSelector,
   ModeSelector,
@@ -97,7 +98,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     const workspaceId = params.workspaceId as string
 
     // Store hooks
-    const { workflowId, selectedModel, setSelectedModel } = useCopilotStore()
+    const { workflowId, selectedModel, setSelectedModel, contextUsage } = useCopilotStore()
 
     // Internal state
     const [internalMessage, setInternalMessage] = useState('')
@@ -581,7 +582,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           onDragOver={fileAttachments.handleDragOver}
           onDrop={fileAttachments.handleDrop}
         >
-          {/* Top Row: @ Button + Context Pills + Context Usage Pill */}
+          {/* Top Row: @ Button + Context Usage + Context Pills */}
           <div className='mb-[6px] flex flex-wrap items-center gap-[6px]'>
             <Badge
               variant='outline'
@@ -595,6 +596,11 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
               <AtSign className='h-3 w-3' strokeWidth={1.75} />
             </Badge>
 
+            {/* Context Usage Indicator */}
+            {contextUsage && contextUsage.percentage > 0 && (
+              <ContextUsageIndicator percentage={contextUsage.percentage} size={18} strokeWidth={2.5} />
+            )}
+
             {/* Selected Context Pills */}
             <ContextPills
               contexts={contextManagement.selectedContexts}