Feat/webui code genesis #847
Conversation
Summary of ChangesHello @vinci-grape, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request refines the web UI's agent interaction by improving how tool calls and results are communicated and displayed to the user. It also includes enhancements to configuration parsing, project visibility control, and the underlying package path resolution, aiming to fix bugs and provide a more robust and informative user experience. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Code Review
This pull request introduces significant enhancements to the Web UI, primarily adding support for tool calling in the chat interface and fixing several bugs related to agent state management. Key changes include updating the agent runner to parse tool call information from logs, adding new UI components to display tool interactions, and improving configuration handling. The PR also includes some refactoring and bug fixes, such as making project discovery configurable and improving how the agent's "waiting for input" state is communicated to the frontend. My review focuses on improving maintainability by reducing code duplication and suggesting structural improvements for better readability and flexibility.
| value_to_set = value | ||
| if final_key == 'temperature' and isinstance( | ||
| value_to_set, str): | ||
| try: | ||
| value_to_set = float(value_to_set) | ||
| except (ValueError, TypeError): | ||
| pass | ||
| elif final_key == 'max_tokens' and isinstance( | ||
| value_to_set, str): | ||
| try: | ||
| value_to_set = int(value_to_set) | ||
| except (ValueError, TypeError): | ||
| pass |
There was a problem hiding this comment.
The logic for converting temperature and max_tokens from strings is helpful. However, this if/elif structure can become cumbersome to maintain as more type-specific conversions are needed. Consider using a dictionary to map keys to their conversion functions for a more scalable and maintainable approach.
| value_to_set = value | |
| if final_key == 'temperature' and isinstance( | |
| value_to_set, str): | |
| try: | |
| value_to_set = float(value_to_set) | |
| except (ValueError, TypeError): | |
| pass | |
| elif final_key == 'max_tokens' and isinstance( | |
| value_to_set, str): | |
| try: | |
| value_to_set = int(value_to_set) | |
| except (ValueError, TypeError): | |
| pass | |
| # A mapping for specific type conversions | |
| CONVERSIONS = { | |
| 'temperature': float, | |
| 'max_tokens': int, | |
| } | |
| value_to_set = value | |
| if final_key in CONVERSIONS and isinstance(value_to_set, str): | |
| try: | |
| value_to_set = CONVERSIONS[final_key](value_to_set) | |
| except (ValueError, TypeError): | |
| pass |
| # Flush any pending chat response before waiting | ||
| if self._is_chat_mode: | ||
| self._flush_chat_response() | ||
| # Send waiting_input message to enable frontend input | ||
| if self.on_output and not self._waiting_input_sent: | ||
| self.on_output({ | ||
| 'type': 'waiting_input', | ||
| 'content': '', | ||
| 'role': 'system', | ||
| 'metadata': { | ||
| 'waiting': True | ||
| } | ||
| }) | ||
| self._waiting_input_sent = True |
There was a problem hiding this comment.
This block of logic for handling the "waiting for input" state is duplicated at lines 457-470. To improve maintainability and avoid future inconsistencies, consider extracting this logic into a private helper method, for example _handle_waiting_for_input().
| if self._is_chat_mode and self._tool_call_json_buffer.strip( | ||
| ) and self.on_output: | ||
| try: | ||
| import json |
There was a problem hiding this comment.
It's a best practice in Python to place all imports at the top of the file. This improves readability and helps avoid issues like circular dependencies. Please move import json to the top of webui/backend/agent_runner.py.
| """Discovers and manages projects from the ms-agent projects directory""" | ||
|
|
||
| # Whitelist of projects to show in the UI | ||
| VISIBLE_PROJECTS = {'code_genesis', 'singularity_cinema'} |
There was a problem hiding this comment.
Hardcoding the VISIBLE_PROJECTS whitelist in the source code can make it difficult to update without code changes and redeployment. For better flexibility and maintainability, consider moving this list to a configuration file (e.g., a JSON or YAML file).
| // Render tool call | ||
| if (isToolCall) { | ||
| const toolName = String(message.metadata?.tool_name || 'Unknown Tool'); | ||
| const args = message.metadata?.arguments || {}; | ||
| return ( | ||
| <motion.div | ||
| initial={{ opacity: 0, y: 10 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| exit={{ opacity: 0 }} | ||
| transition={{ duration: 0.2 }} | ||
| > | ||
| <Box | ||
| sx={{ | ||
| display: 'flex', | ||
| alignItems: 'flex-start', | ||
| justifyContent: 'flex-start', | ||
| mb: 1.5, | ||
| px: 2, | ||
| }} | ||
| > | ||
| <Paper | ||
| elevation={0} | ||
| sx={{ | ||
| maxWidth: '75%', | ||
| minWidth: 60, | ||
| px: 2, | ||
| py: 1.25, | ||
| borderRadius: '12px', | ||
| backgroundColor: alpha(theme.palette.info.main, 0.1), | ||
| border: `1px solid ${alpha(theme.palette.info.main, 0.3)}`, | ||
| }} | ||
| > | ||
| <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}> | ||
| <ToolIcon sx={{ fontSize: 16, color: theme.palette.info.main }} /> | ||
| <Typography variant="caption" sx={{ fontWeight: 600, color: theme.palette.info.main }}> | ||
| Calling Tool: {toolName.replace('---', ' / ')} | ||
| </Typography> | ||
| </Box> | ||
| {Object.keys(args).length > 0 && ( | ||
| <Typography | ||
| variant="caption" | ||
| sx={{ | ||
| display: 'block', | ||
| color: theme.palette.text.secondary, | ||
| fontFamily: 'monospace', | ||
| fontSize: '0.75rem', | ||
| whiteSpace: 'pre-wrap', | ||
| wordBreak: 'break-all', | ||
| }} | ||
| > | ||
| {JSON.stringify(args, null, 2)} | ||
| </Typography> | ||
| )} | ||
| </Paper> | ||
| </Box> | ||
| </motion.div> | ||
| ); | ||
| } | ||
|
|
||
| // Render tool result | ||
| if (isToolResult) { | ||
| const isToolError = message.metadata?.is_error; | ||
| return ( | ||
| <motion.div | ||
| initial={{ opacity: 0, y: 10 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| exit={{ opacity: 0 }} | ||
| transition={{ duration: 0.2 }} | ||
| > | ||
| <Box | ||
| sx={{ | ||
| display: 'flex', | ||
| alignItems: 'flex-start', | ||
| justifyContent: 'flex-start', | ||
| mb: 1.5, | ||
| px: 2, | ||
| }} | ||
| > | ||
| <Paper | ||
| elevation={0} | ||
| sx={{ | ||
| maxWidth: '75%', | ||
| minWidth: 60, | ||
| px: 2, | ||
| py: 1.25, | ||
| borderRadius: '12px', | ||
| backgroundColor: isToolError | ||
| ? alpha(theme.palette.error.main, 0.1) | ||
| : alpha(theme.palette.success.main, 0.1), | ||
| border: `1px solid ${alpha(isToolError ? theme.palette.error.main : theme.palette.success.main, 0.3)}`, | ||
| }} | ||
| > | ||
| <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}> | ||
| {isToolError ? ( | ||
| <ErrorIcon sx={{ fontSize: 16, color: theme.palette.error.main }} /> | ||
| ) : ( | ||
| <SuccessIcon sx={{ fontSize: 16, color: theme.palette.success.main }} /> | ||
| )} | ||
| <Typography | ||
| variant="caption" | ||
| sx={{ | ||
| fontWeight: 600, | ||
| color: isToolError ? theme.palette.error.main : theme.palette.success.main, | ||
| }} | ||
| > | ||
| {isToolError ? 'Tool Error' : 'Tool Result'} | ||
| </Typography> | ||
| </Box> | ||
| <Typography | ||
| variant="caption" | ||
| sx={{ | ||
| display: 'block', | ||
| color: theme.palette.text.secondary, | ||
| whiteSpace: 'pre-wrap', | ||
| wordBreak: 'break-word', | ||
| }} | ||
| > | ||
| {message.content} | ||
| </Typography> | ||
| </Paper> | ||
| </Box> | ||
| </motion.div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
The ChatMessageBubble component has grown quite large with the addition of rendering logic for tool calls and tool results. To improve readability and maintainability, consider extracting the rendering logic for tool_call (lines 395-452) and tool_result (lines 454-518) into their own separate components (e.g., ToolCallBubble and ToolResultBubble).
Change Summary
fix bugs in webui mcp
Related issue number
Checklist
pre-commit installandpre-commit run --all-filesbefore git commit, and passed lint check.