SvelteKit-based WebUI #14839
Draft
SvelteKit-based WebUI #14839
+27,360
−6,811
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sets up a new SvelteKit project for the web UI with Storybook & ShadCN installed This includes adding base files, Storybook configuration, Prettier and ESLint configurations, a test setup, and basic styling with Tailwind CSS.
Adds a theme mode watcher to the web UI. This allows the UI to automatically switch between light and dark mode based on the user's system preferences.
Introduces a script for streamlined web UI development. This script simplifies the process of starting a development server with configurable options for model selection (local or Hugging Face), port number, and build execution. It improves the developer experience by automating setup and providing helpful usage instructions.
Changes the SvelteKit adapter to `@sveltejs/adapter-static`. This allows for generating static HTML files for improved performance and easier deployment to static hosting providers. Configures the adapter to output files to the `../public` directory and to use `index.html` as a fallback.
Implements a proof-of-concept SvelteKit application with core chat functionalities. This includes: - UI components for chat messages and input - A chat service for handling API requests - State management using Svelte reactivity
allozaur
commented
Jul 23, 2025
| @@ -0,0 +1,38 @@ | |||
| # sv | |||
|
what is reason to change from react -> svelte? Would it be better just to improve UI with react? |
Allows users to rename existing conversations in the chat sidebar. This change introduces an edit dialog to the conversation item, allowing users to input a new name for the conversation. The name is then updated in the store.
Hey @bayorm! That is a good question indeed :) In fact, there are couple of reasons:
|
Updates the chat form to enable sending messages even if the text input is empty, as long as there are uploaded files attached. Also adds tooltips to the microphone and attachment buttons to indicate if the current model does not support audio or vision, respectively. Hides the card from the user's message if the message content is empty.
Removes the need to specify the base URL for API calls within the `ChatService` class by utilizing Vite's proxy configuration. This change streamlines the code and centralizes the base URL configuration in `vite.config.ts`. It also adds a proxy for the `/slots` endpoint.
Updates the chat form and store to allow sending messages that consist of only attachments without requiring any text content. This prevents the form from being blocked when users only want to send files.
Centralizes and strengthens file type management by using enums for categories, MIME types, and extensions. This improves code maintainability and type safety when dealing with different file types across the application. It also enforces a consistent approach for file type detection.
Prevents uploading of unsupported file types to the chat. Displays an alert message to the user when attempting to upload unsupported files, informing them about the acceptable file formats. Only processes supported files, improving the user experience.
Removes the dedicated text file extensions constant and instead relies on the `TextExtension` enum defined within supported file types. This change improves maintainability and consolidates file type definitions.
Adds the ability to record and send audio messages directly from the chat form. This includes: - Implementing audio recording functionality using the MediaRecorder API. - Providing UI elements (mic button) to control the recording process. - Converting recorded audio to WAV format for broader compatibility. - Supporting text files preview.
Enhances user feedback during assistant message generation by displaying real-time processing status, including initialization, preparation, and token generation. Provides detailed insights like context usage, temperature, and top-p settings, and speculative decoding status to the user. Introduces a `useProcessingState` hook to manage and track the processing state. It utilizes a polling mechanism via slots service to get processing states.
allozaur
force-pushed
the
allozaur/svelte-webui
branch
from
8cca487 to
f02925d
Compare
Removes excessive console logs used for debugging purposes from the chat service and attachment preview components. These logs are no longer necessary and clutter the console, making it harder to identify relevant information.
tools/server/public/index.html.gz
Outdated
There was a problem hiding this comment.
This is an old UI generated artifact. It shouldn't be committed
There was a problem hiding this comment.
Hey @olegshulyakov thanks for your contribution. Please withhold with any review comments until the PR is marked as ready for review 😉
| "@tailwindcss/vite": "^4.0.0", | ||
| "@types/node": "^22", | ||
| "@vitest/browser": "^3.2.3", | ||
| "bits-ui": "^2.8.11", |
There was a problem hiding this comment.
I chose to go with ShadCN for Svelte which uses Bits UI under the hood.
Refactors file upload logic to handle modality support. It now dynamically filters files based on the capabilities of the active model (vision, audio) and displays a detailed error message when incompatible files are selected, preventing unexpected behavior and improving user experience. - Updates file input to dynamically accept file types based on model capabilities. - Introduces an alert dialog to inform users about unsupported file types and reasons, with specific messages for both generally unsupported files and modality-related issues. - Modifies PDF processing to ensure PDF files are processed as text for non-vision models and images for vision models, adapting the setting when necessary.
Implements a SPA fallback route that serves index.html for unmatched routes. This enables client-side routing for dynamic routes when using embedded static files. Excludes API routes from the fallback to ensure they are handled by dedicated handlers. Also includes the required headers by pyodide (python interpreter) Sets ssr to false in the layout.ts file to disable server-side rendering for the entire application. This enables client-side rendering for the entire application. Also refactors code copy function in Markdown component.
Improves the chat sidebar search component by adding a "search" type to the input for better mobile keyboard support and screen reader accessibility. Also, adds a story to test the focus state of the search input. Introduces new markdown fixtures for storybook.
Refactors context management by utilizing real-time slot data for accurate context limit checks, replacing token estimation with server-side slot information. Introduces a dedicated context service and enhances error reporting to provide more informative messages when context limits are exceeded, including the removal of both user and assistant messages upon context errors. Additionally, it tweaks the chat form textarea and message UI for better visual consistency.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.