Skip to content
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

Jump to bottom

feat(editor): Canvas chat UI & UX improvements #11924

Merged
merged 15 commits into from
Nov 29, 2024
Merged

feat(editor): Canvas chat UI & UX improvements #11924

merged 15 commits into from
Nov 29, 2024

Conversation

OlegIvaniv
Copy link
Contributor

@OlegIvaniv OlegIvaniv commented Nov 27, 2024 •
edited
Loading

Summary

This PR introduces several improvements to the chat interface and workflow execution state handling

Changes

Chat UI Enhancements

  • Adjusted font sizes in the chat to better match the visual hierarchy
  • Reversed the color scheme of the chat button:
    • Now displays as filled-in red when closed
    • Changes to secondary color when open
  • Updated chat button text to "Hide chat" when the panel is open
  • Added a close button (x) to the right side of the chat panel, visible when the logs panel is not
  • Improved scroll behavior to automatically scroll to the bottom of the chat panel when new messages arrive
  • Fix allowedFilesMimeTypes property

Visual Improvements

  • Softened the background color of disabled node parameters

Workflow Execution and Loading State

  • Fixed the loading state to properly tie into the global workflow execution state
  • Enhanced chat logs to stream individual executions rather than waiting for the entire workflow to finish

Related Linear tickets, Github issues, and Community forum posts

Chat_wiki_stream.mov

Review / Merge checklist

  • PR title and summary are descriptive. (conventions)
  • Docs updated or follow-up ticket created.
  • Tests included.
  • PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

@OlegIvaniv
Improve chat UI and functionality
a247832 
• Enhance chat input and layout
• Add left panel slot to chat input
• Update chat button labels and styles
• Adjust font sizes and spacings
• Improve message history navigation
@OlegIvaniv
Refactor chat workflow execution loading state management
7a5a02f 
• Implement createExecutionPromise function
• Remove waitForExecution polling interval, add processResult
• Update isLoading state management
• Clean up unused code and imports
@OlegIvaniv
Add close button to ChatMessagesPanel and improve header styling
5fea365 
• Add close button to ChatMessagesPanel
• Implement showCloseButton prop
• Adjust header button styling
• Emit close event from ChatMessagesPanel
@OlegIvaniv
Merge branch 'master' into ai-474-chat-panel-improvements
2d0a036
@OlegIvaniv
Improve MD lists rendering and fix infinite loading on error
346aacd
@OlegIvaniv
Remove console.log
8e92370
@OlegIvaniv
Improve chat UI and node view styling
58973f8 
- Enhance chat title and session display
- Update disabled input background color
- AI run content block styling
- Adjust chat button appearance in node view
@OlegIvaniv
Enable AI logs streaming
8c9a7f9
@n8n-assistant n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Nov 27, 2024
@OlegIvaniv OlegIvaniv marked this pull request as ready for review November 28, 2024 07:12
@codecov Codecov
Copy link

codecov bot commented Nov 28, 2024 •
edited
Loading

Codecov Report

Attention: Patch coverage is 86.88525% with 16 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
...onents/CanvasChat/components/ChatMessagesPanel.vue 78.78% 7 Missing ⚠️
...ponents/CanvasChat/composables/useChatMessaging.ts 80.00% 5 Missing ⚠️
...editor-ui/src/components/CanvasChat/CanvasChat.vue 94.11% 3 Missing ⚠️
packages/@n8n/chat/src/components/Input.vue 83.33% 0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

@OlegIvaniv OlegIvaniv mentioned this pull request Nov 29, 2024
Closed
MiloradFilipovic
MiloradFilipovic previously approved these changes Nov 29, 2024
View reviewed changes
Copy link
Contributor

@MiloradFilipovic MiloradFilipovic left a comment

Choose a reason for hiding this comment

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

Nice! I left one really small nit in the comments and have two more visual things to note:

  1. Is the chat button meant to be transparent when chat is open? It looks confusing to me
    image
  2. Execution status notice that appears on chat hover seems out of place to me:
    execution_notice

packages/@n8n/chat/src/css/markdown.scss Show resolved Hide resolved
packages/editor-ui/src/components/CanvasChat/CanvasChat.vue Show resolved Hide resolved
@MiloradFilipovic
Copy link
Contributor

@OlegIvaniv unrelated to this PR: How hard would it be to stream back these steps when agent is used with different trigger (webhook, telegram, ...)?

@OlegIvaniv
Copy link
Contributor Author

OlegIvaniv commented Nov 29, 2024 •
edited
Loading

Nice! I left one really small nit in the comments and have two more visual things to note:

  1. Is the chat button meant to be transparent when chat is open? It looks confusing to me
    image
  2. Execution status notice that appears on chat hover seems out of place to me:
    execution_notice

Thanks! Both should be addressed. Can you please re-review?

@OlegIvaniv
Copy link
Contributor Author

@OlegIvaniv unrelated to this PR: How hard would it be to stream back these steps when agent is used with different trigger (webhook, telegram, ...)?

Here we're relying on the websocket push events that we get in the editor like "afterNodeExecuted" so if we'd like to stream those, it should be doable by reusing some of the same logic

MiloradFilipovic
MiloradFilipovic approved these changes Nov 29, 2024
View reviewed changes
Copy link
Contributor

@MiloradFilipovic MiloradFilipovic left a comment

Choose a reason for hiding this comment

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

Thanks for addressing! I would love to see just a bit more of left padding for that notice icon so it's not so flush with text edge but feel free to ignore 🙌🏻

@cypress Cypress
Copy link

cypress bot commented Nov 29, 2024

n8n    Run #8152

Run Properties:  status check passed Passed #8152  •  git commit 1174d28f26: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 OlegIvaniv 🗃️ e2e/*
Project n8n
Branch Review ai-474-chat-panel-improvements
Run status status check passed Passed #8152
Run duration 04m 31s
Commit git commit 1174d28f26: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 OlegIvaniv 🗃️ e2e/*
Committer Oleg Ivaniv
View all properties for this run ↗︎
Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 1
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 478
View all changes introduced in this branch ↗︎

@github-actions GitHub Actions
Copy link
Contributor

✅ All Cypress E2E specs passed

@OlegIvaniv OlegIvaniv merged commit 1e25774 into master Nov 29, 2024
35 checks passed
@OlegIvaniv OlegIvaniv deleted the ai-474-chat-panel-improvements branch November 29, 2024 10:24
@github-actions github-actions bot mentioned this pull request Dec 4, 2024
Merged
@janober
Copy link
Member

janober commented Dec 4, 2024

Got released with [email protected]

riascho pushed a commit that referenced this pull request Jan 14, 2025
@OlegIvaniv @riascho
feat(editor): Canvas chat UI & UX improvements (#11924)
1ab105d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MiloradFilipovic MiloradFilipovic MiloradFilipovic approved these changes

Assignees
No one assigned
Labels
n8n team Authored by the n8n team Released ui Enhancement in /editor-ui or /design-system
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@OlegIvaniv @MiloradFilipovic @janober