remove dup CSS, fix enhancing animation

Author: chadgauth

webview-ui/.storybook/preview.css

@@ -108,50 +108,3 @@ body {
 ::-webkit-scrollbar-thumb:hover {
 	background: #686868;
 }
-
-/* Dark theme */
-.dark {
-	color-scheme: dark;
-	background-color: var(--vscode-editor-background);
-	color: var(--vscode-editor-foreground);
-}
-
-/* Light theme */
-.light {
-	color-scheme: light;
-	background-color: #ffffff;
-	color: #000000;
-}
-
-/* Global styles */
-body {
-	margin: 0;
-	padding: 0;
-	font-family: var(--vscode-font-family);
-	font-size: var(--vscode-font-size);
-	line-height: 1.4;
-}
-
-/* Mermaid diagram styles */
-.mermaid {
-	background: var(--vscode-editor-background);
-}
-
-/* VS Code scrollbar styles */
-::-webkit-scrollbar {
-	width: 10px;
-	height: 10px;
-}
-
-::-webkit-scrollbar-track {
-	background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-	background: #424242;
-	border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background: #686868;
-}

webview-ui/src/components/chat/ChatTextArea/ChatTextArea.module.css

@@ -55,30 +55,61 @@
 	opacity: 1;
 }
 
-.action-button.disabled {
-	opacity: 0.35;
-	cursor: not-allowed;
-	filter: grayscale(30%);
+.codicon-sparkle {
+	transition: all 0.3s ease;
+	z-index: 1;
 }
 
-.action-button.disabled:hover {
-	background-color: transparent;
+.codicon-sparkle:hover {
+	filter: brightness(1.2);
 }
 
-/* Loading spinner styles */
-.action-button.codicon-loading {
-	animation: spin 1s linear infinite;
+.enhancing {
+	position: relative;
+	background: transparent !important;
+	opacity: 1 !important;
+}
+
+.enhancing::after {
+	content: "";
+	position: absolute;
+	inset: -2px;
+	border-radius: 8px;
+	background: linear-gradient(
+		45deg,
+		var(--vscode-button-background),
+		var(--vscode-textLink-foreground),
+		var(--vscode-symbolIcon-classForeground),
+		var(--vscode-button-background)
+	);
+	background-size: 400% 400%;
+	opacity: 0.08;
+	z-index: 0;
+	animation: border-flow 2s ease-in-out infinite;
 }
 
-@keyframes spin {
-	from {
-		transform: rotate(0deg);
+@keyframes border-flow {
+	0%,
+	100% {
+		background-position: 0% 50%;
+		opacity: 0.08;
 	}
-	to {
-		transform: rotate(360deg);
+	50% {
+		background-position: 100% 50%;
+		opacity: 0.12;
 	}
 }
 
+.disabled:not(.enhancing) {
+	opacity: 0.35;
+	cursor: not-allowed;
+	filter: grayscale(30%);
+}
+
+.disabled:not(.enhancing):hover {
+	background-color: transparent;
+}
+
 /* Desktop styles */
 @media (min-width: 1024px) {
 	.action-button {

webview-ui/src/components/chat/ChatTextArea/ChatTextArea.stories.tsx

@@ -19,7 +19,7 @@ const meta = {
 } satisfies Meta<typeof ChatTextArea>
 
 export default meta
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<typeof ChatTextArea>
 
 const onHeightChangeSpy = fn()
 

webview-ui/src/components/chat/ChatTextArea/ChatTextArea.tsx

@@ -65,7 +65,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			}
 			window.addEventListener("message", messageHandler)
 			return () => window.removeEventListener("message", messageHandler)
-		}, [setInputValue])
+		}, [setInputValue, setIsEnhancingPrompt])
 
 		return (
 			<ChatTextAreaLayout>
@@ -108,6 +108,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							setInputValue={setInputValue}
 							onSelectImages={onSelectImages}
 							onSend={onSend}
+							setIsEnhancingPrompt={setIsEnhancingPrompt}
 						/>
 					),
 				}}

webview-ui/src/components/chat/ChatTextArea/ChatTextAreaActions.tsx

@@ -10,6 +10,7 @@ interface ChatTextAreaActionsProps {
 	setInputValue: (value: string) => void
 	onSelectImages: () => void
 	onSend: () => void
+	setIsEnhancingPrompt: (value: boolean) => void
 }
 
 const ChatTextAreaActions: React.FC<ChatTextAreaActionsProps> = ({
@@ -20,11 +21,13 @@ const ChatTextAreaActions: React.FC<ChatTextAreaActionsProps> = ({
 	setInputValue,
 	onSelectImages,
 	onSend,
+	setIsEnhancingPrompt,
 }) => {
 	const handleEnhancePrompt = () => {
 		if (!textAreaDisabled) {
 			const trimmedInput = inputValue.trim()
 			if (trimmedInput) {
+				setIsEnhancingPrompt(true)
 				const message = {
 					type: "enhancePrompt" as const,
 					text: trimmedInput,
@@ -55,21 +58,14 @@ const ChatTextAreaActions: React.FC<ChatTextAreaActionsProps> = ({
 					gap: "2px",
 					flexShrink: 0,
 				}}>
-				{isEnhancingPrompt ? (
-					<span
-						className={`codicon codicon-loading codicon-modifier-spin ${styles["action-button"]}`}
-						style={{ fontSize: 16 }}
-					/>
-				) : (
-					<span
-						role="button"
-						aria-label="enhance prompt"
-						data-testid="enhance-prompt-button"
-						onClick={() => !textAreaDisabled && handleEnhancePrompt()}
-						style={{ fontSize: 16 }}
-						className={`codicon codicon-sparkle ${styles["action-button"]} ${textAreaDisabled ? styles.disabled : ""}`}
-					/>
-				)}
+				<span
+					role="button"
+					aria-label="enhance prompt"
+					data-testid="enhance-prompt-button"
+					onClick={() => !textAreaDisabled && !isEnhancingPrompt && handleEnhancePrompt()}
+					style={{ fontSize: 16 }}
+					className={`codicon codicon-sparkle ${styles["action-button"]} ${styles["codicon-sparkle"]} ${textAreaDisabled ? styles.disabled : ""} ${isEnhancingPrompt ? styles.enhancing : ""}`}
+				/>
 			</div>
 			<span
 				role="button"

webview-ui/src/components/chat/__tests__/ChatTextArea.test.tsx

@@ -115,8 +115,7 @@ describe("ChatTextArea", () => {
 			const enhanceButton = screen.getByRole("button", { name: /enhance prompt/i })
 			fireEvent.click(enhanceButton)
 
-			const loadingSpinner = screen.getByText("", { selector: ".codicon-loading" })
-			expect(loadingSpinner).toBeInTheDocument()
+			expect(enhanceButton).toHaveClass("enhancing")
 		})
 	})