Skip to content

feat: embed chat ui in the task sidebar #18216

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.

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
merged 3 commits into from
Jun 3, 2025
Merged

feat: embed chat ui in the task sidebar #18216

merged 3 commits into from
Jun 3, 2025

Conversation

BrunoQuaresma
Copy link
Collaborator

Demo:

Screenshot 2025-06-03 at 14 36 25
  • Extract components to be reused and easier to reasoning about
  • When having cloude-code-web, embed the chat in the sidebar
  • The sidebar will be wider when having the chat to better fit that

Does not include:

  • Sidebar width drag and drop control. The width is static but would be nice to have a control to customize it.

@BrunoQuaresma BrunoQuaresma self-assigned this Jun 3, 2025
Copy link
Member

@code-asher code-asher left a comment

Choose a reason for hiding this comment

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

I only looked it over and have not run it, but it looks good to me. It was hard for me to tell which parts moved and which parts changed when they are in one commit, so I may have reviewed some of the moved code, you can ignore those comments if you like. 😅

<main className="flex-1 flex flex-col">
<div className="border-0 border-b border-border border-solid w-full p-1 flex gap-2">
{embeddedApps
.filter((app) => !app.external)
Copy link
Member

Choose a reason for hiding this comment

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

embeddedApps is already filtered so we could remove this.

Comment on lines 70 to 72
if (app.external) {
return;
}
Copy link
Member

Choose a reason for hiding this comment

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

app.external would always be false since embeddedApps is filtered.

</DropdownMenuTrigger>
<DropdownMenuContent>
{externalApps
.filter((app) => app.external)
Copy link
Member

Choose a reason for hiding this comment

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

externalApps is already filtered so we could remove this.

});

return (
<iframe
Copy link
Member

Choose a reason for hiding this comment

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

Is it possible we might want to eventually use a static reference for the iframe? Wondering if there might be cases where the iframe is recreated and the user loses their position in the iframe, since React seems to re-render so much.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Right now it is working as expected but we definitely can improve it if that is the case.

Comment on lines +126 to +129
.sort(
(a, b) =>
new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
);
Copy link
Member

Choose a reason for hiding this comment

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

Formatters are wild sometimes lol

Copy link
Member

@kylecarbs kylecarbs left a comment

Choose a reason for hiding this comment

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

Since this is all contained in the task page, just stamping this.

@BrunoQuaresma BrunoQuaresma merged commit 13449b9 into main Jun 3, 2025
31 of 33 checks passed
@BrunoQuaresma BrunoQuaresma deleted the bq/embed-chat branch June 3, 2025 20:01
@github-actions github-actions bot locked and limited conversation to collaborators Jun 3, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants