Skip to content

fix: resolve send button flashing issue in webview #7320

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

Closed
wants to merge 3 commits into from
Closed

fix: resolve send button flashing issue in webview #7320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
57f00a6
fix: resolve send button flashing issue in webview
roomote Aug 22, 2025
f72f6c2
fix: improve error handling during vector store deletion
daniel-lxs Aug 25, 2025
5641c84
fix: update Qdrant vector store configuration with on_disk and hnsw p…
daniel-lxs Aug 25, 2025
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
42 changes: 30 additions & 12 deletions src/services/code-index/vector-store/__tests__/qdrant-client.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -532,6 +532,12 @@ describe("QdrantVectorStore", () => {
vectors: {
size: mockVectorSize,
distance: "Cosine", // Assuming 'Cosine' is the DISTANCE_METRIC
on_disk: true,
},
hnsw_config: {
m: 64,
ef_construct: 512,
on_disk: true,
},
})
expect(mockQdrantClientInstance.deleteCollection).not.toHaveBeenCalled()
Expand Down Expand Up @@ -610,6 +616,12 @@ describe("QdrantVectorStore", () => {
vectors: {
size: mockVectorSize, // Should use the new, correct vector size
distance: "Cosine",
on_disk: true,
},
hnsw_config: {
m: 64,
ef_construct: 512,
on_disk: true,
},
})

Expand Down Expand Up @@ -903,6 +915,12 @@ describe("QdrantVectorStore", () => {
vectors: {
size: newVectorSize, // Should create with new 768 dimensions
distance: "Cosine",
on_disk: true,
},
hnsw_config: {
m: 64,
ef_construct: 512,
on_disk: true,
},
})
expect(mockQdrantClientInstance.createPayloadIndex).toHaveBeenCalledTimes(5)
Expand Down Expand Up @@ -1248,7 +1266,7 @@ describe("QdrantVectorStore", () => {
score_threshold: DEFAULT_SEARCH_MIN_SCORE,
limit: DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand Down Expand Up @@ -1299,7 +1317,7 @@ describe("QdrantVectorStore", () => {
score_threshold: DEFAULT_SEARCH_MIN_SCORE,
limit: DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand All @@ -1325,7 +1343,7 @@ describe("QdrantVectorStore", () => {
score_threshold: customMinScore,
limit: DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand All @@ -1349,7 +1367,7 @@ describe("QdrantVectorStore", () => {
score_threshold: DEFAULT_SEARCH_MIN_SCORE,
limit: customMaxResults,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand Down Expand Up @@ -1496,7 +1514,7 @@ describe("QdrantVectorStore", () => {
score_threshold: DEFAULT_SEARCH_MIN_SCORE,
limit: DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand Down Expand Up @@ -1561,7 +1579,7 @@ describe("QdrantVectorStore", () => {
score_threshold: DEFAULT_SEARCH_MIN_SCORE,
limit: DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand All @@ -1587,7 +1605,7 @@ describe("QdrantVectorStore", () => {
score_threshold: DEFAULT_SEARCH_MIN_SCORE,
limit: DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand All @@ -1611,7 +1629,7 @@ describe("QdrantVectorStore", () => {
score_threshold: DEFAULT_SEARCH_MIN_SCORE,
limit: DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand All @@ -1635,7 +1653,7 @@ describe("QdrantVectorStore", () => {
score_threshold: DEFAULT_SEARCH_MIN_SCORE,
limit: DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand All @@ -1659,7 +1677,7 @@ describe("QdrantVectorStore", () => {
score_threshold: DEFAULT_SEARCH_MIN_SCORE,
limit: DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand Down Expand Up @@ -1690,7 +1708,7 @@ describe("QdrantVectorStore", () => {
score_threshold: DEFAULT_SEARCH_MIN_SCORE,
limit: DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand Down Expand Up @@ -1721,7 +1739,7 @@ describe("QdrantVectorStore", () => {
score_threshold: DEFAULT_SEARCH_MIN_SCORE,
limit: DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand Down
21 changes: 19 additions & 2 deletions src/services/code-index/vector-store/qdrant-client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,12 @@ export class QdrantVectorStore implements IVectorStore {
vectors: {
size: this.vectorSize,
distance: this.DISTANCE_METRIC,
on_disk: true,
},
hnsw_config: {
m: 64,
ef_construct: 512,
on_disk: true,
},
})
created = true
Expand Down Expand Up @@ -244,6 +250,12 @@ export class QdrantVectorStore implements IVectorStore {
vectors: {
size: this.vectorSize,
distance: this.DISTANCE_METRIC,
on_disk: true,
},
hnsw_config: {
m: 64,
ef_construct: 512,
on_disk: true,
},
})
console.log(`[QdrantVectorStore] Successfully created new collection ${this.collectionName}`)
Expand Down Expand Up @@ -404,7 +416,7 @@ export class QdrantVectorStore implements IVectorStore {
score_threshold: minScore ?? DEFAULT_SEARCH_MIN_SCORE,
limit: maxResults ?? DEFAULT_MAX_SEARCH_RESULTS,
params: {
hnsw_ef: 128,
hnsw_ef: 256,
exact: false,
},
with_payload: {
Expand Down Expand Up @@ -491,8 +503,13 @@ export class QdrantVectorStore implements IVectorStore {
// Include first few file paths for debugging (avoid logging too many)
samplePaths: filePaths.slice(0, 3),
})
console.error(
`[QdrantVectorStore] Deletion error occurred Stack trace:`,
error?.stack || "No stack trace available",
)

throw error
// Don't throw - allow the operation to continue despite deletion failure
// This prevents workflow disruption when vector store cleanup fails
}
}

Expand Down
19 changes: 13 additions & 6 deletions webview-ui/src/components/chat/ChatTextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -947,7 +947,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"text-vscode-foreground opacity-85",
Copy link
Contributor Author

@roomote roomote bot Aug 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I notice we're using here for the stop TTS and add images buttons, but other buttons in this file use (lines 1107, 1133). Is this intentional, or should we standardize on one opacity value for consistency across all icon buttons?

"transition-all duration-150",
// Fixed: Use specific transition to prevent flashing
"transition-opacity duration-100",
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
Expand All @@ -969,7 +970,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"text-vscode-foreground opacity-85",
"transition-all duration-150",
// Fixed: Use specific transition to prevent flashing
"transition-opacity duration-100",
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
Expand Down Expand Up @@ -1101,8 +1103,9 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
"relative inline-flex items-center justify-center",
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
"transition-all duration-150",
// Fixed: Consistent with send button fix to prevent flashing
"opacity-75 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
"transition-opacity duration-100",
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
Expand All @@ -1124,8 +1127,12 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
"relative inline-flex items-center justify-center",
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
"transition-all duration-150",
// Fixed: Removed opacity transitions that were causing flashing
// Changed from opacity-60 to opacity-75 for better visibility
// Removed transition-all to prevent unwanted animations
"opacity-75 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
// Use transition only for specific properties to avoid flashing
"transition-opacity duration-100",
Copy link
Contributor Author

@roomote roomote bot Aug 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good fix changing from to ! However, I'm wondering if we should also add to smooth out the background and border color changes on hover? This would maintain smooth transitions without causing the flashing issue.

"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
Expand Down
8 changes: 4 additions & 4 deletions webview-ui/src/components/chat/EditModeControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@ export const EditModeControls: React.FC<EditModeControlsProps> = ({
"relative inline-flex items-center justify-center",
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
"transition-all duration-150",
"opacity-75 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
Copy link
Contributor Author

@roomote roomote bot Aug 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These buttons use while some others use . Could we pick one standard opacity value for all icon buttons to maintain visual consistency?

"transition-opacity duration-100",
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
Expand All @@ -97,8 +97,8 @@ export const EditModeControls: React.FC<EditModeControlsProps> = ({
"relative inline-flex items-center justify-center",
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
"transition-all duration-150",
"opacity-75 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
"transition-opacity duration-100",
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
Expand Down
2 changes: 1 addition & 1 deletion webview-ui/src/components/chat/IconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const IconButton: React.FC<IconButtonProps> = ({
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"text-vscode-foreground opacity-85",
Copy link
Contributor Author

@roomote roomote bot Aug 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component uses as the base opacity. Since this is the reusable icon button component, whatever opacity we choose here should probably be the standard for all icon buttons. Consider aligning all button opacities with this value.

"transition-all duration-150",
"transition-opacity duration-100",
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
Expand Down
2 changes: 1 addition & 1 deletion webview-ui/src/components/chat/IndexingStatusBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export const IndexingStatusBadge: React.FC<IndexingStatusBadgeProps> = ({ classN
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"opacity-85 text-vscode-foreground",
"transition-all duration-150",
"transition-opacity duration-100",
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
Expand Down
Loading