fix: tidy up Agentic Chat and Context accordions and behaviour #6735

taiyab · 2025-01-22T08:41:40Z

This PR merges the multiple accordions we currently have into one UX.

Before

CleanShot.2025-01-27.at.13.32.08.mp4

After

CleanShot.2025-01-27.at.13.34.40.mp4

Agentic Chat Selected	Agentic Chat Not Selected

Test plan

This was tested locally, manually, in the following ways (where possible):

Accordion Behavior Tests

Verify single accordion expands/collapses correctly
Confirm only one accordion section can be open at a time
Test that accordion state persists between chat sessions
Validate that accordion transitions are smooth without visual glitches

Context Panel Tests

Verify context information displays correctly when expanded
Check that context updates properly when switching between different files/references
Confirm context panel maintains scroll position when toggling
Test context panel resize behavior

Agentic Chat Integration

Verify chat interface remains functional with new accordion structure
Test chat history visibility when expanding/collapsing accordions
Confirm chat input remains accessible regardless of accordion state
Validate that chat notifications/indicators work with new layout

Cross-browser Testing

Test across multiple themes in VSCode and Jetbrains
Verify responsive behavior on different window sizes

Edge Cases

Test with very long context content
Verify behavior with multiple rapid accordion toggles
Check keyboard navigation and accessibility
Test with empty context/chat states

web/package.json

vscode/webviews/components/FileLink.module.css

vscode/webviews/chat/cells/messageCell/assistant/SearchResults.tsx

vscode/webviews/chat/cells/agenticCell/AgenticContextCell.tsx

camdencheek · 2025-01-27T19:47:51Z

vscode/webviews/chat/cells/contextCell/ContextList.tsx

