Sub-issue: Implement Web Search Tool - Frontend (NF.SM3.F) #116

New issue

Closed

opened 2025-10-28 18:36:32 +00:00 by rwachters · 0 comments

rwachters commented

2025-10-28 18:36:32 +00:00

(Migrated from github.com)

Sub-issue: Implement Web Search Tool - Frontend (NF.SM3.F)

Labels: frontend, feature, UI/UX, sub-issue

Parent Issue: https://github.com/rwachters/chatbot/issues/115

Executive Summary

This sub-issue covers all frontend development required for the web search tool feature. This includes creating the necessary API clients and repositories, updating the chat view model and state to handle tool data, and developing UI components for tool configuration, real-time notifications, and displaying tool call details within messages.

User Story Requirements (Frontend Focus)

A web search tool can be turned on/off for a specific prompt.
When the tool is called, the UI displays a notification that the tool is being used.
When an assistant message is generated, it includes a list of tools that were used to generate it.
The user can select an item in the list to view the tool's output.

Implementation Plan

Phase 4: Frontend Foundation

Create ToolApi (app/src/commonMain/kotlin/eu/torvian/chatbot/app/service/api/ToolApi.kt) and its implementation to interact with the backend tool routes.
Create ToolRepository (app/src/commonMain/kotlin/eu/torvian/chatbot/app/repository/ToolRepository.kt) and its implementation to manage tool data.
Update ChatViewModel and ChatState to manage tool definitions, session-specific tool configurations, and tool call records.
Add repository tests.

Phase 5: UI Components

Create ToolConfigPanel (app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ToolConfigPanel.kt) for enabling/disabling tools for the current session/prompt.
Create ToolCallDisplay (app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ToolCallDisplay.kt) to show tool calls and their outputs within assistant messages.
Create ToolNotification (app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ToolNotification.kt) for real-time feedback when a tool is being executed.
Update MessageItem (app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/MessageItem.kt) to integrate ToolCallDisplay and display tool usage.
Update MessageStreamEvent handling to process new tool-related events for UI updates.

Key Considerations (Frontend)

Tool Configuration: The UI needs to clearly present which tools are available and allow users to toggle their usage for the current chat session or prompt.
Real-time Feedback: Implement clear visual cues (e.g., loading indicators, toast notifications) when a tool is actively being used by the LLM.
Tool Call Visualization: Design an intuitive way to display the list of tools used within an assistant's response and allow users to inspect the raw output of each tool call.
Error Display: Gracefully handle and display any errors reported by the backend regarding tool execution failures.
Responsiveness: Ensure the new UI components are responsive and integrate seamlessly with the existing chat interface.

Estimated Effort

Approximately 7-9 days.

Reference

This issue is based on the detailed implementation report: docs/plans/web search tool/report.md

# Sub-issue: Implement Web Search Tool - Frontend (NF.SM3.F) **Labels**: `frontend`, `feature`, `UI/UX`, `sub-issue` **Parent Issue**: https://github.com/rwachters/chatbot/issues/115 ## Executive Summary This sub-issue covers all frontend development required for the web search tool feature. This includes creating the necessary API clients and repositories, updating the chat view model and state to handle tool data, and developing UI components for tool configuration, real-time notifications, and displaying tool call details within messages. ## User Story Requirements (Frontend Focus) - [ ] A web search tool can be turned on/off for a specific prompt. - [ ] When the tool is called, the UI displays a notification that the tool is being used. - [ ] When an assistant message is generated, it includes a list of tools that were used to generate it. - [ ] The user can select an item in the list to view the tool's output. ## Implementation Plan ### Phase 4: Frontend Foundation - Create `ToolApi` (app/src/commonMain/kotlin/eu/torvian/chatbot/app/service/api/ToolApi.kt) and its implementation to interact with the backend tool routes. - Create `ToolRepository` (app/src/commonMain/kotlin/eu/torvian/chatbot/app/repository/ToolRepository.kt) and its implementation to manage tool data. - Update `ChatViewModel` and `ChatState` to manage tool definitions, session-specific tool configurations, and tool call records. - Add repository tests. ### Phase 5: UI Components - Create `ToolConfigPanel` (app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ToolConfigPanel.kt) for enabling/disabling tools for the current session/prompt. - Create `ToolCallDisplay` (app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ToolCallDisplay.kt) to show tool calls and their outputs within assistant messages. - Create `ToolNotification` (app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ToolNotification.kt) for real-time feedback when a tool is being executed. - Update `MessageItem` (app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/MessageItem.kt) to integrate `ToolCallDisplay` and display tool usage. - Update `MessageStreamEvent` handling to process new tool-related events for UI updates. ## Key Considerations (Frontend) * **Tool Configuration**: The UI needs to clearly present which tools are available and allow users to toggle their usage for the current chat session or prompt. * **Real-time Feedback**: Implement clear visual cues (e.g., loading indicators, toast notifications) when a tool is actively being used by the LLM. * **Tool Call Visualization**: Design an intuitive way to display the list of tools used within an assistant's response and allow users to inspect the raw output of each tool call. * **Error Display**: Gracefully handle and display any errors reported by the backend regarding tool execution failures. * **Responsiveness**: Ensure the new UI components are responsive and integrate seamlessly with the existing chat interface. ## Estimated Effort Approximately 7-9 days. ## Reference This issue is based on the detailed implementation report: docs/plans/web search tool/report.md