Skip to content

remove dup CSS, fix enhancing animation #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chadgauth merged 1 commit into from
Feb 24, 2025
Merged

remove dup CSS, fix enhancing animation #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 0 additions & 47 deletions webview-ui/.storybook/preview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
59 changes: 45 additions & 14 deletions webview-ui/src/components/chat/ChatTextArea/ChatTextArea.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion webview-ui/src/components/chat/ChatTextArea/ChatTextArea.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand Down
3 changes: 2 additions & 1 deletion webview-ui/src/components/chat/ChatTextArea/ChatTextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
}
window.addEventListener("message", messageHandler)
return () => window.removeEventListener("message", messageHandler)
}, [setInputValue])
}, [setInputValue, setIsEnhancingPrompt])

return (
<ChatTextAreaLayout>
Expand Down Expand Up @@ -108,6 +108,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
setInputValue={setInputValue}
onSelectImages={onSelectImages}
onSend={onSend}
setIsEnhancingPrompt={setIsEnhancingPrompt}
/>
),
}}
Expand Down
26 changes: 11 additions & 15 deletions webview-ui/src/components/chat/ChatTextArea/ChatTextAreaActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ interface ChatTextAreaActionsProps {
setInputValue: (value: string) => void
onSelectImages: () => void
onSend: () => void
setIsEnhancingPrompt: (value: boolean) => void
}

const ChatTextAreaActions: React.FC<ChatTextAreaActionsProps> = ({
Expand All @@ -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,
Expand Down Expand Up @@ -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"
Expand Down
3 changes: 1 addition & 2 deletions webview-ui/src/components/chat/__tests__/ChatTextArea.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")
})
})

Expand Down