Upload 647 files

CHANGELOG.md

@@ -5,6 +5,51 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.7] - 2024-12-01
+
+### Added
+
+- **✨ Prompt Input Auto-Completion**: Type a prompt and let AI intelligently suggest and complete your inputs. Simply press 'Tab' or swipe right on mobile to confirm. Available only with Rich Text Input (default setting). Disable via Admin Settings for full control.
+- **🌍 Improved Translations**: Enhanced localization for multiple languages, ensuring a more polished and accessible experience for international users.
+
+### Fixed
+
+- **🛠️ Tools Export Issue**: Resolved a critical issue where exporting tools wasn’t functioning, restoring seamless export capabilities.
+- **🔗 Model ID Registration**: Fixed an issue where model IDs weren’t registering correctly in the model editor, ensuring reliable model setup and tracking.
+- **🖋️ Textarea Auto-Expansion**: Corrected a bug where textareas didn’t expand automatically on certain browsers, improving usability for multi-line inputs.
+- **🔧 Ollama Embed Endpoint**: Addressed the /ollama/embed endpoint malfunction, ensuring consistent performance and functionality.
+
+### Changed
+
+- **🎨 Knowledge Base Styling**: Refined knowledge base visuals for a cleaner, more modern look, laying the groundwork for further enhancements in upcoming releases.
+
+## [0.4.6] - 2024-11-26
+
+### Added
+
+- **🌍 Enhanced Translations**: Various language translations improved to make the WebUI more accessible and user-friendly worldwide.
+
+### Fixed
+
+- **✏️ Textarea Shifting Bug**: Resolved the issue where the textarea shifted unexpectedly, ensuring a smoother typing experience.
+- **⚙️ Model Configuration Modal**: Fixed the issue where the models configuration modal introduced in 0.4.5 wasn’t working for some users.
+- **🔍 Legacy Query Support**: Restored functionality for custom query generation in RAG when using legacy prompts, ensuring both default and custom templates now work seamlessly.
+- **⚡ Improved General Reliability**: Various minor fixes improve platform stability and ensure a smoother overall experience across workflows.
+
+## [0.4.5] - 2024-11-26
+
+### Added
+
+- **🎨 Model Order/Defaults Reintroduced**: Brought back the ability to set model order and default models, now configurable via Admin Settings > Models > Configure (Gear Icon).
+
+### Fixed
+
+- **🔍 Query Generation Issue**: Resolved an error in web search query generation, enhancing search accuracy and ensuring smoother search workflows.
+- **📏 Textarea Auto Height Bug**: Fixed a layout issue where textarea input height was shifting unpredictably, particularly when editing system prompts.
+- **🔑 Ollama Authentication**: Corrected an issue with Ollama’s authorization headers, guaranteeing reliable authentication across all endpoints.
+- **⚙️ Missing Min_P Save**: Resolved an issue where the 'min_p' parameter was not being saved in configurations.
+- **🛠️ Tools Description**: Fixed a key issue that omitted tool descriptions in tools payload.
+
 ## [0.4.4] - 2024-11-22
 
 ### Added

CODE_OF_CONDUCT.md

@@ -2,76 +2,98 @@
 
 ## Our Pledge
 
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
-and orientation.
+As members, contributors, and leaders of this community, we pledge to make participation in our open-source project a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
 
-We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+We are committed to creating and maintaining an open, respectful, and professional environment where positive contributions and meaningful discussions can flourish. By participating in this project, you agree to uphold these values and align your behavior to the standards outlined in this Code of Conduct.
+
+## Why These Standards Are Important
+
+Open-source projects rely on a community of volunteers dedicating their time, expertise, and effort toward a shared goal. These projects are inherently collaborative but also fragile, as the success of the project depends on the goodwill, energy, and productivity of those involved.
+
+Maintaining a positive and respectful environment is essential to safeguarding the integrity of this project and protecting contributors' efforts. Behavior that disrupts this atmosphere—whether through hostility, entitlement, or unprofessional conduct—can severely harm the morale and productivity of the community. **Strict enforcement of these standards ensures a safe and supportive space for meaningful collaboration.**
+
+This is a community where **respect and professionalism are mandatory.** Violations of these standards will result in **zero tolerance** and immediate enforcement to prevent disruption and ensure the well-being of all participants.
 
 ## Our Standards
 
-Examples of behavior that contribute to a positive environment for our community include:
+Examples of behavior that contribute to a positive and professional community include:
 
-- Demonstrating empathy and kindness toward other people
-- Being respectful of differing opinions, viewpoints, and experiences
-- Giving and gracefully accepting constructive feedback
-- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
-- Focusing on what is best not just for us as individuals, but for the overall community
+- **Respecting others.** Be considerate, listen actively, and engage with empathy toward others' viewpoints and experiences.
+- **Constructive feedback.** Provide actionable, thoughtful, and respectful feedback that helps improve the project and encourages collaboration. Avoid unproductive negativity or hypercriticism.
+- **Recognizing volunteer contributions.** Appreciate that contributors dedicate their free time and resources selflessly. Approach them with gratitude and patience.
+- **Focusing on shared goals.** Collaborate in ways that prioritize the health, success, and sustainability of the community over individual agendas.
 
 Examples of unacceptable behavior include:
 
-- The use of sexualized language or imagery, and sexual attention or advances of any kind
-- Trolling, insulting or derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or email address, without their explicit permission
-- **Spamming of any kind**
-- Aggressive sales tactics targeting our community members are strictly prohibited. You can mention your product if it's relevant to the discussion, but under no circumstances should you push it forcefully
-- Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of discriminatory, demeaning, or sexualized language or behavior.
+- Personal attacks, derogatory comments, trolling, or inflammatory political or ideological arguments.
+- Harassment, intimidation, or any behavior intended to create a hostile, uncomfortable, or unsafe environment.
+- Publishing others' private information (e.g., physical or email addresses) without explicit permission.
+- **Entitlement, demand, or aggression toward contributors.** Volunteers are under no obligation to provide immediate or personalized support. Rude or dismissive behavior will not be tolerated.
+- **Unproductive or destructive behavior.** This includes venting frustration as hostility ("tantrums"), hypercriticism, attention-seeking negativity, or anything that distracts from the project's goals.
+- **Spamming and promotional exploitation.** Sharing irrelevant product promotions or self-promotion in the community is not allowed unless it directly contributes value to the discussion.
+
+### Feedback and Community Engagement
+
+- **Constructive feedback is encouraged, but hostile or entitled behavior will result in immediate action.** If you disagree with elements of the project, we encourage you to offer meaningful improvements or fork the project if necessary. Healthy discussions and technical disagreements are welcome only when handled with professionalism.
+- **Respect contributors' time and efforts.** No one is entitled to personalized or on-demand assistance. This is a community built on collaboration and shared effort; demanding or demeaning behavior undermines that trust and will not be allowed.
+
+### Zero Tolerance: No Warnings, Immediate Action
+
+This community operates under a **zero-tolerance policy.** Any behavior deemed unacceptable under this Code of Conduct will result in **immediate enforcement, without prior warning.**
+
+We employ this approach to ensure that unproductive or disruptive behavior does not escalate further or cause unnecessary harm to other contributors. The standards are clear, and violations of any kind—whether mild or severe—will be addressed decisively to protect the community.
 
 ## Enforcement Responsibilities
 
-Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+Community leaders are responsible for upholding and enforcing these standards. They are empowered to take **immediate and appropriate action** to address any behaviors they deem unacceptable under this Code of Conduct. These actions are taken with the goal of protecting the community and preserving its safe, positive, and productive environment.
 
 ## Scope
 
-This Code of Conduct applies within all community spaces and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+This Code of Conduct applies to all community spaces, including forums, repositories, social media accounts, and in-person events. It also applies when an individual represents the community in public settings, such as conferences or official communications.
+
+Additionally, any behavior outside of these defined spaces that negatively impacts the community or its members may fall within the scope of this Code of Conduct.
 
-## Enforcement
+## Reporting Violations
 
-Instances of abusive, harassing, spamming, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at [email protected]. All complaints will be reviewed and investigated promptly and fairly.
+Instances of unacceptable behavior can be reported to the leadership team at **[email protected]**. Reports will be handled promptly, confidentially, and with consideration for the safety and well-being of the reporter.
 
-All community leaders are obligated to respect the privacy and security of the reporter of any incident.
+All community leaders are required to uphold confidentiality and impartiality when addressing reports of violations.
 
 ## Enforcement Guidelines
 
-Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+### Ban
+
+**Community Impact**: Community leaders will issue a ban to any participant whose behavior is deemed unacceptable according to this Code of Conduct. Bans are enforced immediately and without prior notice.
+
+A ban may be temporary or permanent, depending on the severity of the violation. This includes—but is not limited to—behavior such as:
+
+- Harassment or abusive behavior toward contributors.
+- Persistent negativity or hostility that disrupts the collaborative environment.
+- Disrespectful, demanding, or aggressive interactions with others.
+- Attempts to cause harm or sabotage the community.
 
-### 1. Temporary Ban
+**Consequence**: A banned individual is immediately removed from access to all community spaces, communication channels, and events. Community leaders reserve the right to enforce either a time-limited suspension or a permanent ban based on the specific circumstances of the violation.
 
-**Community Impact**: Any violation of community standards, including but not limited to inappropriate language, unprofessional behavior, harassment, or spamming.
+This approach ensures that disruptive behaviors are addressed swiftly and decisively in order to maintain the integrity and productivity of the community.
 
-**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+## Why Zero Tolerance Is Necessary
 
-### 2. Permanent Ban
+Open-source projects thrive on collaboration, goodwill, and mutual respect. Toxic behaviors—such as entitlement, hostility, or persistent negativity—threaten not just individual contributors but the health of the project as a whole. Allowing such behaviors to persist robs contributors of their time, energy, and enthusiasm for the work they do.
 
-**Community Impact**: Repeated or severe violations of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
+By enforcing a zero-tolerance policy, we ensure that the community remains a safe, welcoming space for all participants. These measures are not about harshness—they are about protecting contributors and fostering a productive environment where innovation can thrive.
 
-**Consequence**: A permanent ban from any sort of public interaction within the community.
+Our expectations are clear, and our enforcement reflects our commitment to this project's long-term success.
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.0, available at
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at  
 https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
 