+            <div className="tw-flex tw-flex-col tw-gap-2 tw-my-2 tw-border-t tw-border-t-muted tw-pt-4">
+                <div className="tw-text-sm tw-font-medium tw-text-foreground tw-flex tw-items-center tw-gap-3">
+                    <DatabaseIcon size={14} strokeWidth={1.75} className="tw-text-muted-foreground" />
+                    Context used
+                </div>
+                <ul className="tw-list-none tw-flex tw-flex-col tw-gap-1">
+                    {contextItems?.map((item, i) => (


This looks fully duplicated a few lines below. Can we clean that up?

This doesn't look resolved to me. I think this is really worth cleaning up since these can easily get out of sync if someone goes to make a change and only tests agentic or non-agentic chat.

vscode/webviews/components/codeSnippet/components/CodeExcerpt.module.css

taiyab · 2025-02-03T10:27:49Z

@abeatrix Can I get a review?

camdencheek · 2025-02-03T18:05:33Z

vscode/webviews/chat/cells/messageCell/assistant/SearchResults.tsx

+                                    const { boostedResults, nonBoostedResults } = useMemo(() => {
+                                        if (!boostedRepo) {
+                                            return {
+                                                boostedResults: resultsToShow,
+                                                nonBoostedResults: [],


Can we move this logic out of the templating language? It's quite surprising to me to see variable definitions + functions inside the template language, and I think it's actually a bug to call react hooks (like useMemo) conditionally.

camdencheek · 2025-02-03T18:13:11Z

I'm seeing some inconsistent rendering locally that might be related to these changes. We seemingly sometimes fail to render a separator line.

camdencheek · 2025-02-03T18:31:15Z

Can we make it a bit more obvious that the "context used" section is a sub-section? My initial reaction when testing this locally was to try to collapse the context used only to find it not collapsible and struggle to find that I need to click "Agentic chat" to collapse the (now very large) header

camdencheek · 2025-02-03T18:53:43Z

This looks really nice! The animations are ✨

I'll leave it to @abeatrix to hit approve since she's more familiar with the agentic chat domain

abeatrix

Started the build locally and Agentic Chat seems to work as expected, really like the animation on toggle:

The font color for the failed command makes it a bit hard to read though:

Do we need to update the storybook for the updated components? Specifically for AgenticContextCell as the ContextList now lives in it.

Also it's a bit hard to test the PR because it involves changes beyond the Agentic Chat
and context according (e.g. RepositorySelector, SearchResults, Welcome Footer etc). Is it possible to split them into separated PRs so that it'd be easier to test and review? 🙇‍♀️

vscode/src/chat/agentic/DeepCody.ts

abeatrix · 2025-02-03T19:36:54Z

vscode/src/chat/agentic/DeepCody.ts

+            steps => {
+                // Only pass steps that should appear in the accordion
+                const accordionSteps = steps.filter(step => step.type !== 'confirmation')
+                statusUpdateCallback(accordionSteps)
+            },


Suggested change

steps => {

// Only pass steps that should appear in the accordion

const accordionSteps = steps.filter(step => step.type !== 'confirmation')

statusUpdateCallback(accordionSteps)

},

steps => statusUpdateCallback(steps),

Do we need this? If yes, it might be better if we do the filtering in ProcessManager instead of the top-level?

vscode/webviews/chat/Transcript.tsx

abeatrix · 2025-02-03T22:01:34Z

vscode/webviews/chat/Transcript.tsx

-                    isContextLoading={isContextLoading}
-                    processes={humanMessage?.processes ?? undefined}
-                />
+            {humanMessage.agent && (


Suggested change

{humanMessage.agent && (

{!isSearchIntent && humanMessage.agent && (

I think @thenamankumar added the !isSearchIntent condition because of a feedback where Agentic Context is showing when we are displaying the Search result and the omnibox team doesn't want that

The single component is also used to show you're in a search (and be able to swap back and forth).

abeatrix · 2025-02-03T22:05:48Z

vscode/webviews/chat/Transcript.tsx

+                    {!isSearchIntent &&
+                        humanMessage.agent &&
+                        isContextLoading &&
+                        assistantMessage?.isLoading && <ApprovalCell vscodeAPI={vscodeAPI} />}


Suggested change

{!isSearchIntent &&

humanMessage.agent &&

isContextLoading &&

assistantMessage?.isLoading && <ApprovalCell vscodeAPI={vscodeAPI} />}

{isContextLoading &&

assistantMessage?.isLoading && <ApprovalCell vscodeAPI={vscodeAPI} />}

Since we are nesting this component and we check for the humanMessage.agent at the top level already, we won't need this I assume?

However, we originally set the ApprovalCell component as an independent component instead of tying it to the AgenticContext to make the ApprovalCell reusable by other agents / non-agent processes. Is there any reason we want to tie it to Agentic Context?

Co-authored-by: Beatrix <[email protected]>

taiyab changed the title ~~Tr/search results vu 3~~ fix: tidy up Agentic Chat and Context accordions and behaviour Jan 27, 2025

taiyab force-pushed the tr/search-results-vu-3 branch from 73f72a8 to 4903df6 Compare January 27, 2025 12:20

taiyab requested review from camdencheek, rrhyne and abeatrix January 27, 2025 13:27

taiyab marked this pull request as ready for review January 27, 2025 16:33

camdencheek reviewed Jan 27, 2025

View reviewed changes

taiyab added 23 commits February 3, 2025 10:14

CSS and overall fixes to search vie

5b988f0

CSS tweaks and badge added to other repo results

9940306

More CSS tweaking

1668a11

CSS tweaks

532d097

Merge conflicts resolved

051070b

Merge conflict

41e7b23

Merge conflict

eb5a2aa

Accept change

514feb3

CSS tweaks

d43f5dc

First step in combining SearchIntent and AgenticContextCell

6de73a9

Merged agentic chat and intent detection

29aad79

Styling added to agent processes

3b3ac0a

CSS tweaks

7b3f325

Agent accordion fixes

910c5b2

Modification made to Agentic chat uI

5f5818c

More tweaks

2138ca3

updates to agentic chat UI

d867fb9

Merge conflict resolved

db2b82c

Context list added to Agentic Chat

610de20

More updates to agentic chat accordion

973591f

CSS tweaks

564cb70

Copy change

28f77c5

Accordion collapse fix

3cb1875

taiyab added 8 commits February 3, 2025 10:14

Stop no context message showing on search results

b955a18

minor changes

12d51e4

Resolved conflicts

29dc671

Merge conflicts resolved

010291c

Fix merge conflicts

8c7ce3d

Fixes

b176163

Fix merge conflicts

28e2f8e

Agentic chat accordion updated

ccbb8c0

taiyab force-pushed the tr/search-results-vu-3 branch from 9f57125 to ccbb8c0 Compare February 3, 2025 10:16

taiyab added 2 commits February 3, 2025 10:33

Fix Cody version

128eeba

Undo change

b883aff

taiyab requested a review from thenamankumar February 3, 2025 12:09

taiyab added 2 commits February 3, 2025 14:35

Refactor boosted and non-boosted results lists

f7f8f28

Refactor step styling

461b6e2

taiyab requested a review from camdencheek February 3, 2025 14:45

Fixes

4eb6759

camdencheek reviewed Feb 3, 2025

View reviewed changes

taiyab removed request for rrhyne and thenamankumar February 3, 2025 19:35

abeatrix reviewed Feb 4, 2025

View reviewed changes

taiyab and others added 3 commits February 4, 2025 16:18

Update vscode/src/chat/agentic/DeepCody.ts

6789882

Co-authored-by: Beatrix <[email protected]>

Update vscode/webviews/chat/Transcript.tsx

bb7b455

Co-authored-by: Beatrix <[email protected]>

Typo

5f2067d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: tidy up Agentic Chat and Context accordions and behaviour #6735

fix: tidy up Agentic Chat and Context accordions and behaviour #6735

taiyab commented Jan 22, 2025 •

edited

Loading

camdencheek Jan 27, 2025

camdencheek Feb 3, 2025 •

edited

Loading

taiyab commented Feb 3, 2025

camdencheek Feb 3, 2025 •

edited

Loading

camdencheek commented Feb 3, 2025

camdencheek commented Feb 3, 2025

camdencheek commented Feb 3, 2025 •

edited

Loading

abeatrix left a comment

abeatrix Feb 3, 2025

abeatrix Feb 3, 2025

taiyab Feb 4, 2025 •

edited

Loading

abeatrix Feb 3, 2025

	{humanMessage.agent && (
	{!isSearchIntent && humanMessage.agent && (

fix: tidy up Agentic Chat and Context accordions and behaviour #6735

Are you sure you want to change the base?

fix: tidy up Agentic Chat and Context accordions and behaviour #6735

Conversation

taiyab commented Jan 22, 2025 • edited Loading

Before

After

Test plan

Accordion Behavior Tests

Context Panel Tests

Agentic Chat Integration

Cross-browser Testing

Edge Cases

camdencheek Jan 27, 2025

Choose a reason for hiding this comment

camdencheek Feb 3, 2025 • edited Loading

Choose a reason for hiding this comment

taiyab commented Feb 3, 2025

camdencheek Feb 3, 2025 • edited Loading

Choose a reason for hiding this comment

camdencheek commented Feb 3, 2025

camdencheek commented Feb 3, 2025

camdencheek commented Feb 3, 2025 • edited Loading

abeatrix left a comment

Choose a reason for hiding this comment

abeatrix Feb 3, 2025

Choose a reason for hiding this comment

abeatrix Feb 3, 2025

Choose a reason for hiding this comment

taiyab Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

abeatrix Feb 3, 2025

Choose a reason for hiding this comment

taiyab commented Jan 22, 2025 •

edited

Loading

camdencheek Feb 3, 2025 •

edited

Loading

camdencheek Feb 3, 2025 •

edited

Loading

camdencheek commented Feb 3, 2025 •

edited

Loading

taiyab Feb 4, 2025 •

edited

Loading