Skip to content

Commit 80408bc

Browse files
chadgauthchadgauth
authored
Merge pull request #2 from chadgauth/fix/loading-enhancing
remove dup CSS, fix enhancing animation
2 parents 2ccbe26 + adbf283 commit 80408bc

6 files changed

Lines changed: 60 additions & 80 deletions

File tree

‎webview-ui/.storybook/preview.css‎

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -108,50 +108,3 @@ body {
108108
::-webkit-scrollbar-thumb:hover {
109109
background: #686868;
110110
}
111-
112-
/* Dark theme */
113-
.dark {
114-
color-scheme: dark;
115-
background-color: var(--vscode-editor-background);
116-
color: var(--vscode-editor-foreground);
117-
}
118-
119-
/* Light theme */
120-
.light {
121-
color-scheme: light;
122-
background-color: #ffffff;
123-
color: #000000;
124-
}
125-
126-
/* Global styles */
127-
body {
128-
margin: 0;
129-
padding: 0;
130-
font-family: var(--vscode-font-family);
131-
font-size: var(--vscode-font-size);
132-
line-height: 1.4;
133-
}
134-
135-
/* Mermaid diagram styles */
136-
.mermaid {
137-
background: var(--vscode-editor-background);
138-
}
139-
140-
/* VS Code scrollbar styles */
141-
::-webkit-scrollbar {
142-
width: 10px;
143-
height: 10px;
144-
}
145-
146-
::-webkit-scrollbar-track {
147-
background: transparent;
148-
}
149-
150-
::-webkit-scrollbar-thumb {
151-
background: #424242;
152-
border-radius: 5px;
153-
}
154-
155-
::-webkit-scrollbar-thumb:hover {
156-
background: #686868;
157-
}

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

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -55,30 +55,61 @@
5555
opacity: 1;
5656
}
5757

58-
.action-button.disabled {
59-
opacity: 0.35;
60-
cursor: not-allowed;
61-
filter: grayscale(30%);
58+
.codicon-sparkle {
59+
transition: all 0.3s ease;
60+
z-index: 1;
6261
}
6362

64-
.action-button.disabled:hover {
65-
background-color: transparent;
63+
.codicon-sparkle:hover {
64+
filter: brightness(1.2);
6665
}
6766

68-
/* Loading spinner styles */
69-
.action-button.codicon-loading {
70-
animation: spin 1s linear infinite;
67+
.enhancing {
68+
position: relative;
69+
background: transparent !important;
70+
opacity: 1 !important;
71+
}
72+
73+
.enhancing::after {
74+
content: "";
75+
position: absolute;
76+
inset: -2px;
77+
border-radius: 8px;
78+
background: linear-gradient(
79+
45deg,
80+
var(--vscode-button-background),
81+
var(--vscode-textLink-foreground),
82+
var(--vscode-symbolIcon-classForeground),
83+
var(--vscode-button-background)
84+
);
85+
background-size: 400% 400%;
86+
opacity: 0.08;
87+
z-index: 0;
88+
animation: border-flow 2s ease-in-out infinite;
7189
}
7290

73-
@keyframes spin {
74-
from {
75-
transform: rotate(0deg);
91+
@keyframes border-flow {
92+
0%,
93+
100% {
94+
background-position: 0% 50%;
95+
opacity: 0.08;
7696
}
77-
to {
78-
transform: rotate(360deg);
97+
50% {
98+
background-position: 100% 50%;
99+
opacity: 0.12;
79100
}
80101
}
81102

103+
.disabled:not(.enhancing) {
104+
opacity: 0.35;
105+
cursor: not-allowed;
106+
filter: grayscale(30%);
107+
}
108+
109+
.disabled:not(.enhancing):hover {
110+
background-color: transparent;
111+
}
112+
82113
/* Desktop styles */
83114
@media (min-width: 1024px) {
84115
.action-button {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const meta = {
1919
} satisfies Meta<typeof ChatTextArea>
2020

2121
export default meta
22-
type Story = StoryObj<typeof meta>
22+
type Story = StoryObj<typeof ChatTextArea>
2323

2424
const onHeightChangeSpy = fn()
2525

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
6565
}
6666
window.addEventListener("message", messageHandler)
6767
return () => window.removeEventListener("message", messageHandler)
68-
}, [setInputValue])
68+
}, [setInputValue, setIsEnhancingPrompt])
6969

7070
return (
7171
<ChatTextAreaLayout>
@@ -108,6 +108,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
108108
setInputValue={setInputValue}
109109
onSelectImages={onSelectImages}
110110
onSend={onSend}
111+
setIsEnhancingPrompt={setIsEnhancingPrompt}
111112
/>
112113
),
113114
}}

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

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ interface ChatTextAreaActionsProps {
1010
setInputValue: (value: string) => void
1111
onSelectImages: () => void
1212
onSend: () => void
13+
setIsEnhancingPrompt: (value: boolean) => void
1314
}
1415

1516
const ChatTextAreaActions: React.FC<ChatTextAreaActionsProps> = ({
@@ -20,11 +21,13 @@ const ChatTextAreaActions: React.FC<ChatTextAreaActionsProps> = ({
2021
setInputValue,
2122
onSelectImages,
2223
onSend,
24+
setIsEnhancingPrompt,
2325
}) => {
2426
const handleEnhancePrompt = () => {
2527
if (!textAreaDisabled) {
2628
const trimmedInput = inputValue.trim()
2729
if (trimmedInput) {
30+
setIsEnhancingPrompt(true)
2831
const message = {
2932
type: "enhancePrompt" as const,
3033
text: trimmedInput,
@@ -55,21 +58,14 @@ const ChatTextAreaActions: React.FC<ChatTextAreaActionsProps> = ({
5558
gap: "2px",
5659
flexShrink: 0,
5760
}}>
58-
{isEnhancingPrompt ? (
59-
<span
60-
className={`codicon codicon-loading codicon-modifier-spin ${styles["action-button"]}`}
61-
style={{ fontSize: 16 }}
62-
/>
63-
) : (
64-
<span
65-
role="button"
66-
aria-label="enhance prompt"
67-
data-testid="enhance-prompt-button"
68-
onClick={() => !textAreaDisabled && handleEnhancePrompt()}
69-
style={{ fontSize: 16 }}
70-
className={`codicon codicon-sparkle ${styles["action-button"]} ${textAreaDisabled ? styles.disabled : ""}`}
71-
/>
72-
)}
61+
<span
62+
role="button"
63+
aria-label="enhance prompt"
64+
data-testid="enhance-prompt-button"
65+
onClick={() => !textAreaDisabled && !isEnhancingPrompt && handleEnhancePrompt()}
66+
style={{ fontSize: 16 }}
67+
className={`codicon codicon-sparkle ${styles["action-button"]} ${styles["codicon-sparkle"]} ${textAreaDisabled ? styles.disabled : ""} ${isEnhancingPrompt ? styles.enhancing : ""}`}
68+
/>
7369
</div>
7470
<span
7571
role="button"

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,7 @@ describe("ChatTextArea", () => {
115115
const enhanceButton = screen.getByRole("button", { name: /enhance prompt/i })
116116
fireEvent.click(enhanceButton)
117117

118-
const loadingSpinner = screen.getByText("", { selector: ".codicon-loading" })
119-
expect(loadingSpinner).toBeInTheDocument()
118+
expect(enhanceButton).toHaveClass("enhancing")
120119
})
121120
})
122121

0 commit comments

Comments
 (0)