-Community Impact Guidelines were inspired by [Mozilla's code of conduct
-enforcement ladder](https://github.com/mozilla/diversity).
+Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
 
 [homepage]: https://www.contributor-covenant.org
 
-For answers to common questions about this code of conduct, see the FAQ at
-https://www.contributor-covenant.org/faq. Translations are available at
+For answers to common questions about this code of conduct, see the FAQ at  
+https://www.contributor-covenant.org/faq. Translations are available at  
 https://www.contributor-covenant.org/translations.

backend/open_webui/apps/audio/main.py

@@ -299,12 +299,12 @@ async def speech(request: Request, user=Depends(get_verified_user)):
                 async with session.post(
                     url=f"{app.state.config.TTS_OPENAI_API_BASE_URL}/audio/speech",
                     data=body,
-                    headers=headers
+                    headers=headers,
                 ) as r:
                     r.raise_for_status()
                     async with aiofiles.open(file_path, "wb") as f:
                         await f.write(await r.read())
-                    
+
                     async with aiofiles.open(file_body_path, "w") as f:
                         await f.write(json.dumps(json.loads(body.decode("utf-8"))))
 
@@ -322,7 +322,7 @@ async def speech(request: Request, user=Depends(get_verified_user)):
                 error_detail = f"External: {e}"
 
             raise HTTPException(
-                status_code=getattr(r, 'status', 500),
+                status_code=getattr(r, "status", 500),
                 detail=error_detail,
             )
 
@@ -358,7 +358,7 @@ async def speech(request: Request, user=Depends(get_verified_user)):
                     r.raise_for_status()
                     async with aiofiles.open(file_path, "wb") as f:
                         await f.write(await r.read())
-                    
+
                     async with aiofiles.open(file_body_path, "w") as f:
                         await f.write(json.dumps(json.loads(body.decode("utf-8"))))
 
@@ -376,7 +376,7 @@ async def speech(request: Request, user=Depends(get_verified_user)):
                 error_detail = f"External: {e}"
 
             raise HTTPException(
-                status_code=getattr(r, 'status', 500),
+                status_code=getattr(r, "status", 500),
                 detail=error_detail,
             )
 

backend/open_webui/apps/ollama/main.py

@@ -24,6 +24,7 @@ from open_webui.config import (
 from open_webui.env import (
     AIOHTTP_CLIENT_TIMEOUT,
     AIOHTTP_CLIENT_TIMEOUT_OPENAI_MODEL_LIST,
+    BYPASS_MODEL_ACCESS_CONTROL,
 )
 
 
@@ -195,7 +196,10 @@ async def post_streaming_url(
             trust_env=True, timeout=aiohttp.ClientTimeout(total=AIOHTTP_CLIENT_TIMEOUT)
         )
 
-        api_config = app.state.config.OLLAMA_API_CONFIGS.get(url, {})
+        parsed_url = urlparse(url)
+        base_url = f"{parsed_url.scheme}://{parsed_url.netloc}"
+
+        api_config = app.state.config.OLLAMA_API_CONFIGS.get(base_url, {})
         key = api_config.get("key", None)
 
         headers = {"Content-Type": "application/json"}
@@ -210,13 +214,13 @@ async def post_streaming_url(
         r.raise_for_status()
 
         if stream:
-            headers = dict(r.headers)
+            response_headers = dict(r.headers)
             if content_type:
-                headers["Content-Type"] = content_type
+                response_headers["Content-Type"] = content_type
             return StreamingResponse(
                 r.content,
                 status_code=r.status,
-                headers=headers,
+                headers=response_headers,
                 background=BackgroundTask(
                     cleanup_response, response=r, session=session
                 ),
@@ -324,7 +328,10 @@ async def get_ollama_tags(
     else:
         url = app.state.config.OLLAMA_BASE_URLS[url_idx]
 
-        api_config = app.state.config.OLLAMA_API_CONFIGS.get(url, {})
+        parsed_url = urlparse(url)
+        base_url = f"{parsed_url.scheme}://{parsed_url.netloc}"
+
+        api_config = app.state.config.OLLAMA_API_CONFIGS.get(base_url, {})
         key = api_config.get("key", None)
 
         headers = {}
@@ -353,7 +360,7 @@ async def get_ollama_tags(
                 detail=error_detail,
             )
 
-    if user.role == "user":
+    if user.role == "user" and not BYPASS_MODEL_ACCESS_CONTROL:
         # Filter models based on user access control
         filtered_models = []
         for model in models.get("models", []):
@@ -525,7 +532,10 @@ async def copy_model(
     url = app.state.config.OLLAMA_BASE_URLS[url_idx]
     log.info(f"url: {url}")
 
-    api_config = app.state.config.OLLAMA_API_CONFIGS.get(url, {})
+    parsed_url = urlparse(url)
+    base_url = f"{parsed_url.scheme}://{parsed_url.netloc}"
+
+    api_config = app.state.config.OLLAMA_API_CONFIGS.get(base_url, {})
     key = api_config.get("key", None)
 
     headers = {"Content-Type": "application/json"}
@@ -584,7 +594,10 @@ async def delete_model(
     url = app.state.config.OLLAMA_BASE_URLS[url_idx]
     log.info(f"url: {url}")
 
-    api_config = app.state.config.OLLAMA_API_CONFIGS.get(url, {})
+    parsed_url = urlparse(url)
+    base_url = f"{parsed_url.scheme}://{parsed_url.netloc}"
+
+    api_config = app.state.config.OLLAMA_API_CONFIGS.get(base_url, {})
     key = api_config.get("key", None)
 
     headers = {"Content-Type": "application/json"}
@@ -635,7 +648,10 @@ async def show_model_info(form_data: ModelNameForm, user=Depends(get_verified_us
     url = app.state.config.OLLAMA_BASE_URLS[url_idx]
     log.info(f"url: {url}")
 
-    api_config = app.state.config.OLLAMA_API_CONFIGS.get(url, {})
+    parsed_url = urlparse(url)
+    base_url = f"{parsed_url.scheme}://{parsed_url.netloc}"
+
+    api_config = app.state.config.OLLAMA_API_CONFIGS.get(base_url, {})
     key = api_config.get("key", None)
 
     headers = {"Content-Type": "application/json"}
@@ -691,7 +707,7 @@ async def generate_embeddings(
     url_idx: Optional[int] = None,
     user=Depends(get_verified_user),
 ):
-    return generate_ollama_batch_embeddings(form_data, url_idx)
+    return await generate_ollama_batch_embeddings(form_data, url_idx)
 
 
 @app.post("/api/embeddings")
@@ -730,7 +746,10 @@ async def generate_ollama_embeddings(
     url = app.state.config.OLLAMA_BASE_URLS[url_idx]
     log.info(f"url: {url}")
 
-    api_config = app.state.config.OLLAMA_API_CONFIGS.get(url, {})
+    parsed_url = urlparse(url)
+    base_url = f"{parsed_url.scheme}://{parsed_url.netloc}"
+
+    api_config = app.state.config.OLLAMA_API_CONFIGS.get(base_url, {})
     key = api_config.get("key", None)
 
     headers = {"Content-Type": "application/json"}
@@ -797,7 +816,10 @@ async def generate_ollama_batch_embeddings(
     url = app.state.config.OLLAMA_BASE_URLS[url_idx]
     log.info(f"url: {url}")
 
-    api_config = app.state.config.OLLAMA_API_CONFIGS.get(url, {})
+    parsed_url = urlparse(url)
+    base_url = f"{parsed_url.scheme}://{parsed_url.netloc}"
+
+    api_config = app.state.config.OLLAMA_API_CONFIGS.get(base_url, {})
     key = api_config.get("key", None)
 
     headers = {"Content-Type": "application/json"}
@@ -974,7 +996,10 @@ async def generate_chat_completion(
     log.info(f"url: {url}")
     log.debug(f"generate_chat_completion() - 2.payload = {payload}")
 
-    api_config = app.state.config.OLLAMA_API_CONFIGS.get(url, {})
+    parsed_url = urlparse(url)
+    base_url = f"{parsed_url.scheme}://{parsed_url.netloc}"
+
+    api_config = app.state.config.OLLAMA_API_CONFIGS.get(base_url, {})
     prefix_id = api_config.get("prefix_id", None)
     if prefix_id:
         payload["model"] = payload["model"].replace(f"{prefix_id}.", "")
@@ -1043,7 +1068,7 @@ async def generate_openai_chat_completion(
             payload = apply_model_system_prompt_to_body(params, payload, user)
 
         # Check if user has access to the model
-        if user.role == "user":
+        if user.role == "user" and not BYPASS_MODEL_ACCESS_CONTROL:
             if not (
                 user.id == model_info.user_id
                 or has_access(
@@ -1132,7 +1157,7 @@ async def get_openai_models(
                 detail=error_detail,
             )
 
-    if user.role == "user":
+    if user.role == "user" and not BYPASS_MODEL_ACCESS_CONTROL:
         # Filter models based on user access control
         filtered_models = []
         for model in models:

backend/open_webui/apps/openai/main.py

@@ -24,6 +24,7 @@ from open_webui.env import (
     AIOHTTP_CLIENT_TIMEOUT,
     AIOHTTP_CLIENT_TIMEOUT_OPENAI_MODEL_LIST,
     ENABLE_FORWARD_USER_INFO_HEADERS,
+    BYPASS_MODEL_ACCESS_CONTROL,
 )
 
 from open_webui.constants import ERROR_MESSAGES
@@ -422,7 +423,7 @@ async def get_models(url_idx: Optional[int] = None, user=Depends(get_verified_us
                 error_detail = f"Unexpected error: {str(e)}"
                 raise HTTPException(status_code=500, detail=error_detail)
 
-    if user.role == "user":
+    if user.role == "user" and not BYPASS_MODEL_ACCESS_CONTROL:
         # Filter models based on user access control
         filtered_models = []
         for model in models.get("data", []):

backend/open_webui/apps/retrieval/loaders/youtube.py

@@ -1,7 +1,12 @@
+import logging
+
 from typing import Any, Dict, Generator, List, Optional, Sequence, Union
 from urllib.parse import parse_qs, urlparse
 from langchain_core.documents import Document
+from open_webui.env import SRC_LOG_LEVELS
 
+log = logging.getLogger(__name__)
+log.setLevel(SRC_LOG_LEVELS["RAG"])
 
 ALLOWED_SCHEMES = {"http", "https"}
 ALLOWED_NETLOCS = {
@@ -51,12 +56,14 @@ class YoutubeLoader:
         self,
         video_id: str,
         language: Union[str, Sequence[str]] = "en",
+        proxy_url: Optional[str] = None,
     ):
         """Initialize with YouTube video ID."""
         _video_id = _parse_video_id(video_id)
         self.video_id = _video_id if _video_id is not None else video_id
         self._metadata = {"source": video_id}
         self.language = language
+        self.proxy_url = proxy_url
         if isinstance(language, str):
             self.language = [language]
         else:
@@ -76,10 +83,22 @@ class YoutubeLoader:
                 "Please install it with `pip install youtube-transcript-api`."
             )
 
+        if self.proxy_url:
+            youtube_proxies = {
+                "http": self.proxy_url,
+                "https": self.proxy_url,
+            }
+            # Don't log complete URL because it might contain secrets
+            log.debug(f"Using proxy URL: {self.proxy_url[:14]}...")
+        else:
+            youtube_proxies = None
+
         try:
-            transcript_list = YouTubeTranscriptApi.list_transcripts(self.video_id)
+            transcript_list = YouTubeTranscriptApi.list_transcripts(
+                self.video_id, proxies=youtube_proxies
+            )
         except Exception as e:
-            print(e)
+            log.exception("Loading YouTube transcript failed")
             return []
 
         try:

backend/open_webui/apps/retrieval/main.py

@@ -105,6 +105,7 @@ from open_webui.config import (
     TIKA_SERVER_URL,
     UPLOAD_DIR,
     YOUTUBE_LOADER_LANGUAGE,
+    YOUTUBE_LOADER_PROXY_URL,
     DEFAULT_LOCALE,
     AppConfig,
 )
@@ -171,6 +172,7 @@ app.state.config.OLLAMA_API_KEY = RAG_OLLAMA_API_KEY
 app.state.config.PDF_EXTRACT_IMAGES = PDF_EXTRACT_IMAGES
 
 app.state.config.YOUTUBE_LOADER_LANGUAGE = YOUTUBE_LOADER_LANGUAGE
+app.state.config.YOUTUBE_LOADER_PROXY_URL = YOUTUBE_LOADER_PROXY_URL
 app.state.YOUTUBE_LOADER_TRANSLATION = None
 
 
@@ -471,6 +473,7 @@ async def get_rag_config(user=Depends(get_admin_user)):
         "youtube": {
             "language": app.state.config.YOUTUBE_LOADER_LANGUAGE,
             "translation": app.state.YOUTUBE_LOADER_TRANSLATION,
+            "proxy_url": app.state.config.YOUTUBE_LOADER_PROXY_URL,
         },
         "web": {
             "web_loader_ssl_verification": app.state.config.ENABLE_RAG_WEB_LOADER_SSL_VERIFICATION,
@@ -518,6 +521,7 @@ class ChunkParamUpdateForm(BaseModel):
 class YoutubeLoaderConfig(BaseModel):
     language: list[str]
     translation: Optional[str] = None
+    proxy_url: str = ""
 
 
 class WebSearchConfig(BaseModel):
@@ -580,6 +584,7 @@ async def update_rag_config(form_data: ConfigUpdateForm, user=Depends(get_admin_
 
     if form_data.youtube is not None:
         app.state.config.YOUTUBE_LOADER_LANGUAGE = form_data.youtube.language
+        app.state.config.YOUTUBE_LOADER_PROXY_URL = form_data.youtube.proxy_url
         app.state.YOUTUBE_LOADER_TRANSLATION = form_data.youtube.translation
 
     if form_data.web is not None:
@@ -640,6 +645,7 @@ async def update_rag_config(form_data: ConfigUpdateForm, user=Depends(get_admin_
         },
         "youtube": {
             "language": app.state.config.YOUTUBE_LOADER_LANGUAGE,
+            "proxy_url": app.state.config.YOUTUBE_LOADER_PROXY_URL,
             "translation": app.state.YOUTUBE_LOADER_TRANSLATION,
         },
         "web": {
@@ -867,7 +873,7 @@ def save_docs_to_vector_db(
         return True
     except Exception as e:
         log.exception(e)
-        return False
+        raise e
 
 
 class ProcessFileForm(BaseModel):
@@ -897,7 +903,7 @@ def process_file(
 
             docs = [
                 Document(
-                    page_content=form_data.content,
+                    page_content=form_data.content.replace("<br/>", "\n"),
                     metadata={
                         **file.meta,
                         "name": file.filename,
@@ -1081,7 +1087,9 @@ def process_youtube_video(form_data: ProcessUrlForm, user=Depends(get_verified_u
             collection_name = calculate_sha256_string(form_data.url)[:63]
 
         loader = YoutubeLoader(
-            form_data.url, language=app.state.config.YOUTUBE_LOADER_LANGUAGE
+            form_data.url,
+            language=app.state.config.YOUTUBE_LOADER_LANGUAGE,
+            proxy_url=app.state.config.YOUTUBE_LOADER_PROXY_URL,
         )
 
         docs = loader.load()
@@ -1391,7 +1399,7 @@ def query_collection_handler(
         if app.state.config.ENABLE_RAG_HYBRID_SEARCH:
             return query_collection_with_hybrid_search(
                 collection_names=form_data.collection_names,
-                query=form_data.query,
+                queries=[form_data.query],
                 embedding_function=app.state.EMBEDDING_FUNCTION,
                 k=form_data.k if form_data.k else app.state.config.TOP_K,
                 reranking_function=app.state.sentence_transformer_rf,
@@ -1402,7 +1410,7 @@ def query_collection_handler(
         else:
             return query_collection(
                 collection_names=form_data.collection_names,
-                query=form_data.query,
+                queries=[form_data.query],
                 embedding_function=app.state.EMBEDDING_FUNCTION,
                 k=form_data.k if form_data.k else app.state.config.TOP_K,
             )

backend/open_webui/apps/retrieval/utils.py

@@ -429,7 +429,7 @@ def generate_openai_batch_embeddings(
 
 
 def generate_ollama_batch_embeddings(
-    model: str, texts: list[str], url: str, key: str
+    model: str, texts: list[str], url: str, key: str = ""
 ) -> Optional[list[list[float]]]:
     try:
         r = requests.post(

backend/open_webui/apps/webui/main.py

@@ -31,6 +31,7 @@ from open_webui.config import (
     DEFAULT_MODELS,
     DEFAULT_PROMPT_SUGGESTIONS,
     DEFAULT_USER_ROLE,
+    MODEL_ORDER_LIST,
     ENABLE_COMMUNITY_SHARING,
     ENABLE_LOGIN_FORM,
     ENABLE_MESSAGE_RATING,
@@ -120,6 +121,7 @@ app.state.config.DEFAULT_USER_ROLE = DEFAULT_USER_ROLE
 app.state.config.USER_PERMISSIONS = USER_PERMISSIONS
 app.state.config.WEBHOOK_URL = WEBHOOK_URL
 app.state.config.BANNERS = WEBUI_BANNERS
+app.state.config.MODEL_ORDER_LIST = MODEL_ORDER_LIST
 
 app.state.config.ENABLE_COMMUNITY_SHARING = ENABLE_COMMUNITY_SHARING
 app.state.config.ENABLE_MESSAGE_RATING = ENABLE_MESSAGE_RATING

backend/open_webui/apps/webui/models/tools.py

@@ -76,6 +76,10 @@ class ToolModel(BaseModel):
 ####################
 
 
+class ToolUserModel(ToolModel):
+    user: Optional[UserResponse] = None
+
+
 class ToolResponse(BaseModel):
     id: str
     user_id: str
@@ -138,13 +142,13 @@ class ToolsTable:
         except Exception:
             return None
 
-    def get_tools(self) -> list[ToolUserResponse]:
+    def get_tools(self) -> list[ToolUserModel]:
         with get_db() as db:
             tools = []
             for tool in db.query(Tool).order_by(Tool.updated_at.desc()).all():
                 user = Users.get_user_by_id(tool.user_id)
                 tools.append(
-                    ToolUserResponse.model_validate(
+                    ToolUserModel.model_validate(
                         {
                             **ToolModel.model_validate(tool).model_dump(),
                             "user": user.model_dump() if user else None,
@@ -155,7 +159,7 @@ class ToolsTable:
 
     def get_tools_by_user_id(
         self, user_id: str, permission: str = "write"
-    ) -> list[ToolUserResponse]:
+    ) -> list[ToolUserModel]:
         tools = self.get_tools()
 
         return [

backend/open_webui/apps/webui/routers/configs.py

@@ -1,10 +1,12 @@
-from open_webui.config import BannerModel
 from fastapi import APIRouter, Depends, Request
 from pydantic import BaseModel
-from open_webui.utils.utils import get_admin_user, get_verified_user
 
+from typing import Optional
 
+from open_webui.utils.utils import get_admin_user, get_verified_user
 from open_webui.config import get_config, save_config
+from open_webui.config import BannerModel
+
 
 router = APIRouter()
 
@@ -34,8 +36,32 @@ async def export_config(user=Depends(get_admin_user)):
     return get_config()
 
 
-class SetDefaultModelsForm(BaseModel):
-    models: str
+############################
+# SetDefaultModels
+############################
+class ModelsConfigForm(BaseModel):
+    DEFAULT_MODELS: Optional[str]
+    MODEL_ORDER_LIST: Optional[list[str]]
+
+
+@router.get("/models", response_model=ModelsConfigForm)
+async def get_models_config(request: Request, user=Depends(get_admin_user)):
+    return {
+        "DEFAULT_MODELS": request.app.state.config.DEFAULT_MODELS,
+        "MODEL_ORDER_LIST": request.app.state.config.MODEL_ORDER_LIST,
+    }
+
+
+@router.post("/models", response_model=ModelsConfigForm)
+async def set_models_config(
+    request: Request, form_data: ModelsConfigForm, user=Depends(get_admin_user)
+):
+    request.app.state.config.DEFAULT_MODELS = form_data.DEFAULT_MODELS
+    request.app.state.config.MODEL_ORDER_LIST = form_data.MODEL_ORDER_LIST
+    return {
+        "DEFAULT_MODELS": request.app.state.config.DEFAULT_MODELS,
+        "MODEL_ORDER_LIST": request.app.state.config.MODEL_ORDER_LIST,
+    }
 
 
 class PromptSuggestion(BaseModel):
@@ -47,21 +73,8 @@ class SetDefaultSuggestionsForm(BaseModel):
     suggestions: list[PromptSuggestion]
 
 
-############################
-# SetDefaultModels
-############################
-
-
-@router.post("/default/models", response_model=str)
-async def set_global_default_models(
-    request: Request, form_data: SetDefaultModelsForm, user=Depends(get_admin_user)
-):
-    request.app.state.config.DEFAULT_MODELS = form_data.models
-    return request.app.state.config.DEFAULT_MODELS
-
-
-@router.post("/default/suggestions", response_model=list[PromptSuggestion])
-async def set_global_default_suggestions(
+@router.post("/suggestions", response_model=list[PromptSuggestion])
+async def set_default_suggestions(
     request: Request,
     form_data: SetDefaultSuggestionsForm,
     user=Depends(get_admin_user),

backend/open_webui/config.py

@@ -583,6 +583,12 @@ OLLAMA_API_BASE_URL = os.environ.get(
 )
 
 OLLAMA_BASE_URL = os.environ.get("OLLAMA_BASE_URL", "")
+if OLLAMA_BASE_URL:
+    # Remove trailing slash
+    OLLAMA_BASE_URL = (
+        OLLAMA_BASE_URL[:-1] if OLLAMA_BASE_URL.endswith("/") else OLLAMA_BASE_URL
+    )
+
 
 K8S_FLAG = os.environ.get("K8S_FLAG", "")
 USE_OLLAMA_DOCKER = os.environ.get("USE_OLLAMA_DOCKER", "false")
@@ -696,6 +702,7 @@ ENABLE_LOGIN_FORM = PersistentConfig(
     os.environ.get("ENABLE_LOGIN_FORM", "True").lower() == "true",
 )
 
+
 DEFAULT_LOCALE = PersistentConfig(
     "DEFAULT_LOCALE",
     "ui.default_locale",
@@ -740,13 +747,18 @@ DEFAULT_PROMPT_SUGGESTIONS = PersistentConfig(
     ],
 )
 
+MODEL_ORDER_LIST = PersistentConfig(
+    "MODEL_ORDER_LIST",
+    "ui.model_order_list",
+    [],
+)
+
 DEFAULT_USER_ROLE = PersistentConfig(
     "DEFAULT_USER_ROLE",
     "ui.default_user_role",
     os.getenv("DEFAULT_USER_ROLE", "pending"),
 )
 
-
 USER_PERMISSIONS_WORKSPACE_MODELS_ACCESS = (
     os.environ.get("USER_PERMISSIONS_WORKSPACE_MODELS_ACCESS", "False").lower()
     == "true"
@@ -969,7 +981,7 @@ QUERY_GENERATION_PROMPT_TEMPLATE = PersistentConfig(
 )
 
 DEFAULT_QUERY_GENERATION_PROMPT_TEMPLATE = """### Task:
-Analyze the chat history to determine the necessity of generating search queries. By default, **prioritize generating 1-3 broad and relevant search queries** unless it is absolutely certain that no additional information is required. The aim is to retrieve comprehensive, updated, and valuable information even with minimal uncertainty. If no search is unequivocally needed, return an empty list.
+Analyze the chat history to determine the necessity of generating search queries, in the given language. By default, **prioritize generating 1-3 broad and relevant search queries** unless it is absolutely certain that no additional information is required. The aim is to retrieve comprehensive, updated, and valuable information even with minimal uncertainty. If no search is unequivocally needed, return an empty list.
 
 ### Guidelines:
 - Respond **EXCLUSIVELY** with a JSON object. Any form of extra commentary, explanation, or additional text is strictly prohibited.
@@ -977,7 +989,7 @@ Analyze the chat history to determine the necessity of generating search queries
 - If and only if it is entirely certain that no useful results can be retrieved by a search, return: { "queries": [] }.
 - Err on the side of suggesting search queries if there is **any chance** they might provide useful or updated information.
 - Be concise and focused on composing high-quality search queries, avoiding unnecessary elaboration, commentary, or assumptions.
-- Assume today's date is: {{CURRENT_DATE}}.
+- Today's date is: {{CURRENT_DATE}}.
 - Always prioritize providing actionable and broad queries that maximize informational coverage.
 
 ### Output:
@@ -992,6 +1004,66 @@ Strictly return in JSON format:
 </chat_history>
 """
 
+ENABLE_AUTOCOMPLETE_GENERATION = PersistentConfig(
+    "ENABLE_AUTOCOMPLETE_GENERATION",
+    "task.autocomplete.enable",
+    os.environ.get("ENABLE_AUTOCOMPLETE_GENERATION", "True").lower() == "true",
+)
+
+AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH = PersistentConfig(
+    "AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH",
+    "task.autocomplete.input_max_length",
+    int(os.environ.get("AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH", "-1")),
+)
+
+AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE = PersistentConfig(
+    "AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE",
+    "task.autocomplete.prompt_template",
+    os.environ.get("AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE", ""),
+)
+
+
+DEFAULT_AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE = """### Task:
+You are an autocompletion system. Continue the text in `<text>` based on the **completion type** in `<type>` and the given language.  
+
+### **Instructions**:
+1. Analyze `<text>` for context and meaning.  
+2. Use `<type>` to guide your output:  
+   - **General**: Provide a natural, concise continuation.  
+   - **Search Query**: Complete as if generating a realistic search query.  
+3. Start as if you are directly continuing `<text>`. Do **not** repeat, paraphrase, or respond as a model. Simply complete the text.  
+4. Ensure the continuation:
+   - Flows naturally from `<text>`.  
+   - Avoids repetition, overexplaining, or unrelated ideas.  
+5. If unsure, return: `{ "text": "" }`.  
+
+### **Output Rules**:
+- Respond only in JSON format: `{ "text": "<your_completion>" }`.
+
+### **Examples**:
+#### Example 1:  
+Input:  
+<type>General</type>  
+<text>The sun was setting over the horizon, painting the sky</text>  
+Output:  
+{ "text": "with vibrant shades of orange and pink." }
+
+#### Example 2:  
+Input:  
+<type>Search Query</type>  
+<text>Top-rated restaurants in</text>  
+Output:  
+{ "text": "New York City for Italian cuisine." }  
+
+---
+### Context:
+<chat_history>
+{{MESSAGES:END:6}}
+</chat_history>
+<type>{{TYPE}}</type>  
+<text>{{PROMPT}}</text>  
+#### Output:
+"""
 
 TOOLS_FUNCTION_CALLING_PROMPT_TEMPLATE = PersistentConfig(
     "TOOLS_FUNCTION_CALLING_PROMPT_TEMPLATE",
@@ -1253,6 +1325,12 @@ YOUTUBE_LOADER_LANGUAGE = PersistentConfig(
     os.getenv("YOUTUBE_LOADER_LANGUAGE", "en").split(","),
 )
 
+YOUTUBE_LOADER_PROXY_URL = PersistentConfig(
+    "YOUTUBE_LOADER_PROXY_URL",
+    "rag.youtube_loader_proxy_url",
+    os.getenv("YOUTUBE_LOADER_PROXY_URL", ""),
+)
+
 
 ENABLE_RAG_WEB_SEARCH = PersistentConfig(
     "ENABLE_RAG_WEB_SEARCH",

backend/open_webui/constants.py

@@ -113,5 +113,6 @@ class TASKS(str, Enum):
     TAGS_GENERATION = "tags_generation"
     EMOJI_GENERATION = "emoji_generation"
     QUERY_GENERATION = "query_generation"
+    AUTOCOMPLETE_GENERATION = "autocomplete_generation"
     FUNCTION_CALLING = "function_calling"
     MOA_RESPONSE_GENERATION = "moa_response_generation"

backend/open_webui/env.py

@@ -329,6 +329,9 @@ WEBUI_AUTH_TRUSTED_EMAIL_HEADER = os.environ.get(
 )
 WEBUI_AUTH_TRUSTED_NAME_HEADER = os.environ.get("WEBUI_AUTH_TRUSTED_NAME_HEADER", None)
 
+BYPASS_MODEL_ACCESS_CONTROL = (
+    os.environ.get("BYPASS_MODEL_ACCESS_CONTROL", "False").lower() == "true"
+)
 
 ####################################
 # WEBUI_SECRET_KEY
@@ -373,7 +376,7 @@ else:
         AIOHTTP_CLIENT_TIMEOUT = 300
 
 AIOHTTP_CLIENT_TIMEOUT_OPENAI_MODEL_LIST = os.environ.get(
-    "AIOHTTP_CLIENT_TIMEOUT_OPENAI_MODEL_LIST", "3"
+    "AIOHTTP_CLIENT_TIMEOUT_OPENAI_MODEL_LIST", "5"
 )
 
 if AIOHTTP_CLIENT_TIMEOUT_OPENAI_MODEL_LIST == "":
@@ -384,7 +387,7 @@ else:
             AIOHTTP_CLIENT_TIMEOUT_OPENAI_MODEL_LIST
         )
     except Exception:
-        AIOHTTP_CLIENT_TIMEOUT_OPENAI_MODEL_LIST = 3
+        AIOHTTP_CLIENT_TIMEOUT_OPENAI_MODEL_LIST = 5
 
 ####################################
 # OFFLINE_MODE

backend/open_webui/main.py

@@ -89,6 +89,10 @@ from open_webui.config import (
     DEFAULT_QUERY_GENERATION_PROMPT_TEMPLATE,
     TITLE_GENERATION_PROMPT_TEMPLATE,
     TAGS_GENERATION_PROMPT_TEMPLATE,
+    ENABLE_AUTOCOMPLETE_GENERATION,
+    AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH,
+    AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE,
+    DEFAULT_AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE,
     TOOLS_FUNCTION_CALLING_PROMPT_TEMPLATE,
     WEBHOOK_URL,
     WEBUI_AUTH,
@@ -108,6 +112,7 @@ from open_webui.env import (
     WEBUI_SESSION_COOKIE_SAME_SITE,
     WEBUI_SESSION_COOKIE_SECURE,
     WEBUI_URL,
+    BYPASS_MODEL_ACCESS_CONTROL,
     RESET_CONFIG_ON_START,
     OFFLINE_MODE,
 )
@@ -127,6 +132,7 @@ from open_webui.utils.task import (
     rag_template,
     title_generation_template,
     query_generation_template,
+    autocomplete_generation_template,
     tags_generation_template,
     emoji_generation_template,
     moa_response_generation_template,
@@ -207,6 +213,11 @@ app.state.config.TASK_MODEL_EXTERNAL = TASK_MODEL_EXTERNAL
 
 app.state.config.TITLE_GENERATION_PROMPT_TEMPLATE = TITLE_GENERATION_PROMPT_TEMPLATE
 
+app.state.config.ENABLE_AUTOCOMPLETE_GENERATION = ENABLE_AUTOCOMPLETE_GENERATION
+app.state.config.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH = (
+    AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH
+)
+
 app.state.config.ENABLE_TAGS_GENERATION = ENABLE_TAGS_GENERATION
 app.state.config.TAGS_GENERATION_PROMPT_TEMPLATE = TAGS_GENERATION_PROMPT_TEMPLATE
 
@@ -215,6 +226,10 @@ app.state.config.ENABLE_SEARCH_QUERY_GENERATION = ENABLE_SEARCH_QUERY_GENERATION
 app.state.config.ENABLE_RETRIEVAL_QUERY_GENERATION = ENABLE_RETRIEVAL_QUERY_GENERATION
 app.state.config.QUERY_GENERATION_PROMPT_TEMPLATE = QUERY_GENERATION_PROMPT_TEMPLATE
 
+app.state.config.AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE = (
+    AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE
+)
+
 app.state.config.TOOLS_FUNCTION_CALLING_PROMPT_TEMPLATE = (
     TOOLS_FUNCTION_CALLING_PROMPT_TEMPLATE
 )
@@ -531,9 +546,16 @@ async def chat_completion_files_handler(
             queries_response = queries_response["choices"][0]["message"]["content"]
 
             try:
+                bracket_start = queries_response.find("{")
+                bracket_end = queries_response.rfind("}") + 1
+
+                if bracket_start == -1 or bracket_end == -1:
+                    raise Exception("No JSON object found in the response")
+
+                queries_response = queries_response[bracket_start:bracket_end]
                 queries_response = json.loads(queries_response)
             except Exception as e:
-                queries_response = {"queries": []}
+                queries_response = {"queries": [queries_response]}
 
             queries = queries_response.get("queries", [])
         except Exception as e:
@@ -600,7 +622,7 @@ class ChatCompletionMiddleware(BaseHTTPMiddleware):
             )
 
         model_info = Models.get_model_by_id(model["id"])
-        if user.role == "user":
+        if user.role == "user" and not BYPASS_MODEL_ACCESS_CONTROL:
             if model.get("arena"):
                 if not has_access(
                     user.id,
@@ -1194,8 +1216,16 @@ async def get_models(user=Depends(get_verified_user)):
         if "pipeline" not in model or model["pipeline"].get("type", None) != "filter"
     ]
 
+    model_order_list = webui_app.state.config.MODEL_ORDER_LIST
+    if model_order_list:
+        model_order_dict = {model_id: i for i, model_id in enumerate(model_order_list)}
+        # Sort models by order list priority, with fallback for those not in the list
+        models.sort(
+            key=lambda x: (model_order_dict.get(x["id"], float("inf")), x["name"])
+        )
+
     # Filter out models that the user does not have access to
-    if user.role == "user":
+    if user.role == "user" and not BYPASS_MODEL_ACCESS_CONTROL:
         filtered_models = []
         for model in models:
             if model.get("arena"):
@@ -1650,6 +1680,8 @@ async def get_task_config(user=Depends(get_verified_user)):
         "TASK_MODEL": app.state.config.TASK_MODEL,
         "TASK_MODEL_EXTERNAL": app.state.config.TASK_MODEL_EXTERNAL,
         "TITLE_GENERATION_PROMPT_TEMPLATE": app.state.config.TITLE_GENERATION_PROMPT_TEMPLATE,
+        "ENABLE_AUTOCOMPLETE_GENERATION": app.state.config.ENABLE_AUTOCOMPLETE_GENERATION,
+        "AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH": app.state.config.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH,
         "TAGS_GENERATION_PROMPT_TEMPLATE": app.state.config.TAGS_GENERATION_PROMPT_TEMPLATE,
         "ENABLE_TAGS_GENERATION": app.state.config.ENABLE_TAGS_GENERATION,
         "ENABLE_SEARCH_QUERY_GENERATION": app.state.config.ENABLE_SEARCH_QUERY_GENERATION,
@@ -1663,6 +1695,8 @@ class TaskConfigForm(BaseModel):
     TASK_MODEL: Optional[str]
     TASK_MODEL_EXTERNAL: Optional[str]
     TITLE_GENERATION_PROMPT_TEMPLATE: str
+    ENABLE_AUTOCOMPLETE_GENERATION: bool
+    AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH: int
     TAGS_GENERATION_PROMPT_TEMPLATE: str
     ENABLE_TAGS_GENERATION: bool
     ENABLE_SEARCH_QUERY_GENERATION: bool
@@ -1678,6 +1712,14 @@ async def update_task_config(form_data: TaskConfigForm, user=Depends(get_admin_u
     app.state.config.TITLE_GENERATION_PROMPT_TEMPLATE = (
         form_data.TITLE_GENERATION_PROMPT_TEMPLATE
     )
+
+    app.state.config.ENABLE_AUTOCOMPLETE_GENERATION = (
+        form_data.ENABLE_AUTOCOMPLETE_GENERATION
+    )
+    app.state.config.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH = (
+        form_data.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH
+    )
+
     app.state.config.TAGS_GENERATION_PROMPT_TEMPLATE = (
         form_data.TAGS_GENERATION_PROMPT_TEMPLATE
     )
@@ -1700,6 +1742,8 @@ async def update_task_config(form_data: TaskConfigForm, user=Depends(get_admin_u
         "TASK_MODEL": app.state.config.TASK_MODEL,
         "TASK_MODEL_EXTERNAL": app.state.config.TASK_MODEL_EXTERNAL,
         "TITLE_GENERATION_PROMPT_TEMPLATE": app.state.config.TITLE_GENERATION_PROMPT_TEMPLATE,
+        "ENABLE_AUTOCOMPLETE_GENERATION": app.state.config.ENABLE_AUTOCOMPLETE_GENERATION,
+        "AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH": app.state.config.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH,
         "TAGS_GENERATION_PROMPT_TEMPLATE": app.state.config.TAGS_GENERATION_PROMPT_TEMPLATE,
         "ENABLE_TAGS_GENERATION": app.state.config.ENABLE_TAGS_GENERATION,
         "ENABLE_SEARCH_QUERY_GENERATION": app.state.config.ENABLE_SEARCH_QUERY_GENERATION,
@@ -1927,7 +1971,7 @@ async def generate_queries(form_data: dict, user=Depends(get_verified_user)):
         f"generating {type} queries using model {task_model_id} for user {user.email}"
     )
 
-    if app.state.config.QUERY_GENERATION_PROMPT_TEMPLATE != "":
+    if (app.state.config.QUERY_GENERATION_PROMPT_TEMPLATE).strip() != "":
         template = app.state.config.QUERY_GENERATION_PROMPT_TEMPLATE
     else:
         template = DEFAULT_QUERY_GENERATION_PROMPT_TEMPLATE
@@ -1967,6 +2011,90 @@ async def generate_queries(form_data: dict, user=Depends(get_verified_user)):
     return await generate_chat_completions(form_data=payload, user=user)
 
 
+@app.post("/api/task/auto/completions")
+async def generate_autocompletion(form_data: dict, user=Depends(get_verified_user)):
+    if not app.state.config.ENABLE_AUTOCOMPLETE_GENERATION:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=f"Autocompletion generation is disabled",
+        )
+
+    type = form_data.get("type")
+    prompt = form_data.get("prompt")
+    messages = form_data.get("messages")
+
+    if app.state.config.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH > 0:
+        if len(prompt) > app.state.config.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail=f"Input prompt exceeds maximum length of {app.state.config.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH}",
+            )
+
+    model_list = await get_all_models()
+    models = {model["id"]: model for model in model_list}
+
+    model_id = form_data["model"]
+    if model_id not in models:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail="Model not found",
+        )
+
+    # Check if the user has a custom task model
+    # If the user has a custom task model, use that model
+    task_model_id = get_task_model_id(
+        model_id,
+        app.state.config.TASK_MODEL,
+        app.state.config.TASK_MODEL_EXTERNAL,
+        models,
+    )
+
+    log.debug(
+        f"generating autocompletion using model {task_model_id} for user {user.email}"
+    )
+
+    if (app.state.config.AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE).strip() != "":
+        template = app.state.config.AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE
+    else:
+        template = DEFAULT_AUTOCOMPLETE_GENERATION_PROMPT_TEMPLATE
+
+    content = autocomplete_generation_template(
+        template, prompt, messages, type, {"name": user.name}
+    )
+
+    payload = {
+        "model": task_model_id,
+        "messages": [{"role": "user", "content": content}],
+        "stream": False,
+        "metadata": {
+            "task": str(TASKS.AUTOCOMPLETE_GENERATION),
+            "task_body": form_data,
+            "chat_id": form_data.get("chat_id", None),
+        },
+    }
+
+    print(payload)
+
+    # Handle pipeline filters
+    try:
+        payload = filter_pipeline(payload, user, models)
+    except Exception as e:
+        if len(e.args) > 1:
+            return JSONResponse(
+                status_code=e.args[0],
+                content={"detail": e.args[1]},
+            )
+        else:
+            return JSONResponse(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                content={"detail": str(e)},
+            )
+    if "chat_id" in payload:
+        del payload["chat_id"]
+
+    return await generate_chat_completions(form_data=payload, user=user)
+
+
 @app.post("/api/task/emoji/completions")
 async def generate_emoji(form_data: dict, user=Depends(get_verified_user)):
 

backend/open_webui/utils/security_headers.py

@@ -27,6 +27,7 @@ def set_security_headers() -> Dict[str, str]:
     - x-download-options
     - x-frame-options
     - x-permitted-cross-domain-policies
+    - content-security-policy
 
     Each environment variable is associated with a specific setter function
     that constructs the header. If the environment variable is set, the
@@ -45,6 +46,7 @@ def set_security_headers() -> Dict[str, str]:
         "XDOWNLOAD_OPTIONS": set_xdownload_options,
         "XFRAME_OPTIONS": set_xframe,
         "XPERMITTED_CROSS_DOMAIN_POLICIES": set_xpermitted_cross_domain_policies,
+        "CONTENT_SECURITY_POLICY": set_content_security_policy,
     }
 
     for env_var, setter in header_setters.items():
@@ -124,3 +126,8 @@ def set_xpermitted_cross_domain_policies(value: str):
     if not match:
         value = "none"
     return {"X-Permitted-Cross-Domain-Policies": value}
+
+
+# Set Content-Security-Policy response header
+def set_content_security_policy(value: str):
+    return {"Content-Security-Policy": value}

backend/open_webui/utils/task.py

@@ -25,12 +25,14 @@ def prompt_template(
     # Format the date to YYYY-MM-DD
     formatted_date = current_date.strftime("%Y-%m-%d")
     formatted_time = current_date.strftime("%I:%M:%S %p")
+    formatted_weekday = current_date.strftime("%A")
 
     template = template.replace("{{CURRENT_DATE}}", formatted_date)
     template = template.replace("{{CURRENT_TIME}}", formatted_time)
     template = template.replace(
         "{{CURRENT_DATETIME}}", f"{formatted_date} {formatted_time}"
     )
+    template = template.replace("{{CURRENT_WEEKDAY}}", formatted_weekday)
 
     if user_name:
         # Replace {{USER_NAME}} in the template with the user's name
@@ -51,7 +53,9 @@ def prompt_template(
 
 def replace_prompt_variable(template: str, prompt: str) -> str:
     def replacement_function(match):
-        full_match = match.group(0)
+        full_match = match.group(
+            0
+        ).lower()  # Normalize to lowercase for consistent handling
         start_length = match.group(1)
         end_length = match.group(2)
         middle_length = match.group(3)
@@ -71,20 +75,23 @@ def replace_prompt_variable(template: str, prompt: str) -> str:
             return f"{start}...{end}"
         return ""
 
-    template = re.sub(
-        r"{{prompt}}|{{prompt:start:(\d+)}}|{{prompt:end:(\d+)}}|{{prompt:middletruncate:(\d+)}}",
-        replacement_function,
-        template,
-    )
+    # Updated regex pattern to make it case-insensitive with the `(?i)` flag
+    pattern = r"(?i){{prompt}}|{{prompt:start:(\d+)}}|{{prompt:end:(\d+)}}|{{prompt:middletruncate:(\d+)}}"
+    template = re.sub(pattern, replacement_function, template)
     return template
 
 
-def replace_messages_variable(template: str, messages: list[str]) -> str:
+def replace_messages_variable(
+    template: str, messages: Optional[list[str]] = None
+) -> str:
     def replacement_function(match):
         full_match = match.group(0)
         start_length = match.group(1)
         end_length = match.group(2)
         middle_length = match.group(3)
+        # If messages is None, handle it as an empty list
+        if messages is None:
+            return ""
 
         # Process messages based on the number of messages required
         if full_match == "{{MESSAGES}}":
@@ -120,7 +127,7 @@ def replace_messages_variable(template: str, messages: list[str]) -> str:
 
 
 def rag_template(template: str, context: str, query: str):
-    if template == "":
+    if template.strip() == "":
         template = DEFAULT_RAG_TEMPLATE
 
     if "[context]" not in template and "{{CONTEXT}}" not in template:
@@ -210,6 +217,28 @@ def emoji_generation_template(
     return template
 
 
+def autocomplete_generation_template(
+    template: str,
+    prompt: str,
+    messages: Optional[list[dict]] = None,
+    type: Optional[str] = None,
+    user: Optional[dict] = None,
+) -> str:
+    template = template.replace("{{TYPE}}", type if type else "")
+    template = replace_prompt_variable(template, prompt)
+    template = replace_messages_variable(template, messages)
+
+    template = prompt_template(
+        template,
+        **(
+            {"user_name": user.get("name"), "user_location": user.get("location")}
+            if user
+            else {}
+        ),
+    )
+    return template
+
+
 def query_generation_template(
     template: str, messages: list[dict], user: Optional[dict] = None
 ) -> str:

backend/requirements.txt

@@ -1,7 +1,7 @@
 fastapi==0.111.0
 uvicorn[standard]==0.30.6
 pydantic==2.9.2
-python-multipart==0.0.17
+python-multipart==0.0.18
 
 Flask==3.0.3
 Flask-Cors==5.0.0
@@ -11,13 +11,13 @@ python-jose==3.3.0
 passlib[bcrypt]==1.7.4
 
 requests==2.32.3
-aiohttp==3.10.8
+aiohttp==3.11.8
 async-timeout
 aiocache
 aiofiles
 
 sqlalchemy==2.0.32
-alembic==1.13.2
+alembic==1.14.0
 peewee==3.17.6
 peewee-migrate==1.12.2
 psycopg2-binary==2.9.9
@@ -44,11 +44,11 @@ langchain-chroma==0.1.4
 
 fake-useragent==1.5.1
 chromadb==0.5.15
-pymilvus==2.4.9
+pymilvus==2.5.0
 qdrant-client~=1.12.0
 opensearch-py==2.7.1
 
-sentence-transformers==3.2.0
+sentence-transformers==3.3.1
 colbert-ai==0.2.21
 einops==0.8.0
 

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "open-webui",
-	"version": "0.4.4",
+	"version": "0.4.7",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "open-webui",
-			"version": "0.4.4",
+			"version": "0.4.7",
 			"dependencies": {
 				"@codemirror/lang-javascript": "^6.2.2",
 				"@codemirror/lang-python": "^6.1.6",
@@ -1836,9 +1836,10 @@
 			}
 		},
 		"node_modules/@polka/url": {
-			"version": "1.0.0-next.25",
-			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
-			"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
+			"version": "1.0.0-next.28",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
+			"integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
+			"license": "MIT"
 		},
 		"node_modules/@popperjs/core": {
 			"version": "2.11.8",
@@ -2257,22 +2258,23 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.6.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.6.2.tgz",
-			"integrity": "sha512-ruogrSPXjckn5poUiZU8VYNCSPHq66SFR1AATvOikQxtP6LNI4niAZVX/AWZRe/EPDG3oY2DNJ9c5z7u0t2NAQ==",
+			"version": "2.9.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.9.0.tgz",
+			"integrity": "sha512-W3E7ed3ChB6kPqRs2H7tcHp+Z7oiTFC6m+lLyAQQuyXeqw6LdNuuwEUla+5VM0OGgqQD+cYD6+7Xq80vVm17Vg==",
 			"hasInstallScript": true,
+			"license": "MIT",
 			"dependencies": {
 				"@types/cookie": "^0.6.0",
-				"cookie": "^0.7.0",
+				"cookie": "^0.6.0",
 				"devalue": "^5.1.0",
-				"esm-env": "^1.0.0",
+				"esm-env": "^1.2.1",
 				"import-meta-resolve": "^4.1.0",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.5",
 				"mrmime": "^2.0.0",
 				"sade": "^1.8.1",
 				"set-cookie-parser": "^2.6.0",
-				"sirv": "^2.0.4",
+				"sirv": "^3.0.0",
 				"tiny-glob": "^0.2.9"
 			},
 			"bin": {
@@ -2282,9 +2284,9 @@
 				"node": ">=18.13"
 			},
 			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1",
+				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0",
 				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.3"
+				"vite": "^5.0.3 || ^6.0.0"
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
@@ -4391,9 +4393,10 @@
 			"dev": true
 		},
 		"node_modules/cookie": {
-			"version": "0.7.1",
-			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
-			"integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -5690,9 +5693,10 @@
 			}
 		},
 		"node_modules/esm-env": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
-			"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA=="
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.1.tgz",
+			"integrity": "sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==",
+			"license": "MIT"
 		},
 		"node_modules/espree": {
 			"version": "9.6.1",
@@ -8228,6 +8232,7 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
 			"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=10"
 			}
@@ -10359,16 +10364,17 @@
 			}
 		},
 		"node_modules/sirv": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
-			"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.0.tgz",
+			"integrity": "sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==",
+			"license": "MIT",
 			"dependencies": {
 				"@polka/url": "^1.0.0-next.24",
 				"mrmime": "^2.0.0",
 				"totalist": "^3.0.0"
 			},
 			"engines": {
-				"node": ">= 10"
+				"node": ">=18"
 			}
 		},
 		"node_modules/slash": {
@@ -11260,6 +11266,7 @@
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
 			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=6"
 			}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "open-webui",
-	"version": "0.4.4",
+	"version": "0.4.7",
 	"private": true,
 	"scripts": {
 		"dev": "npm run pyodide:fetch && vite dev --host",

pyproject.toml

@@ -9,7 +9,7 @@ dependencies = [
     "fastapi==0.111.0",
     "uvicorn[standard]==0.30.6",
     "pydantic==2.9.2",
-    "python-multipart==0.0.17",
+    "python-multipart==0.0.18",
 
     "Flask==3.0.3",
     "Flask-Cors==5.0.0",
@@ -19,13 +19,13 @@ dependencies = [
     "passlib[bcrypt]==1.7.4",
 
     "requests==2.32.3",
-    "aiohttp==3.10.8",
+    "aiohttp==3.11.8",
     "async-timeout",
     "aiocache",
     "aiofiles",
 
     "sqlalchemy==2.0.32",
-    "alembic==1.13.2",
+    "alembic==1.14.0",
     "peewee==3.17.6",
     "peewee-migrate==1.12.2",
     "psycopg2-binary==2.9.9",
@@ -51,11 +51,11 @@ dependencies = [
 
     "fake-useragent==1.5.1",
     "chromadb==0.5.15",
-    "pymilvus==2.4.9",
+    "pymilvus==2.5.0",
     "qdrant-client~=1.12.0",
     "opensearch-py==2.7.1",
 
-    "sentence-transformers==3.2.0",
+    "sentence-transformers==3.3.1",
     "colbert-ai==0.2.21",
     "einops==0.8.0",
 

src/app.css

@@ -45,15 +45,15 @@ math {
 }
 
 .input-prose {
-	@apply prose dark:prose-invert prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
+	@apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
 }
 
 .input-prose-sm {
-	@apply prose dark:prose-invert prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line text-sm;
+	@apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line text-sm;
 }
 
 .markdown-prose {
-	@apply prose dark:prose-invert prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
+	@apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
 }
 
 .markdown a {
@@ -211,7 +211,15 @@ input[type='number'] {
 	float: left;
 	color: #adb5bd;
 	pointer-events: none;
-	height: 0;
+	
+	@apply line-clamp-1 absolute
+}
+
+.ai-autocompletion::after {
+	color: #a0a0a0;
+
+	content: attr(data-suggestion);
+	pointer-events: none;
 }
 
 .tiptap > pre > code {
@@ -231,7 +239,6 @@ input[type='number'] {
 	@apply dark:bg-gray-800 bg-gray-100;
 }
 
-
 .tiptap p code {
 	color: #eb5757;
 	border-width: 0px;

src/app.html

@@ -2,9 +2,12 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="apple-touch-icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="manifest" href="%sveltekit.assets%/manifest.json" crossorigin="use-credentials" />
+		<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
+		<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
+		<link rel="shortcut icon" href="/favicon/favicon.ico" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+		<meta name="apple-mobile-web-app-title" content="Open WebUI" />
+		<link rel="manifest" href="/favicon/site.webmanifest" />
 		<meta
 			name="viewport"
 			content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"

src/lib/apis/configs/index.ts

@@ -58,17 +58,44 @@ export const exportConfig = async (token: string) => {
 	return res;
 };
 
-export const setDefaultModels = async (token: string, models: string) => {
+export const getModelsConfig = async (token: string) => {
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/configs/default/models`, {
+	const res = await fetch(`${WEBUI_API_BASE_URL}/configs/models`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const setModelsConfig = async (token: string, config: object) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/configs/models`, {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json',
 			Authorization: `Bearer ${token}`
 		},
 		body: JSON.stringify({
-			models: models
+			...config
 		})
 	})
 		.then(async (res) => {
@@ -91,7 +118,7 @@ export const setDefaultModels = async (token: string, models: string) => {
 export const setDefaultPromptSuggestions = async (token: string, promptSuggestions: string) => {
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/configs/default/suggestions`, {
+	const res = await fetch(`${WEBUI_API_BASE_URL}/configs/suggestions`, {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json',

src/lib/apis/index.ts

@@ -25,26 +25,6 @@ export const getModels = async (token: string = '', base: boolean = false) => {
 	}
 
 	let models = res?.data ?? [];
-	models = models
-		.filter((models) => models)
-		// Sort the models
-		.sort((a, b) => {
-			// Compare case-insensitively by name for models without position property
-			const lowerA = a.name.toLowerCase();
-			const lowerB = b.name.toLowerCase();
-
-			if (lowerA < lowerB) return -1;
-			if (lowerA > lowerB) return 1;
-
-			// If same case-insensitively, sort by original strings,
-			// lowercase will come before uppercase due to ASCII values
-			if (a.name < b.name) return -1;
-			if (a.name > b.name) return 1;
-
-			return 0; // They are equal
-		});
-
-	console.log(models);
 	return models;
 };
 
@@ -387,15 +367,13 @@ export const generateQueries = async (
 		throw error;
 	}
 
-	try {
-		// Step 1: Safely extract the response string
-		const response = res?.choices[0]?.message?.content ?? '';
+	// Step 1: Safely extract the response string
+	const response = res?.choices[0]?.message?.content ?? '';
 
-		// Step 3: Find the relevant JSON block within the response
+	try {
 		const jsonStartIndex = response.indexOf('{');
 		const jsonEndIndex = response.lastIndexOf('}');
 
-		// Step 4: Check if we found a valid JSON block (with both `{` and `}`)
 		if (jsonStartIndex !== -1 && jsonEndIndex !== -1) {
 			const jsonResponse = response.substring(jsonStartIndex, jsonEndIndex + 1);
 
@@ -410,12 +388,83 @@ export const generateQueries = async (
 			}
 		}
 
-		// If no valid JSON block found, return an empty array
-		return [];
+		// If no valid JSON block found, return response as is
+		return [response];
 	} catch (e) {
 		// Catch and safely return empty array on any parsing errors
 		console.error('Failed to parse response: ', e);
-		return [];
+		return [response];
+	}
+};
+
+export const generateAutoCompletion = async (
+	token: string = '',
+	model: string,
+	prompt: string,
+	messages?: object[],
+	type: string = 'search query'
+) => {
+	const controller = new AbortController();
+	let error = null;
+
+	const res = await fetch(`${WEBUI_BASE_URL}/api/task/auto/completions`, {
+		signal: controller.signal,
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			model: model,
+			prompt: prompt,
+			...(messages && { messages: messages }),
+			type: type,
+			stream: false
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			if ('detail' in err) {
+				error = err.detail;
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	const response = res?.choices[0]?.message?.content ?? '';
+
+	try {
+		const jsonStartIndex = response.indexOf('{');
+		const jsonEndIndex = response.lastIndexOf('}');
+
+		if (jsonStartIndex !== -1 && jsonEndIndex !== -1) {
+			const jsonResponse = response.substring(jsonStartIndex, jsonEndIndex + 1);
+
+			// Step 5: Parse the JSON block
+			const parsed = JSON.parse(jsonResponse);
+
+			// Step 6: If there's a "queries" key, return the queries array; otherwise, return an empty array
+			if (parsed && parsed.text) {
+				return parsed.text;
+			} else {
+				return '';
+			}
+		}
+
+		// If no valid JSON block found, return response as is
+		return response;
+	} catch (e) {
+		// Catch and safely return empty array on any parsing errors
+		console.error('Failed to parse response: ', e);
+		return response;
 	}
 };
 

src/lib/apis/retrieval/index.ts

@@ -40,6 +40,7 @@ type ContentExtractConfigForm = {
 type YoutubeConfigForm = {
 	language: string[];
 	translation?: string | null;
+	proxy_url: string;
 };
 
 type RAGConfigForm = {

src/lib/components/admin/Settings/Evaluations.svelte

@@ -5,6 +5,7 @@
 
 	const dispatch = createEventDispatcher();
 	import { getModels } from '$lib/apis';
+	import { getConfig, updateConfig } from '$lib/apis/evaluations';
 
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
@@ -12,7 +13,6 @@
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Model from './Evaluations/Model.svelte';
 	import ArenaModelModal from './Evaluations/ArenaModelModal.svelte';
-	import { getConfig, updateConfig } from '$lib/apis/evaluations';
 
 	const i18n = getContext('i18n');
 
@@ -27,6 +27,7 @@
 
 		if (config) {
 			toast.success('Settings saved successfully');
+			models.set(await getModels(localStorage.token));
 		}
 	};
 

src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte

@@ -375,7 +375,7 @@
 					<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
 						{#if edit}
 							<button
-								class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-900 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
+								class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-950 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
 								type="button"
 								on:click={() => {
 									dispatch('delete', model);
@@ -387,7 +387,7 @@
 						{/if}
 
 						<button
-							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
+							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-950 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
 								? ' cursor-not-allowed'
 								: ''}"
 							type="submit"

src/lib/components/admin/Settings/Interface.svelte

@@ -24,6 +24,8 @@
 		TASK_MODEL: '',
 		TASK_MODEL_EXTERNAL: '',
 		TITLE_GENERATION_PROMPT_TEMPLATE: '',
+		ENABLE_AUTOCOMPLETE_GENERATION: true,
+		AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH: -1,
 		TAGS_GENERATION_PROMPT_TEMPLATE: '',
 		ENABLE_TAGS_GENERATION: true,
 		ENABLE_SEARCH_QUERY_GENERATION: true,
@@ -55,255 +57,207 @@
 	};
 </script>
 
-<form
-	class="flex flex-col h-full justify-between space-y-3 text-sm"
-	on:submit|preventDefault={() => {
-		updateInterfaceHandler();
-		dispatch('save');
-	}}
->
-	<div class="  overflow-y-scroll scrollbar-hidden h-full pr-1.5">
-		<div>
-			<div class=" mb-2.5 text-sm font-medium flex items-center">
-				<div class=" mr-1">{$i18n.t('Set Task Model')}</div>
-				<Tooltip
-					content={$i18n.t(
-						'A task model is used when performing tasks such as generating titles for chats and web search queries'
-					)}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="size-3.5"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
-						/>
-					</svg>
-				</Tooltip>
-			</div>
-			<div class="flex w-full gap-2">
-				<div class="flex-1">
-					<div class=" text-xs mb-1">{$i18n.t('Local Models')}</div>
-					<select
-						class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
-						bind:value={taskConfig.TASK_MODEL}
-						placeholder={$i18n.t('Select a model')}
-					>
-						<option value="" selected>{$i18n.t('Current Model')}</option>
-						{#each $models.filter((m) => m.owned_by === 'ollama') as model}
-							<option value={model.id} class="bg-gray-100 dark:bg-gray-700">
-								{model.name}
-							</option>
-						{/each}
-					</select>
-				</div>
-
-				<div class="flex-1">
-					<div class=" text-xs mb-1">{$i18n.t('External Models')}</div>
-					<select
-						class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
-						bind:value={taskConfig.TASK_MODEL_EXTERNAL}
-						placeholder={$i18n.t('Select a model')}
+{#if taskConfig}
+	<form
+		class="flex flex-col h-full justify-between space-y-3 text-sm"
+		on:submit|preventDefault={() => {
+			updateInterfaceHandler();
+			dispatch('save');
+		}}
+	>
+		<div class="  overflow-y-scroll scrollbar-hidden h-full pr-1.5">
+			<div>
+				<div class=" mb-2.5 text-sm font-medium flex items-center">
+					<div class=" mr-1">{$i18n.t('Set Task Model')}</div>
+					<Tooltip
+						content={$i18n.t(
+							'A task model is used when performing tasks such as generating titles for chats and web search queries'
+						)}
 					>
-						<option value="" selected>{$i18n.t('Current Model')}</option>
-						{#each $models as model}
-							<option value={model.id} class="bg-gray-100 dark:bg-gray-700">
-								{model.name}
-							</option>
-						{/each}
-					</select>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="size-3.5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
+							/>
+						</svg>
+					</Tooltip>
 				</div>
-			</div>
-
-			<div class="mt-3">
-				<div class=" mb-2.5 text-xs font-medium">{$i18n.t('Title Generation Prompt')}</div>
-
-				<Tooltip
-					content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-					placement="top-start"
-				>
-					<Textarea
-						bind:value={taskConfig.TITLE_GENERATION_PROMPT_TEMPLATE}
-						placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-					/>
-				</Tooltip>
-			</div>
-
-			<hr class=" dark:border-gray-850 my-3" />
+				<div class="flex w-full gap-2">
+					<div class="flex-1">
+						<div class=" text-xs mb-1">{$i18n.t('Local Models')}</div>
+						<select
+							class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+							bind:value={taskConfig.TASK_MODEL}
+							placeholder={$i18n.t('Select a model')}
+						>
+							<option value="" selected>{$i18n.t('Current Model')}</option>
+							{#each $models.filter((m) => m.owned_by === 'ollama') as model}
+								<option value={model.id} class="bg-gray-100 dark:bg-gray-700">
+									{model.name}
+								</option>
+							{/each}
+						</select>
+					</div>
 
-			<div class="my-3 flex w-full items-center justify-between">
-				<div class=" self-center text-xs font-medium">
-					{$i18n.t('Enable Tags Generation')}
+					<div class="flex-1">
+						<div class=" text-xs mb-1">{$i18n.t('External Models')}</div>
+						<select
+							class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+							bind:value={taskConfig.TASK_MODEL_EXTERNAL}
+							placeholder={$i18n.t('Select a model')}
+						>
+							<option value="" selected>{$i18n.t('Current Model')}</option>
+							{#each $models as model}
+								<option value={model.id} class="bg-gray-100 dark:bg-gray-700">
+									{model.name}
+								</option>
+							{/each}
+						</select>
+					</div>
 				</div>
 
-				<Switch bind:state={taskConfig.ENABLE_TAGS_GENERATION} />
-			</div>
-
-			{#if taskConfig.ENABLE_TAGS_GENERATION}
 				<div class="mt-3">
-					<div class=" mb-2.5 text-xs font-medium">{$i18n.t('Tags Generation Prompt')}</div>
+					<div class=" mb-2.5 text-xs font-medium">{$i18n.t('Title Generation Prompt')}</div>
 
 					<Tooltip
 						content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
 						placement="top-start"
 					>
 						<Textarea
-							bind:value={taskConfig.TAGS_GENERATION_PROMPT_TEMPLATE}
+							bind:value={taskConfig.TITLE_GENERATION_PROMPT_TEMPLATE}
 							placeholder={$i18n.t(
 								'Leave empty to use the default prompt, or enter a custom prompt'
 							)}
 						/>
 					</Tooltip>
 				</div>
-			{/if}
-
-			<hr class=" dark:border-gray-850 my-3" />
 
-			<div class="my-3 flex w-full items-center justify-between">
-				<div class=" self-center text-xs font-medium">
-					{$i18n.t('Enable Retrieval Query Generation')}
-				</div>
+				<hr class=" border-gray-50 dark:border-gray-850 my-3" />
 
-				<Switch bind:state={taskConfig.ENABLE_RETRIEVAL_QUERY_GENERATION} />
-			</div>
+				<div class="my-3 flex w-full items-center justify-between">
+					<div class=" self-center text-xs font-medium">
+						{$i18n.t('Autocomplete Generation')}
+					</div>
 
-			<div class="my-3 flex w-full items-center justify-between">
-				<div class=" self-center text-xs font-medium">
-					{$i18n.t('Enable Web Search Query Generation')}
+					<Tooltip content={$i18n.t('Enable autocomplete generation for chat messages')}>
+						<Switch bind:state={taskConfig.ENABLE_AUTOCOMPLETE_GENERATION} />
+					</Tooltip>
 				</div>
 
-				<Switch bind:state={taskConfig.ENABLE_SEARCH_QUERY_GENERATION} />
-			</div>
+				{#if taskConfig.ENABLE_AUTOCOMPLETE_GENERATION}
+					<div class="mt-3">
+						<div class=" mb-2.5 text-xs font-medium">
+							{$i18n.t('Autocomplete Generation Input Max Length')}
+						</div>
 
-			<div class="">
-				<div class=" mb-2.5 text-xs font-medium">{$i18n.t('Query Generation Prompt')}</div>
-
-				<Tooltip
-					content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-					placement="top-start"
-				>
-					<Textarea
-						bind:value={taskConfig.QUERY_GENERATION_PROMPT_TEMPLATE}
-						placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-					/>
-				</Tooltip>
-			</div>
-		</div>
+						<Tooltip
+							content={$i18n.t('Character limit for autocomplete generation input')}
+							placement="top-start"
+						>
+							<input
+								class="w-full outline-none bg-transparent"
+								bind:value={taskConfig.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH}
+								placeholder={$i18n.t('-1 for no limit, or a positive integer for a specific limit')}
+							/>
+						</Tooltip>
+					</div>
+				{/if}
 
-		<hr class=" dark:border-gray-850 my-3" />
+				<hr class=" border-gray-50 dark:border-gray-850 my-3" />
+
+				<div class="my-3 flex w-full items-center justify-between">
+					<div class=" self-center text-xs font-medium">
+						{$i18n.t('Tags Generation')}
+					</div>
 
-		<div class=" space-y-3 {banners.length > 0 ? ' mb-3' : ''}">
-			<div class="flex w-full justify-between">
-				<div class=" self-center text-sm font-semibold">
-					{$i18n.t('Banners')}
+					<Switch bind:state={taskConfig.ENABLE_TAGS_GENERATION} />
 				</div>
 
-				<button
-					class="p-1 px-3 text-xs flex rounded transition"
-					type="button"
-					on:click={() => {
-						if (banners.length === 0 || banners.at(-1).content !== '') {
-							banners = [
-								...banners,
-								{
-									id: uuidv4(),
-									type: '',
-									title: '',
-									content: '',
-									dismissible: true,
-									timestamp: Math.floor(Date.now() / 1000)
-								}
-							];
-						}
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class="w-4 h-4"
-					>
-						<path
-							d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
-						/>
-					</svg>
-				</button>
-			</div>
-			<div class="flex flex-col space-y-1">
-				{#each banners as banner, bannerIdx}
-					<div class=" flex justify-between">
-						<div class="flex flex-row flex-1 border rounded-xl dark:border-gray-800">
-							<select
-								class="w-fit capitalize rounded-xl py-2 px-4 text-xs bg-transparent outline-none"
-								bind:value={banner.type}
-								required
-							>
-								{#if banner.type == ''}
-									<option value="" selected disabled class="text-gray-900">{$i18n.t('Type')}</option
-									>
-								{/if}
-								<option value="info" class="text-gray-900">{$i18n.t('Info')}</option>
-								<option value="warning" class="text-gray-900">{$i18n.t('Warning')}</option>
-								<option value="error" class="text-gray-900">{$i18n.t('Error')}</option>
-								<option value="success" class="text-gray-900">{$i18n.t('Success')}</option>
-							</select>
+				{#if taskConfig.ENABLE_TAGS_GENERATION}
+					<div class="mt-3">
+						<div class=" mb-2.5 text-xs font-medium">{$i18n.t('Tags Generation Prompt')}</div>
 
-							<input
-								class="pr-5 py-1.5 text-xs w-full bg-transparent outline-none"
-								placeholder={$i18n.t('Content')}
-								bind:value={banner.content}
+						<Tooltip
+							content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
+							placement="top-start"
+						>
+							<Textarea
+								bind:value={taskConfig.TAGS_GENERATION_PROMPT_TEMPLATE}
+								placeholder={$i18n.t(
+									'Leave empty to use the default prompt, or enter a custom prompt'
+								)}
 							/>
+						</Tooltip>
+					</div>
+				{/if}
 
-							<div class="relative top-1.5 -left-2">
-								<Tooltip content={$i18n.t('Dismissible')} className="flex h-fit items-center">
-									<Switch bind:state={banner.dismissible} />
-								</Tooltip>
-							</div>
-						</div>
+				<hr class=" border-gray-50 dark:border-gray-850 my-3" />
 
-						<button
-							class="px-2"
-							type="button"
-							on:click={() => {
-								banners.splice(bannerIdx, 1);
-								banners = banners;
-							}}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 20 20"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-								/>
-							</svg>
-						</button>
+				<div class="my-3 flex w-full items-center justify-between">
+					<div class=" self-center text-xs font-medium">
+						{$i18n.t('Retrieval Query Generation')}
 					</div>
-				{/each}
+
+					<Switch bind:state={taskConfig.ENABLE_RETRIEVAL_QUERY_GENERATION} />
+				</div>
+
+				<div class="my-3 flex w-full items-center justify-between">
+					<div class=" self-center text-xs font-medium">
+						{$i18n.t('Web Search Query Generation')}
+					</div>
+
+					<Switch bind:state={taskConfig.ENABLE_SEARCH_QUERY_GENERATION} />
+				</div>
+
+				<div class="">
+					<div class=" mb-2.5 text-xs font-medium">{$i18n.t('Query Generation Prompt')}</div>
+
+					<Tooltip
+						content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
+						placement="top-start"
+					>
+						<Textarea
+							bind:value={taskConfig.QUERY_GENERATION_PROMPT_TEMPLATE}
+							placeholder={$i18n.t(
+								'Leave empty to use the default prompt, or enter a custom prompt'
+							)}
+						/>
+					</Tooltip>
+				</div>
 			</div>
-		</div>
 
-		{#if $user.role === 'admin'}
-			<div class=" space-y-3">
-				<div class="flex w-full justify-between mb-2">
+			<hr class=" border-gray-50 dark:border-gray-850 my-3" />
+
+			<div class=" space-y-3 {banners.length > 0 ? ' mb-3' : ''}">
+				<div class="flex w-full justify-between">
 					<div class=" self-center text-sm font-semibold">
-						{$i18n.t('Default Prompt Suggestions')}
+						{$i18n.t('Banners')}
 					</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
 						type="button"
 						on:click={() => {
-							if (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') {
-								promptSuggestions = [...promptSuggestions, { content: '', title: ['', ''] }];
+							if (banners.length === 0 || banners.at(-1).content !== '') {
+								banners = [
+									...banners,
+									{
+										id: uuidv4(),
+										type: '',
+										title: '',
+										content: '',
+										dismissible: true,
+										timestamp: Math.floor(Date.now() / 1000)
+									}
+								];
 							}
 						}}
 					>
@@ -319,40 +273,45 @@
 						</svg>
 					</button>
 				</div>
-				<div class="grid lg:grid-cols-2 flex-col gap-1.5">
-					{#each promptSuggestions as prompt, promptIdx}
-						<div
-							class=" flex border border-gray-100 dark:border-none dark:bg-gray-850 rounded-xl py-1.5"
-						>
-							<div class="flex flex-col flex-1 pl-1">
-								<div class="flex border-b border-gray-100 dark:border-gray-800 w-full">
-									<input
-										class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800"
-										placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')}
-										bind:value={prompt.title[0]}
-									/>
+				<div class="flex flex-col space-y-1">
+					{#each banners as banner, bannerIdx}
+						<div class=" flex justify-between">
+							<div class="flex flex-row flex-1 border rounded-xl dark:border-gray-800">
+								<select
+									class="w-fit capitalize rounded-xl py-2 px-4 text-xs bg-transparent outline-none"
+									bind:value={banner.type}
+									required
+								>
+									{#if banner.type == ''}
+										<option value="" selected disabled class="text-gray-900"
+											>{$i18n.t('Type')}</option
+										>
+									{/if}
+									<option value="info" class="text-gray-900">{$i18n.t('Info')}</option>
+									<option value="warning" class="text-gray-900">{$i18n.t('Warning')}</option>
+									<option value="error" class="text-gray-900">{$i18n.t('Error')}</option>
+									<option value="success" class="text-gray-900">{$i18n.t('Success')}</option>
+								</select>
+
+								<input
+									class="pr-5 py-1.5 text-xs w-full bg-transparent outline-none"
+									placeholder={$i18n.t('Content')}
+									bind:value={banner.content}
+								/>
 
-									<input
-										class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800"
-										placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')}
-										bind:value={prompt.title[1]}
-									/>
+								<div class="relative top-1.5 -left-2">
+									<Tooltip content={$i18n.t('Dismissible')} className="flex h-fit items-center">
+										<Switch bind:state={banner.dismissible} />
+									</Tooltip>
 								</div>
-
-								<textarea
-									class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800 resize-none"
-									placeholder={$i18n.t('Prompt (e.g. Tell me a fun fact about the Roman Empire)')}
-									rows="3"
-									bind:value={prompt.content}
-								/>
 							</div>
 
 							<button
-								class="px-3"
+								class="px-2"
 								type="button"
 								on:click={() => {
-									promptSuggestions.splice(promptIdx, 1);
-									promptSuggestions = promptSuggestions;
+									banners.splice(bannerIdx, 1);
+									banners = banners;
 								}}
 							>
 								<svg
@@ -369,22 +328,103 @@
 						</div>
 					{/each}
 				</div>
+			</div>
+
+			{#if $user.role === 'admin'}
+				<div class=" space-y-3">
+					<div class="flex w-full justify-between mb-2">
+						<div class=" self-center text-sm font-semibold">
+							{$i18n.t('Default Prompt Suggestions')}
+						</div>
 
-				{#if promptSuggestions.length > 0}
-					<div class="text-xs text-left w-full mt-2">
-						{$i18n.t('Adjusting these settings will apply changes universally to all users.')}
+						<button
+							class="p-1 px-3 text-xs flex rounded transition"
+							type="button"
+							on:click={() => {
+								if (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') {
+									promptSuggestions = [...promptSuggestions, { content: '', title: ['', ''] }];
+								}
+							}}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+								/>
+							</svg>
+						</button>
 					</div>
-				{/if}
-			</div>
-		{/if}
-	</div>
-
-	<div class="flex justify-end text-sm font-medium">
-		<button
-			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
-			type="submit"
-		>
-			{$i18n.t('Save')}
-		</button>
-	</div>
-</form>
+					<div class="grid lg:grid-cols-2 flex-col gap-1.5">
+						{#each promptSuggestions as prompt, promptIdx}
+							<div
+								class=" flex border border-gray-100 dark:border-none dark:bg-gray-850 rounded-xl py-1.5"
+							>
+								<div class="flex flex-col flex-1 pl-1">
+									<div class="flex border-b border-gray-100 dark:border-gray-800 w-full">
+										<input
+											class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800"
+											placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')}
+											bind:value={prompt.title[0]}
+										/>
+
+										<input
+											class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800"
+											placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')}
+											bind:value={prompt.title[1]}
+										/>
+									</div>
+
+									<textarea
+										class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800 resize-none"
+										placeholder={$i18n.t('Prompt (e.g. Tell me a fun fact about the Roman Empire)')}
+										rows="3"
+										bind:value={prompt.content}
+									/>
+								</div>
+
+								<button
+									class="px-3"
+									type="button"
+									on:click={() => {
+										promptSuggestions.splice(promptIdx, 1);
+										promptSuggestions = promptSuggestions;
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+										/>
+									</svg>
+								</button>
+							</div>
+						{/each}
+					</div>
+
+					{#if promptSuggestions.length > 0}
+						<div class="text-xs text-left w-full mt-2">
+							{$i18n.t('Adjusting these settings will apply changes universally to all users.')}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		<div class="flex justify-end text-sm font-medium">
+			<button
+				class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+				type="submit"
+			>
+				{$i18n.t('Save')}
+			</button>
+		</div>
+	</form>
+{/if}

src/lib/components/admin/Settings/Models.svelte

@@ -24,6 +24,8 @@
 	import ModelEditor from '$lib/components/workspace/Models/ModelEditor.svelte';
 	import { toast } from 'svelte-sonner';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import Cog6 from '$lib/components/icons/Cog6.svelte';
+	import ConfigureModelsModal from './Models/ConfigureModelsModal.svelte';
 
 	let importFiles;
 	let modelsImportInputElement: HTMLInputElement;
@@ -35,12 +37,20 @@
 
 	let filteredModels = [];
 	let selectedModelId = null;
-	let showResetModal = false;
+
+	let showConfigModal = false;
 
 	$: if (models) {
-		filteredModels = models.filter(
-			(m) => searchValue === '' || m.name.toLowerCase().includes(searchValue.toLowerCase())
-		);
+		filteredModels = models
+			.filter((m) => searchValue === '' || m.name.toLowerCase().includes(searchValue.toLowerCase()))
+			.sort((a, b) => {
+				// // Check if either model is inactive and push them to the bottom
+				// if ((a.is_active ?? true) !== (b.is_active ?? true)) {
+				// 	return (b.is_active ?? true) - (a.is_active ?? true);
+				// }
+				// If both models' active states are the same, sort alphabetically
+				return a.name.localeCompare(b.name);
+			});
 	}
 
 	let searchValue = '';
@@ -114,12 +124,11 @@
 			}).catch((error) => {
 				return null;
 			});
-
-			await init();
 		} else {
 			await toggleModelById(localStorage.token, model.id);
 		}
 
+		await init();
 		_models.set(await getModels(localStorage.token));
 	};
 
@@ -128,18 +137,7 @@
 	});
 </script>
 
-<ConfirmDialog
-	title={$i18n.t('Delete All Models')}
-	message={$i18n.t('This will delete all models including custom models and cannot be undone.')}
-	bind:show={showResetModal}
-	onConfirm={async () => {
-		const res = deleteAllModels(localStorage.token);
-		if (res) {
-			toast.success($i18n.t('All models deleted successfully'));
-			init();
-		}
-	}}
-/>
+<ConfigureModelsModal bind:show={showConfigModal} {init} />
 
 {#if models !== null}
 	{#if selectedModelId === null}
@@ -154,17 +152,15 @@
 				</div>
 
 				<div>
-					<Tooltip content={$i18n.t('This will delete all models including custom models')}>
+					<Tooltip content={$i18n.t('Configure')}>
 						<button
 							class=" px-2.5 py-1 rounded-full flex gap-1 items-center"
 							type="button"
 							on:click={() => {
-								showResetModal = true;
+								showConfigModal = true;
 							}}
 						>
-							<div class="text-xs flex-shrink-0">
-								{$i18n.t('Reset')}
-							</div>
+							<Cog6 />
 						</button>
 					</Tooltip>
 				</div>
@@ -186,7 +182,7 @@
 
 		<div class=" my-2 mb-5" id="model-list">
 			{#if models.length > 0}
-				{#each filteredModels as model, modelIdx (`${model.id}-${modelIdx}`)}
+				{#each filteredModels as model, modelIdx (model.id)}
 					<div
 						class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-lg transition"
 						id="model-item-{model.id}"

src/lib/components/admin/Settings/Models/ConfigureModelsModal.svelte

@@ -0,0 +1,268 @@
+<script>
+	import { toast } from 'svelte-sonner';
+
+	import { createEventDispatcher, getContext, onMount } from 'svelte';
+	const i18n = getContext('i18n');
+	const dispatch = createEventDispatcher();
+
+	import { models } from '$lib/stores';
+	import { deleteAllModels } from '$lib/apis/models';
+
+	import Modal from '$lib/components/common/Modal.svelte';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import ModelList from './ModelList.svelte';
+	import { getModelsConfig, setModelsConfig } from '$lib/apis/configs';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Minus from '$lib/components/icons/Minus.svelte';
+	import Plus from '$lib/components/icons/Plus.svelte';
+
+	export let show = false;
+	export let init = () => {};
+
+	let config = null;
+
+	let selectedModelId = '';
+	let defaultModelIds = [];
+	let modelIds = [];
+
+	let loading = false;
+	let showResetModal = false;
+
+	const submitHandler = async () => {
+		loading = true;
+
+		const res = await setModelsConfig(localStorage.token, {
+			DEFAULT_MODELS: defaultModelIds.join(','),
+			MODEL_ORDER_LIST: modelIds
+		});
+
+		if (res) {
+			toast.success($i18n.t('Models configuration saved successfully'));
+			init();
+			show = false;
+		} else {
+			toast.error($i18n.t('Failed to save models configuration'));
+		}
+
+		loading = false;
+	};
+
+	onMount(async () => {
+		config = await getModelsConfig(localStorage.token);
+
+		if (config?.DEFAULT_MODELS) {
+			defaultModelIds = (config?.DEFAULT_MODELS).split(',').filter((id) => id);
+		} else {
+			defaultModelIds = [];
+		}
+		const modelOrderList = config.MODEL_ORDER_LIST || [];
+		const allModelIds = $models.map((model) => model.id);
+
+		// Create a Set for quick lookup of ordered IDs
+		const orderedSet = new Set(modelOrderList);
+
+		modelIds = [
+			// Add all IDs from MODEL_ORDER_LIST that exist in allModelIds
+			...modelOrderList.filter((id) => orderedSet.has(id) && allModelIds.includes(id)),
+			// Add remaining IDs not in MODEL_ORDER_LIST, sorted alphabetically
+			...allModelIds.filter((id) => !orderedSet.has(id)).sort((a, b) => a.localeCompare(b))
+		];
+	});
+</script>
+
+<ConfirmDialog
+	title={$i18n.t('Reset All Models')}
+	message={$i18n.t('This will delete all models including custom models and cannot be undone.')}
+	bind:show={showResetModal}
+	onConfirm={async () => {
+		const res = deleteAllModels(localStorage.token);
+		if (res) {
+			toast.success($i18n.t('All models deleted successfully'));
+			init();
+		}
+	}}
+/>
+
+<Modal size="sm" bind:show>
+	<div>
+		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
+			<div class=" text-lg font-medium self-center font-primary">
+				{$i18n.t('Configure Models')}
+			</div>
+			<button
+				class="self-center"
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-5 h-5"
+				>
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
+			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
+				{#if config}
+					<form
+						class="flex flex-col w-full"
+						on:submit|preventDefault={() => {
+							submitHandler();
+						}}
+					>
+						<div>
+							<div class="flex flex-col w-full">
+								<div class="mb-1 flex justify-between">
+									<div class="text-xs text-gray-500">{$i18n.t('Reorder Models')}</div>
+								</div>
+
+								<ModelList bind:modelIds />
+							</div>
+						</div>
+
+						<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
+
+						<div>
+							<div class="flex flex-col w-full">
+								<div class="mb-1 flex justify-between">
+									<div class="text-xs text-gray-500">{$i18n.t('Default Models')}</div>
+								</div>
+
+								{#if defaultModelIds.length > 0}
+									<div class="flex flex-col">
+										{#each defaultModelIds as modelId, modelIdx}
+											<div class=" flex gap-2 w-full justify-between items-center">
+												<div class=" text-sm flex-1 py-1 rounded-lg">
+													{$models.find((model) => model.id === modelId)?.name}
+												</div>
+												<div class="flex-shrink-0">
+													<button
+														type="button"
+														on:click={() => {
+															defaultModelIds = defaultModelIds.filter(
+																(_, idx) => idx !== modelIdx
+															);
+														}}
+													>
+														<Minus strokeWidth="2" className="size-3.5" />
+													</button>
+												</div>
+											</div>
+										{/each}
+									</div>
+								{:else}
+									<div class="text-gray-500 text-xs text-center py-2">
+										{$i18n.t('No models selected')}
+									</div>
+								{/if}
+
+								<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
+
+								<div class="flex items-center">
+									<select
+										class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
+											? ''
+											: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
+										bind:value={selectedModelId}
+									>
+										<option value="">{$i18n.t('Select a model')}</option>
+										{#each $models as model}
+											<option value={model.id} class="bg-gray-50 dark:bg-gray-700"
+												>{model.name}</option
+											>
+										{/each}
+									</select>
+
+									<div>
+										<button
+											type="button"
+											on:click={() => {
+												if (selectedModelId === '') {
+													return;
+												}
+
+												if (defaultModelIds.includes(selectedModelId)) {
+													return;
+												}
+
+												defaultModelIds = [...defaultModelIds, selectedModelId];
+												selectedModelId = '';
+											}}
+										>
+											<Plus className="size-3.5" strokeWidth="2" />
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="flex justify-between pt-3 text-sm font-medium gap-1.5">
+							<Tooltip content={$i18n.t('This will delete all models including custom models')}>
+								<button
+									class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-950 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
+									type="button"
+									on:click={() => {
+										showResetModal = true;
+									}}
+								>
+									<!-- {$i18n.t('Delete All Models')} -->
+									{$i18n.t('Reset All Models')}
+								</button>
+							</Tooltip>
+
+							<button
+								class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
+									? ' cursor-not-allowed'
+									: ''}"
+								type="submit"
+								disabled={loading}
+							>
+								{$i18n.t('Save')}
+
+								{#if loading}
+									<div class="ml-2 self-center">
+										<svg
+											class=" w-4 h-4"
+											viewBox="0 0 24 24"
+											fill="currentColor"
+											xmlns="http://www.w3.org/2000/svg"
+											><style>
+												.spinner_ajPY {
+													transform-origin: center;
+													animation: spinner_AtaB 0.75s infinite linear;
+												}
+												@keyframes spinner_AtaB {
+													100% {
+														transform: rotate(360deg);
+													}
+												}
+											</style><path
+												d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+												opacity=".25"
+											/><path
+												d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+												class="spinner_ajPY"
+											/></svg
+										>
+									</div>
+								{/if}
+							</button>
+						</div>
+					</form>
+				{:else}
+					<div>
+						<Spinner />
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</Modal>

src/lib/components/admin/Settings/Models/ModelList.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import Sortable from 'sortablejs';
+
+	import { createEventDispatcher, getContext, onMount } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import { models } from '$lib/stores';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import EllipsisVertical from '$lib/components/icons/EllipsisVertical.svelte';
+
+	export let modelIds = [];
+
+	let sortable = null;
+	let modelListElement = null;
+
+	const positionChangeHandler = () => {
+		const modelList = Array.from(modelListElement.children).map((child) =>
+			child.id.replace('model-item-', '')
+		);
+
+		modelIds = modelList;
+	};
+
+	onMount(() => {
+		sortable = Sortable.create(modelListElement, {
+			animation: 150,
+			onUpdate: async (event) => {
+				positionChangeHandler();
+			}
+		});
+	});
+</script>
+
+{#if modelIds.length > 0}
+	<div class="flex flex-col -translate-x-1" bind:this={modelListElement}>
+		{#each modelIds as modelId, modelIdx (modelId)}
+			<div class=" flex gap-2 w-full justify-between items-center" id="model-item-{modelId}">
+				<Tooltip content={modelId} placement="top-start">
+					<div class="flex items-center gap-1">
+						<EllipsisVertical className="size-4 cursor-move" />
+
+						<div class=" text-sm flex-1 py-1 rounded-lg">
+							{#if $models.find((model) => model.id === modelId)}
+								{$models.find((model) => model.id === modelId).name}
+							{:else}
+								{modelId}
+							{/if}
+						</div>
+					</div>
+				</Tooltip>
+			</div>
+		{/each}
+	</div>
+{:else}
+	<div class="text-gray-500 text-xs text-center py-2">
+		{$i18n.t('No models found')}
+	</div>
+{/if}

src/lib/components/admin/Settings/WebSearch.svelte

@@ -29,13 +29,15 @@
 
 	let youtubeLanguage = 'en';
 	let youtubeTranslation = null;
+	let youtubeProxyUrl = '';
 
 	const submitHandler = async () => {
 		const res = await updateRAGConfig(localStorage.token, {
 			web: webConfig,
 			youtube: {
 				language: youtubeLanguage.split(',').map((lang) => lang.trim()),
-				translation: youtubeTranslation
+				translation: youtubeTranslation,
+				proxy_url: youtubeProxyUrl
 			}
 		});
 	};
@@ -48,6 +50,7 @@
 
 			youtubeLanguage = res.youtube.language.join(',');
 			youtubeTranslation = res.youtube.translation;
+			youtubeProxyUrl = res.youtube.proxy_url;
 		}
 	});
 </script>
@@ -358,6 +361,21 @@
 						</div>
 					</div>
 				</div>
+
+				<div>
+					<div class=" py-0.5 flex w-full justify-between">
+						<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Proxy URL')}</div>
+						<div class=" flex-1 self-center">
+							<input
+								class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+								type="text"
+								placeholder={$i18n.t('Enter proxy URL (e.g. https://user:password@host:port)')}
+								bind:value={youtubeProxyUrl}
+								autocomplete="off"
+							/>
+						</div>
+					</div>
+				</div>
 			</div>
 		{/if}
 	</div>

src/lib/components/admin/Users/UserList/UserChatsModal.svelte

@@ -9,13 +9,14 @@
 
 	import Modal from '$lib/components/common/Modal.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
 
 	const i18n = getContext('i18n');
 
 	export let show = false;
 	export let user;
 
-	let chats = [];
+	let chats = null;
 
 	const deleteChatHandler = async (chatId) => {
 		const res = await deleteChatById(localStorage.token, chatId).catch((error) => {
@@ -31,6 +32,8 @@
 				chats = await getChatListByUserId(localStorage.token, user.id);
 			}
 		})();
+	} else {
+		chats = null;
 	}
 
 	let sortKey = 'updated_at'; // default sort key
@@ -46,33 +49,32 @@
 </script>
 
 <Modal size="lg" bind:show>
-	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
-			<div class=" text-lg font-medium self-center capitalize">
-				{$i18n.t("{{user}}'s Chats", { user: user.name })}
-			</div>
-			<button
-				class="self-center"
-				on:click={() => {
-					show = false;
-				}}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-					class="w-5 h-5"
-				>
-					<path
-						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-					/>
-				</svg>
-			</button>
+	<div class=" flex justify-between dark:text-gray-300 px-5 pt-4">
+		<div class=" text-lg font-medium self-center capitalize">
+			{$i18n.t("{{user}}'s Chats", { user: user.name })}
 		</div>
-		<hr class=" dark:border-gray-850" />
+		<button
+			class="self-center"
+			on:click={() => {
+				show = false;
+			}}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="w-5 h-5"
+			>
+				<path
+					d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+				/>
+			</svg>
+		</button>
+	</div>
 
-		<div class="flex flex-col md:flex-row w-full px-5 py-4 md:space-x-4 dark:text-gray-200">
-			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
+	<div class="flex flex-col md:flex-row w-full px-5 pt-2 pb-4 md:space-x-4 dark:text-gray-200">
+		<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
+			{#if chats}
 				{#if chats.length > 0}
 					<div class="text-left text-sm w-full mb-4 max-h-[22rem] overflow-y-scroll">
 						<div class="relative overflow-x-auto">
@@ -176,7 +178,9 @@
 						{$i18n.t('has no conversations.')}
 					</div>
 				{/if}
-			</div>
+			{:else}
+				<Spinner />
+			{/if}
 		</div>
 	</div>
 </Modal>

src/lib/components/chat/Chat.svelte

@@ -2284,7 +2284,7 @@
 							</div>
 						</div>
 
-						<div class=" pb-[1.6rem]">
+						<div class=" pb-[1rem]">
 							<MessageInput
 								{history}
 								{selectedModels}
@@ -2319,9 +2319,9 @@
 							/>
 
 							<div
-								class="absolute bottom-1.5 text-xs text-gray-500 text-center line-clamp-1 right-0 left-0"
+								class="absolute bottom-1 text-xs text-gray-500 text-center line-clamp-1 right-0 left-0"
 							>
-								{$i18n.t('LLMs can make mistakes. Verify important information.')}
+								<!-- {$i18n.t('LLMs can make mistakes. Verify important information.')} -->
 							</div>
 						</div>
 					{:else}

src/lib/components/chat/MessageInput.svelte

@@ -18,7 +18,7 @@
 		showControls
 	} from '$lib/stores';
 
-	import { blobToFile, findWordIndices } from '$lib/utils';
+	import { blobToFile, createMessagesList, findWordIndices } from '$lib/utils';
 	import { transcribeAudio } from '$lib/apis/audio';
 	import { uploadFile } from '$lib/apis/files';
 	import { getTools } from '$lib/apis/tools';
@@ -34,6 +34,8 @@
 	import Commands from './MessageInput/Commands.svelte';
 	import XMark from '../icons/XMark.svelte';
 	import RichTextInput from '../common/RichTextInput.svelte';
+	import { generateAutoCompletion } from '$lib/apis';
+	import { error, text } from '@sveltejs/kit';
 
 	const i18n = getContext('i18n');
 
@@ -47,6 +49,9 @@
 	export let atSelectedModel: Model | undefined;
 	export let selectedModels: [''];
 
+	let selectedModelIds = [];
+	$: selectedModelIds = atSelectedModel !== undefined ? [atSelectedModel.id] : selectedModels;
+
 	export let history;
 
 	export let prompt = '';
@@ -266,8 +271,8 @@
 
 {#if loaded}
 	<div class="w-full font-primary">
-		<div class=" -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
-			<div class="flex flex-col px-2.5 max-w-6xl w-full">
+		<div class=" mx-auto inset-x-0 bg-transparent flex justify-center">
+			<div class="flex flex-col px-3 max-w-6xl w-full">
 				<div class="relative">
 					{#if autoScroll === false && history?.currentId}
 						<div
@@ -300,7 +305,7 @@
 				<div class="w-full relative">
 					{#if atSelectedModel !== undefined || selectedToolIds.length > 0 || webSearchEnabled}
 						<div
-							class="px-4 pb-0.5 pt-1.5 text-left w-full flex flex-col absolute bottom-0 left-0 right-0 bg-gradient-to-t from-white dark:from-gray-900 z-10"
+							class="px-3 pb-0.5 pt-1.5 text-left w-full flex flex-col absolute bottom-0 left-0 right-0 bg-gradient-to-t from-white dark:from-gray-900 z-10"
 						>
 							{#if selectedToolIds.length > 0}
 								<div class="flex items-center justify-between w-full">
@@ -405,7 +410,7 @@
 		</div>
 
 		<div class="{transparentBackground ? 'bg-transparent' : 'bg-white dark:bg-gray-900'} ">
-			<div class="max-w-6xl px-4 mx-auto inset-x-0">
+			<div class="max-w-6xl px-2.5 mx-auto inset-x-0">
 				<div class="">
 					<input
 						bind:this={filesInputElement}
@@ -457,7 +462,7 @@
 							}}
 						>
 							<div
-								class="flex-1 flex flex-col relative w-full rounded-3xl px-1.5 bg-gray-50 dark:bg-gray-850 dark:text-gray-100"
+								class="flex-1 flex flex-col relative w-full rounded-3xl px-1 bg-gray-50 dark:bg-gray-400/5 dark:text-gray-100"
 								dir={$settings?.chatDirection ?? 'LTR'}
 							>
 								{#if files.length > 0}
@@ -542,7 +547,7 @@
 								{/if}
 
 								<div class=" flex">
-									<div class=" ml-0.5 self-end mb-1.5 flex space-x-1">
+									<div class="ml-1 self-end mb-1.5 flex space-x-1">
 										<InputMenu
 											bind:webSearchEnabled
 											bind:selectedToolIds
@@ -557,18 +562,18 @@
 											}}
 										>
 											<button
-												class="bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-2 outline-none focus:outline-none"
+												class="bg-transparent hover:bg-white/80 text-gray-800 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-2 outline-none focus:outline-none"
 												type="button"
 												aria-label="More"
 											>
 												<svg
 													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
+													viewBox="0 0 20 20"
 													fill="currentColor"
 													class="size-5"
 												>
 													<path
-														d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
+														d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
 													/>
 												</svg>
 											</button>
@@ -577,10 +582,11 @@
 
 									{#if $settings?.richTextInput ?? true}
 										<div
-											class="scrollbar-hidden text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-2.5 px-1 rounded-xl resize-none h-fit max-h-60 overflow-auto"
+											class="scrollbar-hidden text-left bg-transparent dark:text-gray-100 outline-none w-full py-2.5 px-1 rounded-xl resize-none h-fit max-h-80 overflow-auto"
 										>
 											<RichTextInput
 												bind:this={chatInputElement}
+												bind:value={prompt}
 												id="chat-input"
 												messageInput={true}
 												shiftEnter={!$mobile ||
@@ -591,29 +597,27 @@
 													)}
 												placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
 												largeTextAsFile={$settings?.largeTextAsFile ?? false}
-												bind:value={prompt}
-												on:enter={async (e) => {
-													const commandsContainerElement =
-														document.getElementById('commands-container');
-													if (commandsContainerElement) {
-														e.preventDefault();
-
-														const commandOptionButton = [
-															...document.getElementsByClassName('selected-command-option-button')
-														]?.at(-1);
-
-														if (commandOptionButton) {
-															commandOptionButton?.click();
-															return;
-														}
+												autocomplete={true}
+												generateAutoCompletion={async (text) => {
+													if (selectedModelIds.length === 0 || !selectedModelIds.at(0)) {
+														toast.error($i18n.t('Please select a model first.'));
 													}
 
-													if (prompt !== '') {
-														dispatch('submit', prompt);
-													}
-												}}
-												on:keypress={(e) => {
-													e = e.detail.event;
+													const res = await generateAutoCompletion(
+														localStorage.token,
+														selectedModelIds.at(0),
+														text,
+														history?.currentId
+															? createMessagesList(history, history.currentId)
+															: null
+													).catch((error) => {
+														console.log(error);
+
+														return null;
+													});
+
+													console.log(res);
+													return res;
 												}}
 												on:keydown={async (e) => {
 													e = e.detail.event;
@@ -657,34 +661,70 @@
 														editButton?.click();
 													}
 
-													if (commandsContainerElement && e.key === 'ArrowUp') {
-														e.preventDefault();
-														commandsElement.selectUp();
+													if (commandsContainerElement) {
+														if (commandsContainerElement && e.key === 'ArrowUp') {
+															e.preventDefault();
+															commandsElement.selectUp();
+
+															const commandOptionButton = [
+																...document.getElementsByClassName('selected-command-option-button')
+															]?.at(-1);
+															commandOptionButton.scrollIntoView({ block: 'center' });
+														}
 
-														const commandOptionButton = [
-															...document.getElementsByClassName('selected-command-option-button')
-														]?.at(-1);
-														commandOptionButton.scrollIntoView({ block: 'center' });
-													}
+														if (commandsContainerElement && e.key === 'ArrowDown') {
+															e.preventDefault();
+															commandsElement.selectDown();
 
-													if (commandsContainerElement && e.key === 'ArrowDown') {
-														e.preventDefault();
-														commandsElement.selectDown();
+															const commandOptionButton = [
+																...document.getElementsByClassName('selected-command-option-button')
+															]?.at(-1);
+															commandOptionButton.scrollIntoView({ block: 'center' });
+														}
 
-														const commandOptionButton = [
-															...document.getElementsByClassName('selected-command-option-button')
-														]?.at(-1);
-														commandOptionButton.scrollIntoView({ block: 'center' });
-													}
+														if (commandsContainerElement && e.key === 'Tab') {
+															e.preventDefault();
 
-													if (commandsContainerElement && e.key === 'Tab') {
-														e.preventDefault();
+															const commandOptionButton = [
+																...document.getElementsByClassName('selected-command-option-button')
+															]?.at(-1);
 
-														const commandOptionButton = [
-															...document.getElementsByClassName('selected-command-option-button')
-														]?.at(-1);
+															commandOptionButton?.click();
+														}
 
-														commandOptionButton?.click();
+														if (commandsContainerElement && e.key === 'Enter') {
+															e.preventDefault();
+
+															const commandOptionButton = [
+																...document.getElementsByClassName('selected-command-option-button')
+															]?.at(-1);
+
+															if (commandOptionButton) {
+																commandOptionButton?.click();
+															} else {
+																document.getElementById('send-message-button')?.click();
+															}
+														}
+													} else {
+														if (
+															!$mobile ||
+															!(
+																'ontouchstart' in window ||
+																navigator.maxTouchPoints > 0 ||
+																navigator.msMaxTouchPoints > 0
+															)
+														) {
+															// Prevent Enter key from creating a new line
+															// Uses keyCode '13' for Enter key for chinese/japanese keyboards
+															if (e.keyCode === 13 && !e.shiftKey) {
+																e.preventDefault();
+															}
+
+															// Submit the prompt when Enter key is pressed
+															if (prompt !== '' && e.keyCode === 13 && !e.shiftKey) {
+																dispatch('submit', prompt);
+															}
+														}
 													}
 
 													if (e.key === 'Escape') {
@@ -867,7 +907,7 @@
 													}
 
 													e.target.style.height = '';
-													e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
+													e.target.style.height = Math.min(e.target.scrollHeight, 320) + 'px';
 												}
 
 												if (e.key === 'Escape') {
@@ -880,11 +920,11 @@
 											rows="1"
 											on:input={async (e) => {
 												e.target.style.height = '';
-												e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
+												e.target.style.height = Math.min(e.target.scrollHeight, 320) + 'px';
 											}}
 											on:focus={async (e) => {
 												e.target.style.height = '';
-												e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
+												e.target.style.height = Math.min(e.target.scrollHeight, 320) + 'px';
 											}}
 											on:paste={async (e) => {
 												const clipboardData = e.clipboardData || window.clipboardData;
@@ -927,12 +967,12 @@
 										/>
 									{/if}
 
-									<div class="self-end mb-2 flex space-x-1 mr-1">
+									<div class="self-end mb-1.5 flex space-x-1 mr-1">
 										{#if !history?.currentId || history.messages[history.currentId]?.done == true}
 											<Tooltip content={$i18n.t('Record voice')}>
 												<button
 													id="voice-input-button"
-													class=" text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-1.5 mr-0.5 self-center"
+													class=" text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 transition rounded-full p-1.5 mr-0.5 self-center"
 													type="button"
 													on:click={async () => {
 														try {
@@ -976,112 +1016,113 @@
 												</button>
 											</Tooltip>
 										{/if}
-									</div>
-								</div>
-							</div>
-							<div class="flex items-end w-10">
-								{#if !history.currentId || history.messages[history.currentId]?.done == true}
-									{#if prompt === ''}
-										<div class=" flex items-center mb-1">
-											<Tooltip content={$i18n.t('Call')}>
-												<button
-													class=" text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-2 self-center"
-													type="button"
-													on:click={async () => {
-														if (selectedModels.length > 1) {
-															toast.error($i18n.t('Select only one model to call'));
 
-															return;
-														}
+										{#if !history.currentId || history.messages[history.currentId]?.done == true}
+											{#if prompt === ''}
+												<div class=" flex items-center">
+													<Tooltip content={$i18n.t('Call')}>
+														<button
+															class=" bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full p-2 self-center"
+															type="button"
+															on:click={async () => {
+																if (selectedModels.length > 1) {
+																	toast.error($i18n.t('Select only one model to call'));
 
-														if ($config.audio.stt.engine === 'web') {
-															toast.error(
-																$i18n.t('Call feature is not supported when using Web STT engine')
-															);
+																	return;
+																}
 
-															return;
-														}
-														// check if user has access to getUserMedia
-														try {
-															let stream = await navigator.mediaDevices.getUserMedia({
-																audio: true
-															});
-															// If the user grants the permission, proceed to show the call overlay
+																if ($config.audio.stt.engine === 'web') {
+																	toast.error(
+																		$i18n.t(
+																			'Call feature is not supported when using Web STT engine'
+																		)
+																	);
 
-															if (stream) {
-																const tracks = stream.getTracks();
-																tracks.forEach((track) => track.stop());
-															}
+																	return;
+																}
+																// check if user has access to getUserMedia
+																try {
+																	let stream = await navigator.mediaDevices.getUserMedia({
+																		audio: true
+																	});
+																	// If the user grants the permission, proceed to show the call overlay
 
-															stream = null;
+																	if (stream) {
+																		const tracks = stream.getTracks();
+																		tracks.forEach((track) => track.stop());
+																	}
 
-															showCallOverlay.set(true);
-															showControls.set(true);
-														} catch (err) {
-															// If the user denies the permission or an error occurs, show an error message
-															toast.error(
-																$i18n.t('Permission denied when accessing media devices')
-															);
-														}
-													}}
-													aria-label="Call"
-												>
-													<Headphone className="size-6" />
-												</button>
-											</Tooltip>
-										</div>
-									{:else}
-										<div class=" flex items-center mb-1">
-											<Tooltip content={$i18n.t('Send message')}>
-												<button
-													id="send-message-button"
-													class="{prompt !== ''
-														? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
-														: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 m-0.5 self-center"
-													type="submit"
-													disabled={prompt === ''}
-												>
-													<svg
-														xmlns="http://www.w3.org/2000/svg"
-														viewBox="0 0 16 16"
-														fill="currentColor"
-														class="size-6"
+																	stream = null;
+
+																	showCallOverlay.set(true);
+																	showControls.set(true);
+																} catch (err) {
+																	// If the user denies the permission or an error occurs, show an error message
+																	toast.error(
+																		$i18n.t('Permission denied when accessing media devices')
+																	);
+																}
+															}}
+															aria-label="Call"
+														>
+															<Headphone className="size-5" />
+														</button>
+													</Tooltip>
+												</div>
+											{:else}
+												<div class=" flex items-center">
+													<Tooltip content={$i18n.t('Send message')}>
+														<button
+															id="send-message-button"
+															class="{prompt !== ''
+																? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
+																: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 self-center"
+															type="submit"
+															disabled={prompt === ''}
+														>
+															<svg
+																xmlns="http://www.w3.org/2000/svg"
+																viewBox="0 0 16 16"
+																fill="currentColor"
+																class="size-6"
+															>
+																<path
+																	fill-rule="evenodd"
+																	d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
+																	clip-rule="evenodd"
+																/>
+															</svg>
+														</button>
+													</Tooltip>
+												</div>
+											{/if}
+										{:else}
+											<div class=" flex items-center">
+												<Tooltip content={$i18n.t('Stop')}>
+													<button
+														class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5"
+														on:click={() => {
+															stopResponse();
+														}}
 													>
-														<path
-															fill-rule="evenodd"
-															d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
-															clip-rule="evenodd"
-														/>
-													</svg>
-												</button>
-											</Tooltip>
-										</div>
-									{/if}
-								{:else}
-									<div class=" flex items-center mb-1.5">
-										<Tooltip content={$i18n.t('Stop')}>
-											<button
-												class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5"
-												on:click={() => {
-													stopResponse();
-												}}
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 24 24"
-													fill="currentColor"
-													class="size-6"
-												>
-													<path
-														fill-rule="evenodd"
-														d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm6-2.438c0-.724.588-1.312 1.313-1.312h4.874c.725 0 1.313.588 1.313 1.313v4.874c0 .725-.588 1.313-1.313 1.313H9.564a1.312 1.312 0 01-1.313-1.313V9.564z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											</button>
-										</Tooltip>
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															viewBox="0 0 24 24"
+															fill="currentColor"
+															class="size-6"
+														>
+															<path
+																fill-rule="evenodd"
+																d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm6-2.438c0-.724.588-1.312 1.313-1.312h4.874c.725 0 1.313.588 1.313 1.313v4.874c0 .725-.588 1.313-1.313 1.313H9.564a1.312 1.312 0 01-1.313-1.313V9.564z"
+																clip-rule="evenodd"
+															/>
+														</svg>
+													</button>
+												</Tooltip>
+											</div>
+										{/if}
 									</div>
-								{/if}
+								</div>
 							</div>
 						</form>
 					{/if}

src/lib/components/chat/MessageInput/Commands.svelte

@@ -106,7 +106,7 @@
 	{:else}
 		<div
 			id="commands-container"
-			class="pl-3 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
+			class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
 		>
 			<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850">
 				<div

src/lib/components/chat/MessageInput/Commands/Knowledge.svelte

@@ -159,7 +159,7 @@
 {#if filteredItems.length > 0 || prompt.split(' ')?.at(0)?.substring(1).startsWith('http')}
 	<div
 		id="commands-container"
-		class="pl-3 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
+		class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
 	>
 		<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850">
 			<div

src/lib/components/chat/MessageInput/Commands/Models.svelte

@@ -68,7 +68,7 @@
 {#if filteredItems.length > 0}
 	<div
 		id="commands-container"
-		class="pl-3 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
+		class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
 	>
 		<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850">
 			<div

src/lib/components/chat/MessageInput/Commands/Prompts.svelte

@@ -137,7 +137,7 @@
 {#if filteredPrompts.length > 0}
 	<div
 		id="commands-container"
-		class="pl-3 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
+		class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
 	>
 		<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850">
 			<div

src/lib/components/chat/Messages/Error.svelte

@@ -4,9 +4,9 @@
 	export let content = '';
 </script>
 
-<div class="flex my-2 gap-2.5 border px-4 py-3 border-red-800 bg-red-800/30 rounded-lg">
+<div class="flex my-2 gap-2.5 border px-4 py-3 border-red-600/10 bg-red-600/10 rounded-lg">
 	<div class=" self-start mt-0.5">
-		<Info className="size-5" />
+		<Info className="size-5 text-red-700 dark:text-red-400" />
 	</div>
 
 	<div class=" self-center text-sm">

src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte

@@ -60,7 +60,7 @@
 <!-- {JSON.stringify(tokens)} -->
 {#each tokens as token, tokenIdx (tokenIdx)}
 	{#if token.type === 'hr'}
-		<hr />
+		<hr class=" border-gray-50 dark:border-gray-850" />
 	{:else if token.type === 'heading'}
 		<svelte:element this={headerComponent(token.depth)}>
 			<MarkdownInlineTokens id={`${id}-${tokenIdx}-h`} tokens={token.tokens} {onSourceClick} />
@@ -89,11 +89,9 @@
 		{/if}
 	{:else if token.type === 'table'}
 		<div class="relative w-full group">
-			<div
-				class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-lg"
-			>
+			<div class="scrollbar-hidden relative overflow-x-auto max-w-full rounded-lg">
 				<table
-					class="table-auto w-full text-sm text-left text-gray-500 dark:text-gray-400 max-w-full rounded-xl"
+					class=" w-full text-sm text-left text-gray-500 dark:text-gray-400 max-w-full rounded-xl"
 				>
 					<thead
 						class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 border-none"
@@ -102,15 +100,17 @@
 							{#each token.header as header, headerIdx}
 								<th
 									scope="col"
-									class="!px-2 !py-1.5 cursor-pointer select-none border border-gray-50 dark:border-gray-850"
+									class="!px-3 !py-1.5 cursor-pointer select-none border border-gray-50 dark:border-gray-850"
 									style={token.align[headerIdx] ? '' : `text-align: ${token.align[headerIdx]}`}
 								>
-									<div class="flex gap-1.5 items-center">
-										<MarkdownInlineTokens
-											id={`${id}-${tokenIdx}-header-${headerIdx}`}
-											tokens={header.tokens}
-											{onSourceClick}
-										/>
+									<div class="flex flex-col gap-1.5 text-left">
+										<div class="flex-shrink-0 break-normal">
+											<MarkdownInlineTokens
+												id={`${id}-${tokenIdx}-header-${headerIdx}`}
+												tokens={header.tokens}
+												{onSourceClick}
+											/>
+										</div>
 									</div>
 								</th>
 							{/each}
@@ -121,10 +121,10 @@
 							<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
 								{#each row ?? [] as cell, cellIdx}
 									<td
-										class="!px-2 !py-1.5 font-medium text-gray-900 dark:text-white w-max border border-gray-50 dark:border-gray-850"
+										class="!px-3 !py-1.5 text-gray-900 dark:text-white w-max border border-gray-50 dark:border-gray-850"
 										style={token.align[cellIdx] ? '' : `text-align: ${token.align[cellIdx]}`}
 									>
-										<div class="flex">
+										<div class="flex flex-col break-normal">
 											<MarkdownInlineTokens
 												id={`${id}-${tokenIdx}-row-${rowIdx}-${cellIdx}`}
 												tokens={cell.tokens}

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -658,7 +658,7 @@
 									/>
 								{/if}
 
-								{#if message.error}
+								{#if message?.error}
 									<Error content={message?.error?.content ?? message.content} />
 								{/if}
 

src/lib/components/chat/ModelSelector.svelte

@@ -5,9 +5,7 @@
 	import Selector from './ModelSelector/Selector.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 
-	import { setDefaultModels } from '$lib/apis/configs';
 	import { updateUserSettings } from '$lib/apis/users';
-
 	const i18n = getContext('i18n');
 
 	export let selectedModels = [''];

src/lib/components/chat/Settings/General.svelte

@@ -55,6 +55,7 @@
 		mirostat_tau: null,
 		top_k: null,
 		top_p: null,
+		min_p: null,
 		stop: null,
 		tfs_z: null,
 		num_ctx: null,
@@ -340,6 +341,7 @@
 						mirostat_tau: params.mirostat_tau !== null ? params.mirostat_tau : undefined,
 						top_k: params.top_k !== null ? params.top_k : undefined,
 						top_p: params.top_p !== null ? params.top_p : undefined,
+						min_p: params.min_p !== null ? params.min_p : undefined,
 						tfs_z: params.tfs_z !== null ? params.tfs_z : undefined,
 						num_ctx: params.num_ctx !== null ? params.num_ctx : undefined,
 						num_batch: params.num_batch !== null ? params.num_batch : undefined,

src/lib/components/common/FileItem.svelte

@@ -5,6 +5,7 @@
 	import FileItemModal from './FileItemModal.svelte';
 	import GarbageBin from '../icons/GarbageBin.svelte';
 	import Spinner from './Spinner.svelte';
+	import Tooltip from './Tooltip.svelte';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
@@ -18,6 +19,7 @@
 
 	export let item = null;
 	export let edit = false;
+	export let small = false;
 
 	export let name: string;
 	export let type: string;
@@ -31,7 +33,9 @@
 {/if}
 
 <button
-	class="relative group p-1.5 {className} flex items-center {colorClassName} rounded-2xl text-left"
+	class="relative group p-1.5 {className} flex items-center gap-1 {colorClassName} {small
+		? 'rounded-xl'
+		: 'rounded-2xl'} text-left"
 	type="button"
 	on:click={async () => {
 		if (item?.file?.data?.content) {
@@ -49,48 +53,66 @@
 		dispatch('click');
 	}}
 >
-	<div class="p-3 bg-black/20 dark:bg-white/10 text-white rounded-xl">
-		{#if !loading}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				fill="currentColor"
-				class=" size-5"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
-					clip-rule="evenodd"
-				/>
-				<path
-					d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
-				/>
-			</svg>
-		{:else}
-			<Spinner />
-		{/if}
-	</div>
-
-	<div class="flex flex-col justify-center -space-y-0.5 ml-1 px-2.5 w-full">
-		<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
-			{name}
-		</div>
-
-		<div class=" flex justify-between text-gray-500 text-xs line-clamp-1">
-			{#if type === 'file'}
-				{$i18n.t('File')}
-			{:else if type === 'doc'}
-				{$i18n.t('Document')}
-			{:else if type === 'collection'}
-				{$i18n.t('Collection')}
+	{#if !small}
+		<div class="p-3 bg-black/20 dark:bg-white/10 text-white rounded-xl">
+			{#if !loading}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="currentColor"
+					class=" size-5"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
+						clip-rule="evenodd"
+					/>
+					<path
+						d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
+					/>
+				</svg>
 			{:else}
-				<span class=" capitalize line-clamp-1">{type}</span>
-			{/if}
-			{#if size}
-				<span class="capitalize">{formatFileSize(size)}</span>
+				<Spinner />
 			{/if}
 		</div>
-	</div>
+	{/if}
+
+	{#if !small}
+		<div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
+			<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
+				{name}
+			</div>
+
+			<div class=" flex justify-between text-gray-500 text-xs line-clamp-1">
+				{#if type === 'file'}
+					{$i18n.t('File')}
+				{:else if type === 'doc'}
+					{$i18n.t('Document')}
+				{:else if type === 'collection'}
+					{$i18n.t('Collection')}
+				{:else}
+					<span class=" capitalize line-clamp-1">{type}</span>
+				{/if}
+				{#if size}
+					<span class="capitalize">{formatFileSize(size)}</span>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<Tooltip content={name} className="flex flex-col w-full" placement="top-start">
+			<div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
+				<div class=" dark:text-gray-100 text-sm flex justify-between items-center">
+					{#if loading}
+						<div class=" shrink-0 mr-2">
+							<Spinner className="size-4" />
+						</div>
+					{/if}
+					<div class="font-medium line-clamp-1 flex-1">{name}</div>
+					<div class="text-gray-500 text-xs capitalize shrink-0">{formatFileSize(size)}</div>
+				</div>
+			</div>
+		</Tooltip>
+	{/if}
 
 	{#if dismissible}
 		<div class=" absolute -top-1 -right-1">

src/lib/components/common/Modal.svelte

@@ -6,7 +6,9 @@
 
 	export let show = true;
 	export let size = 'md';
-	export let className = 'bg-gray-50 dark:bg-gray-900  rounded-2xl';
+
+	export let containerClassName = 'p-3';
+	export let className = 'bg-gray-50 dark:bg-gray-900 rounded-2xl';
 
 	let modalElement = null;
 	let mounted = false;
@@ -65,7 +67,7 @@
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		bind:this={modalElement}
-		class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[9999] overflow-hidden overscroll-contain"
+		class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex justify-center z-[9999] overflow-y-auto overscroll-contain"
 		in:fade={{ duration: 10 }}
 		on:mousedown={() => {
 			show = false;
@@ -74,7 +76,7 @@
 		<div
 			class=" m-auto max-w-full {sizeToWidth(size)} {size !== 'full'
 				? 'mx-2'
-				: ''} shadow-3xl max-h-[100dvh] overflow-y-auto scrollbar-hidden {className}"
+				: ''} shadow-3xl min-h-fit scrollbar-hidden {className}"
 			in:flyAndScale
 			on:mousedown={(e) => {
 				e.stopPropagation();

src/lib/components/common/RichTextInput.svelte

@@ -2,7 +2,8 @@
 	import { marked } from 'marked';
 	import TurndownService from 'turndown';
 	const turndownService = new TurndownService({
-		codeBlockStyle: 'fenced'
+		codeBlockStyle: 'fenced',
+		headingStyle: 'atx'
 	});
 	turndownService.escape = (string) => string;
 
@@ -10,16 +11,18 @@
 	import { createEventDispatcher } from 'svelte';
 	const eventDispatch = createEventDispatcher();
 
-	import { EditorState, Plugin, TextSelection } from 'prosemirror-state';
+	import { EditorState, Plugin, PluginKey, TextSelection } from 'prosemirror-state';
+	import { Decoration, DecorationSet } from 'prosemirror-view';
 
 	import { Editor } from '@tiptap/core';
 
+	import { AIAutocompletion } from './RichTextInput/AutoCompletion.js';
+
 	import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
 	import Placeholder from '@tiptap/extension-placeholder';
 	import Highlight from '@tiptap/extension-highlight';
 	import Typography from '@tiptap/extension-typography';
 	import StarterKit from '@tiptap/starter-kit';
-
 	import { all, createLowlight } from 'lowlight';
 
 	import { PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';
@@ -32,6 +35,9 @@
 	export let value = '';
 	export let id = '';
 
+	export let preserveBreaks = false;
+	export let generateAutoCompletion: Function = async () => null;
+	export let autocomplete = false;
 	export let messageInput = false;
 	export let shiftEnter = false;
 	export let largeTextAsFile = false;
@@ -120,10 +126,23 @@
 	};
 
 	onMount(async () => {
+		console.log(value);
+
+		if (preserveBreaks) {
+			turndownService.addRule('preserveBreaks', {
+				filter: 'br', // Target <br> elements
+				replacement: function (content) {
+					return '<br/>';
+				}
+			});
+		}
+
 		async function tryParse(value, attempts = 3, interval = 100) {
 			try {
 				// Try parsing the value
-				return marked.parse(value);
+				return marked.parse(value.replaceAll(`\n<br/>`, `<br/>`), {
+					breaks: false
+				});
 			} catch (error) {
 				// If no attempts remain, fallback to plain text
 				if (attempts <= 1) {
@@ -147,20 +166,48 @@
 				}),
 				Highlight,
 				Typography,
-				Placeholder.configure({ placeholder })
+				Placeholder.configure({ placeholder }),
+				...(autocomplete
+					? [
+							AIAutocompletion.configure({
+								generateCompletion: async (text) => {
+									if (text.trim().length === 0) {
+										return null;
+									}
+
+									const suggestion = await generateAutoCompletion(text).catch(() => null);
+									if (!suggestion || suggestion.trim().length === 0) {
+										return null;
+									}
+
+									return suggestion;
+								}
+							})
+						]
+					: [])
 			],
 			content: content,
-			autofocus: true,
+			autofocus: messageInput ? true : false,
 			onTransaction: () => {
 				// force re-render so `editor.isActive` works as expected
 				editor = editor;
+				const newValue = turndownService
+					.turndown(
+						(preserveBreaks
+							? editor.getHTML().replace(/<p><\/p>/g, '<br/>')
+							: editor.getHTML()
+						).replace(/ {2,}/g, (m) => m.replace(/ /g, '\u00a0'))
+					)
+					.replace(/\u00a0/g, ' ');
 
-				const newValue = turndownService.turndown(editor.getHTML());
 				if (value !== newValue) {
 					value = newValue;
 
-					if (value === '') {
-						editor.commands.clearContent();
+					// check if the node is paragraph as well
+					if (editor.isActive('paragraph')) {
+						if (value === '') {
+							editor.commands.clearContent();
+						}
 					}
 				}
 			},
@@ -171,22 +218,21 @@
 						eventDispatch('focus', { event });
 						return false;
 					},
-					keypress: (view, event) => {
-						eventDispatch('keypress', { event });
+					keyup: (view, event) => {
+						eventDispatch('keyup', { event });
 						return false;
 					},
-
 					keydown: (view, event) => {
-						// Handle Tab Key
-						if (event.key === 'Tab') {
-							const handled = selectNextTemplate(view.state, view.dispatch);
-							if (handled) {
-								event.preventDefault();
-								return true;
+						if (messageInput) {
+							// Handle Tab Key
+							if (event.key === 'Tab') {
+								const handled = selectNextTemplate(view.state, view.dispatch);
+								if (handled) {
+									event.preventDefault();
+									return true;
+								}
 							}
-						}
 
-						if (messageInput) {
 							if (event.key === 'Enter') {
 								// Check if the current selection is inside a structured block (like codeBlock or list)
 								const { state } = view;
@@ -217,22 +263,12 @@
 
 							// Handle shift + Enter for a line break
 							if (shiftEnter) {
-								if (event.key === 'Enter' && event.shiftKey) {
+								if (event.key === 'Enter' && event.shiftKey && !event.ctrlKey && !event.metaKey) {
 									editor.commands.setHardBreak(); // Insert a hard break
 									view.dispatch(view.state.tr.scrollIntoView()); // Move viewport to the cursor
 									event.preventDefault();
 									return true;
 								}
-								if (event.key === 'Enter') {
-									eventDispatch('enter', { event });
-									event.preventDefault();
-									return true;
-								}
-							}
-							if (event.key === 'Enter') {
-								eventDispatch('enter', { event });
-								event.preventDefault();
-								return true;
 							}
 						}
 						eventDispatch('keydown', { event });
@@ -286,7 +322,9 @@
 			}
 		});
 
-		selectTemplate();
+		if (messageInput) {
+			selectTemplate();
+		}
 	});
 
 	onDestroy(() => {
@@ -296,8 +334,23 @@
 	});
 
 	// Update the editor content if the external `value` changes
-	$: if (editor && value !== turndownService.turndown(editor.getHTML())) {
-		editor.commands.setContent(marked.parse(value)); // Update editor content
+	$: if (
+		editor &&
+		value !==
+			turndownService
+				.turndown(
+					(preserveBreaks
+						? editor.getHTML().replace(/<p><\/p>/g, '<br/>')
+						: editor.getHTML()
+					).replace(/ {2,}/g, (m) => m.replace(/ /g, '\u00a0'))
+				)
+				.replace(/\u00a0/g, ' ')
+	) {
+		editor.commands.setContent(
+			marked.parse(value.replaceAll(`\n<br/>`, `<br/>`), {
+				breaks: false
+			})
+		); // Update editor content
 		selectTemplate();
 	}
 </script>

src/lib/components/common/RichTextInput/AutoCompletion.js

@@ -0,0 +1,278 @@
+/*
+Here we initialize the plugin with keyword mapping.
+Intended to handle user interactions seamlessly.
+
+Observe the keydown events for proactive suggestions.
+Provide a mechanism for accepting AI suggestions.
+Evaluate each input change with debounce logic.
+Next, we implement touch and mouse interactions.
+
+Anchor the user experience to intuitive behavior.
+Intelligently reset suggestions on new input.
+*/
+
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from 'prosemirror-state';
+
+export const AIAutocompletion = Extension.create({
+	name: 'aiAutocompletion',
+
+	addOptions() {
+		return {
+			generateCompletion: () => Promise.resolve(''),
+			debounceTime: 1000
+		};
+	},
+
+	addGlobalAttributes() {
+		return [
+			{
+				types: ['paragraph'],
+				attributes: {
+					class: {
+						default: null,
+						parseHTML: (element) => element.getAttribute('class'),
+						renderHTML: (attributes) => {
+							if (!attributes.class) return {};
+							return { class: attributes.class };
+						}
+					},
+					'data-prompt': {
+						default: null,
+						parseHTML: (element) => element.getAttribute('data-prompt'),
+						renderHTML: (attributes) => {
+							if (!attributes['data-prompt']) return {};
+							return { 'data-prompt': attributes['data-prompt'] };
+						}
+					},
+					'data-suggestion': {
+						default: null,
+						parseHTML: (element) => element.getAttribute('data-suggestion'),
+						renderHTML: (attributes) => {
+							if (!attributes['data-suggestion']) return {};
+							return { 'data-suggestion': attributes['data-suggestion'] };
+						}
+					}
+				}
+			}
+		];
+	},
+
+	addProseMirrorPlugins() {
+		let debounceTimer = null;
+		let loading = false;
+
+		let touchStartX = 0;
+		let touchStartY = 0;
+
+		return [
+			new Plugin({
+				key: new PluginKey('aiAutocompletion'),
+				props: {
+					handleKeyDown: (view, event) => {
+						const { state, dispatch } = view;
+						const { selection } = state;
+						const { $head } = selection;
+
+						if ($head.parent.type.name !== 'paragraph') return false;
+
+						const node = $head.parent;
+
+						if (event.key === 'Tab') {
+							// if (!node.attrs['data-suggestion']) {
+							//   // Generate completion
+							//   if (loading) return true
+							//   loading = true
+							//   const prompt = node.textContent
+							//   this.options.generateCompletion(prompt).then(suggestion => {
+							//     if (suggestion && suggestion.trim() !== '') {
+							//       dispatch(state.tr.setNodeMarkup($head.before(), null, {
+							//         ...node.attrs,
+							//         class: 'ai-autocompletion',
+							//         'data-prompt': prompt,
+							//         'data-suggestion': suggestion,
+							//       }))
+							//     }
+							//     // If suggestion is empty or null, do nothing
+							//   }).finally(() => {
+							//     loading = false
+							//   })
+							// }
+
+							if (node.attrs['data-suggestion']) {
+								// Accept suggestion
+								const suggestion = node.attrs['data-suggestion'];
+								dispatch(
+									state.tr.insertText(suggestion, $head.pos).setNodeMarkup($head.before(), null, {
+										...node.attrs,
+										class: null,
+										'data-prompt': null,
+										'data-suggestion': null
+									})
+								);
+								return true;
+							}
+						} else {
+							if (node.attrs['data-suggestion']) {
+								// Reset suggestion on any other key press
+								dispatch(
+									state.tr.setNodeMarkup($head.before(), null, {
+										...node.attrs,
+										class: null,
+										'data-prompt': null,
+										'data-suggestion': null
+									})
+								);
+							}
+
+							// Start debounce logic for AI generation only if the cursor is at the end of the paragraph
+							if (selection.empty && $head.pos === $head.end()) {
+								// Set up debounce for AI generation
+								if (this.options.debounceTime !== null) {
+									clearTimeout(debounceTimer);
+
+									// Capture current position
+									const currentPos = $head.before();
+
+									debounceTimer = setTimeout(() => {
+										const newState = view.state;
+										const newSelection = newState.selection;
+										const newNode = newState.doc.nodeAt(currentPos);
+
+										// Check if the node still exists and is still a paragraph
+										if (
+											newNode &&
+											newNode.type.name === 'paragraph' &&
+											newSelection.$head.pos === newSelection.$head.end() &&
+											newSelection.$head.pos === currentPos + newNode.nodeSize - 1
+										) {
+											const prompt = newNode.textContent;
+
+											if (prompt.trim() !== '') {
+												if (loading) return true;
+												loading = true;
+												this.options
+													.generateCompletion(prompt)
+													.then((suggestion) => {
+														if (suggestion && suggestion.trim() !== '') {
+															if (
+																view.state.selection.$head.pos === view.state.selection.$head.end()
+															) {
+																view.dispatch(
+																	newState.tr.setNodeMarkup(currentPos, null, {
+																		...newNode.attrs,
+																		class: 'ai-autocompletion',
+																		'data-prompt': prompt,
+																		'data-suggestion': suggestion
+																	})
+																);
+															}
+														}
+													})
+													.finally(() => {
+														loading = false;
+													});
+											}
+										}
+									}, this.options.debounceTime);
+								}
+							}
+						}
+						return false;
+					},
+					handleDOMEvents: {
+						touchstart: (view, event) => {
+							touchStartX = event.touches[0].clientX;
+							touchStartY = event.touches[0].clientY;
+							return false;
+						},
+						touchend: (view, event) => {
+							const touchEndX = event.changedTouches[0].clientX;
+							const touchEndY = event.changedTouches[0].clientY;
+
+							const deltaX = touchEndX - touchStartX;
+							const deltaY = touchEndY - touchStartY;
+
+							// Check if the swipe was primarily horizontal and to the right
+							if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 50) {
+								const { state, dispatch } = view;
+								const { selection } = state;
+								const { $head } = selection;
+								const node = $head.parent;
+
+								if (node.type.name === 'paragraph' && node.attrs['data-suggestion']) {
+									const suggestion = node.attrs['data-suggestion'];
+									dispatch(
+										state.tr.insertText(suggestion, $head.pos).setNodeMarkup($head.before(), null, {
+											...node.attrs,
+											class: null,
+											'data-prompt': null,
+											'data-suggestion': null
+										})
+									);
+									return true;
+								}
+							}
+							return false;
+						},
+						// Add mousedown behavior
+						// mouseup: (view, event) => {
+						// 	const { state, dispatch } = view;
+						// 	const { selection } = state;
+						// 	const { $head } = selection;
+						// 	const node = $head.parent;
+
+						// 	// Reset debounce timer on mouse click
+						// 	clearTimeout(debounceTimer);
+
+						// 	// If a suggestion exists and the cursor moves, remove the suggestion
+						// 	if (
+						// 		node.type.name === 'paragraph' &&
+						// 		node.attrs['data-suggestion'] &&
+						// 		view.state.selection.$head.pos !== view.state.selection.$head.end()
+						// 	) {
+						// 		dispatch(
+						// 			state.tr.setNodeMarkup($head.before(), null, {
+						// 				...node.attrs,
+						// 				class: null,
+						// 				'data-prompt': null,
+						// 				'data-suggestion': null
+						// 			})
+						// 		);
+						// 	}
+
+						// 	return false;
+						// }
+						mouseup: (view, event) => {
+							const { state, dispatch } = view;
+
+							// Reset debounce timer on mouse click
+							clearTimeout(debounceTimer);
+
+							// Iterate over all nodes in the document
+							const tr = state.tr;
+							state.doc.descendants((node, pos) => {
+								if (node.type.name === 'paragraph' && node.attrs['data-suggestion']) {
+									// Remove suggestion from this paragraph
+									tr.setNodeMarkup(pos, null, {
+										...node.attrs,
+										class: null,
+										'data-prompt': null,
+										'data-suggestion': null
+									});
+								}
+							});
+
+							// Apply the transaction if any changes were made
+							if (tr.docChanged) {
+								dispatch(tr);
+							}
+
+							return false;
+						}
+					}
+				}
+			})
+		];
+	}
+});

src/lib/components/common/Textarea.svelte

@@ -3,38 +3,65 @@
 
 	export let value = '';
 	export let placeholder = '';
-	export let rows = 1;
-	export let required = false;
 	export let className =
 		'w-full rounded-lg px-3 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize-none h-full';
 
 	let textareaElement;
 
+	$: if (textareaElement) {
+		if (textareaElement.innerText !== value && value !== '') {
+			textareaElement.innerText = value ?? '';
+		}
+	}
+
 	// Adjust height on mount and after setting the element.
 	onMount(async () => {
 		await tick();
-		adjustHeight();
 	});
 
-	// This reactive statement runs whenever `value` changes
-	$: adjustHeight();
+	// Handle paste event to ensure only plaintext is pasted
+	function handlePaste(event: ClipboardEvent) {
+		event.preventDefault(); // Prevent the default paste action
+		const clipboardData = event.clipboardData?.getData('text/plain'); // Get plaintext from clipboard
 
-	// Adjust height to match content
-	const adjustHeight = () => {
-		if (textareaElement) {
-			// Reset height to calculate the correct scroll height
-			textareaElement.style.height = 'auto';
-			textareaElement.style.height = `${textareaElement.scrollHeight}px`;
-		}
-	};
+		// Insert plaintext into the textarea
+		document.execCommand('insertText', false, clipboardData);
+	}
 </script>
 
-<textarea
+<div
+	contenteditable="true"
 	bind:this={textareaElement}
-	bind:value
-	{placeholder}
-	on:input={adjustHeight}
-	class={className}
-	{rows}
-	{required}
+	class="{className} whitespace-pre-wrap relative {value
+		? !value.trim()
+			? 'placeholder'
+			: ''
+		: 'placeholder'}"
+	style="field-sizing: content; -moz-user-select: text !important;"
+	on:input={() => {
+		const text = textareaElement.innerText;
+		if (text === '\n') {
+			value = '';
+			return;
+		}
+
+		value = text;
+	}}
+	on:paste={handlePaste}
+	data-placeholder={placeholder}
 />
+
+<style>
+	.placeholder::before {
+		/* abolute */
+		position: absolute;
+		content: attr(data-placeholder);
+		color: #adb5bd;
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+		pointer-events: none;
+		touch-action: none;
+	}
+</style>