Wave AI UI Remake #2103
Wave AI UI Remake #2103
Conversation
- Overhaul chat interface with improved message containers and styling - Enhance responsive layout for better space utilization - Redesign typing indicator with new animation and visual appearance - Add message actions for copy, edit, and repeat functionality
- Implement sending code to terminal
|
|
WalkthroughThe pull request introduces several updates across the frontend interface components. In the markdown module, the code block actions now use opacity transitions instead of visibility toggling, with adjustments in positioning, spacing, and styling. Functionality was added to allow sending code block text to a terminal through new methods and an interactive icon button. In the typing indicator, both the SCSS and TSX files were revised to introduce new classes and a more structured component interface, including the support for inline styling and updated dot animations. The chat interface saw significant layout changes in its style sheet by reorganizing message and input containers, renaming existing classes, and adding new definitions for model selection and button actions. The underlying model was simplified with the removal of older state atoms, while editing options in the chat component were introduced to handle message modifications and clipboard operations. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
frontend/app/element/markdown.tsx (1)
97-144: Implemented terminal text sending with context menuThe handleSendToTerminal function effectively:
- Collects text from code blocks
- Finds existing terminal blocks
- Creates a well-structured context menu
- Includes option to create a new terminal
The implementation follows good patterns for context menu creation, but the function is quite lengthy and could be refactored into smaller, more focused functions.
Consider breaking this large function into smaller helper functions like
getAvailableTerminals()andbuildTerminalMenu()for better maintainability.frontend/app/view/waveai/waveai.tsx (1)
358-584: Smooth and well-structured editing logic.
Your new local states (editing,editText,copied) and respective handlers (focus, copy to clipboard, and text area resizing) are implemented cleanly. The approach of re-prompting after editing (lines 423-440) looks intentional. However, note that each re-submit can lead to a new backend call, potentially consuming additional tokens or resources.If the cost or resource usage becomes an issue, consider an alternative strategy, such as partial in-memory edits without triggering a re-prompt until the user explicitly requests it.
frontend/app/view/waveai/waveai.scss (1)
47-60: Refined chat message padding and spacing.
The added padding around messages (e.g.,padding: 14px 16px 8px) should enhance readability. Be mindful of potential overlap if new action buttons or other elements are added in the future.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
frontend/app/element/markdown.scss(1 hunks)frontend/app/element/markdown.tsx(4 hunks)frontend/app/element/typingindicator.scss(1 hunks)frontend/app/element/typingindicator.tsx(1 hunks)frontend/app/view/waveai/waveai.scss(3 hunks)frontend/app/view/waveai/waveai.tsx(9 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
frontend/app/element/markdown.tsx (4)
frontend/app/store/global.ts (3)
getAllBlockComponentModels(771-771)globalStore(783-783)atoms(762-762)frontend/app/store/wshclientapi.ts (1)
RpcApi(492-492)frontend/util/util.ts (1)
stringToBase64(401-401)frontend/app/element/iconbutton.tsx (1)
IconButton(12-34)
frontend/app/view/waveai/waveai.tsx (6)
frontend/app/view/webview/webview.tsx (1)
handleKeyDown(310-321)frontend/util/util.ts (1)
fireAndForget(388-388)frontend/app/store/services.ts (2)
BlockService(23-23)ObjectService(88-88)frontend/app/element/typingindicator.tsx (1)
TypingIndicator(12-22)frontend/app/store/global.ts (1)
getApi(772-772)pkg/waveobj/wtype.go (1)
BlockDef(241-244)
🔇 Additional comments (23)
frontend/app/element/typingindicator.tsx (1)
4-4: Component refactored with improved TypeScript typingThe TypingIndicator component has been properly refactored to use modern React patterns and TypeScript features:
- Using a proper exported interface instead of a type
- Adding style prop support for inline styling customization
- Using React.FC typing for better type checking
- Improved HTML structure with semantic class names that match the CSS
These changes enhance component reusability and maintainability.
Also applies to: 7-10, 12-19
frontend/app/element/markdown.scss (3)
129-139: Improved code block actions with modern UI effectsThe codeblock-actions styling has been enhanced with:
- Better positioning with 5px offsets from edges
- Smooth opacity transitions instead of abrupt visibility changes
- Semi-transparent background with blur effect
- Consistent spacing with gap property
These changes create a more polished and modern UI component.
140-148: Added hover effects for better interaction feedbackWell-implemented styling for icon buttons with appropriate sizing and hover state feedback. The 14px font size and 3px padding create a compact but usable button, while the hover effect provides clear user feedback.
152-153: Proper transition handling on hoverThe hover state change from opacity:0 to opacity:1 pairs well with the transition definition, creating a smooth fade-in effect.
frontend/app/element/markdown.tsx (3)
12-15: Added necessary imports for new terminal functionalityThe new imports support the added "Send to Terminal" feature, correctly importing the required dependencies for context menus, RPC API communication, and terminal block management.
Also applies to: 27-27
146-153: Well-implemented terminal text sending functionThe sendTextToTerminal function correctly:
- Appends a newline to simulate Enter key press
- Base64 encodes the text for proper transmission
- Uses the appropriate RPC API call to send the input
This implementation ensures reliable text transfer to terminal blocks.
169-176: Added user-friendly terminal button to code blocksGreat addition of a terminal icon button that allows users to send code block text to terminal instances. The button uses consistent styling with other action buttons and provides a helpful tooltip.
frontend/app/element/typingindicator.scss (4)
4-9: Redesigned typing indicator with flexible layoutThe new typing indicator uses an inline-flex layout with appropriate spacing, making it more flexible for different UI contexts while maintaining consistent alignment.
11-19: Added stylish bubble container for typing indicatorThe bubble design with semi-transparent background derived from the accent color creates a more polished and visually appealing container for the typing dots. The rounded corners and padding provide good visual separation.
21-42: Improved animation timing for typing dotsThe dots now have consistent size and styling with a staggered animation effect that creates a natural typing rhythm. Using the accent color with opacity ensures the indicator matches the overall UI theme.
45-54: Enhanced animation with vertical movementThe typing-animation keyframes create a smooth up-and-down bouncing effect that's more visually interesting than the previous animation. The combination of position change and opacity adjustment creates a natural-looking typing indicator.
frontend/app/view/waveai/waveai.tsx (4)
85-99: Consider confirming usage or removingnoPadding.
You introduced thenoPaddingatom at line 85 and set it totrueat line 99, but there doesn't appear to be a direct usage within the file. It may be a placeholder for future styling. If it's unused, consider removing it or add references to ensure it's functional.Could you verify whether other files in the project reference
noPadding? If not, it might be safe to remove this property.
700-730: NewonButtonPressandlockedprops.
The extension ofChatInputPropsand integration of these props offers clearer separation of concerns for the chat button state. This approach is straightforward and makes the button logic more transparent.
760-794: Model menu handling and addition logic.
Your code for toggling the preset menu, selecting a model, and adding a new preset is cohesive. The external click detection in lines 719-730 is a common pattern and appears correct.
811-859: Responsive input container and usage oflocked.
The updated markup in theChatInputcomponent and how it's placed in the finalWaveAilayout look solid. The submit button changing icons based onlockedneatly communicates the ongoing or stoppable operation.Also applies to: 1030-1040
frontend/app/view/waveai/waveai.scss (8)
29-46: Improved container layout and visual separators.
You switched to a column layout (flex-direction: column) and added a bottom border to separate messages. This provides a clearer distinction between messages. Good move.
75-79: Assistant message code blocks styling.
The background color and border radius around<pre>improves the distinction for code snippets. The alpha-based color usage is consistent with the rest of your theme.Also applies to: 82-105
108-109: User and edit message classes.
The.chat-msg-userand.chat-msg-editclasses correctly apply different styling needs. Theedit-inputfocusing on transparent background with no border is a neat approach that feels minimalistic.Also applies to: 111-126
145-147: Enhanced typing indicator spacing.
Increased padding around the typing indicator (lines 145-147) improves visual alignment. Good tiny UX detail.
149-191: Action buttons layout with.msg-actions.
The flex-based approach for right-alignment of the action buttons is tidy, and the hover effect that changes tovar(--accent-color)is a thoughtful UX touch.
197-206:.waveai-input-containerrefactor.
Renaming from.waveai-controlsand reorganizing into a column layout clarifies the architecture. The slightly translucent background and border signals a distinct interactive area, aligning well with the chat theme.Also applies to: 209-227
229-300: Preset selector UI enhancements.
The new.preset-selectorblock with a dropdown (.model-menu) is concise, ensuring intuitive user discovery of model options. The alpha-based hover effect on.model-menu-itemmaintains stylistic consistency.
302-338: Streamlined submit button styling.
Switching to a circular design with color-coded feedback for normal vs. stop states is modern and visually consistent. The new transitions in lines 313 and 322 ensure a smooth hover experience.
| const tabId = globalStore.get(atoms.staticTabId); | ||
| const oref = await RpcApi.CreateBlockCommand(TabRpcClient, { | ||
| tabid: tabId, | ||
| blockdef: termBlockDef, | ||
| }); | ||
|
|
||
| const blockId = oref.split(":")[1]; | ||
| setTimeout(() => sendTextToTerminal(blockId, textToSend), 500); | ||
| } catch (error) { | ||
| console.error("Failed to create new terminal block:", error); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fixed potential issue with hardcoded timeout
The 500ms hardcoded timeout when creating a new terminal may not always be sufficient for terminal initialization, which could lead to missed text input.
Consider implementing a callback or event-based approach instead of a timeout to ensure the terminal is ready before sending text:
- setTimeout(() => sendTextToTerminal(blockId, textToSend), 500);
+ // Use an event listener or callback to detect when terminal is ready
+ const checkTerminalReady = () => {
+ const terminal = getAllBlockComponentModels().find(
+ bcm => bcm?.viewModel?.blockId === blockId && bcm?.viewModel?.viewType === "term"
+ );
+ if (terminal && terminal.isReady) {
+ sendTextToTerminal(blockId, textToSend);
+ } else {
+ setTimeout(checkTerminalReady, 100);
+ }
+ };
+ checkTerminalReady();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const tabId = globalStore.get(atoms.staticTabId); | |
| const oref = await RpcApi.CreateBlockCommand(TabRpcClient, { | |
| tabid: tabId, | |
| blockdef: termBlockDef, | |
| }); | |
| const blockId = oref.split(":")[1]; | |
| setTimeout(() => sendTextToTerminal(blockId, textToSend), 500); | |
| } catch (error) { | |
| console.error("Failed to create new terminal block:", error); | |
| } | |
| const tabId = globalStore.get(atoms.staticTabId); | |
| const oref = await RpcApi.CreateBlockCommand(TabRpcClient, { | |
| tabid: tabId, | |
| blockdef: termBlockDef, | |
| }); | |
| const blockId = oref.split(":")[1]; | |
| // Use an event listener or callback to detect when terminal is ready | |
| const checkTerminalReady = () => { | |
| const terminal = getAllBlockComponentModels().find( | |
| bcm => bcm?.viewModel?.blockId === blockId && bcm?.viewModel?.viewType === "term" | |
| ); | |
| if (terminal && terminal.isReady) { | |
| sendTextToTerminal(blockId, textToSend); | |
| } else { | |
| setTimeout(checkTerminalReady, 100); | |
| } | |
| }; | |
| checkTerminalReady(); | |
| } catch (error) { | |
| console.error("Failed to create new terminal block:", error); | |
| } |
#2104