ui

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx

@@ -89,7 +89,7 @@ export function WandPromptBar({
       )}
     >
       <div className='flex items-center gap-2 p-2'>
-        <div className={cn('status-indicator ml-1', isStreaming && 'streaming')} />
+        <div className={cn('status-indicator ml-2 self-center', isStreaming && 'streaming')} />
 
         <div className='relative flex-1'>
           <Input
@@ -98,7 +98,7 @@ export function WandPromptBar({
             placeholder={placeholder}
             className={cn(
               'rounded-xl border-0 text-foreground text-sm placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0',
-              isStreaming && 'text-primary',
+              isStreaming && 'text-foreground/70',
               (isLoading || isStreaming) && 'loading-placeholder'
             )}
             onKeyDown={(e) => {
@@ -111,11 +111,6 @@ export function WandPromptBar({
             disabled={isLoading || isStreaming}
             autoFocus={!isStreaming}
           />
-          {isStreaming && (
-            <div className='pointer-events-none absolute inset-0 h-full w-full overflow-hidden'>
-              <div className='shimmer-effect' />
-            </div>
-          )}
         </div>
 
         <Button
@@ -141,14 +136,6 @@ export function WandPromptBar({
       </div>
 
       <style jsx global>{`
-        @keyframes shimmer {
-          0% {
-            transform: translateX(-100%);
-          }
-          100% {
-            transform: translateX(100%);
-          }
-        }
 
         @keyframes smoke-pulse {
           0%,
@@ -164,8 +151,8 @@ export function WandPromptBar({
 
         .status-indicator {
           position: relative;
-          width: 16px;
-          height: 16px;
+          width: 12px;
+          height: 12px;
           border-radius: 50%;
           overflow: hidden;
           background-color: hsl(var(--muted-foreground) / 0.5);
@@ -183,36 +170,20 @@ export function WandPromptBar({
           border-radius: 50%;
           background: radial-gradient(
             circle,
-            hsl(var(--primary) / 0.7) 0%,
-            hsl(var(--primary) / 0.2) 60%,
+            hsl(var(--primary) / 0.9) 0%,
+            hsl(var(--primary) / 0.4) 60%,
             transparent 80%
           );
           animation: smoke-pulse 1.8s ease-in-out infinite;
+          opacity: 0.9;
         }
 
-        .shimmer-effect {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: linear-gradient(
-            90deg,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 0.4) 50%,
-            rgba(255, 255, 255, 0) 100%
-          );
-          animation: shimmer 2s infinite;
+        .dark .status-indicator.streaming::before {
+          background: #6b7280;
+          opacity: 0.9;
+          animation: smoke-pulse 1.8s ease-in-out infinite;
         }
 
-        .dark .shimmer-effect {
-          background: linear-gradient(
-            90deg,
-            rgba(50, 50, 50, 0) 0%,
-            rgba(80, 80, 80, 0.4) 50%,
-            rgba(50, 50, 50, 0) 100%
-          );
-        }
       `}</style>
     </div>
   )