Merge pull request #4811 from open-webui/dev

0.3.16

.github/dependabot.yml

@@ -3,10 +3,10 @@ updates:
   - package-ecosystem: pip
     directory: '/backend'
     schedule:
-      interval: weekly
+      interval: monthly
     target-branch: 'dev'
   - package-ecosystem: 'github-actions'
     directory: '/'
     schedule:
       # Check for updates to GitHub Actions every week
-      interval: 'weekly'
+      interval: monthly

.github/workflows/build-release.yml

@@ -10,61 +10,63 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-    - name: Check for changes in package.json
-      run: |
-        git diff --cached --diff-filter=d package.json || {
-          echo "No changes to package.json"
-          exit 1
-        }
-    
-    - name: Get version number from package.json
-      id: get_version
-      run: |
-        VERSION=$(jq -r '.version' package.json)
-        echo "::set-output name=version::$VERSION"
+      - name: Check for changes in package.json
+        run: |
+          git diff --cached --diff-filter=d package.json || {
+            echo "No changes to package.json"
+            exit 1
+          }
 
-    - name: Extract latest CHANGELOG entry
-      id: changelog
-      run: |
-        CHANGELOG_CONTENT=$(awk 'BEGIN {print_section=0;} /^## \[/ {if (print_section == 0) {print_section=1;} else {exit;}} print_section {print;}' CHANGELOG.md)
-        CHANGELOG_ESCAPED=$(echo "$CHANGELOG_CONTENT" | sed ':a;N;$!ba;s/\n/%0A/g')
-        echo "Extracted latest release notes from CHANGELOG.md:" 
-        echo -e "$CHANGELOG_CONTENT" 
-        echo "::set-output name=content::$CHANGELOG_ESCAPED"
+      - name: Get version number from package.json
+        id: get_version
+        run: |
+          VERSION=$(jq -r '.version' package.json)
+          echo "::set-output name=version::$VERSION"
 
-    - name: Create GitHub release
-      uses: actions/github-script@v7
-      with:
-        github-token: ${{ secrets.GITHUB_TOKEN }}
-        script: |
-          const changelog = `${{ steps.changelog.outputs.content }}`;
-          const release = await github.rest.repos.createRelease({
-            owner: context.repo.owner,
-            repo: context.repo.repo,
-            tag_name: `v${{ steps.get_version.outputs.version }}`,
-            name: `v${{ steps.get_version.outputs.version }}`,
-            body: changelog,
-          })
-          console.log(`Created release ${release.data.html_url}`)
+      - name: Extract latest CHANGELOG entry
+        id: changelog
+        run: |
+          CHANGELOG_CONTENT=$(awk 'BEGIN {print_section=0;} /^## \[/ {if (print_section == 0) {print_section=1;} else {exit;}} print_section {print;}' CHANGELOG.md)
+          CHANGELOG_ESCAPED=$(echo "$CHANGELOG_CONTENT" | sed ':a;N;$!ba;s/\n/%0A/g')
+          echo "Extracted latest release notes from CHANGELOG.md:" 
+          echo -e "$CHANGELOG_CONTENT" 
+          echo "::set-output name=content::$CHANGELOG_ESCAPED"
 
-    - name: Upload package to GitHub release
-      uses: actions/upload-artifact@v4
-      with:
-        name: package
-        path: .
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Create GitHub release
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const changelog = `${{ steps.changelog.outputs.content }}`;
+            const release = await github.rest.repos.createRelease({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              tag_name: `v${{ steps.get_version.outputs.version }}`,
+              name: `v${{ steps.get_version.outputs.version }}`,
+              body: changelog,
+            })
+            console.log(`Created release ${release.data.html_url}`)
 
-    - name: Trigger Docker build workflow
-      uses: actions/github-script@v7
-      with:
-        script: |
-          github.rest.actions.createWorkflowDispatch({
-            owner: context.repo.owner,
-            repo: context.repo.repo,
-            workflow_id: 'docker-build.yaml',
-            ref: 'v${{ steps.get_version.outputs.version }}',
-          })
+      - name: Upload package to GitHub release
+        uses: actions/upload-artifact@v4
+        with:
+          name: package
+          path: |
+            .
+            !.git
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Trigger Docker build workflow
+        uses: actions/github-script@v7
+        with:
+          script: |
+            github.rest.actions.createWorkflowDispatch({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              workflow_id: 'docker-build.yaml',
+              ref: 'v${{ steps.get_version.outputs.version }}',
+            })

.github/workflows/docker-build.yaml

@@ -56,19 +56,25 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Extract metadata for Docker images (default latest tag)
+      - name: Get version number from package.json
+        id: get_version
+        run: |
+          VERSION=$(jq -r '.version' package.json)
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Extract metadata for Docker images
         id: meta
         uses: docker/metadata-action@v5
         with:
           images: ${{ env.FULL_IMAGE_NAME }}
           tags: |
+            type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
+            type=raw,value=${{ steps.get_version.outputs.version }},enable=${{ github.ref == 'refs/heads/main' }}
             type=ref,event=branch
             type=ref,event=tag
             type=sha,prefix=git-
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
-          flavor: |
-            latest=${{ github.ref == 'refs/heads/main' }}
 
       - name: Extract metadata for Docker cache
         id: cache-meta
@@ -82,7 +88,7 @@ jobs:
             prefix=cache-${{ matrix.platform }}-
             latest=false
 
-      - name: Build Docker image (latest)
+      - name: Build Docker image
         uses: docker/build-push-action@v5
         id: build
         with:
@@ -90,7 +96,8 @@ jobs:
           push: true
           platforms: ${{ matrix.platform }}
           labels: ${{ steps.meta.outputs.labels }}
-          outputs: type=image,name=${{ env.FULL_IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=true
+          tags: ${{ steps.meta.outputs.tags }}
+          outputs: type=image,name=${{ env.FULL_IMAGE_NAME }},push=true
           cache-from: type=registry,ref=${{ steps.cache-meta.outputs.tags }}
           cache-to: type=registry,ref=${{ steps.cache-meta.outputs.tags }},mode=max
           build-args: |
@@ -153,21 +160,25 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Extract metadata for Docker images (cuda tag)
+      - name: Get version number from package.json
+        id: get_version
+        run: |
+          VERSION=$(jq -r '.version' package.json)
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Extract metadata for Docker images
         id: meta
         uses: docker/metadata-action@v5
         with:
           images: ${{ env.FULL_IMAGE_NAME }}
           tags: |
-            type=ref,event=branch
-            type=ref,event=tag
-            type=sha,prefix=git-
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=raw,enable=${{ github.ref == 'refs/heads/main' }},prefix=,suffix=,value=cuda
-          flavor: |
-            latest=${{ github.ref == 'refs/heads/main' }}
-            suffix=-cuda,onlatest=true
+            type=raw,value=latest-cuda,enable=${{ github.ref == 'refs/heads/main' }}
+            type=raw,value=${{ steps.get_version.outputs.version }}-cuda,enable=${{ github.ref == 'refs/heads/main' }}
+            type=ref,event=branch,suffix=-cuda
+            type=ref,event=tag,suffix=-cuda
+            type=sha,prefix=git-,suffix=-cuda
+            type=semver,pattern={{version}},suffix=-cuda
+            type=semver,pattern={{major}}.{{minor}},suffix=-cuda
 
       - name: Extract metadata for Docker cache
         id: cache-meta
@@ -189,7 +200,8 @@ jobs:
           push: true
           platforms: ${{ matrix.platform }}
           labels: ${{ steps.meta.outputs.labels }}
-          outputs: type=image,name=${{ env.FULL_IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=true
+          tags: ${{ steps.meta.outputs.tags }}
+          outputs: type=image,name=${{ env.FULL_IMAGE_NAME }},push=true
           cache-from: type=registry,ref=${{ steps.cache-meta.outputs.tags }}
           cache-to: type=registry,ref=${{ steps.cache-meta.outputs.tags }},mode=max
           build-args: |
@@ -253,21 +265,25 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Extract metadata for Docker images (ollama tag)
+      - name: Get version number from package.json
+        id: get_version
+        run: |
+          VERSION=$(jq -r '.version' package.json)
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Extract metadata for Docker images
         id: meta
         uses: docker/metadata-action@v5
         with:
           images: ${{ env.FULL_IMAGE_NAME }}
           tags: |
-            type=ref,event=branch
-            type=ref,event=tag
-            type=sha,prefix=git-
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=raw,enable=${{ github.ref == 'refs/heads/main' }},prefix=,suffix=,value=ollama
-          flavor: |
-            latest=${{ github.ref == 'refs/heads/main' }}
-            suffix=-ollama,onlatest=true
+            type=raw,value=latest-ollama,enable=${{ github.ref == 'refs/heads/main' }}
+            type=raw,value=${{ steps.get_version.outputs.version }}-ollama,enable=${{ github.ref == 'refs/heads/main' }}
+            type=ref,event=branch,suffix=-ollama
+            type=ref,event=tag,suffix=-ollama
+            type=sha,prefix=git-,suffix=-ollama
+            type=semver,pattern={{version}},suffix=-ollama
+            type=semver,pattern={{major}}.{{minor}},suffix=-ollama
 
       - name: Extract metadata for Docker cache
         id: cache-meta
@@ -289,7 +305,8 @@ jobs:
           push: true
           platforms: ${{ matrix.platform }}
           labels: ${{ steps.meta.outputs.labels }}
-          outputs: type=image,name=${{ env.FULL_IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=true
+          tags: ${{ steps.meta.outputs.tags }}
+          outputs: type=image,name=${{ env.FULL_IMAGE_NAME }},push=true
           cache-from: type=registry,ref=${{ steps.cache-meta.outputs.tags }}
           cache-to: type=registry,ref=${{ steps.cache-meta.outputs.tags }},mode=max
           build-args: |
@@ -309,7 +326,6 @@ jobs:
           path: /tmp/digests/*
           if-no-files-found: error
           retention-days: 1
-
   merge-main-images:
     runs-on: ubuntu-latest
     needs: [ build-main-image ]

CHANGELOG.md

@@ -5,6 +5,76 @@ 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.3.16] - 2024-08-27
+
+### Added
+
+- **🚀 Config DB Migration**: Migrated configuration handling from config.json to the database, enabling high-availability setups and load balancing across multiple Open WebUI instances.
+- **🔗 Call Mode Activation via URL**: Added a 'call=true' URL search parameter enabling direct shortcuts to activate call mode, enhancing user interaction on mobile devices.
+- **✨ TTS Content Control**: Added functionality to control how message content is segmented for Text-to-Speech (TTS) generation requests, allowing for more flexible speech output options.
+- **😄 Show Knowledge Search Status**: Enhanced model usage transparency by displaying status when working with knowledge-augmented models, helping users understand the system's state during queries.
+- **👆 Click-to-Copy for Codespan**: Enhanced interactive experience in the WebUI by allowing users to click to copy content from code spans directly.
+- **🚫 API User Blocking via Model Filter**: Introduced the ability to block API users based on customized model filters, enhancing security and control over API access.
+- **🎬 Call Overlay Styling**: Adjusted call overlay styling on large screens to not cover the entire interface, but only the chat control area, for a more unobtrusive interaction experience.
+
+### Fixed
+
+- **🔧 LaTeX Rendering Issue**: Addressed an issue that affected the correct rendering of LaTeX.
+- **📁 File Leak Prevention**: Resolved the issue of uploaded files mistakenly being accessible across user chats.
+- **🔧 Pipe Functions with '**files**' Param**: Fixed issues with '**files**' parameter not functioning correctly in pipe functions.
+- **📝 Markdown Processing for RAG**: Fixed issues with processing Markdown in files.
+- **🚫 Duplicate System Prompts**: Fixed bugs causing system prompts to duplicate.
+
+### Changed
+
+- **🔋 Wakelock Permission**: Optimized the activation of wakelock to only engage during call mode, conserving device resources and improving battery performance during idle periods.
+- **🔍 Content-Type for Ollama Chats**: Added 'application/x-ndjson' content-type to '/api/chat' endpoint responses to match raw Ollama responses.
+- **✋ Disable Signups Conditionally**: Implemented conditional logic to disable sign-ups when 'ENABLE_LOGIN_FORM' is set to false.
+
+## [0.3.15] - 2024-08-21
+
+### Added
+
+- **🔗 Temporary Chat Activation**: Integrated a new URL parameter 'temporary-chat=true' to enable temporary chat sessions directly through the URL.
+- **🌄 ComfyUI Seed Node Support**: Introduced seed node support in ComfyUI for image generation, allowing users to specify node IDs for randomized seed assignment.
+
+### Fixed
+
+- **🛠️ Tools and Functions**: Resolved a critical issue where Tools and Functions were not properly functioning, restoring full capability and reliability to these essential features.
+- **🔘 Chat Action Button in Many Model Chat**: Fixed the malfunctioning of chat action buttons in many model chat environments, ensuring a smoother and more responsive user interaction.
+- **⏪ Many Model Chat Compatibility**: Restored backward compatibility for many model chats.
+
+## [0.3.14] - 2024-08-21
+
+### Added
+
+- **🛠️ Custom ComfyUI Workflow**: Deprecating several older environment variables, this enhancement introduces a new, customizable workflow for a more tailored user experience.
+- **🔀 Merge Responses in Many Model Chat**: Enhances the dialogue by merging responses from multiple models into a single, coherent reply, improving the interaction quality in many model chats.
+- **✅ Multiple Instances of Same Model in Chats**: Enhanced many model chat to support adding multiple instances of the same model.
+- **🔧 Quick Actions in Model Workspace**: Enhanced Shift key quick actions for hiding/unhiding and deleting models, facilitating a smoother workflow.
+- **🗨️ Markdown Rendering in User Messages**: User messages are now rendered in Markdown, enhancing readability and interaction.
+- **💬 Temporary Chat Feature**: Introduced a temporary chat feature, deprecating the old chat history setting to enhance user interaction flexibility.
+- **🖋️ User Message Editing**: Enhanced the user chat editing feature to allow saving changes without sending, providing more flexibility in message management.
+- **🛡️ Security Enhancements**: Various security improvements implemented across the platform to ensure safer user experiences.
+- **🌍 Updated Translations**: Enhanced translations for Chinese, Ukrainian, and Bahasa Malaysia, improving localization and user comprehension.
+
+### Fixed
+
+- **📑 Mermaid Rendering Issue**: Addressed issues with Mermaid chart rendering to ensure clean and clear visual data representation.
+- **🎭 PWA Icon Maskability**: Fixed the Progressive Web App icon to be maskable, ensuring proper display on various device home screens.
+- **🔀 Cloned Model Chat Freezing Issue**: Fixed a bug where cloning many model chats would cause freezing, enhancing stability and responsiveness.
+- **🔍 Generic Error Handling and Refinements**: Various minor fixes and refinements to address previously untracked issues, ensuring smoother operations.
+
+### Changed
+
+- **🖼️ Image Generation Refactor**: Overhauled image generation processes for improved efficiency and quality.
+- **🔨 Refactor Tool and Function Calling**: Refactored tool and function calling mechanisms for improved clarity and maintainability.
+- **🌐 Backend Library Updates**: Updated critical backend libraries including SQLAlchemy, uvicorn[standard], faster-whisper, bcrypt, and boto3 for enhanced performance and security.
+
+### Removed
+
+- **🚫 Deprecated ComfyUI Environment Variables**: Removed several outdated environment variables related to ComfyUI settings, simplifying configuration management.
+
 ## [0.3.13] - 2024-08-14
 
 ### Added

backend/apps/audio/main.py

@@ -1,5 +1,12 @@
-import os
+import hashlib
+import json
 import logging
+import os
+import uuid
+from functools import lru_cache
+from pathlib import Path
+
+import requests
 from fastapi import (
     FastAPI,
     Request,
@@ -8,34 +15,14 @@ from fastapi import (
     status,
     UploadFile,
     File,
-    Form,
 )
-from fastapi.responses import StreamingResponse, JSONResponse, FileResponse
-
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
 from pydantic import BaseModel
 
-
-import uuid
-import requests
-import hashlib
-from pathlib import Path
-import json
-
-from constants import ERROR_MESSAGES
-from utils.utils import (
-    decode_token,
-    get_current_user,
-    get_verified_user,
-    get_admin_user,
-)
-from utils.misc import calculate_sha256
-
-
 from config import (
     SRC_LOG_LEVELS,
     CACHE_DIR,
-    UPLOAD_DIR,
     WHISPER_MODEL,
     WHISPER_MODEL_DIR,
     WHISPER_MODEL_AUTO_UPDATE,
@@ -50,7 +37,15 @@ from config import (
     AUDIO_TTS_ENGINE,
     AUDIO_TTS_MODEL,
     AUDIO_TTS_VOICE,
+    AUDIO_TTS_SPLIT_ON,
     AppConfig,
+    CORS_ALLOW_ORIGIN,
+)
+from constants import ERROR_MESSAGES
+from utils.utils import (
+    get_current_user,
+    get_verified_user,
+    get_admin_user,
 )
 
 log = logging.getLogger(__name__)
@@ -59,7 +54,7 @@ log.setLevel(SRC_LOG_LEVELS["AUDIO"])
 app = FastAPI()
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],
+    allow_origins=CORS_ALLOW_ORIGIN,
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -78,6 +73,7 @@ app.state.config.TTS_ENGINE = AUDIO_TTS_ENGINE
 app.state.config.TTS_MODEL = AUDIO_TTS_MODEL
 app.state.config.TTS_VOICE = AUDIO_TTS_VOICE
 app.state.config.TTS_API_KEY = AUDIO_TTS_API_KEY
+app.state.config.TTS_SPLIT_ON = AUDIO_TTS_SPLIT_ON
 
 # setting device type for whisper model
 whisper_device_type = DEVICE_TYPE if DEVICE_TYPE and DEVICE_TYPE == "cuda" else "cpu"
@@ -94,6 +90,7 @@ class TTSConfigForm(BaseModel):
     ENGINE: str
     MODEL: str
     VOICE: str
+    SPLIT_ON: str
 
 
 class STTConfigForm(BaseModel):
@@ -145,6 +142,7 @@ async def get_audio_config(user=Depends(get_admin_user)):
             "ENGINE": app.state.config.TTS_ENGINE,
             "MODEL": app.state.config.TTS_MODEL,
             "VOICE": app.state.config.TTS_VOICE,
+            "SPLIT_ON": app.state.config.TTS_SPLIT_ON,
         },
         "stt": {
             "OPENAI_API_BASE_URL": app.state.config.STT_OPENAI_API_BASE_URL,
@@ -165,6 +163,7 @@ async def update_audio_config(
     app.state.config.TTS_ENGINE = form_data.tts.ENGINE
     app.state.config.TTS_MODEL = form_data.tts.MODEL
     app.state.config.TTS_VOICE = form_data.tts.VOICE
+    app.state.config.TTS_SPLIT_ON = form_data.tts.SPLIT_ON
 
     app.state.config.STT_OPENAI_API_BASE_URL = form_data.stt.OPENAI_API_BASE_URL
     app.state.config.STT_OPENAI_API_KEY = form_data.stt.OPENAI_API_KEY
@@ -179,6 +178,7 @@ async def update_audio_config(
             "ENGINE": app.state.config.TTS_ENGINE,
             "MODEL": app.state.config.TTS_MODEL,
             "VOICE": app.state.config.TTS_VOICE,
+            "SPLIT_ON": app.state.config.TTS_SPLIT_ON,
         },
         "stt": {
             "OPENAI_API_BASE_URL": app.state.config.STT_OPENAI_API_BASE_URL,
@@ -261,6 +261,13 @@ async def speech(request: Request, user=Depends(get_verified_user)):
             raise HTTPException(status_code=400, detail="Invalid JSON payload")
 
         voice_id = payload.get("voice", "")
+
+        if voice_id not in get_available_voices():
+            raise HTTPException(
+                status_code=400,
+                detail="Invalid voice id",
+            )
+
         url = f"https://api.elevenlabs.io/v1/text-to-speech/{voice_id}"
 
         headers = {
@@ -466,39 +473,58 @@ async def get_models(user=Depends(get_verified_user)):
     return {"models": get_available_models()}
 
 
-def get_available_voices() -> list[dict]:
+def get_available_voices() -> dict:
+    """Returns {voice_id: voice_name} dict"""
+    ret = {}
     if app.state.config.TTS_ENGINE == "openai":
-        return [
-            {"name": "alloy", "id": "alloy"},
-            {"name": "echo", "id": "echo"},
-            {"name": "fable", "id": "fable"},
-            {"name": "onyx", "id": "onyx"},
-            {"name": "nova", "id": "nova"},
-            {"name": "shimmer", "id": "shimmer"},
-        ]
-    elif app.state.config.TTS_ENGINE == "elevenlabs":
-        headers = {
-            "xi-api-key": app.state.config.TTS_API_KEY,
-            "Content-Type": "application/json",
+        ret = {
+            "alloy": "alloy",
+            "echo": "echo",
+            "fable": "fable",
+            "onyx": "onyx",
+            "nova": "nova",
+            "shimmer": "shimmer",
         }
-
+    elif app.state.config.TTS_ENGINE == "elevenlabs":
         try:
-            response = requests.get(
-                "https://api.elevenlabs.io/v1/voices", headers=headers
-            )
-            response.raise_for_status()
-            voices_data = response.json()
+            ret = get_elevenlabs_voices()
+        except Exception as e:
+            # Avoided @lru_cache with exception
+            pass
 
-            voices = []
-            for voice in voices_data.get("voices", []):
-                voices.append({"name": voice["name"], "id": voice["voice_id"]})
-            return voices
-        except requests.RequestException as e:
-            log.error(f"Error fetching voices: {str(e)}")
+    return ret
 
-    return []
+
+@lru_cache
+def get_elevenlabs_voices() -> dict:
+    """
+    Note, set the following in your .env file to use Elevenlabs:
+    AUDIO_TTS_ENGINE=elevenlabs
+    AUDIO_TTS_API_KEY=sk_...  # Your Elevenlabs API key
+    AUDIO_TTS_VOICE=EXAVITQu4vr4xnSDxMaL  # From https://api.elevenlabs.io/v1/voices
+    AUDIO_TTS_MODEL=eleven_multilingual_v2
+    """
+    headers = {
+        "xi-api-key": app.state.config.TTS_API_KEY,
+        "Content-Type": "application/json",
+    }
+    try:
+        # TODO: Add retries
+        response = requests.get("https://api.elevenlabs.io/v1/voices", headers=headers)
+        response.raise_for_status()
+        voices_data = response.json()
+
+        voices = {}
+        for voice in voices_data.get("voices", []):
+            voices[voice["voice_id"]] = voice["name"]
+    except requests.RequestException as e:
+        # Avoid @lru_cache with exception
+        log.error(f"Error fetching voices: {str(e)}")
+        raise RuntimeError(f"Error fetching voices: {str(e)}")
+
+    return voices
 
 
 @app.get("/voices")
 async def get_voices(user=Depends(get_verified_user)):
-    return {"voices": get_available_voices()}
+    return {"voices": [{"id": k, "name": v} for k, v in get_available_voices().items()]}

backend/apps/images/main.py

@@ -1,26 +1,10 @@
-import re
-import requests
-import base64
 from fastapi import (
     FastAPI,
     Request,
     Depends,
     HTTPException,
-    status,
-    UploadFile,
-    File,
-    Form,
 )
 from fastapi.middleware.cors import CORSMiddleware
-
-from constants import ERROR_MESSAGES
-from utils.utils import (
-    get_verified_user,
-    get_admin_user,
-)
-
-from apps.images.utils.comfyui import ImageGenerationPayload, comfyui_generate_image
-from utils.misc import calculate_sha256
 from typing import Optional
 from pydantic import BaseModel
 from pathlib import Path
@@ -29,7 +13,22 @@ import uuid
 import base64
 import json
 import logging
+import re
+import requests
+import asyncio
 
+from utils.utils import (
+    get_verified_user,
+    get_admin_user,
+)
+
+from apps.images.utils.comfyui import (
+    ComfyUIWorkflow,
+    ComfyUIGenerateImageForm,
+    comfyui_generate_image,
+)
+
+from constants import ERROR_MESSAGES
 from config import (
     SRC_LOG_LEVELS,
     CACHE_DIR,
@@ -38,18 +37,14 @@ from config import (
     AUTOMATIC1111_BASE_URL,
     AUTOMATIC1111_API_AUTH,
     COMFYUI_BASE_URL,
-    COMFYUI_CFG_SCALE,
-    COMFYUI_SAMPLER,
-    COMFYUI_SCHEDULER,
-    COMFYUI_SD3,
-    COMFYUI_FLUX,
-    COMFYUI_FLUX_WEIGHT_DTYPE,
-    COMFYUI_FLUX_FP8_CLIP,
+    COMFYUI_WORKFLOW,
+    COMFYUI_WORKFLOW_NODES,
     IMAGES_OPENAI_API_BASE_URL,
     IMAGES_OPENAI_API_KEY,
     IMAGE_GENERATION_MODEL,
     IMAGE_SIZE,
     IMAGE_STEPS,
+    CORS_ALLOW_ORIGIN,
     AppConfig,
 )
 
@@ -62,7 +57,7 @@ IMAGE_CACHE_DIR.mkdir(parents=True, exist_ok=True)
 app = FastAPI()
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],
+    allow_origins=CORS_ALLOW_ORIGIN,
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -81,16 +76,94 @@ app.state.config.MODEL = IMAGE_GENERATION_MODEL
 app.state.config.AUTOMATIC1111_BASE_URL = AUTOMATIC1111_BASE_URL
 app.state.config.AUTOMATIC1111_API_AUTH = AUTOMATIC1111_API_AUTH
 app.state.config.COMFYUI_BASE_URL = COMFYUI_BASE_URL
+app.state.config.COMFYUI_WORKFLOW = COMFYUI_WORKFLOW
+app.state.config.COMFYUI_WORKFLOW_NODES = COMFYUI_WORKFLOW_NODES
 
 app.state.config.IMAGE_SIZE = IMAGE_SIZE
 app.state.config.IMAGE_STEPS = IMAGE_STEPS
-app.state.config.COMFYUI_CFG_SCALE = COMFYUI_CFG_SCALE
-app.state.config.COMFYUI_SAMPLER = COMFYUI_SAMPLER
-app.state.config.COMFYUI_SCHEDULER = COMFYUI_SCHEDULER
-app.state.config.COMFYUI_SD3 = COMFYUI_SD3
-app.state.config.COMFYUI_FLUX = COMFYUI_FLUX
-app.state.config.COMFYUI_FLUX_WEIGHT_DTYPE = COMFYUI_FLUX_WEIGHT_DTYPE
-app.state.config.COMFYUI_FLUX_FP8_CLIP = COMFYUI_FLUX_FP8_CLIP
+
+
+@app.get("/config")
+async def get_config(request: Request, user=Depends(get_admin_user)):
+    return {
+        "enabled": app.state.config.ENABLED,
+        "engine": app.state.config.ENGINE,
+        "openai": {
+            "OPENAI_API_BASE_URL": app.state.config.OPENAI_API_BASE_URL,
+            "OPENAI_API_KEY": app.state.config.OPENAI_API_KEY,
+        },
+        "automatic1111": {
+            "AUTOMATIC1111_BASE_URL": app.state.config.AUTOMATIC1111_BASE_URL,
+            "AUTOMATIC1111_API_AUTH": app.state.config.AUTOMATIC1111_API_AUTH,
+        },
+        "comfyui": {
+            "COMFYUI_BASE_URL": app.state.config.COMFYUI_BASE_URL,
+            "COMFYUI_WORKFLOW": app.state.config.COMFYUI_WORKFLOW,
+            "COMFYUI_WORKFLOW_NODES": app.state.config.COMFYUI_WORKFLOW_NODES,
+        },
+    }
+
+
+class OpenAIConfigForm(BaseModel):
+    OPENAI_API_BASE_URL: str
+    OPENAI_API_KEY: str
+
+
+class Automatic1111ConfigForm(BaseModel):
+    AUTOMATIC1111_BASE_URL: str
+    AUTOMATIC1111_API_AUTH: str
+
+
+class ComfyUIConfigForm(BaseModel):
+    COMFYUI_BASE_URL: str
+    COMFYUI_WORKFLOW: str
+    COMFYUI_WORKFLOW_NODES: list[dict]
+
+
+class ConfigForm(BaseModel):
+    enabled: bool
+    engine: str
+    openai: OpenAIConfigForm
+    automatic1111: Automatic1111ConfigForm
+    comfyui: ComfyUIConfigForm
+
+
+@app.post("/config/update")
+async def update_config(form_data: ConfigForm, user=Depends(get_admin_user)):
+    app.state.config.ENGINE = form_data.engine
+    app.state.config.ENABLED = form_data.enabled
+
+    app.state.config.OPENAI_API_BASE_URL = form_data.openai.OPENAI_API_BASE_URL
+    app.state.config.OPENAI_API_KEY = form_data.openai.OPENAI_API_KEY
+
+    app.state.config.AUTOMATIC1111_BASE_URL = (
+        form_data.automatic1111.AUTOMATIC1111_BASE_URL
+    )
+    app.state.config.AUTOMATIC1111_API_AUTH = (
+        form_data.automatic1111.AUTOMATIC1111_API_AUTH
+    )
+
+    app.state.config.COMFYUI_BASE_URL = form_data.comfyui.COMFYUI_BASE_URL
+    app.state.config.COMFYUI_WORKFLOW = form_data.comfyui.COMFYUI_WORKFLOW
+    app.state.config.COMFYUI_WORKFLOW_NODES = form_data.comfyui.COMFYUI_WORKFLOW_NODES
+
+    return {
+        "enabled": app.state.config.ENABLED,
+        "engine": app.state.config.ENGINE,
+        "openai": {
+            "OPENAI_API_BASE_URL": app.state.config.OPENAI_API_BASE_URL,
+            "OPENAI_API_KEY": app.state.config.OPENAI_API_KEY,
+        },
+        "automatic1111": {
+            "AUTOMATIC1111_BASE_URL": app.state.config.AUTOMATIC1111_BASE_URL,
+            "AUTOMATIC1111_API_AUTH": app.state.config.AUTOMATIC1111_API_AUTH,
+        },
+        "comfyui": {
+            "COMFYUI_BASE_URL": app.state.config.COMFYUI_BASE_URL,
+            "COMFYUI_WORKFLOW": app.state.config.COMFYUI_WORKFLOW,
+            "COMFYUI_WORKFLOW_NODES": app.state.config.COMFYUI_WORKFLOW_NODES,
+        },
+    }
 
 
 def get_automatic1111_api_auth():
@@ -103,166 +176,110 @@ def get_automatic1111_api_auth():
         return f"Basic {auth1111_base64_encoded_string}"
 
 
-@app.get("/config")
-async def get_config(request: Request, user=Depends(get_admin_user)):
-    return {
-        "engine": app.state.config.ENGINE,
-        "enabled": app.state.config.ENABLED,
-    }
-
-
-class ConfigUpdateForm(BaseModel):
-    engine: str
-    enabled: bool
-
-
-@app.post("/config/update")
-async def update_config(form_data: ConfigUpdateForm, user=Depends(get_admin_user)):
-    app.state.config.ENGINE = form_data.engine
-    app.state.config.ENABLED = form_data.enabled
-    return {
-        "engine": app.state.config.ENGINE,
-        "enabled": app.state.config.ENABLED,
-    }
-
-
-class EngineUrlUpdateForm(BaseModel):
-    AUTOMATIC1111_BASE_URL: Optional[str] = None
-    AUTOMATIC1111_API_AUTH: Optional[str] = None
-    COMFYUI_BASE_URL: Optional[str] = None
-
-
-@app.get("/url")
-async def get_engine_url(user=Depends(get_admin_user)):
-    return {
-        "AUTOMATIC1111_BASE_URL": app.state.config.AUTOMATIC1111_BASE_URL,
-        "AUTOMATIC1111_API_AUTH": app.state.config.AUTOMATIC1111_API_AUTH,
-        "COMFYUI_BASE_URL": app.state.config.COMFYUI_BASE_URL,
-    }
-
-
-@app.post("/url/update")
-async def update_engine_url(
-    form_data: EngineUrlUpdateForm, user=Depends(get_admin_user)
-):
-    if form_data.AUTOMATIC1111_BASE_URL is None:
-        app.state.config.AUTOMATIC1111_BASE_URL = AUTOMATIC1111_BASE_URL
-    else:
-        url = form_data.AUTOMATIC1111_BASE_URL.strip("/")
+@app.get("/config/url/verify")
+async def verify_url(user=Depends(get_admin_user)):
+    if app.state.config.ENGINE == "automatic1111":
         try:
-            r = requests.head(url)
+            r = requests.get(
+                url=f"{app.state.config.AUTOMATIC1111_BASE_URL}/sdapi/v1/options",
+                headers={"authorization": get_automatic1111_api_auth()},
+            )
             r.raise_for_status()
-            app.state.config.AUTOMATIC1111_BASE_URL = url
+            return True
         except Exception as e:
+            app.state.config.ENABLED = False
             raise HTTPException(status_code=400, detail=ERROR_MESSAGES.INVALID_URL)
-
-    if form_data.COMFYUI_BASE_URL is None:
-        app.state.config.COMFYUI_BASE_URL = COMFYUI_BASE_URL
-    else:
-        url = form_data.COMFYUI_BASE_URL.strip("/")
-
+    elif app.state.config.ENGINE == "comfyui":
         try:
-            r = requests.head(url)
+            r = requests.get(url=f"{app.state.config.COMFYUI_BASE_URL}/object_info")
             r.raise_for_status()
-            app.state.config.COMFYUI_BASE_URL = url
+            return True
         except Exception as e:
+            app.state.config.ENABLED = False
             raise HTTPException(status_code=400, detail=ERROR_MESSAGES.INVALID_URL)
-
-    if form_data.AUTOMATIC1111_API_AUTH is None:
-        app.state.config.AUTOMATIC1111_API_AUTH = AUTOMATIC1111_API_AUTH
     else:
-        app.state.config.AUTOMATIC1111_API_AUTH = form_data.AUTOMATIC1111_API_AUTH
+        return True
 
+
+def set_image_model(model: str):
+    app.state.config.MODEL = model
+    if app.state.config.ENGINE in ["", "automatic1111"]:
+        api_auth = get_automatic1111_api_auth()
+        r = requests.get(
+            url=f"{app.state.config.AUTOMATIC1111_BASE_URL}/sdapi/v1/options",
+            headers={"authorization": api_auth},
+        )
+        options = r.json()
+        if model != options["sd_model_checkpoint"]:
+            options["sd_model_checkpoint"] = model
+            r = requests.post(
+                url=f"{app.state.config.AUTOMATIC1111_BASE_URL}/sdapi/v1/options",
+                json=options,
+                headers={"authorization": api_auth},
+            )
+    return app.state.config.MODEL
+
+
+def get_image_model():
+    if app.state.config.ENGINE == "openai":
+        return app.state.config.MODEL if app.state.config.MODEL else "dall-e-2"
+    elif app.state.config.ENGINE == "comfyui":
+        return app.state.config.MODEL if app.state.config.MODEL else ""
+    elif app.state.config.ENGINE == "automatic1111" or app.state.config.ENGINE == "":
+        try:
+            r = requests.get(
+                url=f"{app.state.config.AUTOMATIC1111_BASE_URL}/sdapi/v1/options",
+                headers={"authorization": get_automatic1111_api_auth()},
+            )
+            options = r.json()
+            return options["sd_model_checkpoint"]
+        except Exception as e:
+            app.state.config.ENABLED = False
+            raise HTTPException(status_code=400, detail=ERROR_MESSAGES.DEFAULT(e))
+
+
+class ImageConfigForm(BaseModel):
+    MODEL: str
+    IMAGE_SIZE: str
+    IMAGE_STEPS: int
+
+
+@app.get("/image/config")
+async def get_image_config(user=Depends(get_admin_user)):
     return {
-        "AUTOMATIC1111_BASE_URL": app.state.config.AUTOMATIC1111_BASE_URL,
-        "AUTOMATIC1111_API_AUTH": app.state.config.AUTOMATIC1111_API_AUTH,
-        "COMFYUI_BASE_URL": app.state.config.COMFYUI_BASE_URL,
-        "status": True,
+        "MODEL": app.state.config.MODEL,
+        "IMAGE_SIZE": app.state.config.IMAGE_SIZE,
+        "IMAGE_STEPS": app.state.config.IMAGE_STEPS,
     }
 
 
-class OpenAIConfigUpdateForm(BaseModel):
-    url: str
-    key: str
+@app.post("/image/config/update")
+async def update_image_config(form_data: ImageConfigForm, user=Depends(get_admin_user)):
+    app.state.config.MODEL = form_data.MODEL
 
-
-@app.get("/openai/config")
-async def get_openai_config(user=Depends(get_admin_user)):
-    return {
-        "OPENAI_API_BASE_URL": app.state.config.OPENAI_API_BASE_URL,
-        "OPENAI_API_KEY": app.state.config.OPENAI_API_KEY,
-    }
-
-
-@app.post("/openai/config/update")
-async def update_openai_config(
-    form_data: OpenAIConfigUpdateForm, user=Depends(get_admin_user)
-):
-    if form_data.key == "":
-        raise HTTPException(status_code=400, detail=ERROR_MESSAGES.API_KEY_NOT_FOUND)
-
-    app.state.config.OPENAI_API_BASE_URL = form_data.url
-    app.state.config.OPENAI_API_KEY = form_data.key
-
-    return {
-        "status": True,
-        "OPENAI_API_BASE_URL": app.state.config.OPENAI_API_BASE_URL,
-        "OPENAI_API_KEY": app.state.config.OPENAI_API_KEY,
-    }
-
-
-class ImageSizeUpdateForm(BaseModel):
-    size: str
-
-
-@app.get("/size")
-async def get_image_size(user=Depends(get_admin_user)):
-    return {"IMAGE_SIZE": app.state.config.IMAGE_SIZE}
-
-
-@app.post("/size/update")
-async def update_image_size(
-    form_data: ImageSizeUpdateForm, user=Depends(get_admin_user)
-):
-    pattern = r"^\d+x\d+$"  # Regular expression pattern
-    if re.match(pattern, form_data.size):
-        app.state.config.IMAGE_SIZE = form_data.size
-        return {
-            "IMAGE_SIZE": app.state.config.IMAGE_SIZE,
-            "status": True,
-        }
+    pattern = r"^\d+x\d+$"
+    if re.match(pattern, form_data.IMAGE_SIZE):
+        app.state.config.IMAGE_SIZE = form_data.IMAGE_SIZE
     else:
         raise HTTPException(
             status_code=400,
             detail=ERROR_MESSAGES.INCORRECT_FORMAT("  (e.g., 512x512)."),
         )
 
-
-class ImageStepsUpdateForm(BaseModel):
-    steps: int
-
-
-@app.get("/steps")
-async def get_image_size(user=Depends(get_admin_user)):
-    return {"IMAGE_STEPS": app.state.config.IMAGE_STEPS}
-
-
-@app.post("/steps/update")
-async def update_image_size(
-    form_data: ImageStepsUpdateForm, user=Depends(get_admin_user)
-):
-    if form_data.steps >= 0:
-        app.state.config.IMAGE_STEPS = form_data.steps
-        return {
-            "IMAGE_STEPS": app.state.config.IMAGE_STEPS,
-            "status": True,
-        }
+    if form_data.IMAGE_STEPS >= 0:
+        app.state.config.IMAGE_STEPS = form_data.IMAGE_STEPS
     else:
         raise HTTPException(
             status_code=400,
             detail=ERROR_MESSAGES.INCORRECT_FORMAT("  (e.g., 50)."),
         )
 
+    return {
+        "MODEL": app.state.config.MODEL,
+        "IMAGE_SIZE": app.state.config.IMAGE_SIZE,
+        "IMAGE_STEPS": app.state.config.IMAGE_STEPS,
+    }
+
 
 @app.get("/models")
 def get_models(user=Depends(get_verified_user)):
@@ -273,18 +290,51 @@ def get_models(user=Depends(get_verified_user)):
                 {"id": "dall-e-3", "name": "DALL·E 3"},
             ]
         elif app.state.config.ENGINE == "comfyui":
-
+            # TODO - get models from comfyui
             r = requests.get(url=f"{app.state.config.COMFYUI_BASE_URL}/object_info")
             info = r.json()
 
-            return list(
-                map(
-                    lambda model: {"id": model, "name": model},
-                    info["CheckpointLoaderSimple"]["input"]["required"]["ckpt_name"][0],
-                )
-            )
+            workflow = json.loads(app.state.config.COMFYUI_WORKFLOW)
+            model_node_id = None
 
-        else:
+            for node in app.state.config.COMFYUI_WORKFLOW_NODES:
+                if node["type"] == "model":
+                    if node["node_ids"]:
+                        model_node_id = node["node_ids"][0]
+                    break
+
+            if model_node_id:
+                model_list_key = None
+
+                print(workflow[model_node_id]["class_type"])
+                for key in info[workflow[model_node_id]["class_type"]]["input"][
+                    "required"
+                ]:
+                    if "_name" in key:
+                        model_list_key = key
+                        break
+
+                if model_list_key:
+                    return list(
+                        map(
+                            lambda model: {"id": model, "name": model},
+                            info[workflow[model_node_id]["class_type"]]["input"][
+                                "required"
+                            ][model_list_key][0],
+                        )
+                    )
+            else:
+                return list(
+                    map(
+                        lambda model: {"id": model, "name": model},
+                        info["CheckpointLoaderSimple"]["input"]["required"][
+                            "ckpt_name"
+                        ][0],
+                    )
+                )
+        elif (
+            app.state.config.ENGINE == "automatic1111" or app.state.config.ENGINE == ""
+        ):
             r = requests.get(
                 url=f"{app.state.config.AUTOMATIC1111_BASE_URL}/sdapi/v1/sd-models",
                 headers={"authorization": get_automatic1111_api_auth()},
@@ -301,69 +351,11 @@ def get_models(user=Depends(get_verified_user)):
         raise HTTPException(status_code=400, detail=ERROR_MESSAGES.DEFAULT(e))
 
 
-@app.get("/models/default")
-async def get_default_model(user=Depends(get_admin_user)):
-    try:
-        if app.state.config.ENGINE == "openai":
-            return {
-                "model": (
-                    app.state.config.MODEL if app.state.config.MODEL else "dall-e-2"
-                )
-            }
-        elif app.state.config.ENGINE == "comfyui":
-            return {"model": (app.state.config.MODEL if app.state.config.MODEL else "")}
-        else:
-            r = requests.get(
-                url=f"{app.state.config.AUTOMATIC1111_BASE_URL}/sdapi/v1/options",
-                headers={"authorization": get_automatic1111_api_auth()},
-            )
-            options = r.json()
-            return {"model": options["sd_model_checkpoint"]}
-    except Exception as e:
-        app.state.config.ENABLED = False
-        raise HTTPException(status_code=400, detail=ERROR_MESSAGES.DEFAULT(e))
-
-
-class UpdateModelForm(BaseModel):
-    model: str
-
-
-def set_model_handler(model: str):
-    if app.state.config.ENGINE in ["openai", "comfyui"]:
-        app.state.config.MODEL = model
-        return app.state.config.MODEL
-    else:
-        api_auth = get_automatic1111_api_auth()
-        r = requests.get(
-            url=f"{app.state.config.AUTOMATIC1111_BASE_URL}/sdapi/v1/options",
-            headers={"authorization": api_auth},
-        )
-        options = r.json()
-
-        if model != options["sd_model_checkpoint"]:
-            options["sd_model_checkpoint"] = model
-            r = requests.post(
-                url=f"{app.state.config.AUTOMATIC1111_BASE_URL}/sdapi/v1/options",
-                json=options,
-                headers={"authorization": api_auth},
-            )
-
-        return options
-
-
-@app.post("/models/default/update")
-def update_default_model(
-    form_data: UpdateModelForm,
-    user=Depends(get_verified_user),
-):
-    return set_model_handler(form_data.model)
-
-
 class GenerateImageForm(BaseModel):
     model: Optional[str] = None
     prompt: str
-    n: int = 1
     size: Optional[str] = None
+    n: int = 1
     negative_prompt: Optional[str] = None
 
 
@@ -479,7 +471,6 @@ async def image_generations(
             return images
 
         elif app.state.config.ENGINE == "comfyui":
-
             data = {
                 "prompt": form_data.prompt,
                 "width": width,
@@ -493,32 +484,20 @@ async def image_generations(
             if form_data.negative_prompt is not None:
                 data["negative_prompt"] = form_data.negative_prompt
 
-            if app.state.config.COMFYUI_CFG_SCALE:
-                data["cfg_scale"] = app.state.config.COMFYUI_CFG_SCALE
-
-            if app.state.config.COMFYUI_SAMPLER is not None:
-                data["sampler"] = app.state.config.COMFYUI_SAMPLER
-
-            if app.state.config.COMFYUI_SCHEDULER is not None:
-                data["scheduler"] = app.state.config.COMFYUI_SCHEDULER
-
-            if app.state.config.COMFYUI_SD3 is not None:
-                data["sd3"] = app.state.config.COMFYUI_SD3
-
-            if app.state.config.COMFYUI_FLUX is not None:
-                data["flux"] = app.state.config.COMFYUI_FLUX
-
-            if app.state.config.COMFYUI_FLUX_WEIGHT_DTYPE is not None:
-                data["flux_weight_dtype"] = app.state.config.COMFYUI_FLUX_WEIGHT_DTYPE
-
-            if app.state.config.COMFYUI_FLUX_FP8_CLIP is not None:
-                data["flux_fp8_clip"] = app.state.config.COMFYUI_FLUX_FP8_CLIP
-
-            data = ImageGenerationPayload(**data)
-
+            form_data = ComfyUIGenerateImageForm(
+                **{
+                    "workflow": ComfyUIWorkflow(
+                        **{
+                            "workflow": app.state.config.COMFYUI_WORKFLOW,
+                            "nodes": app.state.config.COMFYUI_WORKFLOW_NODES,
+                        }
+                    ),
+                    **data,
+                }
+            )
             res = await comfyui_generate_image(
                 app.state.config.MODEL,
-                data,
+                form_data,
                 user.id,
                 app.state.config.COMFYUI_BASE_URL,
             )
@@ -532,13 +511,15 @@ async def image_generations(
                 file_body_path = IMAGE_CACHE_DIR.joinpath(f"{image_filename}.json")
 
                 with open(file_body_path, "w") as f:
-                    json.dump(data.model_dump(exclude_none=True), f)
+                    json.dump(form_data.model_dump(exclude_none=True), f)
 
             log.debug(f"images: {images}")
             return images
-        else:
+        elif (
+            app.state.config.ENGINE == "automatic1111" or app.state.config.ENGINE == ""
+        ):
             if form_data.model:
-                set_model_handler(form_data.model)
+                set_image_model(form_data.model)
 
             data = {
                 "prompt": form_data.prompt,
@@ -553,14 +534,15 @@ async def image_generations(
             if form_data.negative_prompt is not None:
                 data["negative_prompt"] = form_data.negative_prompt
 
-            r = requests.post(
+            # Use asyncio.to_thread for the requests.post call
+            r = await asyncio.to_thread(
+                requests.post,
                 url=f"{app.state.config.AUTOMATIC1111_BASE_URL}/sdapi/v1/txt2img",
                 json=data,
                 headers={"authorization": get_automatic1111_api_auth()},
             )
 
             res = r.json()
-
             log.debug(f"res: {res}")
 
             images = []
@@ -574,10 +556,8 @@ async def image_generations(
                     json.dump({**data, "info": res["info"]}, f)
 
             return images
-
     except Exception as e:
         error = e
-
         if r != None:
             data = r.json()
             if "error" in data:

backend/apps/images/utils/comfyui.py

@@ -15,245 +15,6 @@ from pydantic import BaseModel
 
 from typing import Optional
 
-COMFYUI_DEFAULT_PROMPT = """
-{
-  "3": {
-    "inputs": {
-      "seed": 0,
-      "steps": 20,
-      "cfg": 8,
-      "sampler_name": "euler",
-      "scheduler": "normal",
-      "denoise": 1,
-      "model": [
-        "4",
-        0
-      ],
-      "positive": [
-        "6",
-        0
-      ],
-      "negative": [
-        "7",
-        0
-      ],
-      "latent_image": [
-        "5",
-        0
-      ]
-    },
-    "class_type": "KSampler",
-    "_meta": {
-      "title": "KSampler"
-    }
-  },
-  "4": {
-    "inputs": {
-      "ckpt_name": "model.safetensors"
-    },
-    "class_type": "CheckpointLoaderSimple",
-    "_meta": {
-      "title": "Load Checkpoint"
-    }
-  },
-  "5": {
-    "inputs": {
-      "width": 512,
-      "height": 512,
-      "batch_size": 1
-    },
-    "class_type": "EmptyLatentImage",
-    "_meta": {
-      "title": "Empty Latent Image"
-    }
-  },
-  "6": {
-    "inputs": {
-      "text": "Prompt",
-      "clip": [
-        "4",
-        1
-      ]
-    },
-    "class_type": "CLIPTextEncode",
-    "_meta": {
-      "title": "CLIP Text Encode (Prompt)"
-    }
-  },
-  "7": {
-    "inputs": {
-      "text": "Negative Prompt",
-      "clip": [
-        "4",
-        1
-      ]
-    },
-    "class_type": "CLIPTextEncode",
-    "_meta": {
-      "title": "CLIP Text Encode (Prompt)"
-    }
-  },
-  "8": {
-    "inputs": {
-      "samples": [
-        "3",
-        0
-      ],
-      "vae": [
-        "4",
-        2
-      ]
-    },
-    "class_type": "VAEDecode",
-    "_meta": {
-      "title": "VAE Decode"
-    }
-  },
-  "9": {
-    "inputs": {
-      "filename_prefix": "ComfyUI",
-      "images": [
-        "8",
-        0
-      ]
-    },
-    "class_type": "SaveImage",
-    "_meta": {
-      "title": "Save Image"
-    }
-  }
-}
-"""
-
-FLUX_DEFAULT_PROMPT = """
-{
-    "5": {
-        "inputs": {
-            "width": 1024,
-            "height": 1024,
-            "batch_size": 1
-        },
-        "class_type": "EmptyLatentImage"
-    },
-    "6": {
-        "inputs": {
-            "text": "Input Text Here",
-            "clip": [
-                "11",
-                0
-            ]
-        },
-        "class_type": "CLIPTextEncode"
-    },
-    "8": {
-        "inputs": {
-            "samples": [
-                "13",
-                0
-            ],
-            "vae": [
-                "10",
-                0
-            ]
-        },
-        "class_type": "VAEDecode"
-    },
-    "9": {
-        "inputs": {
-            "filename_prefix": "ComfyUI",
-            "images": [
-                "8",
-                0
-            ]
-        },
-        "class_type": "SaveImage"
-    },
-    "10": {
-        "inputs": {
-            "vae_name": "ae.safetensors"
-        },
-        "class_type": "VAELoader"
-    },
-    "11": {
-        "inputs": {
-            "clip_name1": "clip_l.safetensors",
-            "clip_name2": "t5xxl_fp16.safetensors",
-            "type": "flux"
-        },
-        "class_type": "DualCLIPLoader"
-    },
-    "12": {
-        "inputs": {
-            "unet_name": "flux1-dev.safetensors",
-            "weight_dtype": "default"
-        },
-        "class_type": "UNETLoader"
-    },
-    "13": {
-        "inputs": {
-            "noise": [
-                "25",
-                0
-            ],
-            "guider": [
-                "22",
-                0
-            ],
-            "sampler": [
-                "16",
-                0
-            ],
-            "sigmas": [
-                "17",
-                0
-            ],
-            "latent_image": [
-                "5",
-                0
-            ]
-        },
-        "class_type": "SamplerCustomAdvanced"
-    },
-    "16": {
-        "inputs": {
-            "sampler_name": "euler"
-        },
-        "class_type": "KSamplerSelect"
-    },
-    "17": {
-        "inputs": {
-            "scheduler": "simple",
-            "steps": 20,
-            "denoise": 1,
-            "model": [
-                "12",
-                0
-            ]
-        },
-        "class_type": "BasicScheduler"
-    },
-    "22": {
-        "inputs": {
-            "model": [
-                "12",
-                0
-            ],
-            "conditioning": [
-                "6",
-                0
-            ]
-        },
-        "class_type": "BasicGuider"
-    },
-    "25": {
-        "inputs": {
-            "noise_seed": 778937779713005
-        },
-        "class_type": "RandomNoise"
-    }
-}
-"""
-
 
 def queue_prompt(prompt, client_id, base_url):
     log.info("queue_prompt")
@@ -311,82 +72,71 @@ def get_images(ws, prompt, client_id, base_url):
     return {"data": output_images}
 
 
-class ImageGenerationPayload(BaseModel):
+class ComfyUINodeInput(BaseModel):
+    type: Optional[str] = None
+    node_ids: list[str] = []
+    key: Optional[str] = "text"
+    value: Optional[str] = None
+
+
+class ComfyUIWorkflow(BaseModel):
+    workflow: str
+    nodes: list[ComfyUINodeInput]
+
+
+class ComfyUIGenerateImageForm(BaseModel):
+    workflow: ComfyUIWorkflow
+
     prompt: str
-    negative_prompt: Optional[str] = ""
-    steps: Optional[int] = None
-    seed: Optional[int] = None
+    negative_prompt: Optional[str] = None
     width: int
     height: int
     n: int = 1
-    cfg_scale: Optional[float] = None
-    sampler: Optional[str] = None
-    scheduler: Optional[str] = None
-    sd3: Optional[bool] = None
-    flux: Optional[bool] = None
-    flux_weight_dtype: Optional[str] = None
-    flux_fp8_clip: Optional[bool] = None
+
+    steps: Optional[int] = None
+    seed: Optional[int] = None
 
 
 async def comfyui_generate_image(
-    model: str, payload: ImageGenerationPayload, client_id, base_url
+    model: str, payload: ComfyUIGenerateImageForm, client_id, base_url
 ):
     ws_url = base_url.replace("http://", "ws://").replace("https://", "wss://")
+    workflow = json.loads(payload.workflow.workflow)
 
-    comfyui_prompt = json.loads(COMFYUI_DEFAULT_PROMPT)
-
-    if payload.cfg_scale:
-        comfyui_prompt["3"]["inputs"]["cfg"] = payload.cfg_scale
-
-    if payload.sampler:
-        comfyui_prompt["3"]["inputs"]["sampler"] = payload.sampler
-
-    if payload.scheduler:
-        comfyui_prompt["3"]["inputs"]["scheduler"] = payload.scheduler
-
-    if payload.sd3:
-        comfyui_prompt["5"]["class_type"] = "EmptySD3LatentImage"
-
-    if payload.steps:
-        comfyui_prompt["3"]["inputs"]["steps"] = payload.steps
-
-    comfyui_prompt["4"]["inputs"]["ckpt_name"] = model
-    comfyui_prompt["7"]["inputs"]["text"] = payload.negative_prompt
-    comfyui_prompt["3"]["inputs"]["seed"] = (
-        payload.seed if payload.seed else random.randint(0, 18446744073709551614)
-    )
-
-    # as Flux uses a completely different workflow, we must treat it specially
-    if payload.flux:
-        comfyui_prompt = json.loads(FLUX_DEFAULT_PROMPT)
-        comfyui_prompt["12"]["inputs"]["unet_name"] = model
-        comfyui_prompt["25"]["inputs"]["noise_seed"] = (
-            payload.seed if payload.seed else random.randint(0, 18446744073709551614)
-        )
-
-        if payload.sampler:
-            comfyui_prompt["16"]["inputs"]["sampler_name"] = payload.sampler
-
-        if payload.steps:
-            comfyui_prompt["17"]["inputs"]["steps"] = payload.steps
-
-        if payload.scheduler:
-            comfyui_prompt["17"]["inputs"]["scheduler"] = payload.scheduler
-
-        if payload.flux_weight_dtype:
-            comfyui_prompt["12"]["inputs"]["weight_dtype"] = payload.flux_weight_dtype
-
-        if payload.flux_fp8_clip:
-            comfyui_prompt["11"]["inputs"][
-                "clip_name2"
-            ] = "t5xxl_fp8_e4m3fn.safetensors"
-
-    comfyui_prompt["5"]["inputs"]["batch_size"] = payload.n
-    comfyui_prompt["5"]["inputs"]["width"] = payload.width
-    comfyui_prompt["5"]["inputs"]["height"] = payload.height
-
-    # set the text prompt for our positive CLIPTextEncode
-    comfyui_prompt["6"]["inputs"]["text"] = payload.prompt
+    for node in payload.workflow.nodes:
+        if node.type:
+            if node.type == "model":
+                for node_id in node.node_ids:
+                    workflow[node_id]["inputs"][node.key] = model
+            elif node.type == "prompt":
+                for node_id in node.node_ids:
+                    workflow[node_id]["inputs"]["text"] = payload.prompt
+            elif node.type == "negative_prompt":
+                for node_id in node.node_ids:
+                    workflow[node_id]["inputs"]["text"] = payload.negative_prompt
+            elif node.type == "width":
+                for node_id in node.node_ids:
+                    workflow[node_id]["inputs"]["width"] = payload.width
+            elif node.type == "height":
+                for node_id in node.node_ids:
+                    workflow[node_id]["inputs"]["height"] = payload.height
+            elif node.type == "n":
+                for node_id in node.node_ids:
+                    workflow[node_id]["inputs"]["batch_size"] = payload.n
+            elif node.type == "steps":
+                for node_id in node.node_ids:
+                    workflow[node_id]["inputs"]["steps"] = payload.steps
+            elif node.type == "seed":
+                seed = (
+                    payload.seed
+                    if payload.seed
+                    else random.randint(0, 18446744073709551614)
+                )
+                for node_id in node.node_ids:
+                    workflow[node_id]["inputs"][node.key] = seed
+        else:
+            for node_id in node.node_ids:
+                workflow[node_id]["inputs"][node.key] = node.value
 
     try:
         ws = websocket.WebSocket()
@@ -397,9 +147,9 @@ async def comfyui_generate_image(
         return None
 
     try:
-        images = await asyncio.to_thread(
-            get_images, ws, comfyui_prompt, client_id, base_url
-        )
+        log.info("Sending workflow to WebSocket server.")
+        log.info(f"Workflow: {workflow}")
+        images = await asyncio.to_thread(get_images, ws, workflow, client_id, base_url)
     except Exception as e:
         log.exception(f"Error while receiving images: {e}")
         images = None

backend/apps/ollama/main.py

@@ -41,6 +41,7 @@ from config import (
     MODEL_FILTER_LIST,
     UPLOAD_DIR,
     AppConfig,
+    CORS_ALLOW_ORIGIN,
 )
 from utils.misc import (
     calculate_sha256,
@@ -55,7 +56,7 @@ log.setLevel(SRC_LOG_LEVELS["OLLAMA"])
 app = FastAPI()
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],
+    allow_origins=CORS_ALLOW_ORIGIN,
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -147,20 +148,29 @@ async def cleanup_response(
         await session.close()
 
 
-async def post_streaming_url(url: str, payload: str, stream: bool = True):
+async def post_streaming_url(
+    url: str, payload: Union[str, bytes], stream: bool = True, content_type=None
+):
     r = None
     try:
         session = aiohttp.ClientSession(
             trust_env=True, timeout=aiohttp.ClientTimeout(total=AIOHTTP_CLIENT_TIMEOUT)
         )
-        r = await session.post(url, data=payload)
+        r = await session.post(
+            url,
+            data=payload,
+            headers={"Content-Type": "application/json"},
+        )
         r.raise_for_status()
 
         if stream:
+            headers = dict(r.headers)
+            if content_type:
+                headers["Content-Type"] = content_type
             return StreamingResponse(
                 r.content,
                 status_code=r.status,
-                headers=dict(r.headers),
+                headers=headers,
                 background=BackgroundTask(
                     cleanup_response, response=r, session=session
                 ),
@@ -422,6 +432,7 @@ async def copy_model(
     r = requests.request(
         method="POST",
         url=f"{url}/api/copy",
+        headers={"Content-Type": "application/json"},
         data=form_data.model_dump_json(exclude_none=True).encode(),
     )
 
@@ -470,6 +481,7 @@ async def delete_model(
     r = requests.request(
         method="DELETE",
         url=f"{url}/api/delete",
+        headers={"Content-Type": "application/json"},
         data=form_data.model_dump_json(exclude_none=True).encode(),
     )
     try:
@@ -510,6 +522,7 @@ async def show_model_info(form_data: ModelNameForm, user=Depends(get_verified_us
     r = requests.request(
         method="POST",
         url=f"{url}/api/show",
+        headers={"Content-Type": "application/json"},
         data=form_data.model_dump_json(exclude_none=True).encode(),
     )
     try:
@@ -567,6 +580,7 @@ async def generate_embeddings(
     r = requests.request(
         method="POST",
         url=f"{url}/api/embeddings",
+        headers={"Content-Type": "application/json"},
         data=form_data.model_dump_json(exclude_none=True).encode(),
     )
     try:
@@ -616,6 +630,7 @@ def generate_ollama_embeddings(
     r = requests.request(
         method="POST",
         url=f"{url}/api/embeddings",
+        headers={"Content-Type": "application/json"},
         data=form_data.model_dump_json(exclude_none=True).encode(),
     )
     try:
@@ -721,15 +736,20 @@ async def generate_chat_completion(
     url_idx: Optional[int] = None,
     user=Depends(get_verified_user),
 ):
-    log.debug(f"{form_data.model_dump_json(exclude_none=True).encode()}=")
-
-    payload = {
-        **form_data.model_dump(exclude_none=True, exclude=["metadata"]),
-    }
+    payload = {**form_data.model_dump(exclude_none=True)}
+    log.debug(f"{payload = }")
     if "metadata" in payload:
         del payload["metadata"]
 
     model_id = form_data.model
+
+    if app.state.config.ENABLE_MODEL_FILTER:
+        if user.role == "user" and model_id not in app.state.config.MODEL_FILTER_LIST:
+            raise HTTPException(
+                status_code=403,
+                detail="Model not found",
+            )
+
     model_info = Models.get_model_by_id(model_id)
 
     if model_info:
@@ -754,7 +774,9 @@ async def generate_chat_completion(
     log.info(f"url: {url}")
     log.debug(payload)
 
-    return await post_streaming_url(f"{url}/api/chat", json.dumps(payload))
+    return await post_streaming_url(
+        f"{url}/api/chat", json.dumps(payload), content_type="application/x-ndjson"
+    )
 
 
 # TODO: we should update this part once Ollama supports other types
@@ -790,6 +812,14 @@ async def generate_openai_chat_completion(
         del payload["metadata"]
 
     model_id = completion_form.model
+
+    if app.state.config.ENABLE_MODEL_FILTER:
+        if user.role == "user" and model_id not in app.state.config.MODEL_FILTER_LIST:
+            raise HTTPException(
+                status_code=403,
+                detail="Model not found",
+            )
+
     model_info = Models.get_model_by_id(model_id)
 
     if model_info:

backend/apps/openai/main.py

@@ -32,6 +32,7 @@ from config import (
     ENABLE_MODEL_FILTER,
     MODEL_FILTER_LIST,
     AppConfig,
+    CORS_ALLOW_ORIGIN,
 )
 from typing import Optional, Literal, overload
 
@@ -45,7 +46,7 @@ log.setLevel(SRC_LOG_LEVELS["OPENAI"])
 app = FastAPI()
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],
+    allow_origins=CORS_ALLOW_ORIGIN,
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],

backend/apps/rag/main.py

@@ -95,6 +95,8 @@ from config import (
     TIKA_SERVER_URL,
     RAG_TOP_K,
     RAG_RELEVANCE_THRESHOLD,
+    RAG_FILE_MAX_SIZE,
+    RAG_FILE_MAX_COUNT,
     RAG_EMBEDDING_ENGINE,
     RAG_EMBEDDING_MODEL,
     RAG_EMBEDDING_MODEL_AUTO_UPDATE,
@@ -129,6 +131,7 @@ from config import (
     RAG_WEB_SEARCH_RESULT_COUNT,
     RAG_WEB_SEARCH_CONCURRENT_REQUESTS,
     RAG_EMBEDDING_OPENAI_BATCH_SIZE,
+    CORS_ALLOW_ORIGIN,
 )
 
 from constants import ERROR_MESSAGES
@@ -142,6 +145,8 @@ app.state.config = AppConfig()
 
 app.state.config.TOP_K = RAG_TOP_K
 app.state.config.RELEVANCE_THRESHOLD = RAG_RELEVANCE_THRESHOLD
+app.state.config.FILE_MAX_SIZE = RAG_FILE_MAX_SIZE
+app.state.config.FILE_MAX_COUNT = RAG_FILE_MAX_COUNT
 
 app.state.config.ENABLE_RAG_HYBRID_SEARCH = ENABLE_RAG_HYBRID_SEARCH
 app.state.config.ENABLE_RAG_WEB_LOADER_SSL_VERIFICATION = (
@@ -240,12 +245,9 @@ app.state.EMBEDDING_FUNCTION = get_embedding_function(
     app.state.config.RAG_EMBEDDING_OPENAI_BATCH_SIZE,
 )
 
-origins = ["*"]
-
-
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=origins,
+    allow_origins=CORS_ALLOW_ORIGIN,
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -395,6 +397,10 @@ async def get_rag_config(user=Depends(get_admin_user)):
     return {
         "status": True,
         "pdf_extract_images": app.state.config.PDF_EXTRACT_IMAGES,
+        "file": {
+            "max_size": app.state.config.FILE_MAX_SIZE,
+            "max_count": app.state.config.FILE_MAX_COUNT,
+        },
         "content_extraction": {
             "engine": app.state.config.CONTENT_EXTRACTION_ENGINE,
             "tika_server_url": app.state.config.TIKA_SERVER_URL,
@@ -428,6 +434,11 @@ async def get_rag_config(user=Depends(get_admin_user)):
     }
 
 
+class FileConfig(BaseModel):
+    max_size: Optional[int] = None
+    max_count: Optional[int] = None
+
+
 class ContentExtractionConfig(BaseModel):
     engine: str = ""
     tika_server_url: Optional[str] = None
@@ -466,6 +477,7 @@ class WebConfig(BaseModel):
 
 class ConfigUpdateForm(BaseModel):
     pdf_extract_images: Optional[bool] = None
+    file: Optional[FileConfig] = None
     content_extraction: Optional[ContentExtractionConfig] = None
     chunk: Optional[ChunkParamUpdateForm] = None
     youtube: Optional[YoutubeLoaderConfig] = None
@@ -480,6 +492,10 @@ async def update_rag_config(form_data: ConfigUpdateForm, user=Depends(get_admin_
         else app.state.config.PDF_EXTRACT_IMAGES
     )
 
+    if form_data.file is not None:
+        app.state.config.FILE_MAX_SIZE = form_data.file.max_size
+        app.state.config.FILE_MAX_COUNT = form_data.file.max_count
+
     if form_data.content_extraction is not None:
         log.info(f"Updating text settings: {form_data.content_extraction}")
         app.state.config.CONTENT_EXTRACTION_ENGINE = form_data.content_extraction.engine
@@ -521,6 +537,10 @@ async def update_rag_config(form_data: ConfigUpdateForm, user=Depends(get_admin_
     return {
         "status": True,
         "pdf_extract_images": app.state.config.PDF_EXTRACT_IMAGES,
+        "file": {
+            "max_size": app.state.config.FILE_MAX_SIZE,
+            "max_count": app.state.config.FILE_MAX_COUNT,
+        },
         "content_extraction": {
             "engine": app.state.config.CONTENT_EXTRACTION_ENGINE,
             "tika_server_url": app.state.config.TIKA_SERVER_URL,
@@ -592,6 +612,7 @@ async def update_query_settings(
     app.state.config.ENABLE_RAG_HYBRID_SEARCH = (
         form_data.hybrid if form_data.hybrid else False
     )
+
     return {
         "status": True,
         "template": app.state.config.RAG_TEMPLATE,
@@ -1375,12 +1396,12 @@ def scan_docs_dir(user=Depends(get_admin_user)):
     return True
 
 
-@app.get("/reset/db")
+@app.post("/reset/db")
 def reset_vector_db(user=Depends(get_admin_user)):
     CHROMA_CLIENT.reset()
 
 
-@app.get("/reset/uploads")
+@app.post("/reset/uploads")
 def reset_upload_dir(user=Depends(get_admin_user)) -> bool:
     folder = f"{UPLOAD_DIR}"
     try:
@@ -1404,7 +1425,7 @@ def reset_upload_dir(user=Depends(get_admin_user)) -> bool:
     return True
 
 
-@app.get("/reset")
+@app.post("/reset")
 def reset(user=Depends(get_admin_user)) -> bool:
     folder = f"{UPLOAD_DIR}"
     for filename in os.listdir(folder):

backend/apps/rag/utils.py

@@ -149,16 +149,20 @@ def query_collection(
 ):
     results = []
     for collection_name in collection_names:
-        try:
-            result = query_doc(
-                collection_name=collection_name,
-                query=query,
-                k=k,
-                embedding_function=embedding_function,
-            )
-            results.append(result)
-        except Exception:
+        if collection_name:
+            try:
+                result = query_doc(
+                    collection_name=collection_name,
+                    query=query,
+                    k=k,
+                    embedding_function=embedding_function,
+                )
+                results.append(result)
+            except Exception:
+                pass
+        else:
             pass
+
     return merge_and_sort_query_results(results, k=k)
 
 
@@ -257,7 +261,7 @@ def get_rag_context(
         collection_names = (
             file["collection_names"]
             if file["type"] == "collection"
-            else [file["collection_name"]]
+            else [file["collection_name"]] if file["collection_name"] else []
         )
 
         collection_names = set(collection_names).difference(extracted_collections)

backend/apps/webui/internal/db.py

@@ -3,18 +3,19 @@ import logging
 import json
 from contextlib import contextmanager
 
-from peewee_migrate import Router
-from apps.webui.internal.wrappers import register_connection
 
 from typing import Optional, Any
 from typing_extensions import Self
 
 from sqlalchemy import create_engine, types, Dialect
+from sqlalchemy.sql.type_api import _T
 from sqlalchemy.ext.declarative import declarative_base
 from sqlalchemy.orm import sessionmaker, scoped_session
-from sqlalchemy.sql.type_api import _T
 
-from config import SRC_LOG_LEVELS, DATA_DIR, DATABASE_URL, BACKEND_DIR
+
+from peewee_migrate import Router
+from apps.webui.internal.wrappers import register_connection
+from env import SRC_LOG_LEVELS, BACKEND_DIR, DATABASE_URL
 
 log = logging.getLogger(__name__)
 log.setLevel(SRC_LOG_LEVELS["DB"])
@@ -42,34 +43,21 @@ class JSONField(types.TypeDecorator):
             return json.loads(value)
 
 
-# Check if the file exists
-if os.path.exists(f"{DATA_DIR}/ollama.db"):
-    # Rename the file
-    os.rename(f"{DATA_DIR}/ollama.db", f"{DATA_DIR}/webui.db")
-    log.info("Database migrated from Ollama-WebUI successfully.")
-else:
-    pass
-
-
 # Workaround to handle the peewee migration
 # This is required to ensure the peewee migration is handled before the alembic migration
 def handle_peewee_migration(DATABASE_URL):
+    # db = None
     try:
-        # Replace the postgresql:// with postgres:// and %40 with @ in the DATABASE_URL
-        db = register_connection(
-            DATABASE_URL.replace("postgresql://", "postgres://").replace("%40", "@")
-        )
+        # Replace the postgresql:// with postgres:// to handle the peewee migration
+        db = register_connection(DATABASE_URL.replace("postgresql://", "postgres://"))
         migrate_dir = BACKEND_DIR / "apps" / "webui" / "internal" / "migrations"
         router = Router(db, logger=log, migrate_dir=migrate_dir)
         router.run()
         db.close()
 
-        # check if db connection has been closed
-
     except Exception as e:
         log.error(f"Failed to initialize the database connection: {e}")
         raise
-
     finally:
         # Properly closing the database connection
         if db and not db.is_closed():
@@ -98,7 +86,6 @@ Base = declarative_base()
 Session = scoped_session(SessionLocal)
 
 
-# Dependency
 def get_session():
     db = SessionLocal()
     try:

backend/apps/webui/internal/wrappers.py

@@ -6,7 +6,7 @@ import logging
 from playhouse.db_url import connect, parse
 from playhouse.shortcuts import ReconnectMixin
 
-from config import SRC_LOG_LEVELS
+from env import SRC_LOG_LEVELS
 
 log = logging.getLogger(__name__)
 log.setLevel(SRC_LOG_LEVELS["DB"])
@@ -43,7 +43,7 @@ class ReconnectingPostgresqlDatabase(CustomReconnectMixin, PostgresqlDatabase):
 
 
 def register_connection(db_url):
-    db = connect(db_url)
+    db = connect(db_url, unquote_password=True)
     if isinstance(db, PostgresqlDatabase):
         # Enable autoconnect for SQLite databases, managed by Peewee
         db.autoconnect = True
@@ -51,16 +51,10 @@ def register_connection(db_url):
         log.info("Connected to PostgreSQL database")
 
         # Get the connection details
-        connection = parse(db_url)
+        connection = parse(db_url, unquote_password=True)
 
         # Use our custom database class that supports reconnection
-        db = ReconnectingPostgresqlDatabase(
-            connection["database"],
-            user=connection["user"],
-            password=connection["password"],
-            host=connection["host"],
-            port=connection["port"],
-        )
+        db = ReconnectingPostgresqlDatabase(**connection)
         db.connect(reuse_if_open=True)
     elif isinstance(db, SqliteDatabase):
         # Enable autoconnect for SQLite databases, managed by Peewee

backend/apps/webui/main.py

@@ -26,6 +26,7 @@ from utils.misc import (
     apply_model_system_prompt_to_body,
 )
 
+from utils.tools import get_tools
 
 from config import (
     SHOW_ADMIN_DETAILS,
@@ -43,23 +44,26 @@ from config import (
     JWT_EXPIRES_IN,
     WEBUI_BANNERS,
     ENABLE_COMMUNITY_SHARING,
+    ENABLE_MESSAGE_RATING,
     AppConfig,
     OAUTH_USERNAME_CLAIM,
     OAUTH_PICTURE_CLAIM,
     OAUTH_EMAIL_CLAIM,
+    CORS_ALLOW_ORIGIN,
 )
 
 from apps.socket.main import get_event_call, get_event_emitter
 
 import inspect
 import json
+import logging
 
 from typing import Iterator, Generator, AsyncGenerator
 from pydantic import BaseModel
 
 app = FastAPI()
 
-origins = ["*"]
+log = logging.getLogger(__name__)
 
 app.state.config = AppConfig()
 
@@ -82,6 +86,7 @@ app.state.config.WEBHOOK_URL = WEBHOOK_URL
 app.state.config.BANNERS = WEBUI_BANNERS
 
 app.state.config.ENABLE_COMMUNITY_SHARING = ENABLE_COMMUNITY_SHARING
+app.state.config.ENABLE_MESSAGE_RATING = ENABLE_MESSAGE_RATING
 
 app.state.config.OAUTH_USERNAME_CLAIM = OAUTH_USERNAME_CLAIM
 app.state.config.OAUTH_PICTURE_CLAIM = OAUTH_PICTURE_CLAIM
@@ -93,7 +98,7 @@ app.state.FUNCTIONS = {}
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=origins,
+    allow_origins=CORS_ALLOW_ORIGIN,
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -241,40 +246,40 @@ def get_pipe_id(form_data: dict) -> str:
     return pipe_id
 
 
-def get_function_params(function_module, form_data, user, extra_params={}):
+def get_function_params(function_module, form_data, user, extra_params=None):
+    if extra_params is None:
+        extra_params = {}
+
     pipe_id = get_pipe_id(form_data)
+
     # Get the signature of the function
     sig = inspect.signature(function_module.pipe)
-    params = {"body": form_data}
-
-    for key, value in extra_params.items():
-        if key in sig.parameters:
-            params[key] = value
-
-    if "__user__" in sig.parameters:
-        __user__ = {
-            "id": user.id,
-            "email": user.email,
-            "name": user.name,
-            "role": user.role,
-        }
+    params = {"body": form_data} | {
+        k: v for k, v in extra_params.items() if k in sig.parameters
+    }
 
+    if "__user__" in params and hasattr(function_module, "UserValves"):
+        user_valves = Functions.get_user_valves_by_id_and_user_id(pipe_id, user.id)
         try:
-            if hasattr(function_module, "UserValves"):
-                __user__["valves"] = function_module.UserValves(
-                    **Functions.get_user_valves_by_id_and_user_id(pipe_id, user.id)
-                )
+            params["__user__"]["valves"] = function_module.UserValves(**user_valves)
         except Exception as e:
-            print(e)
+            log.exception(e)
+            params["__user__"]["valves"] = function_module.UserValves()
 
-        params["__user__"] = __user__
     return params
 
 
 async def generate_function_chat_completion(form_data, user):
     model_id = form_data.get("model")
     model_info = Models.get_model_by_id(model_id)
-    metadata = form_data.pop("metadata", None)
+
+    metadata = form_data.pop("metadata", {})
+
+    files = metadata.get("files", [])
+    tool_ids = metadata.get("tool_ids", [])
+    # Check if tool_ids is None
+    if tool_ids is None:
+        tool_ids = []
 
     __event_emitter__ = None
     __event_call__ = None
@@ -286,6 +291,30 @@ async def generate_function_chat_completion(form_data, user):
             __event_call__ = get_event_call(metadata)
         __task__ = metadata.get("task", None)
 
+    extra_params = {
+        "__event_emitter__": __event_emitter__,
+        "__event_call__": __event_call__,
+        "__task__": __task__,
+        "__files__": files,
+        "__user__": {
+            "id": user.id,
+            "email": user.email,
+            "name": user.name,
+            "role": user.role,
+        },
+    }
+    extra_params["__tools__"] = get_tools(
+        app,
+        tool_ids,
+        user,
+        {
+            **extra_params,
+            "__model__": app.state.MODELS[form_data["model"]],
+            "__messages__": form_data["messages"],
+            "__files__": files,
+        },
+    )
+
     if model_info:
         if model_info.base_model_id:
             form_data["model"] = model_info.base_model_id
@@ -298,16 +327,7 @@ async def generate_function_chat_completion(form_data, user):
     function_module = get_function_module(pipe_id)
 
     pipe = function_module.pipe
-    params = get_function_params(
-        function_module,
-        form_data,
-        user,
-        {
-            "__event_emitter__": __event_emitter__,
-            "__event_call__": __event_call__,
-            "__task__": __task__,
-        },
-    )
+    params = get_function_params(function_module, form_data, user, extra_params)
 
     if form_data["stream"]:
 

backend/apps/webui/models/auths.py

@@ -4,12 +4,12 @@ import uuid
 import logging
 from sqlalchemy import String, Column, Boolean, Text
 
-from apps.webui.models.users import UserModel, Users
 from utils.utils import verify_password
 
+from apps.webui.models.users import UserModel, Users
 from apps.webui.internal.db import Base, get_db
 
-from config import SRC_LOG_LEVELS
+from env import SRC_LOG_LEVELS
 
 log = logging.getLogger(__name__)
 log.setLevel(SRC_LOG_LEVELS["MODELS"])

backend/apps/webui/models/chats.py

@@ -249,22 +249,25 @@ class ChatTable:
         self,
         user_id: str,
         include_archived: bool = False,
-        skip: int = 0,
-        limit: int = -1,
+        skip: Optional[int] = None,
+        limit: Optional[int] = None,
     ) -> list[ChatTitleIdResponse]:
         with get_db() as db:
             query = db.query(Chat).filter_by(user_id=user_id)
             if not include_archived:
                 query = query.filter_by(archived=False)
 
-            all_chats = (
-                query.order_by(Chat.updated_at.desc())
-                # limit cols
-                .with_entities(Chat.id, Chat.title, Chat.updated_at, Chat.created_at)
-                .limit(limit)
-                .offset(skip)
-                .all()
+            query = query.order_by(Chat.updated_at.desc()).with_entities(
+                Chat.id, Chat.title, Chat.updated_at, Chat.created_at
             )
+
+            if limit:
+                query = query.limit(limit)
+            if skip:
+                query = query.offset(skip)
+
+            all_chats = query.all()
+
             # result has to be destrctured from sqlalchemy `row` and mapped to a dict since the `ChatModel`is not the returned dataclass.
             return [
                 ChatTitleIdResponse.model_validate(

backend/apps/webui/models/documents.py

@@ -9,7 +9,7 @@ from apps.webui.internal.db import Base, get_db
 
 import json
 
-from config import SRC_LOG_LEVELS
+from env import SRC_LOG_LEVELS
 
 log = logging.getLogger(__name__)
 log.setLevel(SRC_LOG_LEVELS["MODELS"])

backend/apps/webui/models/files.py

@@ -9,7 +9,7 @@ from apps.webui.internal.db import JSONField, Base, get_db
 
 import json
 
-from config import SRC_LOG_LEVELS
+from env import SRC_LOG_LEVELS
 
 log = logging.getLogger(__name__)
 log.setLevel(SRC_LOG_LEVELS["MODELS"])
@@ -98,6 +98,13 @@ class FilesTable:
 
             return [FileModel.model_validate(file) for file in db.query(File).all()]
 
+    def get_files_by_user_id(self, user_id: str) -> list[FileModel]:
+        with get_db() as db:
+            return [
+                FileModel.model_validate(file)
+                for file in db.query(File).filter_by(user_id=user_id).all()
+            ]
+
     def delete_file_by_id(self, id: str) -> bool:
 
         with get_db() as db:

backend/apps/webui/models/functions.py

@@ -12,7 +12,7 @@ import json
 import copy
 
 
-from config import SRC_LOG_LEVELS
+from env import SRC_LOG_LEVELS
 
 log = logging.getLogger(__name__)
 log.setLevel(SRC_LOG_LEVELS["MODELS"])

backend/apps/webui/models/models.py

@@ -6,7 +6,7 @@ from sqlalchemy import Column, BigInteger, Text
 
 from apps.webui.internal.db import Base, JSONField, get_db
 
-from config import SRC_LOG_LEVELS
+from env import SRC_LOG_LEVELS
 
 import time
 

backend/apps/webui/models/tags.py

@@ -10,7 +10,7 @@ from sqlalchemy import String, Column, BigInteger, Text
 
 from apps.webui.internal.db import Base, get_db
 
-from config import SRC_LOG_LEVELS
+from env import SRC_LOG_LEVELS
 
 log = logging.getLogger(__name__)
 log.setLevel(SRC_LOG_LEVELS["MODELS"])

backend/apps/webui/models/tools.py

@@ -11,7 +11,7 @@ import json
 import copy
 
 
-from config import SRC_LOG_LEVELS
+from env import SRC_LOG_LEVELS
 
 log = logging.getLogger(__name__)
 log.setLevel(SRC_LOG_LEVELS["MODELS"])

backend/apps/webui/models/users.py

@@ -1,12 +1,10 @@
-from pydantic import BaseModel, ConfigDict, parse_obj_as
-from typing import Union, Optional
+from pydantic import BaseModel, ConfigDict
+from typing import Optional
 import time
 
 from sqlalchemy import String, Column, BigInteger, Text
 
-from utils.misc import get_gravatar_url
-
-from apps.webui.internal.db import Base, JSONField, Session, get_db
+from apps.webui.internal.db import Base, JSONField, get_db
 from apps.webui.models.chats import Chats
 
 ####################
@@ -78,7 +76,6 @@ class UserUpdateForm(BaseModel):
 
 
 class UsersTable:
-
     def insert_new_user(
         self,
         id: str,
@@ -122,7 +119,6 @@ class UsersTable:
     def get_user_by_api_key(self, api_key: str) -> Optional[UserModel]:
         try:
             with get_db() as db:
-
                 user = db.query(User).filter_by(api_key=api_key).first()
                 return UserModel.model_validate(user)
         except Exception:
@@ -131,7 +127,6 @@ class UsersTable:
     def get_user_by_email(self, email: str) -> Optional[UserModel]:
         try:
             with get_db() as db:
-
                 user = db.query(User).filter_by(email=email).first()
                 return UserModel.model_validate(user)
         except Exception:
@@ -140,7 +135,6 @@ class UsersTable:
     def get_user_by_oauth_sub(self, sub: str) -> Optional[UserModel]:
         try:
             with get_db() as db:
-
                 user = db.query(User).filter_by(oauth_sub=sub).first()
                 return UserModel.model_validate(user)
         except Exception:
@@ -195,7 +189,6 @@ class UsersTable:
     def update_user_last_active_by_id(self, id: str) -> Optional[UserModel]:
         try:
             with get_db() as db:
-
                 db.query(User).filter_by(id=id).update(
                     {"last_active_at": int(time.time())}
                 )

backend/apps/webui/routers/auths.py

@@ -195,7 +195,11 @@ async def signin(request: Request, response: Response, form_data: SigninForm):
 
 @router.post("/signup", response_model=SigninResponse)
 async def signup(request: Request, response: Response, form_data: SignupForm):
-    if not request.app.state.config.ENABLE_SIGNUP and WEBUI_AUTH:
+    if (
+        not request.app.state.config.ENABLE_SIGNUP
+        and request.app.state.config.ENABLE_LOGIN_FORM
+        and WEBUI_AUTH
+    ):
         raise HTTPException(
             status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.ACCESS_PROHIBITED
         )
@@ -228,7 +232,6 @@ async def signup(request: Request, response: Response, form_data: SignupForm):
                 data={"id": user.id},
                 expires_delta=parse_duration(request.app.state.config.JWT_EXPIRES_IN),
             )
-            # response.set_cookie(key='token', value=token, httponly=True)
 
             # Set the cookie token
             response.set_cookie(
@@ -352,6 +355,7 @@ async def get_admin_config(request: Request, user=Depends(get_admin_user)):
         "DEFAULT_USER_ROLE": request.app.state.config.DEFAULT_USER_ROLE,
         "JWT_EXPIRES_IN": request.app.state.config.JWT_EXPIRES_IN,
         "ENABLE_COMMUNITY_SHARING": request.app.state.config.ENABLE_COMMUNITY_SHARING,
+        "ENABLE_MESSAGE_RATING": request.app.state.config.ENABLE_MESSAGE_RATING,
     }
 
 
@@ -361,6 +365,7 @@ class AdminConfig(BaseModel):
     DEFAULT_USER_ROLE: str
     JWT_EXPIRES_IN: str
     ENABLE_COMMUNITY_SHARING: bool
+    ENABLE_MESSAGE_RATING: bool
 
 
 @router.post("/admin/config")
@@ -382,6 +387,7 @@ async def update_admin_config(
     request.app.state.config.ENABLE_COMMUNITY_SHARING = (
         form_data.ENABLE_COMMUNITY_SHARING
     )
+    request.app.state.config.ENABLE_MESSAGE_RATING = form_data.ENABLE_MESSAGE_RATING
 
     return {
         "SHOW_ADMIN_DETAILS": request.app.state.config.SHOW_ADMIN_DETAILS,
@@ -389,6 +395,7 @@ async def update_admin_config(
         "DEFAULT_USER_ROLE": request.app.state.config.DEFAULT_USER_ROLE,
         "JWT_EXPIRES_IN": request.app.state.config.JWT_EXPIRES_IN,
         "ENABLE_COMMUNITY_SHARING": request.app.state.config.ENABLE_COMMUNITY_SHARING,
+        "ENABLE_MESSAGE_RATING": request.app.state.config.ENABLE_MESSAGE_RATING,
     }
 
 

backend/apps/webui/routers/files.py

@@ -106,7 +106,10 @@ def upload_file(file: UploadFile = File(...), user=Depends(get_verified_user)):
 
 @router.get("/", response_model=list[FileModel])
 async def list_files(user=Depends(get_verified_user)):
-    files = Files.get_files()
+    if user.role == "admin":
+        files = Files.get_files()
+    else:
+        files = Files.get_files_by_user_id(user.id)
     return files
 
 
@@ -156,7 +159,7 @@ async def delete_all_files(user=Depends(get_admin_user)):
 async def get_file_by_id(id: str, user=Depends(get_verified_user)):
     file = Files.get_file_by_id(id)
 
-    if file:
+    if file and (file.user_id == user.id or user.role == "admin"):
         return file
     else:
         raise HTTPException(
@@ -174,7 +177,7 @@ async def get_file_by_id(id: str, user=Depends(get_verified_user)):
 async def get_file_content_by_id(id: str, user=Depends(get_verified_user)):
     file = Files.get_file_by_id(id)
 
-    if file:
+    if file and (file.user_id == user.id or user.role == "admin"):
         file_path = Path(file.meta["path"])
 
         # Check if the file already exists in the cache
@@ -197,7 +200,7 @@ async def get_file_content_by_id(id: str, user=Depends(get_verified_user)):
 async def get_file_content_by_id(id: str, user=Depends(get_verified_user)):
     file = Files.get_file_by_id(id)
 
-    if file:
+    if file and (file.user_id == user.id or user.role == "admin"):
         file_path = Path(file.meta["path"])
 
         # Check if the file already exists in the cache
@@ -224,8 +227,7 @@ async def get_file_content_by_id(id: str, user=Depends(get_verified_user)):
 @router.delete("/{id}")
 async def delete_file_by_id(id: str, user=Depends(get_verified_user)):
     file = Files.get_file_by_id(id)
-
-    if file:
+    if file and (file.user_id == user.id or user.role == "admin"):
         result = Files.delete_file_by_id(id)
         if result:
             return {"message": "File deleted successfully"}

backend/apps/webui/routers/memories.py

@@ -68,6 +68,76 @@ async def add_memory(
     return memory
 
 
+############################
+# QueryMemory
+############################
+
+
+class QueryMemoryForm(BaseModel):
+    content: str
+    k: Optional[int] = 1
+
+
+@router.post("/query")
+async def query_memory(
+    request: Request, form_data: QueryMemoryForm, user=Depends(get_verified_user)
+):
+    query_embedding = request.app.state.EMBEDDING_FUNCTION(form_data.content)
+    collection = CHROMA_CLIENT.get_or_create_collection(name=f"user-memory-{user.id}")
+
+    results = collection.query(
+        query_embeddings=[query_embedding],
+        n_results=form_data.k,  # how many results to return
+    )
+
+    return results
+
+
+############################
+# ResetMemoryFromVectorDB
+############################
+@router.post("/reset", response_model=bool)
+async def reset_memory_from_vector_db(
+    request: Request, user=Depends(get_verified_user)
+):
+    CHROMA_CLIENT.delete_collection(f"user-memory-{user.id}")
+    collection = CHROMA_CLIENT.get_or_create_collection(name=f"user-memory-{user.id}")
+
+    memories = Memories.get_memories_by_user_id(user.id)
+    for memory in memories:
+        memory_embedding = request.app.state.EMBEDDING_FUNCTION(memory.content)
+        collection.upsert(
+            documents=[memory.content],
+            ids=[memory.id],
+            embeddings=[memory_embedding],
+        )
+    return True
+
+
+############################
+# DeleteMemoriesByUserId
+############################
+
+
+@router.delete("/delete/user", response_model=bool)
+async def delete_memory_by_user_id(user=Depends(get_verified_user)):
+    result = Memories.delete_memories_by_user_id(user.id)
+
+    if result:
+        try:
+            CHROMA_CLIENT.delete_collection(f"user-memory-{user.id}")
+        except Exception as e:
+            log.error(e)
+        return True
+
+    return False
+
+
+############################
+# UpdateMemoryById
+############################
+
+
 @router.post("/{memory_id}/update", response_model=Optional[MemoryModel])
 async def update_memory_by_id(
     memory_id: str,
@@ -96,71 +166,6 @@ async def update_memory_by_id(
     return memory
 
 
-############################
-# QueryMemory
-############################
-
-
-class QueryMemoryForm(BaseModel):
-    content: str
-    k: Optional[int] = 1
-
-
-@router.post("/query")
-async def query_memory(
-    request: Request, form_data: QueryMemoryForm, user=Depends(get_verified_user)
-):
-    query_embedding = request.app.state.EMBEDDING_FUNCTION(form_data.content)
-    collection = CHROMA_CLIENT.get_or_create_collection(name=f"user-memory-{user.id}")
-
-    results = collection.query(
-        query_embeddings=[query_embedding],
-        n_results=form_data.k,  # how many results to return
-    )
-
-    return results
-
-
-############################
-# ResetMemoryFromVectorDB
-############################
-@router.get("/reset", response_model=bool)
-async def reset_memory_from_vector_db(
-    request: Request, user=Depends(get_verified_user)
-):
-    CHROMA_CLIENT.delete_collection(f"user-memory-{user.id}")
-    collection = CHROMA_CLIENT.get_or_create_collection(name=f"user-memory-{user.id}")
-
-    memories = Memories.get_memories_by_user_id(user.id)
-    for memory in memories:
-        memory_embedding = request.app.state.EMBEDDING_FUNCTION(memory.content)
-        collection.upsert(
-            documents=[memory.content],
-            ids=[memory.id],
-            embeddings=[memory_embedding],
-        )
-    return True
-
-
-############################
-# DeleteMemoriesByUserId
-############################
-
-
-@router.delete("/user", response_model=bool)
-async def delete_memory_by_user_id(user=Depends(get_verified_user)):
-    result = Memories.delete_memories_by_user_id(user.id)
-
-    if result:
-        try:
-            CHROMA_CLIENT.delete_collection(f"user-memory-{user.id}")
-        except Exception as e:
-            log.error(e)
-        return True
-
-    return False
-
-
 ############################
 # DeleteMemoryById
 ############################

backend/apps/webui/routers/utils.py

@@ -85,9 +85,10 @@ async def download_chat_as_pdf(
     pdf.add_font("NotoSans", "i", f"{FONTS_DIR}/NotoSans-Italic.ttf")
     pdf.add_font("NotoSansKR", "", f"{FONTS_DIR}/NotoSansKR-Regular.ttf")
     pdf.add_font("NotoSansJP", "", f"{FONTS_DIR}/NotoSansJP-Regular.ttf")
+    pdf.add_font("NotoSansSC", "", f"{FONTS_DIR}/NotoSansSC-Regular.ttf")
 
     pdf.set_font("NotoSans", size=12)
-    pdf.set_fallback_fonts(["NotoSansKR", "NotoSansJP"])
+    pdf.set_fallback_fonts(["NotoSansKR", "NotoSansJP", "NotoSansSC"])
 
     pdf.set_auto_page_break(auto=True, margin=15)
 

backend/apps/webui/utils.py

@@ -4,6 +4,9 @@ import re
 import sys
 import subprocess
 
+
+from apps.webui.models.tools import Tools
+from apps.webui.models.functions import Functions
 from config import TOOLS_DIR, FUNCTIONS_DIR
 
 
@@ -49,6 +52,15 @@ def extract_frontmatter(file_path):
 
 def load_toolkit_module_by_id(toolkit_id):
     toolkit_path = os.path.join(TOOLS_DIR, f"{toolkit_id}.py")
+
+    if not os.path.exists(toolkit_path):
+        tool = Tools.get_tool_by_id(toolkit_id)
+        if tool:
+            with open(toolkit_path, "w") as file:
+                file.write(tool.content)
+        else:
+            raise Exception(f"Toolkit not found: {toolkit_id}")
+
     spec = util.spec_from_file_location(toolkit_id, toolkit_path)
     module = util.module_from_spec(spec)
     frontmatter = extract_frontmatter(toolkit_path)
@@ -71,6 +83,14 @@ def load_toolkit_module_by_id(toolkit_id):
 def load_function_module_by_id(function_id):
     function_path = os.path.join(FUNCTIONS_DIR, f"{function_id}.py")
 
+    if not os.path.exists(function_path):
+        function = Functions.get_function_by_id(function_id)
+        if function:
+            with open(function_path, "w") as file:
+                file.write(function.content)
+        else:
+            raise Exception(f"Function not found: {function_id}")
+
     spec = util.spec_from_file_location(function_id, function_path)
     module = util.module_from_spec(spec)
     frontmatter = extract_frontmatter(function_path)

backend/config.py

@@ -1,11 +1,17 @@
+from sqlalchemy import create_engine, Column, Integer, DateTime, JSON, func
+from contextlib import contextmanager
+
+
 import os
 import sys
 import logging
 import importlib.metadata
 import pkgutil
+from urllib.parse import urlparse
+from datetime import datetime
+
 import chromadb
 from chromadb import Settings
-from bs4 import BeautifulSoup
 from typing import TypeVar, Generic
 from pydantic import BaseModel
 from typing import Optional
@@ -14,68 +20,39 @@ from pathlib import Path
 import json
 import yaml
 
-import markdown
 import requests
 import shutil
 
+
+from apps.webui.internal.db import Base, get_db
+
 from constants import ERROR_MESSAGES
 
-####################################
-# Load .env file
-####################################
-
-BACKEND_DIR = Path(__file__).parent  # the path containing this file
-BASE_DIR = BACKEND_DIR.parent  # the path containing the backend/
-
-print(BASE_DIR)
-
-try:
-    from dotenv import load_dotenv, find_dotenv
-
-    load_dotenv(find_dotenv(str(BASE_DIR / ".env")))
-except ImportError:
-    print("dotenv not installed, skipping...")
-
-
-####################################
-# LOGGING
-####################################
-
-log_levels = ["CRITICAL", "ERROR", "WARNING", "INFO", "DEBUG"]
-
-GLOBAL_LOG_LEVEL = os.environ.get("GLOBAL_LOG_LEVEL", "").upper()
-if GLOBAL_LOG_LEVEL in log_levels:
-    logging.basicConfig(stream=sys.stdout, level=GLOBAL_LOG_LEVEL, force=True)
-else:
-    GLOBAL_LOG_LEVEL = "INFO"
-
-log = logging.getLogger(__name__)
-log.info(f"GLOBAL_LOG_LEVEL: {GLOBAL_LOG_LEVEL}")
-
-log_sources = [
-    "AUDIO",
-    "COMFYUI",
-    "CONFIG",
-    "DB",
-    "IMAGES",
-    "MAIN",
-    "MODELS",
-    "OLLAMA",
-    "OPENAI",
-    "RAG",
-    "WEBHOOK",
-]
-
-SRC_LOG_LEVELS = {}
-
-for source in log_sources:
-    log_env_var = source + "_LOG_LEVEL"
-    SRC_LOG_LEVELS[source] = os.environ.get(log_env_var, "").upper()
-    if SRC_LOG_LEVELS[source] not in log_levels:
-        SRC_LOG_LEVELS[source] = GLOBAL_LOG_LEVEL
-    log.info(f"{log_env_var}: {SRC_LOG_LEVELS[source]}")
-
-log.setLevel(SRC_LOG_LEVELS["CONFIG"])
+from env import (
+    ENV,
+    VERSION,
+    SAFE_MODE,
+    GLOBAL_LOG_LEVEL,
+    SRC_LOG_LEVELS,
+    BASE_DIR,
+    DATA_DIR,
+    BACKEND_DIR,
+    FRONTEND_BUILD_DIR,
+    WEBUI_NAME,
+    WEBUI_URL,
+    WEBUI_FAVICON_URL,
+    WEBUI_BUILD_HASH,
+    CONFIG_DATA,
+    DATABASE_URL,
+    CHANGELOG,
+    WEBUI_AUTH,
+    WEBUI_AUTH_TRUSTED_EMAIL_HEADER,
+    WEBUI_AUTH_TRUSTED_NAME_HEADER,
+    WEBUI_SECRET_KEY,
+    WEBUI_SESSION_COOKIE_SAME_SITE,
+    WEBUI_SESSION_COOKIE_SECURE,
+    log,
+)
 
 
 class EndpointFilter(logging.Filter):
@@ -86,136 +63,62 @@ class EndpointFilter(logging.Filter):
 # Filter out /endpoint
 logging.getLogger("uvicorn.access").addFilter(EndpointFilter())
 
-
-WEBUI_NAME = os.environ.get("WEBUI_NAME", "Open WebUI")
-if WEBUI_NAME != "Open WebUI":
-    WEBUI_NAME += " (Open WebUI)"
-
-WEBUI_URL = os.environ.get("WEBUI_URL", "http://localhost:3000")
-
-WEBUI_FAVICON_URL = "https://openwebui.com/favicon.png"
-
-
-####################################
-# ENV (dev,test,prod)
-####################################
-
-ENV = os.environ.get("ENV", "dev")
-
-try:
-    PACKAGE_DATA = json.loads((BASE_DIR / "package.json").read_text())
-except Exception:
-    try:
-        PACKAGE_DATA = {"version": importlib.metadata.version("open-webui")}
-    except importlib.metadata.PackageNotFoundError:
-        PACKAGE_DATA = {"version": "0.0.0"}
-
-VERSION = PACKAGE_DATA["version"]
-
-
-# Function to parse each section
-def parse_section(section):
-    items = []
-    for li in section.find_all("li"):
-        # Extract raw HTML string
-        raw_html = str(li)
-
-        # Extract text without HTML tags
-        text = li.get_text(separator=" ", strip=True)
-
-        # Split into title and content
-        parts = text.split(": ", 1)
-        title = parts[0].strip() if len(parts) > 1 else ""
-        content = parts[1].strip() if len(parts) > 1 else text
-
-        items.append({"title": title, "content": content, "raw": raw_html})
-    return items
-
-
-try:
-    changelog_path = BASE_DIR / "CHANGELOG.md"
-    with open(str(changelog_path.absolute()), "r", encoding="utf8") as file:
-        changelog_content = file.read()
-
-except Exception:
-    changelog_content = (pkgutil.get_data("open_webui", "CHANGELOG.md") or b"").decode()
-
-
-# Convert markdown content to HTML
-html_content = markdown.markdown(changelog_content)
-
-# Parse the HTML content
-soup = BeautifulSoup(html_content, "html.parser")
-
-# Initialize JSON structure
-changelog_json = {}
-
-# Iterate over each version
-for version in soup.find_all("h2"):
-    version_number = version.get_text().strip().split(" - ")[0][1:-1]  # Remove brackets
-    date = version.get_text().strip().split(" - ")[1]
-
-    version_data = {"date": date}
-
-    # Find the next sibling that is a h3 tag (section title)
-    current = version.find_next_sibling()
-
-    while current and current.name != "h2":
-        if current.name == "h3":
-            section_title = current.get_text().lower()  # e.g., "added", "fixed"
-            section_items = parse_section(current.find_next_sibling("ul"))
-            version_data[section_title] = section_items
-
-        # Move to the next element
-        current = current.find_next_sibling()
-
-    changelog_json[version_number] = version_data
-
-
-CHANGELOG = changelog_json
-
-
-####################################
-# SAFE_MODE
-####################################
-
-SAFE_MODE = os.environ.get("SAFE_MODE", "false").lower() == "true"
-
-####################################
-# WEBUI_BUILD_HASH
-####################################
-
-WEBUI_BUILD_HASH = os.environ.get("WEBUI_BUILD_HASH", "dev-build")
-
-####################################
-# DATA/FRONTEND BUILD DIR
-####################################
-
-DATA_DIR = Path(os.getenv("DATA_DIR", BACKEND_DIR / "data")).resolve()
-FRONTEND_BUILD_DIR = Path(os.getenv("FRONTEND_BUILD_DIR", BASE_DIR / "build")).resolve()
-
-RESET_CONFIG_ON_START = (
-    os.environ.get("RESET_CONFIG_ON_START", "False").lower() == "true"
-)
-if RESET_CONFIG_ON_START:
-    try:
-        os.remove(f"{DATA_DIR}/config.json")
-        with open(f"{DATA_DIR}/config.json", "w") as f:
-            f.write("{}")
-    except Exception:
-        pass
-
-try:
-    CONFIG_DATA = json.loads((DATA_DIR / "config.json").read_text())
-except Exception:
-    CONFIG_DATA = {}
-
-
 ####################################
 # Config helpers
 ####################################
 
 
+# Function to run the alembic migrations
+def run_migrations():
+    print("Running migrations")
+    try:
+        from alembic.config import Config
+        from alembic import command
+
+        alembic_cfg = Config("alembic.ini")
+        command.upgrade(alembic_cfg, "head")
+    except Exception as e:
+        print(f"Error: {e}")
+
+
+run_migrations()
+
+
+class Config(Base):
+    __tablename__ = "config"
+
+    id = Column(Integer, primary_key=True)
+    data = Column(JSON, nullable=False)
+    version = Column(Integer, nullable=False, default=0)
+    created_at = Column(DateTime, nullable=False, server_default=func.now())
+    updated_at = Column(DateTime, nullable=True, onupdate=func.now())
+
+
+def load_json_config():
+    with open(f"{DATA_DIR}/config.json", "r") as file:
+        return json.load(file)
+
+
+def save_to_db(data):
+    with get_db() as db:
+        existing_config = db.query(Config).first()
+        if not existing_config:
+            new_config = Config(data=data, version=0)
+            db.add(new_config)
+        else:
+            existing_config.data = data
+            existing_config.updated_at = datetime.now()
+            db.add(existing_config)
+        db.commit()
+
+
+# When initializing, check if config.json exists and migrate it to the database
+if os.path.exists(f"{DATA_DIR}/config.json"):
+    data = load_json_config()
+    save_to_db(data)
+    os.rename(f"{DATA_DIR}/config.json", f"{DATA_DIR}/old_config.json")
+
+
 def save_config():
     try:
         with open(f"{DATA_DIR}/config.json", "w") as f:
@@ -224,6 +127,68 @@ def save_config():
         log.exception(e)
 
 
+DEFAULT_CONFIG = {
+    "version": 0,
+    "ui": {
+        "default_locale": "",
+        "prompt_suggestions": [
+            {
+                "title": [
+                    "Help me study",
+                    "vocabulary for a college entrance exam",
+                ],
+                "content": "Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.",
+            },
+            {
+                "title": [
+                    "Give me ideas",
+                    "for what to do with my kids' art",
+                ],
+                "content": "What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.",
+            },
+            {
+                "title": ["Tell me a fun fact", "about the Roman Empire"],
+                "content": "Tell me a random fun fact about the Roman Empire",
+            },
+            {
+                "title": [
+                    "Show me a code snippet",
+                    "of a website's sticky header",
+                ],
+                "content": "Show me a code snippet of a website's sticky header in CSS and JavaScript.",
+            },
+            {
+                "title": [
+                    "Explain options trading",
+                    "if I'm familiar with buying and selling stocks",
+                ],
+                "content": "Explain options trading in simple terms if I'm familiar with buying and selling stocks.",
+            },
+            {
+                "title": ["Overcome procrastination", "give me tips"],
+                "content": "Could you start by asking me about instances when I procrastinate the most and then give me some suggestions to overcome it?",
+            },
+            {
+                "title": [
+                    "Grammar check",
+                    "rewrite it for better readability ",
+                ],
+                "content": 'Check the following sentence for grammar and clarity: "[sentence]". Rewrite it for better readability while maintaining its original meaning.',
+            },
+        ],
+    },
+}
+
+
+def get_config():
+    with get_db() as db:
+        config_entry = db.query(Config).order_by(Config.id.desc()).first()
+        return config_entry.data if config_entry else DEFAULT_CONFIG
+
+
+CONFIG_DATA = get_config()
+
+
 def get_config_value(config_path: str):
     path_parts = config_path.split(".")
     cur_config = CONFIG_DATA
@@ -245,7 +210,7 @@ class PersistentConfig(Generic[T]):
         self.env_value = env_value
         self.config_value = get_config_value(config_path)
         if self.config_value is not None:
-            log.info(f"'{env_name}' loaded from config.json")
+            log.info(f"'{env_name}' loaded from the latest database entry")
             self.value = self.config_value
         else:
             self.value = env_value
@@ -267,19 +232,15 @@ class PersistentConfig(Generic[T]):
         return super().__getattribute__(item)
 
     def save(self):
-        # Don't save if the value is the same as the env value and the config value
-        if self.env_value == self.value:
-            if self.config_value == self.value:
-                return
-        log.info(f"Saving '{self.env_name}' to config.json")
+        log.info(f"Saving '{self.env_name}' to the database")
         path_parts = self.config_path.split(".")
-        config = CONFIG_DATA
+        sub_config = CONFIG_DATA
         for key in path_parts[:-1]:
-            if key not in config:
-                config[key] = {}
-            config = config[key]
-        config[path_parts[-1]] = self.value
-        save_config()
+            if key not in sub_config:
+                sub_config[key] = {}
+            sub_config = sub_config[key]
+        sub_config[path_parts[-1]] = self.value
+        save_to_db(CONFIG_DATA)
         self.config_value = self.value
 
 
@@ -304,11 +265,6 @@ class AppConfig:
 # WEBUI_AUTH (Required for security)
 ####################################
 
-WEBUI_AUTH = os.environ.get("WEBUI_AUTH", "True").lower() == "true"
-WEBUI_AUTH_TRUSTED_EMAIL_HEADER = os.environ.get(
-    "WEBUI_AUTH_TRUSTED_EMAIL_HEADER", None
-)
-WEBUI_AUTH_TRUSTED_NAME_HEADER = os.environ.get("WEBUI_AUTH_TRUSTED_NAME_HEADER", None)
 JWT_EXPIRES_IN = PersistentConfig(
     "JWT_EXPIRES_IN", "auth.jwt_expiry", os.environ.get("JWT_EXPIRES_IN", "-1")
 )
@@ -806,10 +762,24 @@ USER_PERMISSIONS_CHAT_DELETION = (
     os.environ.get("USER_PERMISSIONS_CHAT_DELETION", "True").lower() == "true"
 )
 
+USER_PERMISSIONS_CHAT_EDITING = (
+    os.environ.get("USER_PERMISSIONS_CHAT_EDITING", "True").lower() == "true"
+)
+
+USER_PERMISSIONS_CHAT_TEMPORARY = (
+    os.environ.get("USER_PERMISSIONS_CHAT_TEMPORARY", "True").lower() == "true"
+)
+
 USER_PERMISSIONS = PersistentConfig(
     "USER_PERMISSIONS",
     "ui.user_permissions",
-    {"chat": {"deletion": USER_PERMISSIONS_CHAT_DELETION}},
+    {
+        "chat": {
+            "deletion": USER_PERMISSIONS_CHAT_DELETION,
+            "editing": USER_PERMISSIONS_CHAT_EDITING,
+            "temporary": USER_PERMISSIONS_CHAT_TEMPORARY,
+        }
+    },
 )
 
 ENABLE_MODEL_FILTER = PersistentConfig(
@@ -840,6 +810,47 @@ ENABLE_COMMUNITY_SHARING = PersistentConfig(
     os.environ.get("ENABLE_COMMUNITY_SHARING", "True").lower() == "true",
 )
 
+ENABLE_MESSAGE_RATING = PersistentConfig(
+    "ENABLE_MESSAGE_RATING",
+    "ui.enable_message_rating",
+    os.environ.get("ENABLE_MESSAGE_RATING", "True").lower() == "true",
+)
+
+
+def validate_cors_origins(origins):
+    for origin in origins:
+        if origin != "*":
+            validate_cors_origin(origin)
+
+
+def validate_cors_origin(origin):
+    parsed_url = urlparse(origin)
+
+    # Check if the scheme is either http or https
+    if parsed_url.scheme not in ["http", "https"]:
+        raise ValueError(
+            f"Invalid scheme in CORS_ALLOW_ORIGIN: '{origin}'. Only 'http' and 'https' are allowed."
+        )
+
+    # Ensure that the netloc (domain + port) is present, indicating it's a valid URL
+    if not parsed_url.netloc:
+        raise ValueError(f"Invalid URL structure in CORS_ALLOW_ORIGIN: '{origin}'.")
+
+
+# For production, you should only need one host as
+# fastapi serves the svelte-kit built frontend and backend from the same host and port.
+# To test CORS_ALLOW_ORIGIN locally, you can set something like
+# CORS_ALLOW_ORIGIN=http://localhost:5173;http://localhost:8080
+# in your .env file depending on your frontend port, 5173 in this case.
+CORS_ALLOW_ORIGIN = os.environ.get("CORS_ALLOW_ORIGIN", "*").split(";")
+
+if "*" in CORS_ALLOW_ORIGIN:
+    log.warning(
+        "\n\nWARNING: CORS_ALLOW_ORIGIN IS SET TO '*' - NOT RECOMMENDED FOR PRODUCTION DEPLOYMENTS.\n"
+    )
+
+validate_cors_origins(CORS_ALLOW_ORIGIN)
+
 
 class BannerModel(BaseModel):
     id: str
@@ -895,10 +906,7 @@ TITLE_GENERATION_PROMPT_TEMPLATE = PersistentConfig(
     "task.title.prompt_template",
     os.environ.get(
         "TITLE_GENERATION_PROMPT_TEMPLATE",
-        """Here is the query:
-{{prompt:middletruncate:8000}}
-
-Create a concise, 3-5 word phrase with an emoji as a title for the previous query. Suitable Emojis for the summary can be used to enhance understanding but avoid quotation marks or special formatting. RESPOND ONLY WITH THE TITLE TEXT.
+        """Create a concise, 3-5 word title with an emoji as a title for the prompt in the given language. Suitable Emojis for the summary can be used to enhance understanding but avoid quotation marks or special formatting. RESPOND ONLY WITH THE TITLE TEXT.
 
 Examples of titles:
 📉 Stock Market Trends
@@ -906,7 +914,9 @@ Examples of titles:
 Evolution of Music Streaming
 Remote Work Productivity Tips
 Artificial Intelligence in Healthcare
-🎮 Video Game Development Insights""",
+🎮 Video Game Development Insights
+
+Prompt: {{prompt:middletruncate:8000}}""",
     ),
 )
 
@@ -939,36 +949,11 @@ TOOLS_FUNCTION_CALLING_PROMPT_TEMPLATE = PersistentConfig(
     "task.tools.prompt_template",
     os.environ.get(
         "TOOLS_FUNCTION_CALLING_PROMPT_TEMPLATE",
-        """Tools: {{TOOLS}}
-If a function tool doesn't match the query, return an empty string. Else, pick a function tool, fill in the parameters from the function tool's schema, and return it in the format { "name": \"functionName\", "parameters": { "key": "value" } }. Only pick a function if the user asks.  Only return the object. Do not return any other text.""",
+        """Available Tools: {{TOOLS}}\nReturn an empty string if no tools match the query. If a function tool matches, construct and return a JSON object in the format {\"name\": \"functionName\", \"parameters\": {\"requiredFunctionParamKey\": \"requiredFunctionParamValue\"}} using the appropriate tool and its parameters. Only return the object and limit the response to the JSON object without additional text.""",
     ),
 )
 
 
-####################################
-# WEBUI_SECRET_KEY
-####################################
-
-WEBUI_SECRET_KEY = os.environ.get(
-    "WEBUI_SECRET_KEY",
-    os.environ.get(
-        "WEBUI_JWT_SECRET_KEY", "t0p-s3cr3t"
-    ),  # DEPRECATED: remove at next major version
-)
-
-WEBUI_SESSION_COOKIE_SAME_SITE = os.environ.get(
-    "WEBUI_SESSION_COOKIE_SAME_SITE",
-    os.environ.get("WEBUI_SESSION_COOKIE_SAME_SITE", "lax"),
-)
-
-WEBUI_SESSION_COOKIE_SECURE = os.environ.get(
-    "WEBUI_SESSION_COOKIE_SECURE",
-    os.environ.get("WEBUI_SESSION_COOKIE_SECURE", "false").lower() == "true",
-)
-
-if WEBUI_AUTH and WEBUI_SECRET_KEY == "":
-    raise ValueError(ERROR_MESSAGES.ENV_VAR_NOT_FOUND)
-
 ####################################
 # RAG document content extraction
 ####################################
@@ -1020,6 +1005,26 @@ ENABLE_RAG_HYBRID_SEARCH = PersistentConfig(
     os.environ.get("ENABLE_RAG_HYBRID_SEARCH", "").lower() == "true",
 )
 
+RAG_FILE_MAX_COUNT = PersistentConfig(
+    "RAG_FILE_MAX_COUNT",
+    "rag.file.max_count",
+    (
+        int(os.environ.get("RAG_FILE_MAX_COUNT"))
+        if os.environ.get("RAG_FILE_MAX_COUNT")
+        else None
+    ),
+)
+
+RAG_FILE_MAX_SIZE = PersistentConfig(
+    "RAG_FILE_MAX_SIZE",
+    "rag.file.max_size",
+    (
+        int(os.environ.get("RAG_FILE_MAX_SIZE"))
+        if os.environ.get("RAG_FILE_MAX_SIZE")
+        else None
+    ),
+)
+
 ENABLE_RAG_WEB_LOADER_SSL_VERIFICATION = PersistentConfig(
     "ENABLE_RAG_WEB_LOADER_SSL_VERIFICATION",
     "rag.enable_web_loader_ssl_verification",
@@ -1056,7 +1061,7 @@ RAG_EMBEDDING_MODEL_TRUST_REMOTE_CODE = (
 RAG_EMBEDDING_OPENAI_BATCH_SIZE = PersistentConfig(
     "RAG_EMBEDDING_OPENAI_BATCH_SIZE",
     "rag.embedding_openai_batch_size",
-    os.environ.get("RAG_EMBEDDING_OPENAI_BATCH_SIZE", 1),
+    int(os.environ.get("RAG_EMBEDDING_OPENAI_BATCH_SIZE", "1")),
 )
 
 RAG_RERANKING_MODEL = PersistentConfig(
@@ -1263,7 +1268,7 @@ WHISPER_MODEL_AUTO_UPDATE = (
 IMAGE_GENERATION_ENGINE = PersistentConfig(
     "IMAGE_GENERATION_ENGINE",
     "image_generation.engine",
-    os.getenv("IMAGE_GENERATION_ENGINE", ""),
+    os.getenv("IMAGE_GENERATION_ENGINE", "openai"),
 )
 
 ENABLE_IMAGE_GENERATION = PersistentConfig(
@@ -1288,46 +1293,127 @@ COMFYUI_BASE_URL = PersistentConfig(
     os.getenv("COMFYUI_BASE_URL", ""),
 )
 
-COMFYUI_CFG_SCALE = PersistentConfig(
-    "COMFYUI_CFG_SCALE",
-    "image_generation.comfyui.cfg_scale",
-    os.getenv("COMFYUI_CFG_SCALE", ""),
+COMFYUI_DEFAULT_WORKFLOW = """
+{
+  "3": {
+    "inputs": {
+      "seed": 0,
+      "steps": 20,
+      "cfg": 8,
+      "sampler_name": "euler",
+      "scheduler": "normal",
+      "denoise": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "5",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "4": {
+    "inputs": {
+      "ckpt_name": "model.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "5": {
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "Prompt",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "3",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "9": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "SaveImage",
+    "_meta": {
+      "title": "Save Image"
+    }
+  }
+}
+"""
+
+
+COMFYUI_WORKFLOW = PersistentConfig(
+    "COMFYUI_WORKFLOW",
+    "image_generation.comfyui.workflow",
+    os.getenv("COMFYUI_WORKFLOW", COMFYUI_DEFAULT_WORKFLOW),
 )
 
-COMFYUI_SAMPLER = PersistentConfig(
-    "COMFYUI_SAMPLER",
-    "image_generation.comfyui.sampler",
-    os.getenv("COMFYUI_SAMPLER", ""),
-)
-
-COMFYUI_SCHEDULER = PersistentConfig(
-    "COMFYUI_SCHEDULER",
-    "image_generation.comfyui.scheduler",
-    os.getenv("COMFYUI_SCHEDULER", ""),
-)
-
-COMFYUI_SD3 = PersistentConfig(
-    "COMFYUI_SD3",
-    "image_generation.comfyui.sd3",
-    os.environ.get("COMFYUI_SD3", "").lower() == "true",
-)
-
-COMFYUI_FLUX = PersistentConfig(
-    "COMFYUI_FLUX",
-    "image_generation.comfyui.flux",
-    os.environ.get("COMFYUI_FLUX", "").lower() == "true",
-)
-
-COMFYUI_FLUX_WEIGHT_DTYPE = PersistentConfig(
-    "COMFYUI_FLUX_WEIGHT_DTYPE",
-    "image_generation.comfyui.flux_weight_dtype",
-    os.getenv("COMFYUI_FLUX_WEIGHT_DTYPE", ""),
-)
-
-COMFYUI_FLUX_FP8_CLIP = PersistentConfig(
-    "COMFYUI_FLUX_FP8_CLIP",
-    "image_generation.comfyui.flux_fp8_clip",
-    os.environ.get("COMFYUI_FLUX_FP8_CLIP", "").lower() == "true",
+COMFYUI_WORKFLOW_NODES = PersistentConfig(
+    "COMFYUI_WORKFLOW",
+    "image_generation.comfyui.nodes",
+    [],
 )
 
 IMAGES_OPENAI_API_BASE_URL = PersistentConfig(
@@ -1410,22 +1496,17 @@ AUDIO_TTS_ENGINE = PersistentConfig(
 AUDIO_TTS_MODEL = PersistentConfig(
     "AUDIO_TTS_MODEL",
     "audio.tts.model",
-    os.getenv("AUDIO_TTS_MODEL", "tts-1"),
+    os.getenv("AUDIO_TTS_MODEL", "tts-1"),  # OpenAI default model
 )
 
 AUDIO_TTS_VOICE = PersistentConfig(
     "AUDIO_TTS_VOICE",
     "audio.tts.voice",
-    os.getenv("AUDIO_TTS_VOICE", "alloy"),
+    os.getenv("AUDIO_TTS_VOICE", "alloy"),  # OpenAI default voice
 )
 
-
-####################################
-# Database
-####################################
-
-DATABASE_URL = os.environ.get("DATABASE_URL", f"sqlite:///{DATA_DIR}/webui.db")
-
-# Replace the postgres:// with postgresql://
-if "postgres://" in DATABASE_URL:
-    DATABASE_URL = DATABASE_URL.replace("postgres://", "postgresql://")
+AUDIO_TTS_SPLIT_ON = PersistentConfig(
+    "AUDIO_TTS_SPLIT_ON",
+    "audio.tts.split_on",
+    os.getenv("AUDIO_TTS_SPLIT_ON", "punctuation"),
+)

backend/constants.py

@@ -100,3 +100,4 @@ class TASKS(str, Enum):
     EMOJI_GENERATION = "emoji_generation"
     QUERY_GENERATION = "query_generation"
     FUNCTION_CALLING = "function_calling"
+    MOA_RESPONSE_GENERATION = "moa_response_generation"

backend/data/config.json

@@ -1,36 +0,0 @@
-{
-	"version": 0,
-	"ui": {
-		"default_locale": "",
-		"prompt_suggestions": [
-			{
-				"title": ["Help me study", "vocabulary for a college entrance exam"],
-				"content": "Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option."
-			},
-			{
-				"title": ["Give me ideas", "for what to do with my kids' art"],
-				"content": "What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter."
-			},
-			{
-				"title": ["Tell me a fun fact", "about the Roman Empire"],
-				"content": "Tell me a random fun fact about the Roman Empire"
-			},
-			{
-				"title": ["Show me a code snippet", "of a website's sticky header"],
-				"content": "Show me a code snippet of a website's sticky header in CSS and JavaScript."
-			},
-			{
-				"title": ["Explain options trading", "if I'm familiar with buying and selling stocks"],
-				"content": "Explain options trading in simple terms if I'm familiar with buying and selling stocks."
-			},
-			{
-				"title": ["Overcome procrastination", "give me tips"],
-				"content": "Could you start by asking me about instances when I procrastinate the most and then give me some suggestions to overcome it?"
-			},
-			{
-				"title": ["Grammar check", "rewrite it for better readability "],
-				"content": "Check the following sentence for grammar and clarity: \"[sentence]\". Rewrite it for better readability while maintaining its original meaning."
-			}
-		]
-	}
-}

backend/env.py

@@ -0,0 +1,252 @@
+from pathlib import Path
+import os
+import logging
+import sys
+import json
+
+
+import importlib.metadata
+import pkgutil
+from urllib.parse import urlparse
+from datetime import datetime
+
+
+import markdown
+from bs4 import BeautifulSoup
+
+from constants import ERROR_MESSAGES
+
+####################################
+# Load .env file
+####################################
+
+BACKEND_DIR = Path(__file__).parent  # the path containing this file
+BASE_DIR = BACKEND_DIR.parent  # the path containing the backend/
+
+print(BASE_DIR)
+
+try:
+    from dotenv import load_dotenv, find_dotenv
+
+    load_dotenv(find_dotenv(str(BASE_DIR / ".env")))
+except ImportError:
+    print("dotenv not installed, skipping...")
+
+
+####################################
+# LOGGING
+####################################
+
+log_levels = ["CRITICAL", "ERROR", "WARNING", "INFO", "DEBUG"]
+
+GLOBAL_LOG_LEVEL = os.environ.get("GLOBAL_LOG_LEVEL", "").upper()
+if GLOBAL_LOG_LEVEL in log_levels:
+    logging.basicConfig(stream=sys.stdout, level=GLOBAL_LOG_LEVEL, force=True)
+else:
+    GLOBAL_LOG_LEVEL = "INFO"
+
+log = logging.getLogger(__name__)
+log.info(f"GLOBAL_LOG_LEVEL: {GLOBAL_LOG_LEVEL}")
+
+log_sources = [
+    "AUDIO",
+    "COMFYUI",
+    "CONFIG",
+    "DB",
+    "IMAGES",
+    "MAIN",
+    "MODELS",
+    "OLLAMA",
+    "OPENAI",
+    "RAG",
+    "WEBHOOK",
+]
+
+SRC_LOG_LEVELS = {}
+
+for source in log_sources:
+    log_env_var = source + "_LOG_LEVEL"
+    SRC_LOG_LEVELS[source] = os.environ.get(log_env_var, "").upper()
+    if SRC_LOG_LEVELS[source] not in log_levels:
+        SRC_LOG_LEVELS[source] = GLOBAL_LOG_LEVEL
+    log.info(f"{log_env_var}: {SRC_LOG_LEVELS[source]}")
+
+log.setLevel(SRC_LOG_LEVELS["CONFIG"])
+
+
+WEBUI_NAME = os.environ.get("WEBUI_NAME", "Open WebUI")
+if WEBUI_NAME != "Open WebUI":
+    WEBUI_NAME += " (Open WebUI)"
+
+WEBUI_URL = os.environ.get("WEBUI_URL", "http://localhost:3000")
+
+WEBUI_FAVICON_URL = "https://openwebui.com/favicon.png"
+
+
+####################################
+# ENV (dev,test,prod)
+####################################
+
+ENV = os.environ.get("ENV", "dev")
+
+try:
+    PACKAGE_DATA = json.loads((BASE_DIR / "package.json").read_text())
+except Exception:
+    try:
+        PACKAGE_DATA = {"version": importlib.metadata.version("open-webui")}
+    except importlib.metadata.PackageNotFoundError:
+        PACKAGE_DATA = {"version": "0.0.0"}
+
+VERSION = PACKAGE_DATA["version"]
+
+
+# Function to parse each section
+def parse_section(section):
+    items = []
+    for li in section.find_all("li"):
+        # Extract raw HTML string
+        raw_html = str(li)
+
+        # Extract text without HTML tags
+        text = li.get_text(separator=" ", strip=True)
+
+        # Split into title and content
+        parts = text.split(": ", 1)
+        title = parts[0].strip() if len(parts) > 1 else ""
+        content = parts[1].strip() if len(parts) > 1 else text
+
+        items.append({"title": title, "content": content, "raw": raw_html})
+    return items
+
+
+try:
+    changelog_path = BASE_DIR / "CHANGELOG.md"
+    with open(str(changelog_path.absolute()), "r", encoding="utf8") as file:
+        changelog_content = file.read()
+
+except Exception:
+    changelog_content = (pkgutil.get_data("open_webui", "CHANGELOG.md") or b"").decode()
+
+
+# Convert markdown content to HTML
+html_content = markdown.markdown(changelog_content)
+
+# Parse the HTML content
+soup = BeautifulSoup(html_content, "html.parser")
+
+# Initialize JSON structure
+changelog_json = {}
+
+# Iterate over each version
+for version in soup.find_all("h2"):
+    version_number = version.get_text().strip().split(" - ")[0][1:-1]  # Remove brackets
+    date = version.get_text().strip().split(" - ")[1]
+
+    version_data = {"date": date}
+
+    # Find the next sibling that is a h3 tag (section title)
+    current = version.find_next_sibling()
+
+    while current and current.name != "h2":
+        if current.name == "h3":
+            section_title = current.get_text().lower()  # e.g., "added", "fixed"
+            section_items = parse_section(current.find_next_sibling("ul"))
+            version_data[section_title] = section_items
+
+        # Move to the next element
+        current = current.find_next_sibling()
+
+    changelog_json[version_number] = version_data
+
+
+CHANGELOG = changelog_json
+
+####################################
+# SAFE_MODE
+####################################
+
+SAFE_MODE = os.environ.get("SAFE_MODE", "false").lower() == "true"
+
+####################################
+# WEBUI_BUILD_HASH
+####################################
+
+WEBUI_BUILD_HASH = os.environ.get("WEBUI_BUILD_HASH", "dev-build")
+
+####################################
+# DATA/FRONTEND BUILD DIR
+####################################
+
+DATA_DIR = Path(os.getenv("DATA_DIR", BACKEND_DIR / "data")).resolve()
+FRONTEND_BUILD_DIR = Path(os.getenv("FRONTEND_BUILD_DIR", BASE_DIR / "build")).resolve()
+
+RESET_CONFIG_ON_START = (
+    os.environ.get("RESET_CONFIG_ON_START", "False").lower() == "true"
+)
+if RESET_CONFIG_ON_START:
+    try:
+        os.remove(f"{DATA_DIR}/config.json")
+        with open(f"{DATA_DIR}/config.json", "w") as f:
+            f.write("{}")
+    except Exception:
+        pass
+
+try:
+    CONFIG_DATA = json.loads((DATA_DIR / "config.json").read_text())
+except Exception:
+    CONFIG_DATA = {}
+
+
+####################################
+# Database
+####################################
+
+# Check if the file exists
+if os.path.exists(f"{DATA_DIR}/ollama.db"):
+    # Rename the file
+    os.rename(f"{DATA_DIR}/ollama.db", f"{DATA_DIR}/webui.db")
+    log.info("Database migrated from Ollama-WebUI successfully.")
+else:
+    pass
+
+DATABASE_URL = os.environ.get("DATABASE_URL", f"sqlite:///{DATA_DIR}/webui.db")
+
+# Replace the postgres:// with postgresql://
+if "postgres://" in DATABASE_URL:
+    DATABASE_URL = DATABASE_URL.replace("postgres://", "postgresql://")
+
+
+####################################
+# WEBUI_AUTH (Required for security)
+####################################
+
+WEBUI_AUTH = os.environ.get("WEBUI_AUTH", "True").lower() == "true"
+WEBUI_AUTH_TRUSTED_EMAIL_HEADER = os.environ.get(
+    "WEBUI_AUTH_TRUSTED_EMAIL_HEADER", None
+)
+WEBUI_AUTH_TRUSTED_NAME_HEADER = os.environ.get("WEBUI_AUTH_TRUSTED_NAME_HEADER", None)
+
+
+####################################
+# WEBUI_SECRET_KEY
+####################################
+
+WEBUI_SECRET_KEY = os.environ.get(
+    "WEBUI_SECRET_KEY",
+    os.environ.get(
+        "WEBUI_JWT_SECRET_KEY", "t0p-s3cr3t"
+    ),  # DEPRECATED: remove at next major version
+)
+
+WEBUI_SESSION_COOKIE_SAME_SITE = os.environ.get(
+    "WEBUI_SESSION_COOKIE_SAME_SITE",
+    os.environ.get("WEBUI_SESSION_COOKIE_SAME_SITE", "lax"),
+)
+
+WEBUI_SESSION_COOKIE_SECURE = os.environ.get(
+    "WEBUI_SESSION_COOKIE_SECURE",
+    os.environ.get("WEBUI_SESSION_COOKIE_SECURE", "false").lower() == "true",
+)
+
+if WEBUI_AUTH and WEBUI_SECRET_KEY == "":
+    raise ValueError(ERROR_MESSAGES.ENV_VAR_NOT_FOUND)

backend/migrations/env.py

@@ -18,7 +18,7 @@ from apps.webui.models.users import User
 from apps.webui.models.files import File
 from apps.webui.models.functions import Function
 
-from config import DATABASE_URL
+from env import DATABASE_URL
 
 # this is the Alembic Config object, which provides
 # access to the values within the .ini file in use.

backend/migrations/versions/ca81bd47c050_add_config_table.py

@@ -0,0 +1,43 @@
+"""Add config table
+
+Revision ID: ca81bd47c050
+Revises: 7e5b5dc7342b
+Create Date: 2024-08-25 15:26:35.241684
+
+"""
+
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+import apps.webui.internal.db
+
+
+# revision identifiers, used by Alembic.
+revision: str = "ca81bd47c050"
+down_revision: Union[str, None] = "7e5b5dc7342b"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade():
+    op.create_table(
+        "config",
+        sa.Column("id", sa.Integer, primary_key=True),
+        sa.Column("data", sa.JSON(), nullable=False),
+        sa.Column("version", sa.Integer, nullable=False),
+        sa.Column(
+            "created_at", sa.DateTime(), nullable=False, server_default=sa.func.now()
+        ),
+        sa.Column(
+            "updated_at",
+            sa.DateTime(),
+            nullable=True,
+            server_default=sa.func.now(),
+            onupdate=sa.func.now(),
+        ),
+    )
+
+
+def downgrade():
+    op.drop_table("config")

backend/requirements.txt

@@ -1,5 +1,5 @@
 fastapi==0.111.0
-uvicorn[standard]==0.22.0
+uvicorn[standard]==0.30.6
 pydantic==2.8.2
 python-multipart==0.0.9
 
@@ -13,17 +13,17 @@ passlib[bcrypt]==1.7.4
 requests==2.32.3
 aiohttp==3.10.2
 
-sqlalchemy==2.0.31
+sqlalchemy==2.0.32
 alembic==1.13.2
 peewee==3.17.6
 peewee-migrate==1.12.2
 psycopg2-binary==2.9.9
 PyMySQL==1.1.1
-bcrypt==4.1.3
+bcrypt==4.2.0
 
 pymongo
 redis
-boto3==1.34.153
+boto3==1.35.0
 
 argon2-cffi==23.1.0
 APScheduler==3.10.4
@@ -34,8 +34,8 @@ anthropic
 google-generativeai==0.7.2
 tiktoken
 
-langchain==0.2.12
-langchain-community==0.2.10
+langchain==0.2.14
+langchain-community==0.2.12
 langchain-chroma==0.1.2
 
 fake-useragent==1.5.1
@@ -44,8 +44,9 @@ sentence-transformers==3.0.1
 pypdf==4.3.1
 docx2txt==0.8
 python-pptx==1.0.0
-unstructured==0.15.0
-Markdown==3.6
+unstructured==0.15.7
+nltk==3.9.1
+Markdown==3.7
 pypandoc==1.13
 pandas==2.2.2
 openpyxl==3.1.5
@@ -60,13 +61,13 @@ rapidocr-onnxruntime==1.3.24
 fpdf2==2.7.9
 rank-bm25==0.2.2
 
-faster-whisper==1.0.2
+faster-whisper==1.0.3
 
 PyJWT[crypto]==2.9.0
 authlib==1.3.1
 
 black==24.8.0
-langfuse==2.43.3
+langfuse==2.44.0
 youtube-transcript-api==0.6.2
 pytube==15.0.0
 

backend/utils/misc.py

@@ -82,7 +82,7 @@ def add_or_update_system_message(content: str, messages: list[dict]):
     """
 
     if messages and messages[0].get("role") == "system":
-        messages[0]["content"] += f"{content}\n{messages[0]['content']}"
+        messages[0]["content"] = f"{content}\n{messages[0]['content']}"
     else:
         # Insert at the beginning
         messages.insert(0, {"role": "system", "content": content})

backend/utils/schemas.py

@@ -0,0 +1,104 @@
+from pydantic import BaseModel, Field, create_model
+from typing import Any, Optional, Type
+
+
+def json_schema_to_model(tool_dict: dict[str, Any]) -> Type[BaseModel]:
+    """
+    Converts a JSON schema to a Pydantic BaseModel class.
+
+    Args:
+        json_schema: The JSON schema to convert.
+
+    Returns:
+        A Pydantic BaseModel class.
+    """
+
+    # Extract the model name from the schema title.
+    model_name = tool_dict["name"]
+    schema = tool_dict["parameters"]
+
+    # Extract the field definitions from the schema properties.
+    field_definitions = {
+        name: json_schema_to_pydantic_field(name, prop, schema.get("required", []))
+        for name, prop in schema.get("properties", {}).items()
+    }
+
+    # Create the BaseModel class using create_model().
+    return create_model(model_name, **field_definitions)
+
+
+def json_schema_to_pydantic_field(
+    name: str, json_schema: dict[str, Any], required: list[str]
+) -> Any:
+    """
+    Converts a JSON schema property to a Pydantic field definition.
+
+    Args:
+        name: The field name.
+        json_schema: The JSON schema property.
+
+    Returns:
+        A Pydantic field definition.
+    """
+
+    # Get the field type.
+    type_ = json_schema_to_pydantic_type(json_schema)
+
+    # Get the field description.
+    description = json_schema.get("description")
+
+    # Get the field examples.
+    examples = json_schema.get("examples")
+
+    # Create a Field object with the type, description, and examples.
+    # The 'required' flag will be set later when creating the model.
+    return (
+        type_,
+        Field(
+            description=description,
+            examples=examples,
+            default=... if name in required else None,
+        ),
+    )
+
+
+def json_schema_to_pydantic_type(json_schema: dict[str, Any]) -> Any:
+    """
+    Converts a JSON schema type to a Pydantic type.
+
+    Args:
+        json_schema: The JSON schema to convert.
+
+    Returns:
+        A Pydantic type.
+    """
+
+    type_ = json_schema.get("type")
+
+    if type_ == "string" or type_ == "str":
+        return str
+    elif type_ == "integer" or type_ == "int":
+        return int
+    elif type_ == "number" or type_ == "float":
+        return float
+    elif type_ == "boolean" or type_ == "bool":
+        return bool
+    elif type_ == "array":
+        items_schema = json_schema.get("items")
+        if items_schema:
+            item_type = json_schema_to_pydantic_type(items_schema)
+            return list[item_type]
+        else:
+            return list
+    elif type_ == "object":
+        # Handle nested models.
+        properties = json_schema.get("properties")
+        if properties:
+            nested_model = json_schema_to_model(json_schema)
+            return nested_model
+        else:
+            return dict
+    elif type_ == "null":
+        return Optional[Any]  # Use Optional[Any] for nullable fields
+    else:
+        raise ValueError(f"Unsupported JSON schema type: {type_}")

backend/utils/task.py

@@ -121,6 +121,43 @@ def search_query_generation_template(
     return template
 
 
+def moa_response_generation_template(
+    template: str, prompt: str, responses: list[str]
+) -> 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 full_match == "{{prompt}}":
+            return prompt
+        elif start_length is not None:
+            return prompt[: int(start_length)]
+        elif end_length is not None:
+            return prompt[-int(end_length) :]
+        elif middle_length is not None:
+            middle_length = int(middle_length)
+            if len(prompt) <= middle_length:
+                return prompt
+            start = prompt[: math.ceil(middle_length / 2)]
+            end = prompt[-math.floor(middle_length / 2) :]
+            return f"{start}...{end}"
+        return ""
+
+    template = re.sub(
+        r"{{prompt}}|{{prompt:start:(\d+)}}|{{prompt:end:(\d+)}}|{{prompt:middletruncate:(\d+)}}",
+        replacement_function,
+        template,
+    )
+
+    responses = [f'"""{response}"""' for response in responses]
+    responses = "\n\n".join(responses)
+
+    template = template.replace("{{responses}}", responses)
+    return template
+
+
 def tools_function_calling_generation_template(template: str, tools_specs: str) -> str:
     template = template.replace("{{TOOLS}}", tools_specs)
     return template

backend/utils/tools.py

@@ -1,5 +1,90 @@
 import inspect
-from typing import get_type_hints
+import logging
+from typing import Awaitable, Callable, get_type_hints
+
+from apps.webui.models.tools import Tools
+from apps.webui.models.users import UserModel
+from apps.webui.utils import load_toolkit_module_by_id
+
+from utils.schemas import json_schema_to_model
+
+log = logging.getLogger(__name__)
+
+
+def apply_extra_params_to_tool_function(
+    function: Callable, extra_params: dict
+) -> Callable[..., Awaitable]:
+    sig = inspect.signature(function)
+    extra_params = {
+        key: value for key, value in extra_params.items() if key in sig.parameters
+    }
+    is_coroutine = inspect.iscoroutinefunction(function)
+
+    async def new_function(**kwargs):
+        extra_kwargs = kwargs | extra_params
+        if is_coroutine:
+            return await function(**extra_kwargs)
+        return function(**extra_kwargs)
+
+    return new_function
+
+
+# Mutation on extra_params
+def get_tools(
+    webui_app, tool_ids: list[str], user: UserModel, extra_params: dict
+) -> dict[str, dict]:
+    tools = {}
+    for tool_id in tool_ids:
+        toolkit = Tools.get_tool_by_id(tool_id)
+        if toolkit is None:
+            continue
+
+        module = webui_app.state.TOOLS.get(tool_id, None)
+        if module is None:
+            module, _ = load_toolkit_module_by_id(tool_id)
+            webui_app.state.TOOLS[tool_id] = module
+
+        extra_params["__id__"] = tool_id
+        if hasattr(module, "valves") and hasattr(module, "Valves"):
+            valves = Tools.get_tool_valves_by_id(tool_id) or {}
+            module.valves = module.Valves(**valves)
+
+        if hasattr(module, "UserValves"):
+            extra_params["__user__"]["valves"] = module.UserValves(  # type: ignore
+                **Tools.get_user_valves_by_id_and_user_id(tool_id, user.id)
+            )
+
+        for spec in toolkit.specs:
+            # TODO: Fix hack for OpenAI API
+            for val in spec.get("parameters", {}).get("properties", {}).values():
+                if val["type"] == "str":
+                    val["type"] = "string"
+            function_name = spec["name"]
+
+            # convert to function that takes only model params and inserts custom params
+            original_func = getattr(module, function_name)
+            callable = apply_extra_params_to_tool_function(original_func, extra_params)
+            if hasattr(original_func, "__doc__"):
+                callable.__doc__ = original_func.__doc__
+
+            # TODO: This needs to be a pydantic model
+            tool_dict = {
+                "toolkit_id": tool_id,
+                "callable": callable,
+                "spec": spec,
+                "pydantic_model": json_schema_to_model(spec),
+                "file_handler": hasattr(module, "file_handler") and module.file_handler,
+                "citation": hasattr(module, "citation") and module.citation,
+            }
+
+            # TODO: if collision, prepend toolkit name
+            if function_name in tools:
+                log.warning(f"Tool {function_name} already exists in another toolkit!")
+                log.warning(f"Collision between {toolkit} and {tool_id}.")
+                log.warning(f"Discarding {toolkit}.{function_name}")
+            else:
+                tools[function_name] = tool_dict
+    return tools
 
 
 def doc_to_dict(docstring):

backend/utils/utils.py

@@ -6,16 +6,16 @@ from apps.webui.models.users import Users
 from typing import Union, Optional
 from constants import ERROR_MESSAGES
 from passlib.context import CryptContext
-from datetime import datetime, timedelta
+from datetime import datetime, timedelta, UTC
 import jwt
 import uuid
 import logging
-import config
+from env import WEBUI_SECRET_KEY
 
 logging.getLogger("passlib").setLevel(logging.ERROR)
 
 
-SESSION_SECRET = config.WEBUI_SECRET_KEY
+SESSION_SECRET = WEBUI_SECRET_KEY
 ALGORITHM = "HS256"
 
 ##############
@@ -40,7 +40,7 @@ def create_token(data: dict, expires_delta: Union[timedelta, None] = None) -> st
     payload = data.copy()
 
     if expires_delta:
-        expire = datetime.utcnow() + expires_delta
+        expire = datetime.now(UTC) + expires_delta
         payload.update({"exp": expire})
 
     encoded_jwt = jwt.encode(payload, SESSION_SECRET, algorithm=ALGORITHM)

docs/SECURITY.md

@@ -9,10 +9,18 @@ Our primary goal is to ensure the protection and confidentiality of sensitive da
 | main    | :white_check_mark: |
 | others  | :x:                |
 
+## Zero Tolerance for External Platforms
+
+Based on a precedent of an unacceptable degree of spamming and unsolicited communications from third-party platforms, we forcefully reaffirm our stance. **We refuse to engage with, join, or monitor any platforms outside of GitHub for vulnerability reporting.** Our reasons are not just procedural but are deep-seated in the ethos of our project, which champions transparency and direct community interaction inherent in the open-source culture. Any attempts to divert our processes to external platforms will be met with outright rejection. This policy is non-negotiable and understands no exceptions.
+
+Any reports or solicitations arriving from sources other than our designated GitHub repository will be dismissed without consideration. We’ve seen how external engagements can dilute and compromise the integrity of community-driven projects, and we’re not here to gamble with the security and privacy of our user community.
+
 ## Reporting a Vulnerability
 
 We appreciate the community's interest in identifying potential vulnerabilities. However, effective immediately, we will **not** accept low-effort vulnerability reports. To ensure that submissions are constructive and actionable, please adhere to the following guidelines:
 
+Reports not submitted through our designated GitHub repository will be disregarded, and we will categorically reject invitations to collaborate on external platforms. Our aggressive stance on this matter underscores our commitment to a secure, transparent, and open community where all operations are visible and contributors are accountable.
+
 1. **No Vague Reports**: Submissions such as "I found a vulnerability" without any details will be treated as spam and will not be accepted.
 
 2. **In-Depth Understanding Required**: Reports must reflect a clear understanding of the codebase and provide specific details about the vulnerability, including the affected components and potential impacts.
@@ -23,7 +31,7 @@ We appreciate the community's interest in identifying potential vulnerabilities.
 
 5. **Streamlined Merging Process**: When vulnerability reports meet the above criteria, we can consider them for immediate merging, similar to regular pull requests. Well-structured and thorough submissions will expedite the process of enhancing our security.
 
-Submissions that do not meet these criteria will be closed, and repeat offenders may face a ban from future submissions. We aim to create a respectful and constructive reporting environment, where high-quality submissions foster better security for everyone.
+**Non-compliant submissions will be closed, and repeat violators may be banned.** Our goal is to foster a constructive reporting environment where quality submissions promote better security for all users.
 
 ## Product Security
 
@@ -33,4 +41,4 @@ For immediate concerns or detailed reports that meet our guidelines, please crea
 
 ---
 
-_Last updated on **2024-08-06**._
+_Last updated on **2024-08-19**._

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "open-webui",
-	"version": "0.3.13",
+	"version": "0.3.16",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "open-webui",
-			"version": "0.3.13",
+			"version": "0.3.16",
 			"dependencies": {
 				"@codemirror/lang-javascript": "^6.2.2",
 				"@codemirror/lang-python": "^6.1.6",
@@ -18,6 +18,7 @@
 				"codemirror": "^6.0.1",
 				"crc-32": "^1.2.2",
 				"dayjs": "^1.11.10",
+				"dompurify": "^3.1.6",
 				"eventsource-parser": "^1.1.2",
 				"file-saver": "^2.0.5",
 				"fuse.js": "^7.0.0",
@@ -29,7 +30,6 @@
 				"js-sha256": "^0.10.1",
 				"katex": "^0.16.9",
 				"marked": "^9.1.0",
-				"marked-katex-extension": "^5.1.1",
 				"mermaid": "^10.9.1",
 				"pyodide": "^0.26.1",
 				"socket.io-client": "^4.2.0",
@@ -1545,11 +1545,6 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
-		"node_modules/@types/katex": {
-			"version": "0.16.7",
-			"resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
-			"integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="
-		},
 		"node_modules/@types/mdast": {
 			"version": "3.0.15",
 			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz",
@@ -3918,9 +3913,9 @@
 			}
 		},
 		"node_modules/dompurify": {
-			"version": "3.1.5",
-			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.5.tgz",
-			"integrity": "sha512-lwG+n5h8QNpxtyrJW/gJWckL+1/DQiYMX8f7t8Z2AZTPw1esVrqjI63i7Zc2Gz0aKzLVMYC1V1PL/ky+aY/NgA=="
+			"version": "3.1.6",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+			"integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
 		},
 		"node_modules/domutils": {
 			"version": "3.1.0",
@@ -6042,18 +6037,6 @@
 				"node": ">= 16"
 			}
 		},
-		"node_modules/marked-katex-extension": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/marked-katex-extension/-/marked-katex-extension-5.1.1.tgz",
-			"integrity": "sha512-piquiCyZpZ1aiocoJlJkRXr+hkk5UI4xw9GhRZiIAAgvX5rhzUDSJ0seup1JcsgueC8MLNDuqe5cRcAzkFE42Q==",
-			"dependencies": {
-				"@types/katex": "^0.16.7"
-			},
-			"peerDependencies": {
-				"katex": ">=0.16 <0.17",
-				"marked": ">=4 <15"
-			}
-		},
 		"node_modules/matcher-collection": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/matcher-collection/-/matcher-collection-2.0.1.tgz",
@@ -6593,12 +6576,12 @@
 			]
 		},
 		"node_modules/micromatch": {
-			"version": "4.0.5",
-			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
 			"dev": true,
 			"dependencies": {
-				"braces": "^3.0.2",
+				"braces": "^3.0.3",
 				"picomatch": "^2.3.1"
 			},
 			"engines": {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "open-webui",
-	"version": "0.3.13",
+	"version": "0.3.16",
 	"private": true,
 	"scripts": {
 		"dev": "npm run pyodide:fetch && vite dev --host",
@@ -59,6 +59,7 @@
 		"codemirror": "^6.0.1",
 		"crc-32": "^1.2.2",
 		"dayjs": "^1.11.10",
+		"dompurify": "^3.1.6",
 		"eventsource-parser": "^1.1.2",
 		"file-saver": "^2.0.5",
 		"fuse.js": "^7.0.0",
@@ -70,7 +71,6 @@
 		"js-sha256": "^0.10.1",
 		"katex": "^0.16.9",
 		"marked": "^9.1.0",
-		"marked-katex-extension": "^5.1.1",
 		"mermaid": "^10.9.1",
 		"pyodide": "^0.26.1",
 		"socket.io-client": "^4.2.0",

pyproject.toml

@@ -7,7 +7,7 @@ authors = [
 license = { file = "LICENSE" }
 dependencies = [
     "fastapi==0.111.0",
-    "uvicorn[standard]==0.22.0",
+    "uvicorn[standard]==0.30.6",
     "pydantic==2.8.2",
     "python-multipart==0.0.9",
 
@@ -21,17 +21,17 @@ dependencies = [
     "requests==2.32.3",
     "aiohttp==3.10.2",
 
-    "sqlalchemy==2.0.31",
+    "sqlalchemy==2.0.32",
     "alembic==1.13.2",
     "peewee==3.17.6",
     "peewee-migrate==1.12.2",
     "psycopg2-binary==2.9.9",
     "PyMySQL==1.1.1",
-    "bcrypt==4.1.3",
+    "bcrypt==4.2.0",
 
     "pymongo",
     "redis",
-    "boto3==1.34.153",
+    "boto3==1.35.0",
 
     "argon2-cffi==23.1.0",
     "APScheduler==3.10.4",
@@ -41,8 +41,8 @@ dependencies = [
     "google-generativeai==0.7.2",
     "tiktoken",
 
-    "langchain==0.2.12",
-    "langchain-community==0.2.10",
+    "langchain==0.2.14",
+    "langchain-community==0.2.12",
     "langchain-chroma==0.1.2",
 
     "fake-useragent==1.5.1",
@@ -51,8 +51,9 @@ dependencies = [
     "pypdf==4.3.1",
     "docx2txt==0.8",
     "python-pptx==1.0.0",
-    "unstructured==0.15.0",
-    "Markdown==3.6",
+    "unstructured==0.15.7",
+    "nltk==3.9.1",
+    "Markdown==3.7",
     "pypandoc==1.13",
     "pandas==2.2.2",
     "openpyxl==3.1.5",
@@ -67,13 +68,13 @@ dependencies = [
     "fpdf2==2.7.9",
     "rank-bm25==0.2.2",
 
-    "faster-whisper==1.0.2",
+    "faster-whisper==1.0.3",
 
     "PyJWT[crypto]==2.9.0",
     "authlib==1.3.1",
 
     "black==24.8.0",
-    "langfuse==2.43.3",
+    "langfuse==2.44.0",
     "youtube-transcript-api==0.6.2",
     "pytube==15.0.0",
 

requirements-dev.lock

@@ -1,750 +0,0 @@
-# generated by rye
-# use `rye lock` or `rye sync` to update this lockfile
-#
-# last locked with the following flags:
-#   pre: false
-#   features: []
-#   all-features: false
-#   with-sources: false
-#   generate-hashes: false
-#   universal: false
-
--e file:.
-aiohappyeyeballs==2.3.5
-    # via aiohttp
-aiohttp==3.10.2
-    # via langchain
-    # via langchain-community
-    # via open-webui
-aiosignal==1.3.1
-    # via aiohttp
-alembic==1.13.2
-    # via open-webui
-annotated-types==0.6.0
-    # via pydantic
-anthropic==0.32.0
-    # via open-webui
-anyio==4.4.0
-    # via anthropic
-    # via httpx
-    # via langfuse
-    # via openai
-    # via starlette
-    # via watchfiles
-apscheduler==3.10.4
-    # via open-webui
-argon2-cffi==23.1.0
-    # via open-webui
-argon2-cffi-bindings==21.2.0
-    # via argon2-cffi
-asgiref==3.8.1
-    # via opentelemetry-instrumentation-asgi
-attrs==23.2.0
-    # via aiohttp
-    # via pytest-docker
-authlib==1.3.1
-    # via open-webui
-av==11.0.0
-    # via faster-whisper
-backoff==2.2.1
-    # via langfuse
-    # via posthog
-    # via unstructured
-bcrypt==4.1.3
-    # via chromadb
-    # via open-webui
-    # via passlib
-beautifulsoup4==4.12.3
-    # via extract-msg
-    # via unstructured
-bidict==0.23.1
-    # via python-socketio
-black==24.8.0
-    # via open-webui
-blinker==1.8.2
-    # via flask
-boto3==1.34.153
-    # via open-webui
-botocore==1.34.155
-    # via boto3
-    # via s3transfer
-build==1.2.1
-    # via chromadb
-cachetools==5.3.3
-    # via google-auth
-certifi==2024.2.2
-    # via httpcore
-    # via httpx
-    # via kubernetes
-    # via requests
-    # via unstructured-client
-cffi==1.16.0
-    # via argon2-cffi-bindings
-    # via cryptography
-chardet==5.2.0
-    # via unstructured
-charset-normalizer==3.3.2
-    # via requests
-    # via unstructured-client
-chroma-hnswlib==0.7.6
-    # via chromadb
-chromadb==0.5.5
-    # via langchain-chroma
-    # via open-webui
-click==8.1.7
-    # via black
-    # via duckduckgo-search
-    # via flask
-    # via nltk
-    # via peewee-migrate
-    # via typer
-    # via uvicorn
-colorclass==2.2.2
-    # via oletools
-coloredlogs==15.0.1
-    # via onnxruntime
-compressed-rtf==1.0.6
-    # via extract-msg
-cryptography==42.0.7
-    # via authlib
-    # via msoffcrypto-tool
-    # via pyjwt
-ctranslate2==4.2.1
-    # via faster-whisper
-dataclasses-json==0.6.6
-    # via langchain-community
-    # via unstructured
-    # via unstructured-client
-deepdiff==7.0.1
-    # via unstructured-client
-defusedxml==0.7.1
-    # via fpdf2
-deprecated==1.2.14
-    # via opentelemetry-api
-    # via opentelemetry-exporter-otlp-proto-grpc
-distro==1.9.0
-    # via anthropic
-    # via openai
-dnspython==2.6.1
-    # via email-validator
-    # via pymongo
-docker==7.1.0
-    # via open-webui
-docx2txt==0.8
-    # via open-webui
-duckduckgo-search==6.2.6
-    # via open-webui
-easygui==0.98.3
-    # via oletools
-ebcdic==1.1.1
-    # via extract-msg
-ecdsa==0.19.0
-    # via python-jose
-email-validator==2.1.1
-    # via fastapi
-emoji==2.11.1
-    # via unstructured
-et-xmlfile==1.1.0
-    # via openpyxl
-extract-msg==0.48.5
-    # via open-webui
-fake-useragent==1.5.1
-    # via open-webui
-fastapi==0.111.0
-    # via chromadb
-    # via langchain-chroma
-    # via open-webui
-fastapi-cli==0.0.4
-    # via fastapi
-faster-whisper==1.0.2
-    # via open-webui
-filelock==3.14.0
-    # via huggingface-hub
-    # via torch
-    # via transformers
-filetype==1.2.0
-    # via unstructured
-flask==3.0.3
-    # via flask-cors
-    # via open-webui
-flask-cors==4.0.1
-    # via open-webui
-flatbuffers==24.3.25
-    # via onnxruntime
-fonttools==4.51.0
-    # via fpdf2
-fpdf2==2.7.9
-    # via open-webui
-frozenlist==1.4.1
-    # via aiohttp
-    # via aiosignal
-fsspec==2024.3.1
-    # via huggingface-hub
-    # via torch
-google-ai-generativelanguage==0.6.6
-    # via google-generativeai
-google-api-core==2.19.0
-    # via google-ai-generativelanguage
-    # via google-api-python-client
-    # via google-generativeai
-google-api-python-client==2.129.0
-    # via google-generativeai
-google-auth==2.29.0
-    # via google-ai-generativelanguage
-    # via google-api-core
-    # via google-api-python-client
-    # via google-auth-httplib2
-    # via google-generativeai
-    # via kubernetes
-google-auth-httplib2==0.2.0
-    # via google-api-python-client
-google-generativeai==0.7.2
-    # via open-webui
-googleapis-common-protos==1.63.0
-    # via google-api-core
-    # via grpcio-status
-    # via opentelemetry-exporter-otlp-proto-grpc
-grpcio==1.63.0
-    # via chromadb
-    # via google-api-core
-    # via grpcio-status
-    # via opentelemetry-exporter-otlp-proto-grpc
-grpcio-status==1.62.2
-    # via google-api-core
-h11==0.14.0
-    # via httpcore
-    # via uvicorn
-    # via wsproto
-httpcore==1.0.5
-    # via httpx
-httplib2==0.22.0
-    # via google-api-python-client
-    # via google-auth-httplib2
-httptools==0.6.1
-    # via uvicorn
-httpx==0.27.0
-    # via anthropic
-    # via chromadb
-    # via fastapi
-    # via langfuse
-    # via openai
-huggingface-hub==0.23.0
-    # via faster-whisper
-    # via sentence-transformers
-    # via tokenizers
-    # via transformers
-humanfriendly==10.0
-    # via coloredlogs
-idna==3.7
-    # via anyio
-    # via email-validator
-    # via httpx
-    # via langfuse
-    # via requests
-    # via unstructured-client
-    # via yarl
-importlib-metadata==7.0.0
-    # via opentelemetry-api
-importlib-resources==6.4.0
-    # via chromadb
-iniconfig==2.0.0
-    # via pytest
-itsdangerous==2.2.0
-    # via flask
-jinja2==3.1.4
-    # via fastapi
-    # via flask
-    # via torch
-jiter==0.5.0
-    # via anthropic
-jmespath==1.0.1
-    # via boto3
-    # via botocore
-joblib==1.4.2
-    # via nltk
-    # via scikit-learn
-jsonpatch==1.33
-    # via langchain-core
-jsonpath-python==1.0.6
-    # via unstructured-client
-jsonpointer==2.4
-    # via jsonpatch
-kubernetes==29.0.0
-    # via chromadb
-langchain==0.2.12
-    # via langchain-community
-    # via open-webui
-langchain-chroma==0.1.2
-    # via open-webui
-langchain-community==0.2.10
-    # via open-webui
-langchain-core==0.2.28
-    # via langchain
-    # via langchain-chroma
-    # via langchain-community
-    # via langchain-text-splitters
-langchain-text-splitters==0.2.0
-    # via langchain
-langdetect==1.0.9
-    # via unstructured
-langfuse==2.43.3
-    # via open-webui
-langsmith==0.1.96
-    # via langchain
-    # via langchain-community
-    # via langchain-core
-lark==1.1.8
-    # via rtfde
-lxml==5.2.2
-    # via python-pptx
-    # via unstructured
-mako==1.3.5
-    # via alembic
-markdown==3.6
-    # via open-webui
-markdown-it-py==3.0.0
-    # via rich
-markupsafe==2.1.5
-    # via jinja2
-    # via mako
-    # via werkzeug
-marshmallow==3.21.2
-    # via dataclasses-json
-    # via unstructured-client
-mdurl==0.1.2
-    # via markdown-it-py
-mmh3==4.1.0
-    # via chromadb
-monotonic==1.6
-    # via posthog
-mpmath==1.3.0
-    # via sympy
-msoffcrypto-tool==5.4.1
-    # via oletools
-multidict==6.0.5
-    # via aiohttp
-    # via yarl
-mypy-extensions==1.0.0
-    # via black
-    # via typing-inspect
-    # via unstructured-client
-networkx==3.3
-    # via torch
-nltk==3.8.1
-    # via unstructured
-numpy==1.26.4
-    # via chroma-hnswlib
-    # via chromadb
-    # via ctranslate2
-    # via langchain
-    # via langchain-chroma
-    # via langchain-community
-    # via onnxruntime
-    # via opencv-python
-    # via opencv-python-headless
-    # via pandas
-    # via rank-bm25
-    # via rapidocr-onnxruntime
-    # via scikit-learn
-    # via scipy
-    # via sentence-transformers
-    # via shapely
-    # via transformers
-    # via unstructured
-oauthlib==3.2.2
-    # via kubernetes
-    # via requests-oauthlib
-olefile==0.47
-    # via extract-msg
-    # via msoffcrypto-tool
-    # via oletools
-oletools==0.60.1
-    # via pcodedmp
-    # via rtfde
-onnxruntime==1.17.3
-    # via chromadb
-    # via faster-whisper
-    # via rapidocr-onnxruntime
-openai==1.38.0
-    # via open-webui
-opencv-python==4.9.0.80
-    # via rapidocr-onnxruntime
-opencv-python-headless==4.10.0.84
-    # via open-webui
-openpyxl==3.1.5
-    # via open-webui
-opentelemetry-api==1.24.0
-    # via chromadb
-    # via opentelemetry-exporter-otlp-proto-grpc
-    # via opentelemetry-instrumentation
-    # via opentelemetry-instrumentation-asgi
-    # via opentelemetry-instrumentation-fastapi
-    # via opentelemetry-sdk
-opentelemetry-exporter-otlp-proto-common==1.24.0
-    # via opentelemetry-exporter-otlp-proto-grpc
-opentelemetry-exporter-otlp-proto-grpc==1.24.0
-    # via chromadb
-opentelemetry-instrumentation==0.45b0
-    # via opentelemetry-instrumentation-asgi
-    # via opentelemetry-instrumentation-fastapi
-opentelemetry-instrumentation-asgi==0.45b0
-    # via opentelemetry-instrumentation-fastapi
-opentelemetry-instrumentation-fastapi==0.45b0
-    # via chromadb
-opentelemetry-proto==1.24.0
-    # via opentelemetry-exporter-otlp-proto-common
-    # via opentelemetry-exporter-otlp-proto-grpc
-opentelemetry-sdk==1.24.0
-    # via chromadb
-    # via opentelemetry-exporter-otlp-proto-grpc
-opentelemetry-semantic-conventions==0.45b0
-    # via opentelemetry-instrumentation-asgi
-    # via opentelemetry-instrumentation-fastapi
-    # via opentelemetry-sdk
-opentelemetry-util-http==0.45b0
-    # via opentelemetry-instrumentation-asgi
-    # via opentelemetry-instrumentation-fastapi
-ordered-set==4.1.0
-    # via deepdiff
-orjson==3.10.3
-    # via chromadb
-    # via fastapi
-    # via langsmith
-overrides==7.7.0
-    # via chromadb
-packaging==23.2
-    # via black
-    # via build
-    # via huggingface-hub
-    # via langchain-core
-    # via langfuse
-    # via marshmallow
-    # via onnxruntime
-    # via pytest
-    # via transformers
-    # via unstructured-client
-pandas==2.2.2
-    # via open-webui
-passlib==1.7.4
-    # via open-webui
-pathspec==0.12.1
-    # via black
-pcodedmp==1.2.6
-    # via oletools
-peewee==3.17.6
-    # via open-webui
-    # via peewee-migrate
-peewee-migrate==1.12.2
-    # via open-webui
-pillow==10.3.0
-    # via fpdf2
-    # via python-pptx
-    # via rapidocr-onnxruntime
-    # via sentence-transformers
-platformdirs==4.2.1
-    # via black
-pluggy==1.5.0
-    # via pytest
-posthog==3.5.0
-    # via chromadb
-primp==0.5.5
-    # via duckduckgo-search
-proto-plus==1.23.0
-    # via google-ai-generativelanguage
-    # via google-api-core
-protobuf==4.25.3
-    # via google-ai-generativelanguage
-    # via google-api-core
-    # via google-generativeai
-    # via googleapis-common-protos
-    # via grpcio-status
-    # via onnxruntime
-    # via opentelemetry-proto
-    # via proto-plus
-psutil==6.0.0
-    # via open-webui
-    # via unstructured
-psycopg2-binary==2.9.9
-    # via open-webui
-pyasn1==0.6.0
-    # via pyasn1-modules
-    # via python-jose
-    # via rsa
-pyasn1-modules==0.4.0
-    # via google-auth
-pyclipper==1.3.0.post5
-    # via rapidocr-onnxruntime
-pycparser==2.22
-    # via cffi
-pydantic==2.8.2
-    # via anthropic
-    # via chromadb
-    # via fastapi
-    # via google-generativeai
-    # via langchain
-    # via langchain-core
-    # via langfuse
-    # via langsmith
-    # via open-webui
-    # via openai
-pydantic-core==2.20.1
-    # via pydantic
-pydub==0.25.1
-    # via open-webui
-pygments==2.18.0
-    # via rich
-pyjwt==2.9.0
-    # via open-webui
-pymongo==4.8.0
-    # via open-webui
-pymysql==1.1.1
-    # via open-webui
-pypandoc==1.13
-    # via open-webui
-pyparsing==2.4.7
-    # via httplib2
-    # via oletools
-pypdf==4.3.1
-    # via open-webui
-    # via unstructured-client
-pypika==0.48.9
-    # via chromadb
-pyproject-hooks==1.1.0
-    # via build
-pytest==8.2.2
-    # via open-webui
-    # via pytest-docker
-pytest-docker==3.1.1
-    # via open-webui
-python-dateutil==2.9.0.post0
-    # via botocore
-    # via kubernetes
-    # via pandas
-    # via posthog
-    # via unstructured-client
-python-dotenv==1.0.1
-    # via uvicorn
-python-engineio==4.9.0
-    # via python-socketio
-python-iso639==2024.4.27
-    # via unstructured
-python-jose==3.3.0
-    # via open-webui
-python-magic==0.4.27
-    # via unstructured
-python-multipart==0.0.9
-    # via fastapi
-    # via open-webui
-python-pptx==1.0.0
-    # via open-webui
-python-socketio==5.11.3
-    # via open-webui
-pytube==15.0.0
-    # via open-webui
-pytz==2024.1
-    # via apscheduler
-    # via pandas
-pyxlsb==1.0.10
-    # via open-webui
-pyyaml==6.0.1
-    # via chromadb
-    # via ctranslate2
-    # via huggingface-hub
-    # via kubernetes
-    # via langchain
-    # via langchain-community
-    # via langchain-core
-    # via rapidocr-onnxruntime
-    # via transformers
-    # via uvicorn
-rank-bm25==0.2.2
-    # via open-webui
-rapidfuzz==3.9.0
-    # via unstructured
-rapidocr-onnxruntime==1.3.24
-    # via open-webui
-red-black-tree-mod==1.20
-    # via extract-msg
-redis==5.0.8
-    # via open-webui
-regex==2024.5.10
-    # via nltk
-    # via tiktoken
-    # via transformers
-requests==2.32.3
-    # via docker
-    # via google-api-core
-    # via huggingface-hub
-    # via kubernetes
-    # via langchain
-    # via langchain-community
-    # via langsmith
-    # via open-webui
-    # via posthog
-    # via requests-oauthlib
-    # via tiktoken
-    # via transformers
-    # via unstructured
-    # via unstructured-client
-    # via youtube-transcript-api
-requests-oauthlib==2.0.0
-    # via kubernetes
-rich==13.7.1
-    # via typer
-rsa==4.9
-    # via google-auth
-    # via python-jose
-rtfde==0.1.1
-    # via extract-msg
-s3transfer==0.10.1
-    # via boto3
-safetensors==0.4.3
-    # via transformers
-scikit-learn==1.4.2
-    # via sentence-transformers
-scipy==1.13.0
-    # via scikit-learn
-    # via sentence-transformers
-sentence-transformers==3.0.1
-    # via open-webui
-setuptools==69.5.1
-    # via ctranslate2
-    # via opentelemetry-instrumentation
-shapely==2.0.5
-    # via rapidocr-onnxruntime
-shellingham==1.5.4
-    # via typer
-simple-websocket==1.0.0
-    # via python-engineio
-six==1.16.0
-    # via apscheduler
-    # via ecdsa
-    # via kubernetes
-    # via langdetect
-    # via posthog
-    # via python-dateutil
-    # via rapidocr-onnxruntime
-    # via unstructured-client
-sniffio==1.3.1
-    # via anthropic
-    # via anyio
-    # via httpx
-    # via openai
-soupsieve==2.5
-    # via beautifulsoup4
-sqlalchemy==2.0.31
-    # via alembic
-    # via langchain
-    # via langchain-community
-    # via open-webui
-starlette==0.37.2
-    # via fastapi
-sympy==1.12
-    # via onnxruntime
-    # via torch
-tabulate==0.9.0
-    # via unstructured
-tenacity==8.3.0
-    # via chromadb
-    # via langchain
-    # via langchain-community
-    # via langchain-core
-threadpoolctl==3.5.0
-    # via scikit-learn
-tiktoken==0.7.0
-    # via open-webui
-tokenizers==0.15.2
-    # via anthropic
-    # via chromadb
-    # via faster-whisper
-    # via transformers
-torch==2.3.0
-    # via sentence-transformers
-tqdm==4.66.4
-    # via chromadb
-    # via google-generativeai
-    # via huggingface-hub
-    # via nltk
-    # via openai
-    # via sentence-transformers
-    # via transformers
-    # via unstructured
-transformers==4.39.3
-    # via sentence-transformers
-typer==0.12.3
-    # via chromadb
-    # via fastapi-cli
-typing-extensions==4.11.0
-    # via alembic
-    # via anthropic
-    # via chromadb
-    # via fastapi
-    # via google-generativeai
-    # via huggingface-hub
-    # via langchain-core
-    # via openai
-    # via opentelemetry-sdk
-    # via pydantic
-    # via pydantic-core
-    # via python-pptx
-    # via sqlalchemy
-    # via torch
-    # via typer
-    # via typing-inspect
-    # via unstructured
-    # via unstructured-client
-typing-inspect==0.9.0
-    # via dataclasses-json
-    # via unstructured-client
-tzdata==2024.1
-    # via pandas
-tzlocal==5.2
-    # via apscheduler
-    # via extract-msg
-ujson==5.10.0
-    # via fastapi
-unstructured==0.15.0
-    # via open-webui
-unstructured-client==0.22.0
-    # via unstructured
-uritemplate==4.1.1
-    # via google-api-python-client
-urllib3==2.2.1
-    # via botocore
-    # via docker
-    # via kubernetes
-    # via requests
-    # via unstructured-client
-uvicorn==0.22.0
-    # via chromadb
-    # via fastapi
-    # via open-webui
-uvloop==0.19.0
-    # via uvicorn
-validators==0.33.0
-    # via open-webui
-watchfiles==0.21.0
-    # via uvicorn
-websocket-client==1.8.0
-    # via kubernetes
-websockets==12.0
-    # via uvicorn
-werkzeug==3.0.3
-    # via flask
-wrapt==1.16.0
-    # via deprecated
-    # via langfuse
-    # via opentelemetry-instrumentation
-    # via unstructured
-wsproto==1.2.0
-    # via simple-websocket
-xlrd==2.0.1
-    # via open-webui
-xlsxwriter==3.2.0
-    # via python-pptx
-yarl==1.9.4
-    # via aiohttp
-youtube-transcript-api==0.6.2
-    # via open-webui
-zipp==3.18.1
-    # via importlib-metadata

requirements.lock

@@ -1,750 +0,0 @@
-# generated by rye
-# use `rye lock` or `rye sync` to update this lockfile
-#
-# last locked with the following flags:
-#   pre: false
-#   features: []
-#   all-features: false
-#   with-sources: false
-#   generate-hashes: false
-#   universal: false
-
--e file:.
-aiohappyeyeballs==2.3.5
-    # via aiohttp
-aiohttp==3.10.2
-    # via langchain
-    # via langchain-community
-    # via open-webui
-aiosignal==1.3.1
-    # via aiohttp
-alembic==1.13.2
-    # via open-webui
-annotated-types==0.6.0
-    # via pydantic
-anthropic==0.32.0
-    # via open-webui
-anyio==4.4.0
-    # via anthropic
-    # via httpx
-    # via langfuse
-    # via openai
-    # via starlette
-    # via watchfiles
-apscheduler==3.10.4
-    # via open-webui
-argon2-cffi==23.1.0
-    # via open-webui
-argon2-cffi-bindings==21.2.0
-    # via argon2-cffi
-asgiref==3.8.1
-    # via opentelemetry-instrumentation-asgi
-attrs==23.2.0
-    # via aiohttp
-    # via pytest-docker
-authlib==1.3.1
-    # via open-webui
-av==11.0.0
-    # via faster-whisper
-backoff==2.2.1
-    # via langfuse
-    # via posthog
-    # via unstructured
-bcrypt==4.1.3
-    # via chromadb
-    # via open-webui
-    # via passlib
-beautifulsoup4==4.12.3
-    # via extract-msg
-    # via unstructured
-bidict==0.23.1
-    # via python-socketio
-black==24.8.0
-    # via open-webui
-blinker==1.8.2
-    # via flask
-boto3==1.34.153
-    # via open-webui
-botocore==1.34.155
-    # via boto3
-    # via s3transfer
-build==1.2.1
-    # via chromadb
-cachetools==5.3.3
-    # via google-auth
-certifi==2024.2.2
-    # via httpcore
-    # via httpx
-    # via kubernetes
-    # via requests
-    # via unstructured-client
-cffi==1.16.0
-    # via argon2-cffi-bindings
-    # via cryptography
-chardet==5.2.0
-    # via unstructured
-charset-normalizer==3.3.2
-    # via requests
-    # via unstructured-client
-chroma-hnswlib==0.7.6
-    # via chromadb
-chromadb==0.5.5
-    # via langchain-chroma
-    # via open-webui
-click==8.1.7
-    # via black
-    # via duckduckgo-search
-    # via flask
-    # via nltk
-    # via peewee-migrate
-    # via typer
-    # via uvicorn
-colorclass==2.2.2
-    # via oletools
-coloredlogs==15.0.1
-    # via onnxruntime
-compressed-rtf==1.0.6
-    # via extract-msg
-cryptography==42.0.7
-    # via authlib
-    # via msoffcrypto-tool
-    # via pyjwt
-ctranslate2==4.2.1
-    # via faster-whisper
-dataclasses-json==0.6.6
-    # via langchain-community
-    # via unstructured
-    # via unstructured-client
-deepdiff==7.0.1
-    # via unstructured-client
-defusedxml==0.7.1
-    # via fpdf2
-deprecated==1.2.14
-    # via opentelemetry-api
-    # via opentelemetry-exporter-otlp-proto-grpc
-distro==1.9.0
-    # via anthropic
-    # via openai
-dnspython==2.6.1
-    # via email-validator
-    # via pymongo
-docker==7.1.0
-    # via open-webui
-docx2txt==0.8
-    # via open-webui
-duckduckgo-search==6.2.6
-    # via open-webui
-easygui==0.98.3
-    # via oletools
-ebcdic==1.1.1
-    # via extract-msg
-ecdsa==0.19.0
-    # via python-jose
-email-validator==2.1.1
-    # via fastapi
-emoji==2.11.1
-    # via unstructured
-et-xmlfile==1.1.0
-    # via openpyxl
-extract-msg==0.48.5
-    # via open-webui
-fake-useragent==1.5.1
-    # via open-webui
-fastapi==0.111.0
-    # via chromadb
-    # via langchain-chroma
-    # via open-webui
-fastapi-cli==0.0.4
-    # via fastapi
-faster-whisper==1.0.2
-    # via open-webui
-filelock==3.14.0
-    # via huggingface-hub
-    # via torch
-    # via transformers
-filetype==1.2.0
-    # via unstructured
-flask==3.0.3
-    # via flask-cors
-    # via open-webui
-flask-cors==4.0.1
-    # via open-webui
-flatbuffers==24.3.25
-    # via onnxruntime
-fonttools==4.51.0
-    # via fpdf2
-fpdf2==2.7.9
-    # via open-webui
-frozenlist==1.4.1
-    # via aiohttp
-    # via aiosignal
-fsspec==2024.3.1
-    # via huggingface-hub
-    # via torch
-google-ai-generativelanguage==0.6.6
-    # via google-generativeai
-google-api-core==2.19.0
-    # via google-ai-generativelanguage
-    # via google-api-python-client
-    # via google-generativeai
-google-api-python-client==2.129.0
-    # via google-generativeai
-google-auth==2.29.0
-    # via google-ai-generativelanguage
-    # via google-api-core
-    # via google-api-python-client
-    # via google-auth-httplib2
-    # via google-generativeai
-    # via kubernetes
-google-auth-httplib2==0.2.0
-    # via google-api-python-client
-google-generativeai==0.7.2
-    # via open-webui
-googleapis-common-protos==1.63.0
-    # via google-api-core
-    # via grpcio-status
-    # via opentelemetry-exporter-otlp-proto-grpc
-grpcio==1.63.0
-    # via chromadb
-    # via google-api-core
-    # via grpcio-status
-    # via opentelemetry-exporter-otlp-proto-grpc
-grpcio-status==1.62.2
-    # via google-api-core
-h11==0.14.0
-    # via httpcore
-    # via uvicorn
-    # via wsproto
-httpcore==1.0.5
-    # via httpx
-httplib2==0.22.0
-    # via google-api-python-client
-    # via google-auth-httplib2
-httptools==0.6.1
-    # via uvicorn
-httpx==0.27.0
-    # via anthropic
-    # via chromadb
-    # via fastapi
-    # via langfuse
-    # via openai
-huggingface-hub==0.23.0
-    # via faster-whisper
-    # via sentence-transformers
-    # via tokenizers
-    # via transformers
-humanfriendly==10.0
-    # via coloredlogs
-idna==3.7
-    # via anyio
-    # via email-validator
-    # via httpx
-    # via langfuse
-    # via requests
-    # via unstructured-client
-    # via yarl
-importlib-metadata==7.0.0
-    # via opentelemetry-api
-importlib-resources==6.4.0
-    # via chromadb
-iniconfig==2.0.0
-    # via pytest
-itsdangerous==2.2.0
-    # via flask
-jinja2==3.1.4
-    # via fastapi
-    # via flask
-    # via torch
-jiter==0.5.0
-    # via anthropic
-jmespath==1.0.1
-    # via boto3
-    # via botocore
-joblib==1.4.2
-    # via nltk
-    # via scikit-learn
-jsonpatch==1.33
-    # via langchain-core
-jsonpath-python==1.0.6
-    # via unstructured-client
-jsonpointer==2.4
-    # via jsonpatch
-kubernetes==29.0.0
-    # via chromadb
-langchain==0.2.12
-    # via langchain-community
-    # via open-webui
-langchain-chroma==0.1.2
-    # via open-webui
-langchain-community==0.2.10
-    # via open-webui
-langchain-core==0.2.28
-    # via langchain
-    # via langchain-chroma
-    # via langchain-community
-    # via langchain-text-splitters
-langchain-text-splitters==0.2.0
-    # via langchain
-langdetect==1.0.9
-    # via unstructured
-langfuse==2.43.3
-    # via open-webui
-langsmith==0.1.96
-    # via langchain
-    # via langchain-community
-    # via langchain-core
-lark==1.1.8
-    # via rtfde
-lxml==5.2.2
-    # via python-pptx
-    # via unstructured
-mako==1.3.5
-    # via alembic
-markdown==3.6
-    # via open-webui
-markdown-it-py==3.0.0
-    # via rich
-markupsafe==2.1.5
-    # via jinja2
-    # via mako
-    # via werkzeug
-marshmallow==3.21.2
-    # via dataclasses-json
-    # via unstructured-client
-mdurl==0.1.2
-    # via markdown-it-py
-mmh3==4.1.0
-    # via chromadb
-monotonic==1.6
-    # via posthog
-mpmath==1.3.0
-    # via sympy
-msoffcrypto-tool==5.4.1
-    # via oletools
-multidict==6.0.5
-    # via aiohttp
-    # via yarl
-mypy-extensions==1.0.0
-    # via black
-    # via typing-inspect
-    # via unstructured-client
-networkx==3.3
-    # via torch
-nltk==3.8.1
-    # via unstructured
-numpy==1.26.4
-    # via chroma-hnswlib
-    # via chromadb
-    # via ctranslate2
-    # via langchain
-    # via langchain-chroma
-    # via langchain-community
-    # via onnxruntime
-    # via opencv-python
-    # via opencv-python-headless
-    # via pandas
-    # via rank-bm25
-    # via rapidocr-onnxruntime
-    # via scikit-learn
-    # via scipy
-    # via sentence-transformers
-    # via shapely
-    # via transformers
-    # via unstructured
-oauthlib==3.2.2
-    # via kubernetes
-    # via requests-oauthlib
-olefile==0.47
-    # via extract-msg
-    # via msoffcrypto-tool
-    # via oletools
-oletools==0.60.1
-    # via pcodedmp
-    # via rtfde
-onnxruntime==1.17.3
-    # via chromadb
-    # via faster-whisper
-    # via rapidocr-onnxruntime
-openai==1.38.0
-    # via open-webui
-opencv-python==4.9.0.80
-    # via rapidocr-onnxruntime
-opencv-python-headless==4.10.0.84
-    # via open-webui
-openpyxl==3.1.5
-    # via open-webui
-opentelemetry-api==1.24.0
-    # via chromadb
-    # via opentelemetry-exporter-otlp-proto-grpc
-    # via opentelemetry-instrumentation
-    # via opentelemetry-instrumentation-asgi
-    # via opentelemetry-instrumentation-fastapi
-    # via opentelemetry-sdk
-opentelemetry-exporter-otlp-proto-common==1.24.0
-    # via opentelemetry-exporter-otlp-proto-grpc
-opentelemetry-exporter-otlp-proto-grpc==1.24.0
-    # via chromadb
-opentelemetry-instrumentation==0.45b0
-    # via opentelemetry-instrumentation-asgi
-    # via opentelemetry-instrumentation-fastapi
-opentelemetry-instrumentation-asgi==0.45b0
-    # via opentelemetry-instrumentation-fastapi
-opentelemetry-instrumentation-fastapi==0.45b0
-    # via chromadb
-opentelemetry-proto==1.24.0
-    # via opentelemetry-exporter-otlp-proto-common
-    # via opentelemetry-exporter-otlp-proto-grpc
-opentelemetry-sdk==1.24.0
-    # via chromadb
-    # via opentelemetry-exporter-otlp-proto-grpc
-opentelemetry-semantic-conventions==0.45b0
-    # via opentelemetry-instrumentation-asgi
-    # via opentelemetry-instrumentation-fastapi
-    # via opentelemetry-sdk
-opentelemetry-util-http==0.45b0
-    # via opentelemetry-instrumentation-asgi
-    # via opentelemetry-instrumentation-fastapi
-ordered-set==4.1.0
-    # via deepdiff
-orjson==3.10.3
-    # via chromadb
-    # via fastapi
-    # via langsmith
-overrides==7.7.0
-    # via chromadb
-packaging==23.2
-    # via black
-    # via build
-    # via huggingface-hub
-    # via langchain-core
-    # via langfuse
-    # via marshmallow
-    # via onnxruntime
-    # via pytest
-    # via transformers
-    # via unstructured-client
-pandas==2.2.2
-    # via open-webui
-passlib==1.7.4
-    # via open-webui
-pathspec==0.12.1
-    # via black
-pcodedmp==1.2.6
-    # via oletools
-peewee==3.17.6
-    # via open-webui
-    # via peewee-migrate
-peewee-migrate==1.12.2
-    # via open-webui
-pillow==10.3.0
-    # via fpdf2
-    # via python-pptx
-    # via rapidocr-onnxruntime
-    # via sentence-transformers
-platformdirs==4.2.1
-    # via black
-pluggy==1.5.0
-    # via pytest
-posthog==3.5.0
-    # via chromadb
-primp==0.5.5
-    # via duckduckgo-search
-proto-plus==1.23.0
-    # via google-ai-generativelanguage
-    # via google-api-core
-protobuf==4.25.3
-    # via google-ai-generativelanguage
-    # via google-api-core
-    # via google-generativeai
-    # via googleapis-common-protos
-    # via grpcio-status
-    # via onnxruntime
-    # via opentelemetry-proto
-    # via proto-plus
-psutil==6.0.0
-    # via open-webui
-    # via unstructured
-psycopg2-binary==2.9.9
-    # via open-webui
-pyasn1==0.6.0
-    # via pyasn1-modules
-    # via python-jose
-    # via rsa
-pyasn1-modules==0.4.0
-    # via google-auth
-pyclipper==1.3.0.post5
-    # via rapidocr-onnxruntime
-pycparser==2.22
-    # via cffi
-pydantic==2.8.2
-    # via anthropic
-    # via chromadb
-    # via fastapi
-    # via google-generativeai
-    # via langchain
-    # via langchain-core
-    # via langfuse
-    # via langsmith
-    # via open-webui
-    # via openai
-pydantic-core==2.20.1
-    # via pydantic
-pydub==0.25.1
-    # via open-webui
-pygments==2.18.0
-    # via rich
-pyjwt==2.9.0
-    # via open-webui
-pymongo==4.8.0
-    # via open-webui
-pymysql==1.1.1
-    # via open-webui
-pypandoc==1.13
-    # via open-webui
-pyparsing==2.4.7
-    # via httplib2
-    # via oletools
-pypdf==4.3.1
-    # via open-webui
-    # via unstructured-client
-pypika==0.48.9
-    # via chromadb
-pyproject-hooks==1.1.0
-    # via build
-pytest==8.2.2
-    # via open-webui
-    # via pytest-docker
-pytest-docker==3.1.1
-    # via open-webui
-python-dateutil==2.9.0.post0
-    # via botocore
-    # via kubernetes
-    # via pandas
-    # via posthog
-    # via unstructured-client
-python-dotenv==1.0.1
-    # via uvicorn
-python-engineio==4.9.0
-    # via python-socketio
-python-iso639==2024.4.27
-    # via unstructured
-python-jose==3.3.0
-    # via open-webui
-python-magic==0.4.27
-    # via unstructured
-python-multipart==0.0.9
-    # via fastapi
-    # via open-webui
-python-pptx==1.0.0
-    # via open-webui
-python-socketio==5.11.3
-    # via open-webui
-pytube==15.0.0
-    # via open-webui
-pytz==2024.1
-    # via apscheduler
-    # via pandas
-pyxlsb==1.0.10
-    # via open-webui
-pyyaml==6.0.1
-    # via chromadb
-    # via ctranslate2
-    # via huggingface-hub
-    # via kubernetes
-    # via langchain
-    # via langchain-community
-    # via langchain-core
-    # via rapidocr-onnxruntime
-    # via transformers
-    # via uvicorn
-rank-bm25==0.2.2
-    # via open-webui
-rapidfuzz==3.9.0
-    # via unstructured
-rapidocr-onnxruntime==1.3.24
-    # via open-webui
-red-black-tree-mod==1.20
-    # via extract-msg
-redis==5.0.8
-    # via open-webui
-regex==2024.5.10
-    # via nltk
-    # via tiktoken
-    # via transformers
-requests==2.32.3
-    # via docker
-    # via google-api-core
-    # via huggingface-hub
-    # via kubernetes
-    # via langchain
-    # via langchain-community
-    # via langsmith
-    # via open-webui
-    # via posthog
-    # via requests-oauthlib
-    # via tiktoken
-    # via transformers
-    # via unstructured
-    # via unstructured-client
-    # via youtube-transcript-api
-requests-oauthlib==2.0.0
-    # via kubernetes
-rich==13.7.1
-    # via typer
-rsa==4.9
-    # via google-auth
-    # via python-jose
-rtfde==0.1.1
-    # via extract-msg
-s3transfer==0.10.1
-    # via boto3
-safetensors==0.4.3
-    # via transformers
-scikit-learn==1.4.2
-    # via sentence-transformers
-scipy==1.13.0
-    # via scikit-learn
-    # via sentence-transformers
-sentence-transformers==3.0.1
-    # via open-webui
-setuptools==69.5.1
-    # via ctranslate2
-    # via opentelemetry-instrumentation
-shapely==2.0.5
-    # via rapidocr-onnxruntime
-shellingham==1.5.4
-    # via typer
-simple-websocket==1.0.0
-    # via python-engineio
-six==1.16.0
-    # via apscheduler
-    # via ecdsa
-    # via kubernetes
-    # via langdetect
-    # via posthog
-    # via python-dateutil
-    # via rapidocr-onnxruntime
-    # via unstructured-client
-sniffio==1.3.1
-    # via anthropic
-    # via anyio
-    # via httpx
-    # via openai
-soupsieve==2.5
-    # via beautifulsoup4
-sqlalchemy==2.0.31
-    # via alembic
-    # via langchain
-    # via langchain-community
-    # via open-webui
-starlette==0.37.2
-    # via fastapi
-sympy==1.12
-    # via onnxruntime
-    # via torch
-tabulate==0.9.0
-    # via unstructured
-tenacity==8.3.0
-    # via chromadb
-    # via langchain
-    # via langchain-community
-    # via langchain-core
-threadpoolctl==3.5.0
-    # via scikit-learn
-tiktoken==0.7.0
-    # via open-webui
-tokenizers==0.15.2
-    # via anthropic
-    # via chromadb
-    # via faster-whisper
-    # via transformers
-torch==2.3.0
-    # via sentence-transformers
-tqdm==4.66.4
-    # via chromadb
-    # via google-generativeai
-    # via huggingface-hub
-    # via nltk
-    # via openai
-    # via sentence-transformers
-    # via transformers
-    # via unstructured
-transformers==4.39.3
-    # via sentence-transformers
-typer==0.12.3
-    # via chromadb
-    # via fastapi-cli
-typing-extensions==4.11.0
-    # via alembic
-    # via anthropic
-    # via chromadb
-    # via fastapi
-    # via google-generativeai
-    # via huggingface-hub
-    # via langchain-core
-    # via openai
-    # via opentelemetry-sdk
-    # via pydantic
-    # via pydantic-core
-    # via python-pptx
-    # via sqlalchemy
-    # via torch
-    # via typer
-    # via typing-inspect
-    # via unstructured
-    # via unstructured-client
-typing-inspect==0.9.0
-    # via dataclasses-json
-    # via unstructured-client
-tzdata==2024.1
-    # via pandas
-tzlocal==5.2
-    # via apscheduler
-    # via extract-msg
-ujson==5.10.0
-    # via fastapi
-unstructured==0.15.0
-    # via open-webui
-unstructured-client==0.22.0
-    # via unstructured
-uritemplate==4.1.1
-    # via google-api-python-client
-urllib3==2.2.1
-    # via botocore
-    # via docker
-    # via kubernetes
-    # via requests
-    # via unstructured-client
-uvicorn==0.22.0
-    # via chromadb
-    # via fastapi
-    # via open-webui
-uvloop==0.19.0
-    # via uvicorn
-validators==0.33.0
-    # via open-webui
-watchfiles==0.21.0
-    # via uvicorn
-websocket-client==1.8.0
-    # via kubernetes
-websockets==12.0
-    # via uvicorn
-werkzeug==3.0.3
-    # via flask
-wrapt==1.16.0
-    # via deprecated
-    # via langfuse
-    # via opentelemetry-instrumentation
-    # via unstructured
-wsproto==1.2.0
-    # via simple-websocket
-xlrd==2.0.1
-    # via open-webui
-xlsxwriter==3.2.0
-    # via python-pptx
-yarl==1.9.4
-    # via aiohttp
-youtube-transcript-api==0.6.2
-    # via open-webui
-zipp==3.18.1
-    # via importlib-metadata

src/app.css

@@ -34,6 +34,10 @@ math {
 	@apply rounded-lg;
 }
 
+.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;
+}
+
 .markdown a {
 	@apply underline;
 }

src/lib/apis/audio/index.ts

@@ -132,7 +132,11 @@ export const synthesizeOpenAISpeech = async (
 	return res;
 };
 
-export const getModels = async (token: string = '') => {
+interface AvailableModelsResponse {
+	models: { name: string; id: string }[] | { id: string }[];
+}
+
+export const getModels = async (token: string = ''): Promise<AvailableModelsResponse> => {
 	let error = null;
 
 	const res = await fetch(`${AUDIO_API_BASE_URL}/models`, {

src/lib/apis/images/index.ts

@@ -1,6 +1,6 @@
 import { IMAGES_API_BASE_URL } from '$lib/constants';
 
-export const getImageGenerationConfig = async (token: string = '') => {
+export const getConfig = async (token: string = '') => {
 	let error = null;
 
 	const res = await fetch(`${IMAGES_API_BASE_URL}/config`, {
@@ -32,11 +32,7 @@ export const getImageGenerationConfig = async (token: string = '') => {
 	return res;
 };
 
-export const updateImageGenerationConfig = async (
-	token: string = '',
-	engine: string,
-	enabled: boolean
-) => {
+export const updateConfig = async (token: string = '', config: object) => {
 	let error = null;
 
 	const res = await fetch(`${IMAGES_API_BASE_URL}/config/update`, {
@@ -47,8 +43,7 @@ export const updateImageGenerationConfig = async (
 			...(token && { authorization: `Bearer ${token}` })
 		},
 		body: JSON.stringify({
-			engine,
-			enabled
+			...config
 		})
 	})
 		.then(async (res) => {
@@ -72,10 +67,10 @@ export const updateImageGenerationConfig = async (
 	return res;
 };
 
-export const getOpenAIConfig = async (token: string = '') => {
+export const verifyConfigUrl = async (token: string = '') => {
 	let error = null;
 
-	const res = await fetch(`${IMAGES_API_BASE_URL}/openai/config`, {
+	const res = await fetch(`${IMAGES_API_BASE_URL}/config/url/verify`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',
@@ -104,46 +99,10 @@ export const getOpenAIConfig = async (token: string = '') => {
 	return res;
 };
 
-export const updateOpenAIConfig = async (token: string = '', url: string, key: string) => {
+export const getImageGenerationConfig = async (token: string = '') => {
 	let error = null;
 
-	const res = await fetch(`${IMAGES_API_BASE_URL}/openai/config/update`, {
-		method: 'POST',
-		headers: {
-			Accept: 'application/json',
-			'Content-Type': 'application/json',
-			...(token && { authorization: `Bearer ${token}` })
-		},
-		body: JSON.stringify({
-			url: url,
-			key: key
-		})
-	})
-		.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;
-			} else {
-				error = 'Server connection failed';
-			}
-			return null;
-		});
-
-	if (error) {
-		throw error;
-	}
-
-	return res;
-};
-
-export const getImageGenerationEngineUrls = async (token: string = '') => {
-	let error = null;
-
-	const res = await fetch(`${IMAGES_API_BASE_URL}/url`, {
+	const res = await fetch(`${IMAGES_API_BASE_URL}/image/config`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',
@@ -172,19 +131,17 @@ export const getImageGenerationEngineUrls = async (token: string = '') => {
 	return res;
 };
 
-export const updateImageGenerationEngineUrls = async (token: string = '', urls: object = {}) => {
+export const updateImageGenerationConfig = async (token: string = '', config: object) => {
 	let error = null;
 
-	const res = await fetch(`${IMAGES_API_BASE_URL}/url/update`, {
+	const res = await fetch(`${IMAGES_API_BASE_URL}/image/config/update`, {
 		method: 'POST',
 		headers: {
 			Accept: 'application/json',
 			'Content-Type': 'application/json',
 			...(token && { authorization: `Bearer ${token}` })
 		},
-		body: JSON.stringify({
-			...urls
-		})
+		body: JSON.stringify({ ...config })
 	})
 		.then(async (res) => {
 			if (!res.ok) throw await res.json();
@@ -207,138 +164,6 @@ export const updateImageGenerationEngineUrls = async (token: string = '', urls:
 	return res;
 };
 
-export const getImageSize = async (token: string = '') => {
-	let error = null;
-
-	const res = await fetch(`${IMAGES_API_BASE_URL}/size`, {
-		method: 'GET',
-		headers: {
-			Accept: 'application/json',
-			'Content-Type': 'application/json',
-			...(token && { authorization: `Bearer ${token}` })
-		}
-	})
-		.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;
-			} else {
-				error = 'Server connection failed';
-			}
-			return null;
-		});
-
-	if (error) {
-		throw error;
-	}
-
-	return res.IMAGE_SIZE;
-};
-
-export const updateImageSize = async (token: string = '', size: string) => {
-	let error = null;
-
-	const res = await fetch(`${IMAGES_API_BASE_URL}/size/update`, {
-		method: 'POST',
-		headers: {
-			Accept: 'application/json',
-			'Content-Type': 'application/json',
-			...(token && { authorization: `Bearer ${token}` })
-		},
-		body: JSON.stringify({
-			size: size
-		})
-	})
-		.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;
-			} else {
-				error = 'Server connection failed';
-			}
-			return null;
-		});
-
-	if (error) {
-		throw error;
-	}
-
-	return res.IMAGE_SIZE;
-};
-
-export const getImageSteps = async (token: string = '') => {
-	let error = null;
-
-	const res = await fetch(`${IMAGES_API_BASE_URL}/steps`, {
-		method: 'GET',
-		headers: {
-			Accept: 'application/json',
-			'Content-Type': 'application/json',
-			...(token && { authorization: `Bearer ${token}` })
-		}
-	})
-		.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;
-			} else {
-				error = 'Server connection failed';
-			}
-			return null;
-		});
-
-	if (error) {
-		throw error;
-	}
-
-	return res.IMAGE_STEPS;
-};
-
-export const updateImageSteps = async (token: string = '', steps: number) => {
-	let error = null;
-
-	const res = await fetch(`${IMAGES_API_BASE_URL}/steps/update`, {
-		method: 'POST',
-		headers: {
-			Accept: 'application/json',
-			'Content-Type': 'application/json',
-			...(token && { authorization: `Bearer ${token}` })
-		},
-		body: JSON.stringify({ steps })
-	})
-		.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;
-			} else {
-				error = 'Server connection failed';
-			}
-			return null;
-		});
-
-	if (error) {
-		throw error;
-	}
-
-	return res.IMAGE_STEPS;
-};
-
 export const getImageGenerationModels = async (token: string = '') => {
 	let error = null;
 
@@ -371,73 +196,6 @@ export const getImageGenerationModels = async (token: string = '') => {
 	return res;
 };
 
-export const getDefaultImageGenerationModel = async (token: string = '') => {
-	let error = null;
-
-	const res = await fetch(`${IMAGES_API_BASE_URL}/models/default`, {
-		method: 'GET',
-		headers: {
-			Accept: 'application/json',
-			'Content-Type': 'application/json',
-			...(token && { authorization: `Bearer ${token}` })
-		}
-	})
-		.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;
-			} else {
-				error = 'Server connection failed';
-			}
-			return null;
-		});
-
-	if (error) {
-		throw error;
-	}
-
-	return res.model;
-};
-
-export const updateDefaultImageGenerationModel = async (token: string = '', model: string) => {
-	let error = null;
-
-	const res = await fetch(`${IMAGES_API_BASE_URL}/models/default/update`, {
-		method: 'POST',
-		headers: {
-			Accept: 'application/json',
-			'Content-Type': 'application/json',
-			...(token && { authorization: `Bearer ${token}` })
-		},
-		body: JSON.stringify({
-			model: model
-		})
-	})
-		.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;
-			} else {
-				error = 'Server connection failed';
-			}
-			return null;
-		});
-
-	if (error) {
-		throw error;
-	}
-
-	return res.model;
-};
-
 export const imageGenerations = async (token: string = '', prompt: string) => {
 	let error = null;
 

src/lib/apis/index.ts

@@ -333,6 +333,42 @@ export const generateSearchQuery = async (
 	return res?.choices[0]?.message?.content.replace(/["']/g, '') ?? prompt;
 };
 
+export const generateMoACompletion = async (
+	token: string = '',
+	model: string,
+	prompt: string,
+	responses: string[]
+) => {
+	const controller = new AbortController();
+	let error = null;
+
+	const res = await fetch(`${WEBUI_BASE_URL}/api/task/moa/completions`, {
+		signal: controller.signal,
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			model: model,
+			prompt: prompt,
+			responses: responses,
+			stream: true
+		})
+	}).catch((err) => {
+		console.log(err);
+		error = err;
+		return null;
+	});
+
+	if (error) {
+		throw error;
+	}
+
+	return [res, controller];
+};
+
 export const getPipelinesList = async (token: string = '') => {
 	let error = null;
 
@@ -629,6 +665,7 @@ export const getBackendConfig = async () => {
 
 	const res = await fetch(`${WEBUI_BASE_URL}/api/config`, {
 		method: 'GET',
+		credentials: 'include',
 		headers: {
 			'Content-Type': 'application/json'
 		}
@@ -913,6 +950,7 @@ export interface ModelConfig {
 export interface ModelMeta {
 	description?: string;
 	capabilities?: object;
+	profile_image_url?: string;
 }
 
 export interface ModelParams {}

src/lib/apis/memories/index.ts

@@ -156,7 +156,7 @@ export const deleteMemoryById = async (token: string, id: string) => {
 export const deleteMemoriesByUserId = async (token: string) => {
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/memories/user`, {
+	const res = await fetch(`${WEBUI_API_BASE_URL}/memories/delete/user`, {
 		method: 'DELETE',
 		headers: {
 			Accept: 'application/json',

src/lib/apis/ollama/index.ts

@@ -396,7 +396,7 @@ export const deleteModel = async (token: string, tagName: string, urlIdx: string
 	return res;
 };
 
-export const pullModel = async (token: string, tagName: string, urlIdx: string | null = null) => {
+export const pullModel = async (token: string, tagName: string, urlIdx: number | null = null) => {
 	let error = null;
 	const controller = new AbortController();
 

src/lib/apis/rag/index.ts

@@ -400,7 +400,7 @@ export const resetUploadDir = async (token: string) => {
 	let error = null;
 
 	const res = await fetch(`${RAG_API_BASE_URL}/reset/uploads`, {
-		method: 'GET',
+		method: 'POST',
 		headers: {
 			Accept: 'application/json',
 			authorization: `Bearer ${token}`
@@ -426,7 +426,7 @@ export const resetVectorDB = async (token: string) => {
 	let error = null;
 
 	const res = await fetch(`${RAG_API_BASE_URL}/reset/db`, {
-		method: 'GET',
+		method: 'POST',
 		headers: {
 			Accept: 'application/json',
 			authorization: `Bearer ${token}`

src/lib/components/admin/Settings.svelte

@@ -336,8 +336,11 @@
 	<div class="flex-1 mt-3 lg:mt-0 overflow-y-scroll">
 		{#if selectedTab === 'general'}
 			<General
-				saveHandler={() => {
+				saveHandler={async () => {
 					toast.success($i18n.t('Settings saved successfully!'));
+
+					await tick();
+					await config.set(await getBackendConfig());
 				}}
 			/>
 		{:else if selectedTab === 'users'}
@@ -356,8 +359,11 @@
 			<Models />
 		{:else if selectedTab === 'documents'}
 			<Documents
-				saveHandler={() => {
+				on:save={async () => {
 					toast.success($i18n.t('Settings saved successfully!'));
+
+					await tick();
+					await config.set(await getBackendConfig());
 				}}
 			/>
 		{:else if selectedTab === 'web'}

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

@@ -10,31 +10,36 @@
 		getModels as _getModels,
 		getVoices as _getVoices
 	} from '$lib/apis/audio';
-	import { user, settings, config } from '$lib/stores';
+	import { config } from '$lib/stores';
 
 	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
 
-	const i18n = getContext('i18n');
+	import { TTS_RESPONSE_SPLIT } from '$lib/types';
 
-	export let saveHandler: Function;
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
+
+	const i18n = getContext<Writable<i18nType>>('i18n');
+
+	export let saveHandler: () => void;
 
 	// Audio
-
 	let TTS_OPENAI_API_BASE_URL = '';
 	let TTS_OPENAI_API_KEY = '';
 	let TTS_API_KEY = '';
 	let TTS_ENGINE = '';
 	let TTS_MODEL = '';
 	let TTS_VOICE = '';
+	let TTS_SPLIT_ON: TTS_RESPONSE_SPLIT = TTS_RESPONSE_SPLIT.PUNCTUATION;
 
 	let STT_OPENAI_API_BASE_URL = '';
 	let STT_OPENAI_API_KEY = '';
 	let STT_ENGINE = '';
 	let STT_MODEL = '';
 
-	let voices = [];
-	let models = [];
-	let nonLocalVoices = false;
+	// eslint-disable-next-line no-undef
+	let voices: SpeechSynthesisVoice[] = [];
+	let models: Awaited<ReturnType<typeof _getModels>>['models'] = [];
 
 	const getModels = async () => {
 		if (TTS_ENGINE === '') {
@@ -53,8 +58,8 @@
 
 	const getVoices = async () => {
 		if (TTS_ENGINE === '') {
-			const getVoicesLoop = setInterval(async () => {
-				voices = await speechSynthesis.getVoices();
+			const getVoicesLoop = setInterval(() => {
+				voices = speechSynthesis.getVoices();
 
 				// do your loop
 				if (voices.length > 0) {
@@ -81,7 +86,8 @@
 				API_KEY: TTS_API_KEY,
 				ENGINE: TTS_ENGINE,
 				MODEL: TTS_MODEL,
-				VOICE: TTS_VOICE
+				VOICE: TTS_VOICE,
+				SPLIT_ON: TTS_SPLIT_ON
 			},
 			stt: {
 				OPENAI_API_BASE_URL: STT_OPENAI_API_BASE_URL,
@@ -92,9 +98,10 @@
 		});
 
 		if (res) {
-			toast.success($i18n.t('Audio settings updated successfully'));
-
-			config.set(await getBackendConfig());
+			saveHandler();
+			getBackendConfig()
+				.then(config.set)
+				.catch(() => {});
 		}
 	};
 
@@ -111,6 +118,8 @@
 			TTS_MODEL = res.tts.MODEL;
 			TTS_VOICE = res.tts.VOICE;
 
+			TTS_SPLIT_ON = res.tts.SPLIT_ON || TTS_RESPONSE_SPLIT.PUNCTUATION;
+
 			STT_OPENAI_API_BASE_URL = res.stt.OPENAI_API_BASE_URL;
 			STT_OPENAI_API_KEY = res.stt.OPENAI_API_KEY;
 
@@ -139,7 +148,7 @@
 					<div class=" self-center text-xs font-medium">{$i18n.t('Speech-to-Text Engine')}</div>
 					<div class="flex items-center relative">
 						<select
-							class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
+							class="dark:bg-gray-900 cursor-pointer w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
 							bind:value={STT_ENGINE}
 							placeholder="Select an engine"
 						>
@@ -195,7 +204,7 @@
 					<div class=" self-center text-xs font-medium">{$i18n.t('Text-to-Speech Engine')}</div>
 					<div class="flex items-center relative">
 						<select
-							class=" dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
+							class=" dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
 							bind:value={TTS_ENGINE}
 							placeholder="Select a mode"
 							on:change={async (e) => {
@@ -203,7 +212,7 @@
 								await getVoices();
 								await getModels();
 
-								if (e.target.value === 'openai') {
+								if (e.target?.value === 'openai') {
 									TTS_VOICE = 'alloy';
 									TTS_MODEL = 'tts-1';
 								} else {
@@ -351,6 +360,30 @@
 						</div>
 					</div>
 				{/if}
+
+				<hr class="dark:border-gray-850 my-2" />
+
+				<div class="pt-0.5 flex w-full justify-between">
+					<div class="self-center text-xs font-medium">{$i18n.t('Response splitting')}</div>
+					<div class="flex items-center relative">
+						<select
+							class="dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
+							aria-label="Select how to split message text for TTS requests"
+							bind:value={TTS_SPLIT_ON}
+						>
+							{#each Object.values(TTS_RESPONSE_SPLIT) as split}
+								<option value={split}
+									>{$i18n.t(split.charAt(0).toUpperCase() + split.slice(1))}</option
+								>
+							{/each}
+						</select>
+					</div>
+				</div>
+				<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
+					{$i18n.t(
+						"Control how message text is split for TTS requests. 'Punctuation' splits into sentences, 'paragraphs' splits into paragraphs, and 'none' keeps the message as a single string."
+					)}
+				</div>
 			</div>
 		</div>
 	</div>

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

@@ -1,4 +1,8 @@
 <script lang="ts">
+	import { onMount, getContext, createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
 	import { getDocs } from '$lib/apis/documents';
 	import { deleteAllFiles, deleteFileById } from '$lib/apis/files';
 	import {
@@ -18,14 +22,12 @@
 	import ResetVectorDBConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 
 	import { documents, models } from '$lib/stores';
-	import { onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	const i18n = getContext('i18n');
 
-	export let saveHandler: Function;
-
 	let scanDirLoading = false;
 	let updateEmbeddingModelLoading = false;
 	let updateRerankingModelLoading = false;
@@ -37,6 +39,9 @@
 	let embeddingModel = '';
 	let rerankingModel = '';
 
+	let fileMaxSize = null;
+	let fileMaxCount = null;
+
 	let contentExtractionEngine = 'default';
 	let tikaServerUrl = '';
 	let showTikaServerUrl = false;
@@ -161,19 +166,22 @@
 	};
 
 	const submitHandler = async () => {
-		embeddingModelUpdateHandler();
+		await embeddingModelUpdateHandler();
 
 		if (querySettings.hybrid) {
-			rerankingModelUpdateHandler();
+			await rerankingModelUpdateHandler();
 		}
 
 		if (contentExtractionEngine === 'tika' && tikaServerUrl === '') {
 			toast.error($i18n.t('Tika Server URL required.'));
 			return;
 		}
-
 		const res = await updateRAGConfig(localStorage.token, {
 			pdf_extract_images: pdfExtractImages,
+			file: {
+				max_size: fileMaxSize === '' ? null : fileMaxSize,
+				max_count: fileMaxCount === '' ? null : fileMaxCount
+			},
 			chunk: {
 				chunk_overlap: chunkOverlap,
 				chunk_size: chunkSize
@@ -185,6 +193,8 @@
 		});
 
 		await updateQuerySettings(localStorage.token, querySettings);
+
+		dispatch('save');
 	};
 
 	const setEmbeddingConfig = async () => {
@@ -218,7 +228,6 @@
 		await setRerankingConfig();
 
 		querySettings = await getQuerySettings(localStorage.token);
-
 		const res = await getRAGConfig(localStorage.token);
 
 		if (res) {
@@ -230,6 +239,9 @@
 			contentExtractionEngine = res.content_extraction.engine;
 			tikaServerUrl = res.content_extraction.tika_server_url;
 			showTikaServerUrl = contentExtractionEngine === 'tika';
+
+			fileMaxSize = res?.file.max_size ?? '';
+			fileMaxCount = res?.file.max_count ?? '';
 		}
 	});
 </script>
@@ -266,7 +278,6 @@
 	class="flex flex-col h-full justify-between space-y-3 text-sm"
 	on:submit|preventDefault={() => {
 		submitHandler();
-		saveHandler();
 	}}
 >
 	<div class=" space-y-2.5 overflow-y-scroll scrollbar-hidden h-full pr-1.5">
@@ -610,6 +621,62 @@
 				</div>
 			{/if}
 		</div>
+
+		<hr class=" dark:border-gray-850" />
+
+		<div class="">
+			<div class="text-sm font-medium">{$i18n.t('Files')}</div>
+
+			<div class=" my-2 flex gap-1.5">
+				<div class="w-full">
+					<div class=" self-center text-xs font-medium min-w-fit mb-1">
+						{$i18n.t('Max Upload Size')}
+					</div>
+
+					<div class="self-center">
+						<Tooltip
+							content={$i18n.t(
+								'The maximum file size in MB. If the file size exceeds this limit, the file will not be uploaded.'
+							)}
+							placement="top-start"
+						>
+							<input
+								class="w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+								type="number"
+								placeholder={$i18n.t('Leave empty for unlimited')}
+								bind:value={fileMaxSize}
+								autocomplete="off"
+								min="0"
+							/>
+						</Tooltip>
+					</div>
+				</div>
+
+				<div class="  w-full">
+					<div class="self-center text-xs font-medium min-w-fit mb-1">
+						{$i18n.t('Max Upload Count')}
+					</div>
+					<div class="self-center">
+						<Tooltip
+							content={$i18n.t(
+								'The maximum number of files that can be used at once in chat. If the number of files exceeds this limit, the files will not be uploaded.'
+							)}
+							placement="top-start"
+						>
+							<input
+								class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+								type="number"
+								placeholder={$i18n.t('Leave empty for unlimited')}
+								bind:value={fileMaxCount}
+								autocomplete="off"
+								min="0"
+							/>
+						</Tooltip>
+					</div>
+				</div>
+			</div>
+		</div>
+
 		<hr class=" dark:border-gray-850" />
 
 		<div class=" ">

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

@@ -1,22 +1,10 @@
 <script lang="ts">
-	import {
-		getCommunitySharingEnabledStatus,
-		getWebhookUrl,
-		toggleCommunitySharingEnabledStatus,
-		updateWebhookUrl
-	} from '$lib/apis';
-	import {
-		getAdminConfig,
-		getDefaultUserRole,
-		getJWTExpiresDuration,
-		getSignUpEnabledStatus,
-		toggleSignUpEnabledStatus,
-		updateAdminConfig,
-		updateDefaultUserRole,
-		updateJWTExpiresDuration
-	} from '$lib/apis/auths';
+	import { getBackendConfig, getWebhookUrl, updateWebhookUrl } from '$lib/apis';
+	import { getAdminConfig, updateAdminConfig } from '$lib/apis/auths';
 	import Switch from '$lib/components/common/Switch.svelte';
+	import { config } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
+	import { toast } from 'svelte-sonner';
 
 	const i18n = getContext('i18n');
 
@@ -30,7 +18,7 @@
 		const res = await updateAdminConfig(localStorage.token, adminConfig);
 
 		if (res) {
-			toast.success(i18n.t('Settings updated successfully'));
+			saveHandler();
 		} else {
 			toast.error(i18n.t('Failed to update settings'));
 		}
@@ -51,9 +39,8 @@
 
 <form
 	class="flex flex-col h-full justify-between space-y-3 text-sm"
-	on:submit|preventDefault={() => {
+	on:submit|preventDefault={async () => {
 		updateHandler();
-		saveHandler();
 	}}
 >
 	<div class=" space-y-3 overflow-y-scroll scrollbar-hidden h-full">
@@ -98,6 +85,12 @@
 					<Switch bind:state={adminConfig.ENABLE_COMMUNITY_SHARING} />
 				</div>
 
+				<div class="my-3 flex w-full items-center justify-between pr-2">
+					<div class=" self-center text-xs font-medium">{$i18n.t('Enable Message Rating')}</div>
+
+					<Switch bind:state={adminConfig.ENABLE_MESSAGE_RATING} />
+				</div>
+
 				<hr class=" dark:border-gray-850 my-2" />
 
 				<div class=" w-full justify-between">

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

@@ -2,152 +2,180 @@
 	import { toast } from 'svelte-sonner';
 
 	import { createEventDispatcher, onMount, getContext } from 'svelte';
-	import { config, user } from '$lib/stores';
+	import { config as backendConfig, user } from '$lib/stores';
+
+	import { getBackendConfig } from '$lib/apis';
 	import {
 		getImageGenerationModels,
-		getDefaultImageGenerationModel,
-		updateDefaultImageGenerationModel,
-		getImageSize,
 		getImageGenerationConfig,
 		updateImageGenerationConfig,
-		getImageGenerationEngineUrls,
-		updateImageGenerationEngineUrls,
-		updateImageSize,
-		getImageSteps,
-		updateImageSteps,
-		getOpenAIConfig,
-		updateOpenAIConfig
+		getConfig,
+		updateConfig,
+		verifyConfigUrl
 	} from '$lib/apis/images';
-	import { getBackendConfig } from '$lib/apis';
 	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
+	import Switch from '$lib/components/common/Switch.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	const dispatch = createEventDispatcher();
 
 	const i18n = getContext('i18n');
 
 	let loading = false;
 
-	let imageGenerationEngine = '';
-	let enableImageGeneration = false;
+	let config = null;
+	let imageGenerationConfig = null;
 
-	let AUTOMATIC1111_BASE_URL = '';
-	let AUTOMATIC1111_API_AUTH = '';
-	let COMFYUI_BASE_URL = '';
-
-	let OPENAI_API_BASE_URL = '';
-	let OPENAI_API_KEY = '';
-
-	let selectedModel = '';
 	let models = null;
 
-	let imageSize = '';
-	let steps = 50;
+	let requiredWorkflowNodes = [
+		{
+			type: 'prompt',
+			key: 'text',
+			node_ids: ''
+		},
+		{
+			type: 'model',
+			key: 'ckpt_name',
+			node_ids: ''
+		},
+		{
+			type: 'width',
+			key: 'width',
+			node_ids: ''
+		},
+		{
+			type: 'height',
+			key: 'height',
+			node_ids: ''
+		},
+		{
+			type: 'steps',
+			key: 'steps',
+			node_ids: ''
+		},
+		{
+			type: 'seed',
+			key: 'seed',
+			node_ids: ''
+		}
+	];
 
 	const getModels = async () => {
 		models = await getImageGenerationModels(localStorage.token).catch((error) => {
 			toast.error(error);
 			return null;
 		});
-		selectedModel = await getDefaultImageGenerationModel(localStorage.token).catch((error) => {
-			return '';
-		});
 	};
 
-	const updateUrlHandler = async () => {
-		if (imageGenerationEngine === 'comfyui') {
-			const res = await updateImageGenerationEngineUrls(localStorage.token, {
-				COMFYUI_BASE_URL: COMFYUI_BASE_URL
-			}).catch((error) => {
-				toast.error(error);
-
-				console.log(error);
-				return null;
-			});
-
-			if (res) {
-				COMFYUI_BASE_URL = res.COMFYUI_BASE_URL;
-
-				await getModels();
-
-				if (models) {
-					toast.success($i18n.t('Server connection verified'));
-				}
-			} else {
-				({ COMFYUI_BASE_URL } = await getImageGenerationEngineUrls(localStorage.token));
-			}
-		} else {
-			const res = await updateImageGenerationEngineUrls(localStorage.token, {
-				AUTOMATIC1111_BASE_URL: AUTOMATIC1111_BASE_URL,
-				AUTOMATIC1111_API_AUTH: AUTOMATIC1111_API_AUTH
-			}).catch((error) => {
-				toast.error(error);
-				return null;
-			});
-
-			if (res) {
-				AUTOMATIC1111_BASE_URL = res.AUTOMATIC1111_BASE_URL;
-				AUTOMATIC1111_API_AUTH = res.AUTOMATIC1111_API_AUTH;
-
-				await getModels();
-
-				if (models) {
-					toast.success($i18n.t('Server connection verified'));
-				}
-			} else {
-				({ AUTOMATIC1111_BASE_URL, AUTOMATIC1111_API_AUTH } = await getImageGenerationEngineUrls(
-					localStorage.token
-				));
-			}
-		}
-	};
-	const updateImageGeneration = async () => {
-		const res = await updateImageGenerationConfig(
-			localStorage.token,
-			imageGenerationEngine,
-			enableImageGeneration
-		).catch((error) => {
+	const updateConfigHandler = async () => {
+		const res = await updateConfig(localStorage.token, config).catch((error) => {
 			toast.error(error);
 			return null;
 		});
 
 		if (res) {
-			imageGenerationEngine = res.engine;
-			enableImageGeneration = res.enabled;
+			config = res;
 		}
 
-		if (enableImageGeneration) {
-			config.set(await getBackendConfig(localStorage.token));
+		if (config.enabled) {
+			backendConfig.set(await getBackendConfig());
 			getModels();
 		}
 	};
 
+	const validateJSON = (json) => {
+		try {
+			const obj = JSON.parse(json);
+
+			if (obj && typeof obj === 'object') {
+				return true;
+			}
+		} catch (e) {}
+		return false;
+	};
+
+	const saveHandler = async () => {
+		loading = true;
+
+		if (config?.comfyui?.COMFYUI_WORKFLOW) {
+			if (!validateJSON(config.comfyui.COMFYUI_WORKFLOW)) {
+				toast.error('Invalid JSON format for ComfyUI Workflow.');
+				loading = false;
+				return;
+			}
+		}
+
+		if (config?.comfyui?.COMFYUI_WORKFLOW) {
+			config.comfyui.COMFYUI_WORKFLOW_NODES = requiredWorkflowNodes.map((node) => {
+				return {
+					type: node.type,
+					key: node.key,
+					node_ids:
+						node.node_ids.trim() === '' ? [] : node.node_ids.split(',').map((id) => id.trim())
+				};
+			});
+		}
+
+		await updateConfig(localStorage.token, config).catch((error) => {
+			toast.error(error);
+			loading = false;
+			return null;
+		});
+
+		await updateImageGenerationConfig(localStorage.token, imageGenerationConfig).catch((error) => {
+			toast.error(error);
+			loading = false;
+			return null;
+		});
+
+		getModels();
+		dispatch('save');
+		loading = false;
+	};
+
 	onMount(async () => {
 		if ($user.role === 'admin') {
-			const res = await getImageGenerationConfig(localStorage.token).catch((error) => {
+			const res = await getConfig(localStorage.token).catch((error) => {
 				toast.error(error);
 				return null;
 			});
 
 			if (res) {
-				imageGenerationEngine = res.engine;
-				enableImageGeneration = res.enabled;
+				config = res;
 			}
-			const URLS = await getImageGenerationEngineUrls(localStorage.token);
 
-			AUTOMATIC1111_BASE_URL = URLS.AUTOMATIC1111_BASE_URL;
-			AUTOMATIC1111_API_AUTH = URLS.AUTOMATIC1111_API_AUTH;
-			COMFYUI_BASE_URL = URLS.COMFYUI_BASE_URL;
-
-			const config = await getOpenAIConfig(localStorage.token);
-
-			OPENAI_API_KEY = config.OPENAI_API_KEY;
-			OPENAI_API_BASE_URL = config.OPENAI_API_BASE_URL;
-
-			imageSize = await getImageSize(localStorage.token);
-			steps = await getImageSteps(localStorage.token);
-
-			if (enableImageGeneration) {
+			if (config.enabled) {
 				getModels();
 			}
+
+			if (config.comfyui.COMFYUI_WORKFLOW) {
+				config.comfyui.COMFYUI_WORKFLOW = JSON.stringify(
+					JSON.parse(config.comfyui.COMFYUI_WORKFLOW),
+					null,
+					2
+				);
+			}
+
+			requiredWorkflowNodes = requiredWorkflowNodes.map((node) => {
+				const n = config.comfyui.COMFYUI_WORKFLOW_NODES.find((n) => n.type === node.type) ?? node;
+
+				console.log(n);
+
+				return {
+					type: n.type,
+					key: n.key,
+					node_ids: typeof n.node_ids === 'string' ? n.node_ids : n.node_ids.join(',')
+				};
+			});
+
+			const imageConfigRes = await getImageGenerationConfig(localStorage.token).catch((error) => {
+				toast.error(error);
+				return null;
+			});
+
+			if (imageConfigRes) {
+				imageGenerationConfig = imageConfigRes;
+			}
 		}
 	});
 </script>
@@ -155,263 +183,369 @@
 <form
 	class="flex flex-col h-full justify-between space-y-3 text-sm"
 	on:submit|preventDefault={async () => {
-		loading = true;
-
-		if (imageGenerationEngine === 'openai') {
-			await updateOpenAIConfig(localStorage.token, OPENAI_API_BASE_URL, OPENAI_API_KEY);
-		}
-
-		await updateDefaultImageGenerationModel(localStorage.token, selectedModel);
-
-		await updateImageSize(localStorage.token, imageSize).catch((error) => {
-			toast.error(error);
-			return null;
-		});
-		await updateImageSteps(localStorage.token, steps).catch((error) => {
-			toast.error(error);
-			return null;
-		});
-
-		dispatch('save');
-		loading = false;
+		saveHandler();
 	}}
 >
-	<div class=" space-y-3 overflow-y-scroll scrollbar-hidden">
-		<div>
-			<div class=" mb-1 text-sm font-medium">{$i18n.t('Image Settings')}</div>
-
-			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">{$i18n.t('Image Generation Engine')}</div>
-				<div class="flex items-center relative">
-					<select
-						class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
-						bind:value={imageGenerationEngine}
-						placeholder={$i18n.t('Select a mode')}
-						on:change={async () => {
-							await updateImageGeneration();
-						}}
-					>
-						<option value="">{$i18n.t('Default (Automatic1111)')}</option>
-						<option value="comfyui">{$i18n.t('ComfyUI')}</option>
-						<option value="openai">{$i18n.t('Open AI (Dall-E)')}</option>
-					</select>
-				</div>
-			</div>
-
+	<div class=" space-y-3 overflow-y-scroll scrollbar-hidden pr-2">
+		{#if config && imageGenerationConfig}
 			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">
-						{$i18n.t('Image Generation (Experimental)')}
+				<div class=" mb-1 text-sm font-medium">{$i18n.t('Image Settings')}</div>
+
+				<div>
+					<div class=" py-0.5 flex w-full justify-between">
+						<div class=" self-center text-xs font-medium">
+							{$i18n.t('Image Generation (Experimental)')}
+						</div>
+
+						<div class="px-1">
+							<Switch
+								bind:state={config.enabled}
+								on:change={(e) => {
+									const enabled = e.detail;
+
+									if (enabled) {
+										if (
+											config.engine === 'automatic1111' &&
+											config.automatic1111.AUTOMATIC1111_BASE_URL === ''
+										) {
+											toast.error($i18n.t('AUTOMATIC1111 Base URL is required.'));
+											config.enabled = false;
+										} else if (
+											config.engine === 'comfyui' &&
+											config.comfyui.COMFYUI_BASE_URL === ''
+										) {
+											toast.error($i18n.t('ComfyUI Base URL is required.'));
+											config.enabled = false;
+										} else if (config.engine === 'openai' && config.openai.OPENAI_API_KEY === '') {
+											toast.error($i18n.t('OpenAI API Key is required.'));
+											config.enabled = false;
+										}
+									}
+
+									updateConfigHandler();
+								}}
+							/>
+						</div>
 					</div>
+				</div>
 
-					<button
-						class="p-1 px-3 text-xs flex rounded transition"
-						on:click={() => {
-							if (imageGenerationEngine === '' && AUTOMATIC1111_BASE_URL === '') {
-								toast.error($i18n.t('AUTOMATIC1111 Base URL is required.'));
-								enableImageGeneration = false;
-							} else if (imageGenerationEngine === 'comfyui' && COMFYUI_BASE_URL === '') {
-								toast.error($i18n.t('ComfyUI Base URL is required.'));
-								enableImageGeneration = false;
-							} else if (imageGenerationEngine === 'openai' && OPENAI_API_KEY === '') {
-								toast.error($i18n.t('OpenAI API Key is required.'));
-								enableImageGeneration = false;
-							} else {
-								enableImageGeneration = !enableImageGeneration;
-							}
-
-							updateImageGeneration();
-						}}
-						type="button"
-					>
-						{#if enableImageGeneration === true}
-							<span class="ml-2 self-center">{$i18n.t('On')}</span>
-						{:else}
-							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
-						{/if}
-					</button>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs font-medium">{$i18n.t('Image Generation Engine')}</div>
+					<div class="flex items-center relative">
+						<select
+							class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
+							bind:value={config.engine}
+							placeholder={$i18n.t('Select Engine')}
+							on:change={async () => {
+								updateConfigHandler();
+							}}
+						>
+							<option value="openai">{$i18n.t('Default (Open AI)')}</option>
+							<option value="comfyui">{$i18n.t('ComfyUI')}</option>
+							<option value="automatic1111">{$i18n.t('Automatic1111')}</option>
+						</select>
+					</div>
 				</div>
 			</div>
-		</div>
-		<hr class=" dark:border-gray-850" />
-
-		{#if imageGenerationEngine === ''}
-			<div class=" mb-2.5 text-sm font-medium">{$i18n.t('AUTOMATIC1111 Base URL')}</div>
-			<div class="flex w-full">
-				<div class="flex-1 mr-2">
-					<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"
-						placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
-						bind:value={AUTOMATIC1111_BASE_URL}
-					/>
-				</div>
-				<button
-					class="px-2.5 bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
-					type="button"
-					on:click={() => {
-						updateUrlHandler();
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class="w-4 h-4"
-					>
-						<path
-							fill-rule="evenodd"
-							d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</button>
-			</div>
-
-			<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-				{$i18n.t('Include `--api` flag when running stable-diffusion-webui')}
-				<a
-					class=" text-gray-300 font-medium"
-					href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/3734"
-					target="_blank"
-				>
-					{$i18n.t('(e.g. `sh webui.sh --api`)')}
-				</a>
-			</div>
-
-			<div class=" mb-2.5 text-sm font-medium">{$i18n.t('AUTOMATIC1111 Api Auth String')}</div>
-			<SensitiveInput
-				placeholder={$i18n.t('Enter api auth string (e.g. username:password)')}
-				bind:value={AUTOMATIC1111_API_AUTH}
-				required={false}
-			/>
-
-			<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-				{$i18n.t('Include `--api-auth` flag when running stable-diffusion-webui')}
-				<a
-					class=" text-gray-300 font-medium"
-					href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/13993"
-					target="_blank"
-				>
-					{$i18n.t('(e.g. `sh webui.sh --api --api-auth username_password`)').replace('_', ':')}
-				</a>
-			</div>
-		{:else if imageGenerationEngine === 'comfyui'}
-			<div class=" mb-2.5 text-sm font-medium">{$i18n.t('ComfyUI Base URL')}</div>
-			<div class="flex w-full">
-				<div class="flex-1 mr-2">
-					<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"
-						placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
-						bind:value={COMFYUI_BASE_URL}
-					/>
-				</div>
-				<button
-					class="px-2.5 bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
-					type="button"
-					on:click={() => {
-						updateUrlHandler();
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class="w-4 h-4"
-					>
-						<path
-							fill-rule="evenodd"
-							d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</button>
-			</div>
-		{:else if imageGenerationEngine === 'openai'}
-			<div>
-				<div class=" mb-1.5 text-sm font-medium">{$i18n.t('OpenAI API Config')}</div>
-
-				<div class="flex gap-2 mb-1">
-					<input
-						class="flex-1 w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
-						placeholder={$i18n.t('API Base URL')}
-						bind:value={OPENAI_API_BASE_URL}
-						required
-					/>
-
-					<SensitiveInput placeholder={$i18n.t('API Key')} bind:value={OPENAI_API_KEY} />
-				</div>
-			</div>
-		{/if}
-
-		{#if enableImageGeneration}
 			<hr class=" dark:border-gray-850" />
 
-			<div>
-				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Default Model')}</div>
-				<div class="flex w-full">
-					<div class="flex-1 mr-2">
-						{#if imageGenerationEngine === 'openai' && !OPENAI_API_BASE_URL.includes('https://api.openai.com')}
+			<div class="flex flex-col gap-2">
+				{#if (config?.engine ?? 'automatic1111') === 'automatic1111'}
+					<div>
+						<div class=" mb-2 text-sm font-medium">{$i18n.t('AUTOMATIC1111 Base URL')}</div>
+						<div class="flex w-full">
+							<div class="flex-1 mr-2">
+								<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"
+									placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
+									bind:value={config.automatic1111.AUTOMATIC1111_BASE_URL}
+								/>
+							</div>
+							<button
+								class="px-2.5 bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
+								type="button"
+								on:click={async () => {
+									await updateConfigHandler();
+									const res = await verifyConfigUrl(localStorage.token).catch((error) => {
+										toast.error(error);
+										return null;
+									});
+
+									if (res) {
+										toast.success($i18n.t('Server connection verified'));
+									}
+								}}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 20 20"
+									fill="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							</button>
+						</div>
+
+						<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+							{$i18n.t('Include `--api` flag when running stable-diffusion-webui')}
+							<a
+								class=" text-gray-300 font-medium"
+								href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/3734"
+								target="_blank"
+							>
+								{$i18n.t('(e.g. `sh webui.sh --api`)')}
+							</a>
+						</div>
+					</div>
+
+					<div>
+						<div class=" mb-2 text-sm font-medium">
+							{$i18n.t('AUTOMATIC1111 Api Auth String')}
+						</div>
+						<SensitiveInput
+							placeholder={$i18n.t('Enter api auth string (e.g. username:password)')}
+							bind:value={config.automatic1111.AUTOMATIC1111_API_AUTH}
+							required={false}
+						/>
+
+						<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+							{$i18n.t('Include `--api-auth` flag when running stable-diffusion-webui')}
+							<a
+								class=" text-gray-300 font-medium"
+								href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/13993"
+								target="_blank"
+							>
+								{$i18n
+									.t('(e.g. `sh webui.sh --api --api-auth username_password`)')
+									.replace('_', ':')}
+							</a>
+						</div>
+					</div>
+				{:else if config?.engine === 'comfyui'}
+					<div class="">
+						<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI Base URL')}</div>
+						<div class="flex w-full">
+							<div class="flex-1 mr-2">
+								<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"
+									placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
+									bind:value={config.comfyui.COMFYUI_BASE_URL}
+								/>
+							</div>
+							<button
+								class="px-2.5 bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
+								type="button"
+								on:click={async () => {
+									await updateConfigHandler();
+									const res = await verifyConfigUrl(localStorage.token).catch((error) => {
+										toast.error(error);
+										return null;
+									});
+
+									if (res) {
+										toast.success($i18n.t('Server connection verified'));
+									}
+								}}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 20 20"
+									fill="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							</button>
+						</div>
+					</div>
+
+					<div class="">
+						<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI Workflow')}</div>
+
+						{#if config.comfyui.COMFYUI_WORKFLOW}
+							<textarea
+								class="w-full rounded-lg mb-1 py-2 px-4 text-xs bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none disabled:text-gray-600 resize-none"
+								rows="10"
+								bind:value={config.comfyui.COMFYUI_WORKFLOW}
+								required
+							/>
+						{/if}
+
+						<div class="flex w-full">
+							<div class="flex-1">
+								<input
+									id="upload-comfyui-workflow-input"
+									hidden
+									type="file"
+									accept=".json"
+									on:change={(e) => {
+										const file = e.target.files[0];
+										const reader = new FileReader();
+
+										reader.onload = (e) => {
+											config.comfyui.COMFYUI_WORKFLOW = e.target.result;
+											e.target.value = null;
+										};
+
+										reader.readAsText(file);
+									}}
+								/>
+
+								<button
+									class="w-full text-sm font-medium py-2 bg-transparent hover:bg-gray-100 border border-dashed dark:border-gray-800 dark:hover:bg-gray-850 text-center rounded-xl"
+									type="button"
+									on:click={() => {
+										document.getElementById('upload-comfyui-workflow-input')?.click();
+									}}
+								>
+									{$i18n.t('Click here to upload a workflow.json file.')}
+								</button>
+							</div>
+						</div>
+
+						<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+							{$i18n.t('Make sure to export a workflow.json file as API format from ComfyUI.')}
+						</div>
+					</div>
+
+					{#if config.comfyui.COMFYUI_WORKFLOW}
+						<div class="">
+							<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI Workflow Nodes')}</div>
+
+							<div class="text-xs flex flex-col gap-1.5">
+								{#each requiredWorkflowNodes as node}
+									<div class="flex w-full items-center border dark:border-gray-850 rounded-lg">
+										<div class="flex-shrink-0">
+											<div
+												class=" capitalize line-clamp-1 font-medium px-3 py-1 w-20 text-center rounded-l-lg bg-green-500/10 text-green-700 dark:text-green-200"
+											>
+												{node.type}{node.type === 'prompt' ? '*' : ''}
+											</div>
+										</div>
+										<div class="">
+											<Tooltip content="Input Key (e.g. text, unet_name, steps)">
+												<input
+													class="py-1 px-3 w-24 text-xs text-center bg-transparent outline-none border-r dark:border-gray-850"
+													placeholder="Key"
+													bind:value={node.key}
+													required
+												/>
+											</Tooltip>
+										</div>
+
+										<div class="w-full">
+											<Tooltip
+												content="Comma separated Node Ids (e.g. 1 or 1,2)"
+												placement="top-start"
+											>
+												<input
+													class="w-full py-1 px-4 rounded-r-lg text-xs bg-transparent outline-none"
+													placeholder="Node Ids"
+													bind:value={node.node_ids}
+												/>
+											</Tooltip>
+										</div>
+									</div>
+								{/each}
+							</div>
+
+							<div class="mt-2 text-xs text-right text-gray-400 dark:text-gray-500">
+								{$i18n.t('*Prompt node ID(s) are required for image generation')}
+							</div>
+						</div>
+					{/if}
+				{:else if config?.engine === 'openai'}
+					<div>
+						<div class=" mb-1.5 text-sm font-medium">{$i18n.t('OpenAI API Config')}</div>
+
+						<div class="flex gap-2 mb-1">
+							<input
+								class="flex-1 w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+								placeholder={$i18n.t('API Base URL')}
+								bind:value={config.openai.OPENAI_API_BASE_URL}
+								required
+							/>
+
+							<SensitiveInput
+								placeholder={$i18n.t('API Key')}
+								bind:value={config.openai.OPENAI_API_KEY}
+							/>
+						</div>
+					</div>
+				{/if}
+			</div>
+
+			{#if config?.enabled}
+				<hr class=" dark:border-gray-850" />
+
+				<div>
+					<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Default Model')}</div>
+					<div class="flex w-full">
+						<div class="flex-1 mr-2">
 							<div class="flex w-full">
 								<div class="flex-1">
-									<input
-										list="model-list"
-										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={selectedModel}
-										placeholder="Select a model"
-									/>
+									<Tooltip content={$i18n.t('Enter Model ID')} placement="top-start">
+										<input
+											list="model-list"
+											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={imageGenerationConfig.MODEL}
+											placeholder="Select a model"
+											required
+										/>
 
-									<datalist id="model-list">
-										{#each models ?? [] as model}
-											<option value={model.id}>{model.name}</option>
-										{/each}
-									</datalist>
+										<datalist id="model-list">
+											{#each models ?? [] as model}
+												<option value={model.id}>{model.name}</option>
+											{/each}
+										</datalist>
+									</Tooltip>
 								</div>
 							</div>
-						{:else}
-							<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={selectedModel}
-								placeholder={$i18n.t('Select a model')}
-								required
-							>
-								{#if !selectedModel}
-									<option value="" disabled selected>{$i18n.t('Select a model')}</option>
-								{/if}
-								{#each models ?? [] as model}
-									<option value={model.id} class="bg-gray-100 dark:bg-gray-700">{model.name}</option
-									>
-								{/each}
-							</select>
-						{/if}
+						</div>
 					</div>
 				</div>
-			</div>
 
-			<div>
-				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Image Size')}</div>
-				<div class="flex w-full">
-					<div class="flex-1 mr-2">
-						<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"
-							placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
-							bind:value={imageSize}
-						/>
+				<div>
+					<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Image Size')}</div>
+					<div class="flex w-full">
+						<div class="flex-1 mr-2">
+							<Tooltip content={$i18n.t('Enter Image Size (e.g. 512x512)')} placement="top-start">
+								<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"
+									placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
+									bind:value={imageGenerationConfig.IMAGE_SIZE}
+									required
+								/>
+							</Tooltip>
+						</div>
 					</div>
 				</div>
-			</div>
 
-			<div>
-				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Steps')}</div>
-				<div class="flex w-full">
-					<div class="flex-1 mr-2">
-						<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"
-							placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
-							bind:value={steps}
-						/>
+				<div>
+					<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Steps')}</div>
+					<div class="flex w-full">
+						<div class="flex-1 mr-2">
+							<Tooltip content={$i18n.t('Enter Number of Steps (e.g. 50)')} placement="top-start">
+								<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"
+									placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
+									bind:value={imageGenerationConfig.IMAGE_STEPS}
+									required
+								/>
+							</Tooltip>
+						</div>
 					</div>
 				</div>
-			</div>
+			{/if}
 		{/if}
 	</div>
 

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

@@ -37,7 +37,7 @@
 	let ollamaEnabled = null;
 
 	let OLLAMA_URLS = [];
-	let selectedOllamaUrlIdx: string | null = null;
+	let selectedOllamaUrlIdx: number | null = null;
 
 	let updateModelId = null;
 	let updateProgress = null;

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

@@ -18,7 +18,9 @@
 	let whitelistModels = [''];
 	let permissions = {
 		chat: {
-			deletion: true
+			deletion: true,
+			edit: true,
+			temporary: true
 		}
 	};
 
@@ -92,6 +94,88 @@
 					{/if}
 				</button>
 			</div>
+
+			<div class="  flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Editing')}</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					on:click={() => {
+						permissions.chat.editing = !(permissions?.chat?.editing ?? true);
+					}}
+					type="button"
+				>
+					{#if permissions?.chat?.editing ?? true}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								d="M11.5 1A3.5 3.5 0 0 0 8 4.5V7H2.5A1.5 1.5 0 0 0 1 8.5v5A1.5 1.5 0 0 0 2.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 9.5 7V4.5a2 2 0 1 1 4 0v1.75a.75.75 0 0 0 1.5 0V4.5A3.5 3.5 0 0 0 11.5 1Z"
+							/>
+						</svg>
+						<span class="ml-2 self-center">{$i18n.t('Allow')}</span>
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+
+						<span class="ml-2 self-center">{$i18n.t("Don't Allow")}</span>
+					{/if}
+				</button>
+			</div>
+
+			<div class="  flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">{$i18n.t('Allow Temporary Chat')}</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					on:click={() => {
+						permissions.chat.temporary = !(permissions?.chat?.temporary ?? true);
+					}}
+					type="button"
+				>
+					{#if permissions?.chat?.temporary ?? true}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								d="M11.5 1A3.5 3.5 0 0 0 8 4.5V7H2.5A1.5 1.5 0 0 0 1 8.5v5A1.5 1.5 0 0 0 2.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 9.5 7V4.5a2 2 0 1 1 4 0v1.75a.75.75 0 0 0 1.5 0V4.5A3.5 3.5 0 0 0 11.5 1Z"
+							/>
+						</svg>
+						<span class="ml-2 self-center">{$i18n.t('Allow')}</span>
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+
+						<span class="ml-2 self-center">{$i18n.t("Don't Allow")}</span>
+					{/if}
+				</button>
+			</div>
 		</div>
 
 		<hr class=" dark:border-gray-850 my-2" />

src/lib/components/chat/Chat.svelte

@@ -3,13 +3,13 @@
 	import { toast } from 'svelte-sonner';
 	import mermaid from 'mermaid';
 
-	import { getContext, onMount, tick } from 'svelte';
+	import { getContext, onDestroy, onMount, tick } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
-	import type { Writable } from 'svelte/store';
+	import type { Unsubscriber, Writable } from 'svelte/store';
 	import type { i18n as i18nType } from 'i18next';
-	import { OLLAMA_API_BASE_URL, OPENAI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	import {
 		chatId,
@@ -19,30 +19,26 @@
 		models,
 		settings,
 		showSidebar,
-		tags as _tags,
 		WEBUI_NAME,
 		banners,
 		user,
 		socket,
 		showCallOverlay,
-		tools,
-		currentChatPage
+		currentChatPage,
+		temporaryChatEnabled
 	} from '$lib/stores';
 	import {
 		convertMessagesToHistory,
 		copyToClipboard,
+		getMessageContentParts,
 		extractSentencesForAudio,
-		getUserPosition,
 		promptTemplate,
 		splitStream
 	} from '$lib/utils';
 
 	import { generateChatCompletion } from '$lib/apis/ollama';
 	import {
-		addTagById,
 		createNewChat,
-		deleteTagById,
-		getAllChatTags,
 		getChatById,
 		getChatList,
 		getTagsById,
@@ -53,14 +49,18 @@
 	import { createOpenAITextStream } from '$lib/apis/streaming';
 	import { queryMemory } from '$lib/apis/memories';
 	import { getAndUpdateUserLocation, getUserSettings } from '$lib/apis/users';
-	import { chatCompleted, generateTitle, generateSearchQuery, chatAction } from '$lib/apis';
+	import {
+		chatCompleted,
+		generateTitle,
+		generateSearchQuery,
+		chatAction,
+		generateMoACompletion
+	} from '$lib/apis';
 
 	import Banner from '../common/Banner.svelte';
 	import MessageInput from '$lib/components/chat/MessageInput.svelte';
 	import Messages from '$lib/components/chat/Messages.svelte';
 	import Navbar from '$lib/components/layout/Navbar.svelte';
-	import CallOverlay from './MessageInput/CallOverlay.svelte';
-	import { error } from '@sveltejs/kit';
 	import ChatControls from './ChatControls.svelte';
 	import EventConfirmDialog from '../common/ConfirmDialog.svelte';
 
@@ -111,6 +111,8 @@
 
 	let params = {};
 
+	let chatIdUnsubscriber: Unsubscriber | undefined;
+
 	$: if (history.currentId !== null) {
 		let _messages = [];
 
@@ -166,6 +168,14 @@
 				message.content += data.content;
 			} else if (type === 'replace') {
 				message.content = data.content;
+			} else if (type === 'action') {
+				if (data.action === 'continue') {
+					const continueButton = document.getElementById('continue-response-button');
+
+					if (continueButton) {
+						continueButton.click();
+					}
+				}
 			} else if (type === 'confirmation') {
 				eventCallback = cb;
 
@@ -192,62 +202,66 @@
 		}
 	};
 
-	onMount(async () => {
-		const onMessageHandler = async (event) => {
-			if (event.origin === window.origin) {
-				// Replace with your iframe's origin
-				console.log('Message received from iframe:', event.data);
-				if (event.data.type === 'input:prompt') {
-					console.log(event.data.text);
+	const onMessageHandler = async (event: {
+		origin: string;
+		data: { type: string; text: string };
+	}) => {
+		if (event.origin !== window.origin) {
+			return;
+		}
 
-					const inputElement = document.getElementById('chat-textarea');
+		// Replace with your iframe's origin
+		if (event.data.type === 'input:prompt') {
+			console.debug(event.data.text);
 
-					if (inputElement) {
-						prompt = event.data.text;
-						inputElement.focus();
-					}
-				}
+			const inputElement = document.getElementById('chat-textarea');
 
-				if (event.data.type === 'action:submit') {
-					console.log(event.data.text);
-
-					if (prompt !== '') {
-						await tick();
-						submitPrompt(prompt);
-					}
-				}
-
-				if (event.data.type === 'input:prompt:submit') {
-					console.log(event.data.text);
-
-					if (prompt !== '') {
-						await tick();
-						submitPrompt(event.data.text);
-					}
-				}
+			if (inputElement) {
+				prompt = event.data.text;
+				inputElement.focus();
 			}
-		};
-		window.addEventListener('message', onMessageHandler);
+		}
 
-		$socket.on('chat-events', chatEventHandler);
+		if (event.data.type === 'action:submit') {
+			console.debug(event.data.text);
+
+			if (prompt !== '') {
+				await tick();
+				submitPrompt(prompt);
+			}
+		}
+
+		if (event.data.type === 'input:prompt:submit') {
+			console.debug(event.data.text);
+
+			if (prompt !== '') {
+				await tick();
+				submitPrompt(event.data.text);
+			}
+		}
+	};
+
+	onMount(async () => {
+		window.addEventListener('message', onMessageHandler);
+		$socket?.on('chat-events', chatEventHandler);
 
 		if (!$chatId) {
-			chatId.subscribe(async (value) => {
+			chatIdUnsubscriber = chatId.subscribe(async (value) => {
 				if (!value) {
 					await initNewChat();
 				}
 			});
 		} else {
-			if (!($settings.saveChatHistory ?? true)) {
+			if ($temporaryChatEnabled) {
 				await goto('/');
 			}
 		}
+	});
 
-		return () => {
-			window.removeEventListener('message', onMessageHandler);
-
-			$socket.off('chat-events');
-		};
+	onDestroy(() => {
+		chatIdUnsubscriber?.();
+		window.removeEventListener('message', onMessageHandler);
+		$socket?.off('chat-events');
 	});
 
 	//////////////////////////
@@ -255,9 +269,11 @@
 	//////////////////////////
 
 	const initNewChat = async () => {
-		window.history.replaceState(history.state, '', `/`);
-		await chatId.set('');
+		if ($page.url.pathname.includes('/c/')) {
+			window.history.replaceState(history.state, '', `/`);
+		}
 
+		await chatId.set('');
 		autoScroll = true;
 
 		title = '';
@@ -294,6 +310,10 @@
 			}
 		}
 
+		if ($page.url.searchParams.get('call') === 'true') {
+			showCallOverlay.set(true);
+		}
+
 		selectedModels = selectedModels.map((modelId) =>
 			$models.map((m) => m.id).includes(modelId) ? modelId : ''
 		);
@@ -414,7 +434,7 @@
 		}
 
 		if ($chatId == chatId) {
-			if ($settings.saveChatHistory ?? true) {
+			if (!$temporaryChatEnabled) {
 				chat = await updateChatById(localStorage.token, chatId, {
 					models: selectedModels,
 					messages: messages,
@@ -429,7 +449,7 @@
 		}
 	};
 
-	const chatActionHandler = async (chatId, actionId, modelId, responseMessageId) => {
+	const chatActionHandler = async (chatId, actionId, modelId, responseMessageId, event = null) => {
 		const res = await chatAction(localStorage.token, actionId, {
 			model: modelId,
 			messages: messages.map((m) => ({
@@ -439,6 +459,7 @@
 				info: m.info ? m.info : undefined,
 				timestamp: m.timestamp
 			})),
+			...(event ? { event: event } : {}),
 			chat_id: chatId,
 			session_id: $socket?.id,
 			id: responseMessageId
@@ -462,7 +483,7 @@
 		}
 
 		if ($chatId == chatId) {
-			if ($settings.saveChatHistory ?? true) {
+			if (!$temporaryChatEnabled) {
 				chat = await updateChatById(localStorage.token, chatId, {
 					models: selectedModels,
 					messages: messages,
@@ -521,6 +542,16 @@
 					`Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.`
 				)
 			);
+		} else if (
+			($config?.file?.max_count ?? null) !== null &&
+			files.length + chatFiles.length > $config?.file?.max_count
+		) {
+			console.log(chatFiles.length, files.length);
+			toast.error(
+				$i18n.t(`You can only chat with a maximum of {{maxCount}} file(s) at a time.`, {
+					maxCount: $config?.file?.max_count
+				})
+			);
 		} else {
 			// Reset chat input textarea
 			const chatTextAreaElement = document.getElementById('chat-textarea');
@@ -552,7 +583,7 @@
 				content: userPrompt,
 				files: _files.length > 0 ? _files : undefined,
 				timestamp: Math.floor(Date.now() / 1000), // Unix epoch
-				models: selectedModels.filter((m, mIdx) => selectedModels.indexOf(m) === mIdx)
+				models: selectedModels
 			};
 
 			// Add message to history and Set currentId to messageId
@@ -572,8 +603,12 @@
 		return _responses;
 	};
 
-	const sendPrompt = async (prompt, parentId, { modelId = null, newChat = false } = {}) => {
-		let _responses = [];
+	const sendPrompt = async (
+		prompt: string,
+		parentId: string,
+		{ modelId = null, modelIdx = null, newChat = false } = {}
+	) => {
+		let _responses: string[] = [];
 
 		// If modelId is provided, use it, else use selected model
 		let selectedModelIds = modelId
@@ -583,8 +618,8 @@
 				: selectedModels;
 
 		// Create response messages for each selected model
-		const responseMessageIds = {};
-		for (const modelId of selectedModelIds) {
+		const responseMessageIds: Record<PropertyKey, string> = {};
+		for (const [_modelIdx, modelId] of selectedModelIds.entries()) {
 			const model = $models.filter((m) => m.id === modelId).at(0);
 
 			if (model) {
@@ -597,6 +632,7 @@
 					content: '',
 					model: model.id,
 					modelName: model.name ?? model.id,
+					modelIdx: modelIdx ? modelIdx : _modelIdx,
 					userContext: null,
 					timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 				};
@@ -613,14 +649,14 @@
 					];
 				}
 
-				responseMessageIds[modelId] = responseMessageId;
+				responseMessageIds[`${modelId}-${modelIdx ? modelIdx : _modelIdx}`] = responseMessageId;
 			}
 		}
 		await tick();
 
 		// Create new chat if only one message in messages
 		if (newChat && messages.length == 2) {
-			if ($settings.saveChatHistory ?? true) {
+			if (!$temporaryChatEnabled) {
 				chat = await createNewChat(localStorage.token, {
 					id: $chatId,
 					title: $i18n.t('New Chat'),
@@ -645,7 +681,7 @@
 		const _chatId = JSON.parse(JSON.stringify($chatId));
 
 		await Promise.all(
-			selectedModelIds.map(async (modelId) => {
+			selectedModelIds.map(async (modelId, _modelIdx) => {
 				console.log('modelId', modelId);
 				const model = $models.filter((m) => m.id === modelId).at(0);
 
@@ -663,7 +699,8 @@
 						);
 					}
 
-					let responseMessageId = responseMessageIds[modelId];
+					let responseMessageId =
+						responseMessageIds[`${modelId}-${modelIdx ? modelIdx : _modelIdx}`];
 					let responseMessage = history.messages[responseMessageId];
 
 					let userContext = null;
@@ -711,13 +748,13 @@
 		);
 
 		currentChatPage.set(1);
-		await chats.set(await getChatList(localStorage.token, $currentChatPage));
+		chats.set(await getChatList(localStorage.token, $currentChatPage));
 
 		return _responses;
 	};
 
 	const sendPromptOllama = async (model, userPrompt, responseMessageId, _chatId) => {
-		let _response = null;
+		let _response: string | null = null;
 
 		const responseMessage = history.messages[responseMessageId];
 		const userMessage = history.messages[responseMessage.parentId];
@@ -748,7 +785,7 @@
 			...messages
 		]
 			.filter((message) => message?.content?.trim())
-			.map((message, idx, arr) => {
+			.map((message) => {
 				// Prepare the base message object
 				const baseMessage = {
 					role: message.role,
@@ -785,7 +822,18 @@
 
 		let files = JSON.parse(JSON.stringify(chatFiles));
 		if (model?.info?.meta?.knowledge ?? false) {
+			// Only initialize and add status if knowledge exists
+			responseMessage.statusHistory = [
+				{
+					action: 'knowledge_search',
+					description: $i18n.t(`Searching Knowledge for "{{searchQuery}}"`, {
+						searchQuery: userMessage.content
+					}),
+					done: false
+				}
+			];
 			files.push(...model.info.meta.knowledge);
+			messages = messages; // Trigger Svelte update
 		}
 		files.push(
 			...(userMessage?.files ?? []).filter((item) =>
@@ -794,6 +842,8 @@
 			...(responseMessage?.files ?? []).filter((item) => ['web_search_results'].includes(item.type))
 		);
 
+		scrollToBottom();
+
 		eventTarget.dispatchEvent(
 			new CustomEvent('chat:start', {
 				detail: {
@@ -864,6 +914,12 @@
 
 							if ('citations' in data) {
 								responseMessage.citations = data.citations;
+								// Only remove status if it was initially set
+								if (model?.info?.meta?.knowledge ?? false) {
+									responseMessage.statusHistory = responseMessage.statusHistory.filter(
+										(status) => status.action !== 'knowledge_search'
+									);
+								}
 								continue;
 							}
 
@@ -881,18 +937,26 @@
 										navigator.vibrate(5);
 									}
 
-									const sentences = extractSentencesForAudio(responseMessage.content);
-									sentences.pop();
+									const messageContentParts = getMessageContentParts(
+										responseMessage.content,
+										$config?.audio?.tts?.split_on ?? 'punctuation'
+									);
+									messageContentParts.pop();
 
 									// dispatch only last sentence and make sure it hasn't been dispatched before
 									if (
-										sentences.length > 0 &&
-										sentences[sentences.length - 1] !== responseMessage.lastSentence
+										messageContentParts.length > 0 &&
+										messageContentParts[messageContentParts.length - 1] !==
+											responseMessage.lastSentence
 									) {
-										responseMessage.lastSentence = sentences[sentences.length - 1];
+										responseMessage.lastSentence =
+											messageContentParts[messageContentParts.length - 1];
 										eventTarget.dispatchEvent(
 											new CustomEvent('chat', {
-												detail: { id: responseMessageId, content: sentences[sentences.length - 1] }
+												detail: {
+													id: responseMessageId,
+													content: messageContentParts[messageContentParts.length - 1]
+												}
 											})
 										);
 									}
@@ -989,20 +1053,32 @@
 				};
 			}
 			responseMessage.done = true;
+
+			if (responseMessage.statusHistory) {
+				responseMessage.statusHistory = responseMessage.statusHistory.filter(
+					(status) => status.action !== 'knowledge_search'
+				);
+			}
+
 			messages = messages;
 		}
 
 		stopResponseFlag = false;
 		await tick();
 
-		let lastSentence = extractSentencesForAudio(responseMessage.content)?.at(-1) ?? '';
-		if (lastSentence) {
+		let lastMessageContentPart =
+			getMessageContentParts(
+				responseMessage.content,
+				$config?.audio?.tts?.split_on ?? 'punctuation'
+			)?.at(-1) ?? '';
+		if (lastMessageContentPart) {
 			eventTarget.dispatchEvent(
 				new CustomEvent('chat', {
-					detail: { id: responseMessageId, content: lastSentence }
+					detail: { id: responseMessageId, content: lastMessageContentPart }
 				})
 			);
 		}
+
 		eventTarget.dispatchEvent(
 			new CustomEvent('chat:finish', {
 				detail: {
@@ -1033,7 +1109,18 @@
 
 		let files = JSON.parse(JSON.stringify(chatFiles));
 		if (model?.info?.meta?.knowledge ?? false) {
+			// Only initialize and add status if knowledge exists
+			responseMessage.statusHistory = [
+				{
+					action: 'knowledge_search',
+					description: $i18n.t(`Searching Knowledge for "{{searchQuery}}"`, {
+						searchQuery: userMessage.content
+					}),
+					done: false
+				}
+			];
 			files.push(...model.info.meta.knowledge);
+			messages = messages; // Trigger Svelte update
 		}
 		files.push(
 			...(userMessage?.files ?? []).filter((item) =>
@@ -1173,6 +1260,12 @@
 
 					if (citations) {
 						responseMessage.citations = citations;
+						// Only remove status if it was initially set
+						if (model?.info?.meta?.knowledge ?? false) {
+							responseMessage.statusHistory = responseMessage.statusHistory.filter(
+								(status) => status.action !== 'knowledge_search'
+							);
+						}
 						continue;
 					}
 
@@ -1185,18 +1278,24 @@
 							navigator.vibrate(5);
 						}
 
-						const sentences = extractSentencesForAudio(responseMessage.content);
-						sentences.pop();
+						const messageContentParts = getMessageContentParts(
+							responseMessage.content,
+							$config?.audio?.tts?.split_on ?? 'punctuation'
+						);
+						messageContentParts.pop();
 
 						// dispatch only last sentence and make sure it hasn't been dispatched before
 						if (
-							sentences.length > 0 &&
-							sentences[sentences.length - 1] !== responseMessage.lastSentence
+							messageContentParts.length > 0 &&
+							messageContentParts[messageContentParts.length - 1] !== responseMessage.lastSentence
 						) {
-							responseMessage.lastSentence = sentences[sentences.length - 1];
+							responseMessage.lastSentence = messageContentParts[messageContentParts.length - 1];
 							eventTarget.dispatchEvent(
 								new CustomEvent('chat', {
-									detail: { id: responseMessageId, content: sentences[sentences.length - 1] }
+									detail: {
+										id: responseMessageId,
+										content: messageContentParts[messageContentParts.length - 1]
+									}
 								})
 							);
 						}
@@ -1251,11 +1350,15 @@
 		stopResponseFlag = false;
 		await tick();
 
-		let lastSentence = extractSentencesForAudio(responseMessage.content)?.at(-1) ?? '';
-		if (lastSentence) {
+		let lastMessageContentPart =
+			getMessageContentParts(
+				responseMessage.content,
+				$config?.audio?.tts?.split_on ?? 'punctuation'
+			)?.at(-1) ?? '';
+		if (lastMessageContentPart) {
 			eventTarget.dispatchEvent(
 				new CustomEvent('chat', {
-					detail: { id: responseMessageId, content: lastSentence }
+					detail: { id: responseMessageId, content: lastMessageContentPart }
 				})
 			);
 		}
@@ -1319,6 +1422,12 @@
 		};
 		responseMessage.done = true;
 
+		if (responseMessage.statusHistory) {
+			responseMessage.statusHistory = responseMessage.statusHistory.filter(
+				(status) => status.action !== 'knowledge_search'
+			);
+		}
+
 		messages = messages;
 	};
 
@@ -1340,7 +1449,10 @@
 			} else {
 				// If there are multiple models selected, use the model of the response message for regeneration
 				// e.g. many model chat
-				await sendPrompt(userPrompt, userMessage.id, { modelId: message.model });
+				await sendPrompt(userPrompt, userMessage.id, {
+					modelId: message.model,
+					modelIdx: message.modelIdx
+				});
 			}
 		}
 	};
@@ -1400,7 +1512,7 @@
 			title = _title;
 		}
 
-		if ($settings.saveChatHistory ?? true) {
+		if (!$temporaryChatEnabled) {
 			chat = await updateChatById(localStorage.token, _chatId, { title: _title });
 
 			currentChatPage.set(1);
@@ -1492,6 +1604,69 @@
 			return [];
 		});
 	};
+
+	const saveChatHandler = async (_chatId) => {
+		if ($chatId == _chatId) {
+			if (!$temporaryChatEnabled) {
+				chat = await updateChatById(localStorage.token, _chatId, {
+					messages: messages,
+					history: history,
+					models: selectedModels,
+					params: params,
+					files: chatFiles
+				});
+
+				currentChatPage.set(1);
+				await chats.set(await getChatList(localStorage.token, $currentChatPage));
+			}
+		}
+	};
+	const mergeResponses = async (messageId, responses, _chatId) => {
+		console.log('mergeResponses', messageId, responses);
+		const message = history.messages[messageId];
+		const mergedResponse = {
+			status: true,
+			content: ''
+		};
+		message.merged = mergedResponse;
+		messages = messages;
+
+		try {
+			const [res, controller] = await generateMoACompletion(
+				localStorage.token,
+				message.model,
+				history.messages[message.parentId].content,
+				responses
+			);
+
+			if (res && res.ok && res.body) {
+				const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
+				for await (const update of textStream) {
+					const { value, done, citations, error, usage } = update;
+					if (error || done) {
+						break;
+					}
+
+					if (mergedResponse.content == '' && value == '\n') {
+						continue;
+					} else {
+						mergedResponse.content += value;
+						messages = messages;
+					}
+
+					if (autoScroll) {
+						scrollToBottom();
+					}
+				}
+
+				await saveChatHandler(_chatId);
+			} else {
+				console.error(res);
+			}
+		} catch (e) {
+			console.error(e);
+		}
+	};
 </script>
 
 <svelte:head>
@@ -1523,17 +1698,6 @@
 	}}
 />
 
-{#if $showCallOverlay}
-	<CallOverlay
-		{submitPrompt}
-		{stopResponse}
-		bind:files
-		modelId={selectedModelIds?.at(0) ?? null}
-		chatId={$chatId}
-		{eventTarget}
-	/>
-{/if}
-
 {#if !chatIdProp || (loaded && chatIdProp)}
 	<div
 		class="h-screen max-h-[100dvh] {$showSidebar
@@ -1618,6 +1782,7 @@
 						{sendPrompt}
 						{continueGeneration}
 						{regenerateResponse}
+						{mergeResponses}
 						{chatActionHandler}
 					/>
 				</div>
@@ -1643,21 +1808,30 @@
 					{messages}
 					{submitPrompt}
 					{stopResponse}
+					on:call={() => {
+						showControls = true;
+					}}
 				/>
 			</div>
 		</div>
-
-		<ChatControls
-			models={selectedModelIds.reduce((a, e, i, arr) => {
-				const model = $models.find((m) => m.id === e);
-				if (model) {
-					return [...a, model];
-				}
-				return a;
-			}, [])}
-			bind:show={showControls}
-			bind:chatFiles
-			bind:params
-		/>
 	</div>
 {/if}
+
+<ChatControls
+	models={selectedModelIds.reduce((a, e, i, arr) => {
+		const model = $models.find((m) => m.id === e);
+		if (model) {
+			return [...a, model];
+		}
+		return a;
+	}, [])}
+	bind:show={showControls}
+	bind:chatFiles
+	bind:params
+	bind:files
+	{submitPrompt}
+	{stopResponse}
+	modelId={selectedModelIds?.at(0) ?? null}
+	chatId={$chatId}
+	{eventTarget}
+/>

src/lib/components/chat/ChatControls.svelte

@@ -3,6 +3,8 @@
 	import Modal from '../common/Modal.svelte';
 	import Controls from './Controls/Controls.svelte';
 	import { onMount } from 'svelte';
+	import { mobile, showCallOverlay } from '$lib/stores';
+	import CallOverlay from './MessageInput/CallOverlay.svelte';
 
 	export let show = false;
 
@@ -12,6 +14,12 @@
 	export let chatFiles = [];
 	export let params = {};
 
+	export let eventTarget: EventTarget;
+	export let submitPrompt: Function;
+	export let stopResponse: Function;
+	export let files;
+	export let modelId;
+
 	let largeScreen = false;
 	onMount(() => {
 		// listen to resize 1024px
@@ -42,18 +50,47 @@
 				<div
 					class="w-full h-full px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-800 rounded-xl z-50 pointer-events-auto overflow-y-auto scrollbar-hidden"
 				>
-					<Controls
-						on:close={() => {
-							show = false;
-						}}
-						{models}
-						bind:chatFiles
-						bind:params
-					/>
+					{#if $showCallOverlay}
+						<CallOverlay
+							bind:files
+							{submitPrompt}
+							{stopResponse}
+							{modelId}
+							{chatId}
+							{eventTarget}
+						/>
+					{:else}
+						<Controls
+							on:close={() => {
+								show = false;
+							}}
+							{models}
+							bind:chatFiles
+							bind:params
+						/>
+					{/if}
 				</div>
 			</div>
 		</div>
 	{/if}
+{:else if $showCallOverlay}
+	<div class=" absolute w-full h-screen max-h-[100dvh] flex z-[999] overflow-hidden">
+		<div
+			class="absolute w-full h-screen max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
+		>
+			<CallOverlay
+				bind:files
+				{submitPrompt}
+				{stopResponse}
+				{modelId}
+				{chatId}
+				{eventTarget}
+				on:close={() => {
+					show = false;
+				}}
+			/>
+		</div>
+	</div>
 {:else}
 	<Modal bind:show>
 		<div class="  px-6 py-4 h-full">

src/lib/components/chat/Controls/Controls.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { createEventDispatcher, getContext } from 'svelte';
 	const dispatch = createEventDispatcher();
 	const i18n = getContext('i18n');
@@ -10,9 +10,7 @@
 	import Collapsible from '$lib/components/common/Collapsible.svelte';
 
 	import { user } from '$lib/stores';
-
 	export let models = [];
-
 	export let chatFiles = [];
 	export let params = {};
 </script>

src/lib/components/chat/MessageInput.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { onMount, tick, getContext } from 'svelte';
+	import { onMount, tick, getContext, createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
 	import {
 		type Model,
 		mobile,
@@ -12,16 +14,12 @@
 		tools,
 		user as _user
 	} from '$lib/stores';
-	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
-
-	import {
-		processDocToVectorDB,
-		uploadDocToVectorDB,
-		uploadWebToVectorDB,
-		uploadYoutubeTranscriptionToVectorDB
-	} from '$lib/apis/rag';
+	import { blobToFile, findWordIndices } from '$lib/utils';
 
+	import { transcribeAudio } from '$lib/apis/audio';
+	import { processDocToVectorDB } from '$lib/apis/rag';
 	import { uploadFile } from '$lib/apis/files';
+
 	import {
 		SUPPORTED_FILE_TYPE,
 		SUPPORTED_FILE_EXTENSIONS,
@@ -29,19 +27,14 @@
 		WEBUI_API_BASE_URL
 	} from '$lib/constants';
 
-	import Prompts from './MessageInput/PromptCommands.svelte';
-	import Suggestions from './MessageInput/Suggestions.svelte';
-	import AddFilesPlaceholder from '../AddFilesPlaceholder.svelte';
-	import Documents from './MessageInput/Documents.svelte';
-	import Models from './MessageInput/Models.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
 	import InputMenu from './MessageInput/InputMenu.svelte';
 	import Headphone from '../icons/Headphone.svelte';
 	import VoiceRecording from './MessageInput/VoiceRecording.svelte';
-	import { transcribeAudio } from '$lib/apis/audio';
 	import FileItem from '../common/FileItem.svelte';
 	import FilesOverlay from './MessageInput/FilesOverlay.svelte';
+	import Commands from './MessageInput/Commands.svelte';
+	import XMark from '../icons/XMark.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -50,7 +43,7 @@
 	export let submitPrompt: Function;
 	export let stopResponse: Function;
 
-	export let autoScroll = true;
+	export let autoScroll = false;
 
 	export let atSelectedModel: Model | undefined;
 	export let selectedModels: [''];
@@ -60,9 +53,7 @@
 	let chatTextAreaElement: HTMLTextAreaElement;
 	let filesInputElement;
 
-	let promptsElement;
-	let documentsElement;
-	let modelsElement;
+	let commandsElement;
 
 	let inputFiles;
 	let dragged = false;
@@ -93,7 +84,10 @@
 
 	const scrollToBottom = () => {
 		const element = document.getElementById('messages-container');
-		element.scrollTop = element.scrollHeight;
+		element.scrollTo({
+			top: element.scrollHeight,
+			behavior: 'smooth'
+		});
 	};
 
 	const uploadFileHandler = async (file) => {
@@ -177,60 +171,42 @@
 		}
 	};
 
-	const uploadWeb = async (url) => {
-		console.log(url);
+	const inputFilesHandler = async (inputFiles) => {
+		inputFiles.forEach((file) => {
+			console.log(file, file.name.split('.').at(-1));
 
-		const doc = {
-			type: 'doc',
-			name: url,
-			collection_name: '',
-			status: false,
-			url: url,
-			error: ''
-		};
-
-		try {
-			files = [...files, doc];
-			const res = await uploadWebToVectorDB(localStorage.token, '', url);
-
-			if (res) {
-				doc.status = 'processed';
-				doc.collection_name = res.collection_name;
-				files = files;
+			if (
+				($config?.file?.max_size ?? null) !== null &&
+				file.size > ($config?.file?.max_size ?? 0) * 1024 * 1024
+			) {
+				toast.error(
+					$i18n.t(`File size should not exceed {{maxSize}} MB.`, {
+						maxSize: $config?.file?.max_size
+					})
+				);
+				return;
 			}
-		} catch (e) {
-			// Remove the failed doc from the files array
-			files = files.filter((f) => f.name !== url);
-			toast.error(e);
-		}
-	};
 
-	const uploadYoutubeTranscription = async (url) => {
-		console.log(url);
-
-		const doc = {
-			type: 'doc',
-			name: url,
-			collection_name: '',
-			status: false,
-			url: url,
-			error: ''
-		};
-
-		try {
-			files = [...files, doc];
-			const res = await uploadYoutubeTranscriptionToVectorDB(localStorage.token, url);
-
-			if (res) {
-				doc.status = 'processed';
-				doc.collection_name = res.collection_name;
-				files = files;
+			if (['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type'])) {
+				if (visionCapableModels.length === 0) {
+					toast.error($i18n.t('Selected model(s) do not support image inputs'));
+					return;
+				}
+				let reader = new FileReader();
+				reader.onload = (event) => {
+					files = [
+						...files,
+						{
+							type: 'image',
+							url: `${event.target.result}`
+						}
+					];
+				};
+				reader.readAsDataURL(file);
+			} else {
+				uploadFileHandler(file);
 			}
-		} catch (e) {
-			// Remove the failed doc from the files array
-			files = files.filter((f) => f.name !== url);
-			toast.error(e);
-		}
+		});
 	};
 
 	onMount(() => {
@@ -260,30 +236,9 @@
 
 			if (e.dataTransfer?.files) {
 				const inputFiles = Array.from(e.dataTransfer?.files);
-
 				if (inputFiles && inputFiles.length > 0) {
-					inputFiles.forEach((file) => {
-						console.log(file, file.name.split('.').at(-1));
-						if (['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type'])) {
-							if (visionCapableModels.length === 0) {
-								toast.error($i18n.t('Selected model(s) do not support image inputs'));
-								return;
-							}
-							let reader = new FileReader();
-							reader.onload = (event) => {
-								files = [
-									...files,
-									{
-										type: 'image',
-										url: `${event.target.result}`
-									}
-								];
-							};
-							reader.readAsDataURL(file);
-						} else {
-							uploadFileHandler(file);
-						}
-					});
+					console.log(inputFiles);
+					inputFilesHandler(inputFiles);
 				} else {
 					toast.error($i18n.t(`File not found.`));
 				}
@@ -343,48 +298,9 @@
 			</div>
 
 			<div class="w-full relative">
-				{#if prompt.charAt(0) === '/'}
-					<Prompts bind:this={promptsElement} bind:prompt bind:files />
-				{:else if prompt.charAt(0) === '#'}
-					<Documents
-						bind:this={documentsElement}
-						bind:prompt
-						on:youtube={(e) => {
-							console.log(e);
-							uploadYoutubeTranscription(e.detail);
-						}}
-						on:url={(e) => {
-							console.log(e);
-							uploadWeb(e.detail);
-						}}
-						on:select={(e) => {
-							console.log(e);
-							files = [
-								...files,
-								{
-									type: e?.detail?.type ?? 'file',
-									...e.detail,
-									status: 'processed'
-								}
-							];
-						}}
-					/>
-				{/if}
-
-				<Models
-					bind:this={modelsElement}
-					bind:prompt
-					bind:chatInputPlaceholder
-					{messages}
-					on:select={(e) => {
-						atSelectedModel = e.detail;
-						chatTextAreaElement?.focus();
-					}}
-				/>
-
 				{#if atSelectedModel !== undefined}
 					<div
-						class="px-3 py-2.5 text-left w-full flex justify-between items-center absolute bottom-0 left-0 right-0 bg-gradient-to-t from-50% from-white dark:from-gray-900 z-50"
+						class="px-3 py-2.5 text-left w-full flex justify-between items-center absolute bottom-0.5 left-0 right-0 bg-gradient-to-t from-50% from-white dark:from-gray-900 z-10"
 					>
 						<div class="flex items-center gap-2 text-sm dark:text-gray-500">
 							<img
@@ -413,6 +329,21 @@
 						</div>
 					</div>
 				{/if}
+
+				<Commands
+					bind:this={commandsElement}
+					bind:prompt
+					bind:files
+					on:select={(e) => {
+						const data = e.detail;
+
+						if (data?.type === 'model') {
+							atSelectedModel = data.data;
+						}
+
+						chatTextAreaElement?.focus();
+					}}
+				/>
 			</div>
 		</div>
 	</div>
@@ -429,27 +360,7 @@
 					on:change={async () => {
 						if (inputFiles && inputFiles.length > 0) {
 							const _inputFiles = Array.from(inputFiles);
-							_inputFiles.forEach((file) => {
-								if (['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type'])) {
-									if (visionCapableModels.length === 0) {
-										toast.error($i18n.t('Selected model(s) do not support image inputs'));
-										return;
-									}
-									let reader = new FileReader();
-									reader.onload = (event) => {
-										files = [
-											...files,
-											{
-												type: 'image',
-												url: `${event.target.result}`
-											}
-										];
-									};
-									reader.readAsDataURL(file);
-								} else {
-									uploadFileHandler(file);
-								}
-							});
+							inputFilesHandler(_inputFiles);
 						} else {
 							toast.error($i18n.t(`File not found.`));
 						}
@@ -638,6 +549,7 @@
 									}}
 									on:keydown={async (e) => {
 										const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
+										const commandsContainerElement = document.getElementById('commands-container');
 
 										// Check if Ctrl + R is pressed
 										if (prompt === '' && isCtrlPressed && e.key.toLowerCase() === 'r') {
@@ -668,10 +580,9 @@
 											editButton?.click();
 										}
 
-										if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'ArrowUp') {
+										if (commandsContainerElement && e.key === 'ArrowUp') {
 											e.preventDefault();
-
-											(promptsElement || documentsElement || modelsElement).selectUp();
+											commandsElement.selectUp();
 
 											const commandOptionButton = [
 												...document.getElementsByClassName('selected-command-option-button')
@@ -679,10 +590,9 @@
 											commandOptionButton.scrollIntoView({ block: 'center' });
 										}
 
-										if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'ArrowDown') {
+										if (commandsContainerElement && e.key === 'ArrowDown') {
 											e.preventDefault();
-
-											(promptsElement || documentsElement || modelsElement).selectDown();
+											commandsElement.selectDown();
 
 											const commandOptionButton = [
 												...document.getElementsByClassName('selected-command-option-button')
@@ -690,7 +600,7 @@
 											commandOptionButton.scrollIntoView({ block: 'center' });
 										}
 
-										if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'Enter') {
+										if (commandsContainerElement && e.key === 'Enter') {
 											e.preventDefault();
 
 											const commandOptionButton = [
@@ -706,7 +616,7 @@
 											}
 										}
 
-										if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'Tab') {
+										if (commandsContainerElement && e.key === 'Tab') {
 											e.preventDefault();
 
 											const commandOptionButton = [
@@ -742,16 +652,16 @@
 										}
 									}}
 									rows="1"
-									on:input={(e) => {
+									on:input={async (e) => {
 										e.target.style.height = '';
 										e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
 										user = null;
 									}}
-									on:focus={(e) => {
+									on:focus={async (e) => {
 										e.target.style.height = '';
 										e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
 									}}
-									on:paste={(e) => {
+									on:paste={async (e) => {
 										const clipboardData = e.clipboardData || window.clipboardData;
 
 										if (clipboardData && clipboardData.items) {
@@ -786,7 +696,7 @@
 												type="button"
 												on:click={async () => {
 													try {
-														const res = await navigator.mediaDevices
+														let stream = await navigator.mediaDevices
 															.getUserMedia({ audio: true })
 															.catch(function (err) {
 																toast.error(
@@ -800,9 +710,12 @@
 																return null;
 															});
 
-														if (res) {
+														if (stream) {
 															recording = true;
+															const tracks = stream.getTracks();
+															tracks.forEach((track) => track.stop());
 														}
+														stream = null;
 													} catch {
 														toast.error($i18n.t('Permission denied when accessing microphone'));
 													}
@@ -849,10 +762,18 @@
 													}
 													// check if user has access to getUserMedia
 													try {
-														await navigator.mediaDevices.getUserMedia({ audio: true });
+														let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
 														// If the user grants the permission, proceed to show the call overlay
 
+														if (stream) {
+															const tracks = stream.getTracks();
+															tracks.forEach((track) => track.stop());
+														}
+
+														stream = null;
+
 														showCallOverlay.set(true);
+														dispatch('call');
 													} 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'));

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

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { config, models, settings, showCallOverlay } from '$lib/stores';
-	import { onMount, tick, getContext } from 'svelte';
+	import { onMount, tick, getContext, onDestroy, createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
 
 	import {
 		blobToFile,
@@ -19,15 +21,14 @@
 	const i18n = getContext('i18n');
 
 	export let eventTarget: EventTarget;
-
 	export let submitPrompt: Function;
 	export let stopResponse: Function;
-
 	export let files;
-
 	export let chatId;
 	export let modelId;
 
+	let wakeLock = null;
+
 	let model = null;
 
 	let loading = false;
@@ -45,6 +46,7 @@
 	let rmsLevel = 0;
 	let hasStartedSpeaking = false;
 	let mediaRecorder;
+	let audioStream = null;
 	let audioChunks = [];
 
 	let videoInputDevices = [];
@@ -210,17 +212,23 @@
 		} else {
 			audioChunks = [];
 			mediaRecorder = false;
+
+			if (audioStream) {
+				const tracks = audioStream.getTracks();
+				tracks.forEach((track) => track.stop());
+			}
+			audioStream = null;
 		}
 	};
 
 	const startRecording = async () => {
-		const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-		mediaRecorder = new MediaRecorder(stream);
+		audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+		mediaRecorder = new MediaRecorder(audioStream);
 
 		mediaRecorder.onstart = () => {
 			console.log('Recording started');
 			audioChunks = [];
-			analyseAudio(stream);
+			analyseAudio(audioStream);
 		};
 
 		mediaRecorder.ondataavailable = (event) => {
@@ -237,6 +245,15 @@
 		mediaRecorder.start();
 	};
 
+	const stopAudioStream = async () => {
+		if (audioStream) {
+			const tracks = audioStream.getTracks();
+			tracks.forEach((track) => track.stop());
+		}
+
+		audioStream = null;
+	};
+
 	// Function to calculate the RMS level from time domain data
 	const calculateRMS = (data: Uint8Array) => {
 		let sumSquares = 0;
@@ -509,6 +526,34 @@
 	};
 
 	onMount(async () => {
+		const setWakeLock = async () => {
+			try {
+				wakeLock = await navigator.wakeLock.request('screen');
+			} catch (err) {
+				// The Wake Lock request has failed - usually system related, such as battery.
+				console.log(err);
+			}
+
+			if (wakeLock) {
+				// Add a listener to release the wake lock when the page is unloaded
+				wakeLock.addEventListener('release', () => {
+					// the wake lock has been released
+					console.log('Wake Lock released');
+				});
+			}
+		};
+
+		if ('wakeLock' in navigator) {
+			await setWakeLock();
+
+			document.addEventListener('visibilitychange', async () => {
+				// Re-request the wake lock if the document becomes visible
+				if (wakeLock !== null && document.visibilityState === 'visible') {
+					await setWakeLock();
+				}
+			});
+		}
+
 		model = $models.find((m) => m.id === modelId);
 
 		startRecording();
@@ -585,302 +630,225 @@
 			await stopCamera();
 		};
 	});
+
+	onDestroy(async () => {
+		await stopAllAudio();
+		await stopRecordingCallback(false);
+		await stopCamera();
+	});
 </script>
 
 {#if $showCallOverlay}
-	<div class=" absolute w-full h-screen max-h-[100dvh] flex z-[999] overflow-hidden">
-		<div
-			class="absolute w-full h-screen max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
-		>
-			<div class="max-w-lg w-full h-screen max-h-[100dvh] flex flex-col justify-between p-3 md:p-6">
-				{#if camera}
-					<button
-						type="button"
-						class="flex justify-center items-center w-full h-20 min-h-20"
-						on:click={() => {
-							if (assistantSpeaking) {
-								stopAllAudio();
-							}
-						}}
+	<div class="max-w-lg w-full h-full max-h-[100dvh] flex flex-col justify-between p-3 md:p-6">
+		{#if camera}
+			<button
+				type="button"
+				class="flex justify-center items-center w-full h-20 min-h-20"
+				on:click={() => {
+					if (assistantSpeaking) {
+						stopAllAudio();
+					}
+				}}
+			>
+				{#if emoji}
+					<div
+						class="  transition-all rounded-full"
+						style="font-size:{rmsLevel * 100 > 4
+							? '4.5'
+							: rmsLevel * 100 > 2
+								? '4.25'
+								: rmsLevel * 100 > 1
+									? '3.75'
+									: '3.5'}rem;width: 100%; text-align:center;"
 					>
-						{#if emoji}
-							<div
-								class="  transition-all rounded-full"
-								style="font-size:{rmsLevel * 100 > 4
-									? '4.5'
-									: rmsLevel * 100 > 2
-										? '4.25'
-										: rmsLevel * 100 > 1
-											? '3.75'
-											: '3.5'}rem;width: 100%; text-align:center;"
-							>
-								{emoji}
-							</div>
-						{:else if loading || assistantSpeaking}
-							<svg
-								class="size-12 text-gray-900 dark:text-gray-400"
-								viewBox="0 0 24 24"
-								fill="currentColor"
-								xmlns="http://www.w3.org/2000/svg"
-								><style>
-									.spinner_qM83 {
-										animation: spinner_8HQG 1.05s infinite;
-									}
-									.spinner_oXPr {
-										animation-delay: 0.1s;
-									}
-									.spinner_ZTLf {
-										animation-delay: 0.2s;
-									}
-									@keyframes spinner_8HQG {
-										0%,
-										57.14% {
-											animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
-											transform: translate(0);
-										}
-										28.57% {
-											animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
-											transform: translateY(-6px);
-										}
-										100% {
-											transform: translate(0);
-										}
-									}
-								</style><circle class="spinner_qM83" cx="4" cy="12" r="3" /><circle
-									class="spinner_qM83 spinner_oXPr"
-									cx="12"
-									cy="12"
-									r="3"
-								/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="3" /></svg
-							>
-						{:else}
-							<div
-								class=" {rmsLevel * 100 > 4
-									? ' size-[4.5rem]'
-									: rmsLevel * 100 > 2
-										? ' size-16'
-										: rmsLevel * 100 > 1
-											? 'size-14'
-											: 'size-12'}  transition-all rounded-full {(model?.info?.meta
-									?.profile_image_url ?? '/static/favicon.png') !== '/static/favicon.png'
-									? ' bg-cover bg-center bg-no-repeat'
-									: 'bg-black dark:bg-white'}  bg-black dark:bg-white"
-								style={(model?.info?.meta?.profile_image_url ?? '/static/favicon.png') !==
-								'/static/favicon.png'
-									? `background-image: url('${model?.info?.meta?.profile_image_url}');`
-									: ''}
-							/>
-						{/if}
-						<!-- navbar -->
-					</button>
-				{/if}
-
-				<div class="flex justify-center items-center flex-1 h-full w-full max-h-full">
-					{#if !camera}
-						<button
-							type="button"
-							on:click={() => {
-								if (assistantSpeaking) {
-									stopAllAudio();
+						{emoji}
+					</div>
+				{:else if loading || assistantSpeaking}
+					<svg
+						class="size-12 text-gray-900 dark:text-gray-400"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+						xmlns="http://www.w3.org/2000/svg"
+						><style>
+							.spinner_qM83 {
+								animation: spinner_8HQG 1.05s infinite;
+							}
+							.spinner_oXPr {
+								animation-delay: 0.1s;
+							}
+							.spinner_ZTLf {
+								animation-delay: 0.2s;
+							}
+							@keyframes spinner_8HQG {
+								0%,
+								57.14% {
+									animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
+									transform: translate(0);
 								}
-							}}
+								28.57% {
+									animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
+									transform: translateY(-6px);
+								}
+								100% {
+									transform: translate(0);
+								}
+							}
+						</style><circle class="spinner_qM83" cx="4" cy="12" r="3" /><circle
+							class="spinner_qM83 spinner_oXPr"
+							cx="12"
+							cy="12"
+							r="3"
+						/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="3" /></svg
+					>
+				{:else}
+					<div
+						class=" {rmsLevel * 100 > 4
+							? ' size-[4.5rem]'
+							: rmsLevel * 100 > 2
+								? ' size-16'
+								: rmsLevel * 100 > 1
+									? 'size-14'
+									: 'size-12'}  transition-all rounded-full {(model?.info?.meta
+							?.profile_image_url ?? '/static/favicon.png') !== '/static/favicon.png'
+							? ' bg-cover bg-center bg-no-repeat'
+							: 'bg-black dark:bg-white'}  bg-black dark:bg-white"
+						style={(model?.info?.meta?.profile_image_url ?? '/static/favicon.png') !==
+						'/static/favicon.png'
+							? `background-image: url('${model?.info?.meta?.profile_image_url}');`
+							: ''}
+					/>
+				{/if}
+				<!-- navbar -->
+			</button>
+		{/if}
+
+		<div class="flex justify-center items-center flex-1 h-full w-full max-h-full">
+			{#if !camera}
+				<button
+					type="button"
+					on:click={() => {
+						if (assistantSpeaking) {
+							stopAllAudio();
+						}
+					}}
+				>
+					{#if emoji}
+						<div
+							class="  transition-all rounded-full"
+							style="font-size:{rmsLevel * 100 > 4
+								? '13'
+								: rmsLevel * 100 > 2
+									? '12'
+									: rmsLevel * 100 > 1
+										? '11.5'
+										: '11'}rem;width:100%;text-align:center;"
+						>
+							{emoji}
+						</div>
+					{:else if loading || assistantSpeaking}
+						<svg
+							class="size-44 text-gray-900 dark:text-gray-400"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							xmlns="http://www.w3.org/2000/svg"
+							><style>
+								.spinner_qM83 {
+									animation: spinner_8HQG 1.05s infinite;
+								}
+								.spinner_oXPr {
+									animation-delay: 0.1s;
+								}
+								.spinner_ZTLf {
+									animation-delay: 0.2s;
+								}
+								@keyframes spinner_8HQG {
+									0%,
+									57.14% {
+										animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
+										transform: translate(0);
+									}
+									28.57% {
+										animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
+										transform: translateY(-6px);
+									}
+									100% {
+										transform: translate(0);
+									}
+								}
+							</style><circle class="spinner_qM83" cx="4" cy="12" r="3" /><circle
+								class="spinner_qM83 spinner_oXPr"
+								cx="12"
+								cy="12"
+								r="3"
+							/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="3" /></svg
 						>
-							{#if emoji}
-								<div
-									class="  transition-all rounded-full"
-									style="font-size:{rmsLevel * 100 > 4
-										? '13'
-										: rmsLevel * 100 > 2
-											? '12'
-											: rmsLevel * 100 > 1
-												? '11.5'
-												: '11'}rem;width:100%;text-align:center;"
-								>
-									{emoji}
-								</div>
-							{:else if loading || assistantSpeaking}
-								<svg
-									class="size-44 text-gray-900 dark:text-gray-400"
-									viewBox="0 0 24 24"
-									fill="currentColor"
-									xmlns="http://www.w3.org/2000/svg"
-									><style>
-										.spinner_qM83 {
-											animation: spinner_8HQG 1.05s infinite;
-										}
-										.spinner_oXPr {
-											animation-delay: 0.1s;
-										}
-										.spinner_ZTLf {
-											animation-delay: 0.2s;
-										}
-										@keyframes spinner_8HQG {
-											0%,
-											57.14% {
-												animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
-												transform: translate(0);
-											}
-											28.57% {
-												animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
-												transform: translateY(-6px);
-											}
-											100% {
-												transform: translate(0);
-											}
-										}
-									</style><circle class="spinner_qM83" cx="4" cy="12" r="3" /><circle
-										class="spinner_qM83 spinner_oXPr"
-										cx="12"
-										cy="12"
-										r="3"
-									/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="3" /></svg
-								>
-							{:else}
-								<div
-									class=" {rmsLevel * 100 > 4
-										? ' size-52'
-										: rmsLevel * 100 > 2
-											? 'size-48'
-											: rmsLevel * 100 > 1
-												? 'size-[11.5rem]'
-												: 'size-44'}  transition-all rounded-full {(model?.info?.meta
-										?.profile_image_url ?? '/static/favicon.png') !== '/static/favicon.png'
-										? ' bg-cover bg-center bg-no-repeat'
-										: 'bg-black dark:bg-white'} "
-									style={(model?.info?.meta?.profile_image_url ?? '/static/favicon.png') !==
-									'/static/favicon.png'
-										? `background-image: url('${model?.info?.meta?.profile_image_url}');`
-										: ''}
-								/>
-							{/if}
-						</button>
 					{:else}
 						<div
-							class="relative flex video-container w-full max-h-full pt-2 pb-4 md:py-6 px-2 h-full"
-						>
-							<video
-								id="camera-feed"
-								autoplay
-								class="rounded-2xl h-full min-w-full object-cover object-center"
-								playsinline
-							/>
-
-							<canvas id="camera-canvas" style="display:none;" />
-
-							<div class=" absolute top-4 md:top-8 left-4">
-								<button
-									type="button"
-									class="p-1.5 text-white cursor-pointer backdrop-blur-xl bg-black/10 rounded-full"
-									on:click={() => {
-										stopCamera();
-									}}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 16 16"
-										fill="currentColor"
-										class="size-6"
-									>
-										<path
-											d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
-										/>
-									</svg>
-								</button>
-							</div>
-						</div>
+							class=" {rmsLevel * 100 > 4
+								? ' size-52'
+								: rmsLevel * 100 > 2
+									? 'size-48'
+									: rmsLevel * 100 > 1
+										? 'size-44'
+										: 'size-40'}  transition-all rounded-full {(model?.info?.meta
+								?.profile_image_url ?? '/static/favicon.png') !== '/static/favicon.png'
+								? ' bg-cover bg-center bg-no-repeat'
+								: 'bg-black dark:bg-white'} "
+							style={(model?.info?.meta?.profile_image_url ?? '/static/favicon.png') !==
+							'/static/favicon.png'
+								? `background-image: url('${model?.info?.meta?.profile_image_url}');`
+								: ''}
+						/>
 					{/if}
-				</div>
+				</button>
+			{:else}
+				<div class="relative flex video-container w-full max-h-full pt-2 pb-4 md:py-6 px-2 h-full">
+					<video
+						id="camera-feed"
+						autoplay
+						class="rounded-2xl h-full min-w-full object-cover object-center"
+						playsinline
+					/>
 
-				<div class="flex justify-between items-center pb-2 w-full">
-					<div>
-						{#if camera}
-							<VideoInputMenu
-								devices={videoInputDevices}
-								on:change={async (e) => {
-									console.log(e.detail);
-									selectedVideoInputDeviceId = e.detail;
-									await stopVideoStream();
-									await startVideoStream();
-								}}
-							>
-								<button class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900" type="button">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="size-5"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
-											clip-rule="evenodd"
-										/>
-									</svg>
-								</button>
-							</VideoInputMenu>
-						{:else}
-							<Tooltip content={$i18n.t('Camera')}>
-								<button
-									class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900"
-									type="button"
-									on:click={async () => {
-										await navigator.mediaDevices.getUserMedia({ video: true });
-										startCamera();
-									}}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="size-5"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
-										/>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
-										/>
-									</svg>
-								</button>
-							</Tooltip>
-						{/if}
-					</div>
+					<canvas id="camera-canvas" style="display:none;" />
 
-					<div>
+					<div class=" absolute top-4 md:top-8 left-4">
 						<button
 							type="button"
+							class="p-1.5 text-white cursor-pointer backdrop-blur-xl bg-black/10 rounded-full"
 							on:click={() => {
-								if (assistantSpeaking) {
-									stopAllAudio();
-								}
+								stopCamera();
 							}}
 						>
-							<div class=" line-clamp-1 text-sm font-medium">
-								{#if loading}
-									{$i18n.t('Thinking...')}
-								{:else if assistantSpeaking}
-									{$i18n.t('Tap to interrupt')}
-								{:else}
-									{$i18n.t('Listening...')}
-								{/if}
-							</div>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								class="size-6"
+							>
+								<path
+									d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
+								/>
+							</svg>
 						</button>
 					</div>
+				</div>
+			{/if}
+		</div>
 
-					<div>
-						<button
-							class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900"
-							on:click={async () => {
-								showCallOverlay.set(false);
-							}}
-							type="button"
-						>
+		<div class="flex justify-between items-center pb-2 w-full">
+			<div>
+				{#if camera}
+					<VideoInputMenu
+						devices={videoInputDevices}
+						on:change={async (e) => {
+							console.log(e.detail);
+							selectedVideoInputDeviceId = e.detail;
+							await stopVideoStream();
+							await startVideoStream();
+						}}
+					>
+						<button class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900" type="button">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 20 20"
@@ -888,12 +856,90 @@
 								class="size-5"
 							>
 								<path
-									d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+									fill-rule="evenodd"
+									d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
+									clip-rule="evenodd"
 								/>
 							</svg>
 						</button>
+					</VideoInputMenu>
+				{:else}
+					<Tooltip content={$i18n.t('Camera')}>
+						<button
+							class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900"
+							type="button"
+							on:click={async () => {
+								await navigator.mediaDevices.getUserMedia({ video: true });
+								startCamera();
+							}}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="size-5"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
+								/>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
+								/>
+							</svg>
+						</button>
+					</Tooltip>
+				{/if}
+			</div>
+
+			<div>
+				<button
+					type="button"
+					on:click={() => {
+						if (assistantSpeaking) {
+							stopAllAudio();
+						}
+					}}
+				>
+					<div class=" line-clamp-1 text-sm font-medium">
+						{#if loading}
+							{$i18n.t('Thinking...')}
+						{:else if assistantSpeaking}
+							{$i18n.t('Tap to interrupt')}
+						{:else}
+							{$i18n.t('Listening...')}
+						{/if}
 					</div>
-				</div>
+				</button>
+			</div>
+
+			<div>
+				<button
+					class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900"
+					on:click={async () => {
+						stopAudioStream();
+						stopVideoStream();
+						showCallOverlay.set(false);
+						dispatch('close');
+					}}
+					type="button"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						class="size-5"
+					>
+						<path
+							d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+						/>
+					</svg>
+				</button>
 			</div>
 		</div>
 	</div>

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

@@ -0,0 +1,131 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import { toast } from 'svelte-sonner';
+
+	const dispatch = createEventDispatcher();
+
+	import Prompts from './Commands/Prompts.svelte';
+	import Documents from './Commands/Documents.svelte';
+	import Models from './Commands/Models.svelte';
+
+	import { removeLastWordFromString } from '$lib/utils';
+	import { uploadWebToVectorDB, uploadYoutubeTranscriptionToVectorDB } from '$lib/apis/rag';
+
+	export let prompt = '';
+	export let files = [];
+
+	let commandElement = null;
+
+	export const selectUp = () => {
+		commandElement?.selectUp();
+	};
+
+	export const selectDown = () => {
+		commandElement?.selectDown();
+	};
+
+	let command = '';
+	$: command = (prompt?.trim() ?? '').split(' ')?.at(-1) ?? '';
+
+	const uploadWeb = async (url) => {
+		console.log(url);
+
+		const doc = {
+			type: 'doc',
+			name: url,
+			collection_name: '',
+			status: false,
+			url: url,
+			error: ''
+		};
+
+		try {
+			files = [...files, doc];
+			const res = await uploadWebToVectorDB(localStorage.token, '', url);
+
+			if (res) {
+				doc.status = 'processed';
+				doc.collection_name = res.collection_name;
+				files = files;
+			}
+		} catch (e) {
+			// Remove the failed doc from the files array
+			files = files.filter((f) => f.name !== url);
+			toast.error(e);
+		}
+	};
+
+	const uploadYoutubeTranscription = async (url) => {
+		console.log(url);
+
+		const doc = {
+			type: 'doc',
+			name: url,
+			collection_name: '',
+			status: false,
+			url: url,
+			error: ''
+		};
+
+		try {
+			files = [...files, doc];
+			const res = await uploadYoutubeTranscriptionToVectorDB(localStorage.token, url);
+
+			if (res) {
+				doc.status = 'processed';
+				doc.collection_name = res.collection_name;
+				files = files;
+			}
+		} catch (e) {
+			// Remove the failed doc from the files array
+			files = files.filter((f) => f.name !== url);
+			toast.error(e);
+		}
+	};
+</script>
+
+{#if ['/', '#', '@'].includes(command?.charAt(0))}
+	{#if command?.charAt(0) === '/'}
+		<Prompts bind:this={commandElement} bind:prompt bind:files {command} />
+	{:else if command?.charAt(0) === '#'}
+		<Documents
+			bind:this={commandElement}
+			bind:prompt
+			{command}
+			on:youtube={(e) => {
+				console.log(e);
+				uploadYoutubeTranscription(e.detail);
+			}}
+			on:url={(e) => {
+				console.log(e);
+				uploadWeb(e.detail);
+			}}
+			on:select={(e) => {
+				console.log(e);
+				files = [
+					...files,
+					{
+						type: e?.detail?.type ?? 'file',
+						...e.detail,
+						status: 'processed'
+					}
+				];
+
+				dispatch('select');
+			}}
+		/>
+	{:else if command?.charAt(0) === '@'}
+		<Models
+			bind:this={commandElement}
+			{command}
+			on:select={(e) => {
+				prompt = removeLastWordFromString(prompt, command);
+
+				dispatch('select', {
+					type: 'model',
+					data: e.detail
+				});
+			}}
+		/>
+	{/if}
+{/if}

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

@@ -2,13 +2,14 @@
 	import { createEventDispatcher } from 'svelte';
 
 	import { documents } from '$lib/stores';
-	import { removeFirstHashWord, isValidHttpUrl } from '$lib/utils';
+	import { removeLastWordFromString, isValidHttpUrl } from '$lib/utils';
 	import { tick, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
 	const i18n = getContext('i18n');
 
 	export let prompt = '';
+	export let command = '';
 
 	const dispatch = createEventDispatcher();
 	let selectedIdx = 0;
@@ -43,16 +44,16 @@
 	];
 
 	$: filteredCollections = collections
-		.filter((collection) => findByName(collection, prompt))
+		.filter((collection) => findByName(collection, command))
 		.sort((a, b) => a.name.localeCompare(b.name));
 
 	$: filteredDocs = $documents
-		.filter((doc) => findByName(doc, prompt))
+		.filter((doc) => findByName(doc, command))
 		.sort((a, b) => a.title.localeCompare(b.title));
 
 	$: filteredItems = [...filteredCollections, ...filteredDocs];
 
-	$: if (prompt) {
+	$: if (command) {
 		selectedIdx = 0;
 
 		console.log(filteredCollections);
@@ -62,9 +63,9 @@
 		name: string;
 	};
 
-	const findByName = (obj: ObjectWithName, prompt: string) => {
+	const findByName = (obj: ObjectWithName, command: string) => {
 		const name = obj.name.toLowerCase();
-		return name.includes(prompt.toLowerCase().split(' ')?.at(0)?.substring(1) ?? '');
+		return name.includes(command.toLowerCase().split(' ')?.at(0)?.substring(1) ?? '');
 	};
 
 	export const selectUp = () => {
@@ -78,7 +79,7 @@
 	const confirmSelect = async (doc) => {
 		dispatch('select', doc);
 
-		prompt = removeFirstHashWord(prompt);
+		prompt = removeLastWordFromString(prompt, command);
 		const chatInputElement = document.getElementById('chat-textarea');
 
 		await tick();
@@ -89,7 +90,7 @@
 	const confirmSelectWeb = async (url) => {
 		dispatch('url', url);
 
-		prompt = removeFirstHashWord(prompt);
+		prompt = removeLastWordFromString(prompt, command);
 		const chatInputElement = document.getElementById('chat-textarea');
 
 		await tick();
@@ -100,7 +101,7 @@
 	const confirmSelectYoutube = async (url) => {
 		dispatch('youtube', url);
 
-		prompt = removeFirstHashWord(prompt);
+		prompt = removeLastWordFromString(prompt, command);
 		const chatInputElement = document.getElementById('chat-textarea');
 
 		await tick();
@@ -110,7 +111,10 @@
 </script>
 
 {#if filteredItems.length > 0 || prompt.split(' ')?.at(0)?.substring(1).startsWith('http')}
-	<div class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10">
+	<div
+		id="commands-container"
+		class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
+	>
 		<div class="flex w-full dark:border dark:border-gray-850 rounded-lg">
 			<div class=" bg-gray-50 dark:bg-gray-850 w-10 rounded-l-lg text-center">
 				<div class=" text-lg font-semibold mt-2">#</div>

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { tick, getContext } from 'svelte';
+
+	import { models } from '$lib/stores';
+
+	const i18n = getContext('i18n');
+
+	const dispatch = createEventDispatcher();
+
+	export let command = '';
+
+	let selectedIdx = 0;
+	let filteredModels = [];
+
+	$: filteredModels = $models
+		.filter((p) =>
+			p.name.toLowerCase().includes(command.toLowerCase().split(' ')?.at(0)?.substring(1) ?? '')
+		)
+		.sort((a, b) => a.name.localeCompare(b.name));
+
+	$: if (command) {
+		selectedIdx = 0;
+	}
+
+	export const selectUp = () => {
+		selectedIdx = Math.max(0, selectedIdx - 1);
+	};
+
+	export const selectDown = () => {
+		selectedIdx = Math.min(selectedIdx + 1, filteredModels.length - 1);
+	};
+
+	const confirmSelect = async (model) => {
+		command = '';
+		dispatch('select', model);
+	};
+
+	onMount(async () => {
+		await tick();
+		const chatInputElement = document.getElementById('chat-textarea');
+		await tick();
+		chatInputElement?.focus();
+		await tick();
+	});
+</script>
+
+{#if filteredModels.length > 0}
+	<div
+		id="commands-container"
+		class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
+	>
+		<div class="flex w-full dark:border dark:border-gray-850 rounded-lg">
+			<div class=" bg-gray-50 dark:bg-gray-850 w-10 rounded-l-lg text-center">
+				<div class=" text-lg font-semibold mt-2">@</div>
+			</div>
+
+			<div
+				class="max-h-60 flex flex-col w-full rounded-r-lg bg-white dark:bg-gray-900 dark:text-gray-100"
+			>
+				<div class="m-1 overflow-y-auto p-1 rounded-r-lg space-y-0.5 scrollbar-hidden">
+					{#each filteredModels as model, modelIdx}
+						<button
+							class="px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
+								? 'bg-gray-50 dark:bg-gray-850 selected-command-option-button'
+								: ''}"
+							type="button"
+							on:click={() => {
+								confirmSelect(model);
+							}}
+							on:mousemove={() => {
+								selectedIdx = modelIdx;
+							}}
+							on:focus={() => {}}
+						>
+							<div class="flex font-medium text-black dark:text-gray-100 line-clamp-1">
+								<img
+									src={model?.info?.meta?.profile_image_url ?? '/static/favicon.png'}
+									alt={model?.name ?? model.id}
+									class="rounded-full size-6 items-center mr-2"
+								/>
+								{model.name}
+							</div>
+						</button>
+					{/each}
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

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

@@ -7,27 +7,30 @@
 	const i18n = getContext('i18n');
 
 	export let files;
-	export let prompt = '';
-	let selectedCommandIdx = 0;
-	let filteredPromptCommands = [];
 
-	$: filteredPromptCommands = $prompts
-		.filter((p) => p.command.toLowerCase().includes(prompt.toLowerCase()))
+	export let prompt = '';
+	export let command = '';
+
+	let selectedPromptIdx = 0;
+	let filteredPrompts = [];
+
+	$: filteredPrompts = $prompts
+		.filter((p) => p.command.toLowerCase().includes(command.toLowerCase()))
 		.sort((a, b) => a.title.localeCompare(b.title));
 
-	$: if (prompt) {
-		selectedCommandIdx = 0;
+	$: if (command) {
+		selectedPromptIdx = 0;
 	}
 
 	export const selectUp = () => {
-		selectedCommandIdx = Math.max(0, selectedCommandIdx - 1);
+		selectedPromptIdx = Math.max(0, selectedPromptIdx - 1);
 	};
 
 	export const selectDown = () => {
-		selectedCommandIdx = Math.min(selectedCommandIdx + 1, filteredPromptCommands.length - 1);
+		selectedPromptIdx = Math.min(selectedPromptIdx + 1, filteredPrompts.length - 1);
 	};
 
-	const confirmCommand = async (command) => {
+	const confirmPrompt = async (command) => {
 		let text = command.content;
 
 		if (command.content.includes('{{CLIPBOARD}}')) {
@@ -79,7 +82,6 @@
 		await tick();
 
 		const words = findWordIndices(prompt);
-
 		if (words.length > 0) {
 			const word = words.at(0);
 			chatInputElement.setSelectionRange(word?.startIndex, word.endIndex + 1);
@@ -87,8 +89,11 @@
 	};
 </script>
 
-{#if filteredPromptCommands.length > 0}
-	<div class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10">
+{#if filteredPrompts.length > 0}
+	<div
+		id="commands-container"
+		class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10"
+	>
 		<div class="flex w-full dark:border dark:border-gray-850 rounded-lg">
 			<div class="  bg-gray-50 dark:bg-gray-850 w-10 rounded-l-lg text-center">
 				<div class=" text-lg font-semibold mt-2">/</div>
@@ -98,26 +103,26 @@
 				class="max-h-60 flex flex-col w-full rounded-r-lg bg-white dark:bg-gray-900 dark:text-gray-100"
 			>
 				<div class="m-1 overflow-y-auto p-1 rounded-r-lg space-y-0.5 scrollbar-hidden">
-					{#each filteredPromptCommands as command, commandIdx}
+					{#each filteredPrompts as prompt, promptIdx}
 						<button
-							class=" px-3 py-1.5 rounded-xl w-full text-left {commandIdx === selectedCommandIdx
+							class=" px-3 py-1.5 rounded-xl w-full text-left {promptIdx === selectedPromptIdx
 								? '  bg-gray-50 dark:bg-gray-850 selected-command-option-button'
 								: ''}"
 							type="button"
 							on:click={() => {
-								confirmCommand(command);
+								confirmPrompt(prompt);
 							}}
 							on:mousemove={() => {
-								selectedCommandIdx = commandIdx;
+								selectedPromptIdx = promptIdx;
 							}}
 							on:focus={() => {}}
 						>
 							<div class=" font-medium text-black dark:text-gray-100">
-								{command.command}
+								{prompt.command}
 							</div>
 
 							<div class=" text-xs text-gray-600 dark:text-gray-100">
-								{command.title}
+								{prompt.title}
 							</div>
 						</button>
 					{/each}

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

@@ -1,181 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	import { generatePrompt } from '$lib/apis/ollama';
-	import { models } from '$lib/stores';
-	import { splitStream } from '$lib/utils';
-	import { tick, getContext } from 'svelte';
-	import { toast } from 'svelte-sonner';
-
-	const i18n = getContext('i18n');
-
-	const dispatch = createEventDispatcher();
-
-	export let prompt = '';
-	export let user = null;
-
-	export let chatInputPlaceholder = '';
-	export let messages = [];
-
-	let selectedIdx = 0;
-	let filteredModels = [];
-
-	$: filteredModels = $models
-		.filter((p) =>
-			p.name.toLowerCase().includes(prompt.toLowerCase().split(' ')?.at(0)?.substring(1) ?? '')
-		)
-		.sort((a, b) => a.name.localeCompare(b.name));
-
-	$: if (prompt) {
-		selectedIdx = 0;
-	}
-
-	export const selectUp = () => {
-		selectedIdx = Math.max(0, selectedIdx - 1);
-	};
-
-	export const selectDown = () => {
-		selectedIdx = Math.min(selectedIdx + 1, filteredModels.length - 1);
-	};
-
-	const confirmSelect = async (model) => {
-		prompt = '';
-		dispatch('select', model);
-	};
-
-	const confirmSelectCollaborativeChat = async (model) => {
-		// dispatch('select', model);
-		prompt = '';
-		user = JSON.parse(JSON.stringify(model.name));
-		await tick();
-
-		chatInputPlaceholder = $i18n.t('{{modelName}} is thinking...', { modelName: model.name });
-
-		const chatInputElement = document.getElementById('chat-textarea');
-
-		await tick();
-		chatInputElement?.focus();
-		await tick();
-
-		const convoText = messages.reduce((a, message, i, arr) => {
-			return `${a}### ${message.role.toUpperCase()}\n${message.content}\n\n`;
-		}, '');
-
-		const res = await generatePrompt(localStorage.token, model.name, convoText);
-
-		if (res && res.ok) {
-			const reader = res.body
-				.pipeThrough(new TextDecoderStream())
-				.pipeThrough(splitStream('\n'))
-				.getReader();
-
-			while (true) {
-				const { value, done } = await reader.read();
-				if (done) {
-					break;
-				}
-
-				try {
-					let lines = value.split('\n');
-
-					for (const line of lines) {
-						if (line !== '') {
-							console.log(line);
-							let data = JSON.parse(line);
-
-							if ('detail' in data) {
-								throw data;
-							}
-
-							if ('id' in data) {
-								console.log(data);
-							} else {
-								if (data.done == false) {
-									if (prompt == '' && data.response == '\n') {
-										continue;
-									} else {
-										prompt += data.response;
-										console.log(data.response);
-										chatInputElement.scrollTop = chatInputElement.scrollHeight;
-										await tick();
-									}
-								}
-							}
-						}
-					}
-				} catch (error) {
-					console.log(error);
-					if ('detail' in error) {
-						toast.error(error.detail);
-					}
-					break;
-				}
-			}
-		} else {
-			if (res !== null) {
-				const error = await res.json();
-				console.log(error);
-				if ('detail' in error) {
-					toast.error(error.detail);
-				} else {
-					toast.error(error.error);
-				}
-			} else {
-				toast.error(
-					$i18n.t('Uh-oh! There was an issue connecting to {{provider}}.', { provider: 'llama' })
-				);
-			}
-		}
-
-		chatInputPlaceholder = '';
-
-		console.log(user);
-	};
-</script>
-
-{#if prompt.charAt(0) === '@'}
-	{#if filteredModels.length > 0}
-		<div class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10">
-			<div class="flex w-full dark:border dark:border-gray-850 rounded-lg">
-				<div class=" bg-gray-50 dark:bg-gray-850 w-10 rounded-l-lg text-center">
-					<div class=" text-lg font-semibold mt-2">@</div>
-				</div>
-
-				<div
-					class="max-h-60 flex flex-col w-full rounded-r-lg bg-white dark:bg-gray-900 dark:text-gray-100"
-				>
-					<div class="m-1 overflow-y-auto p-1 rounded-r-lg space-y-0.5 scrollbar-hidden">
-						{#each filteredModels as model, modelIdx}
-							<button
-								class="px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
-									? 'bg-gray-50 dark:bg-gray-850 selected-command-option-button'
-									: ''}"
-								type="button"
-								on:click={() => {
-									confirmSelect(model);
-								}}
-								on:mousemove={() => {
-									selectedIdx = modelIdx;
-								}}
-								on:focus={() => {}}
-							>
-								<div class="flex font-medium text-black dark:text-gray-100 line-clamp-1">
-									<img
-										src={model?.info?.meta?.profile_image_url ?? '/static/favicon.png'}
-										alt={model?.name ?? model.id}
-										class="rounded-full size-6 items-center mr-2"
-									/>
-									{model.name}
-								</div>
-
-								<!-- <div class=" text-xs text-gray-600 line-clamp-1">
-								{doc.title}
-								</div> -->
-							</button>
-						{/each}
-					</div>
-				</div>
-			</div>
-		</div>
-	{/if}
-{/if}

src/lib/components/chat/Messages.svelte

@@ -5,15 +5,12 @@
 
 	import { toast } from 'svelte-sonner';
 	import { getChatList, updateChatById } from '$lib/apis/chats';
+	import { copyToClipboard, findWordIndices } from '$lib/utils';
 
 	import UserMessage from './Messages/UserMessage.svelte';
 	import ResponseMessage from './Messages/ResponseMessage.svelte';
 	import Placeholder from './Messages/Placeholder.svelte';
-	import Spinner from '../common/Spinner.svelte';
-	import { imageGenerations } from '$lib/apis/images';
-	import { copyToClipboard, findWordIndices } from '$lib/utils';
-	import CompareMessages from './Messages/CompareMessages.svelte';
-	import { stringify } from 'postcss';
+	import MultiResponseMessages from './Messages/MultiResponseMessages.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -22,6 +19,7 @@
 	export let sendPrompt: Function;
 	export let continueGeneration: Function;
 	export let regenerateResponse: Function;
+	export let mergeResponses: Function;
 	export let chatActionHandler: Function;
 
 	export let user = $_user;
@@ -53,34 +51,43 @@
 		}
 	};
 
-	const confirmEditMessage = async (messageId, content) => {
-		let userPrompt = content;
-		let userMessageId = uuidv4();
+	const confirmEditMessage = async (messageId, content, submit = true) => {
+		if (submit) {
+			let userPrompt = content;
+			let userMessageId = uuidv4();
 
-		let userMessage = {
-			id: userMessageId,
-			parentId: history.messages[messageId].parentId,
-			childrenIds: [],
-			role: 'user',
-			content: userPrompt,
-			...(history.messages[messageId].files && { files: history.messages[messageId].files }),
-			models: selectedModels.filter((m, mIdx) => selectedModels.indexOf(m) === mIdx)
-		};
+			let userMessage = {
+				id: userMessageId,
+				parentId: history.messages[messageId].parentId,
+				childrenIds: [],
+				role: 'user',
+				content: userPrompt,
+				...(history.messages[messageId].files && { files: history.messages[messageId].files }),
+				models: selectedModels
+			};
 
-		let messageParentId = history.messages[messageId].parentId;
+			let messageParentId = history.messages[messageId].parentId;
 
-		if (messageParentId !== null) {
-			history.messages[messageParentId].childrenIds = [
-				...history.messages[messageParentId].childrenIds,
-				userMessageId
-			];
+			if (messageParentId !== null) {
+				history.messages[messageParentId].childrenIds = [
+					...history.messages[messageParentId].childrenIds,
+					userMessageId
+				];
+			}
+
+			history.messages[userMessageId] = userMessage;
+			history.currentId = userMessageId;
+
+			await tick();
+			await sendPrompt(userPrompt, userMessageId);
+		} else {
+			history.messages[messageId].content = content;
+			await tick();
+			await updateChatById(localStorage.token, chatId, {
+				messages: messages,
+				history: history
+			});
 		}
-
-		history.messages[userMessageId] = userMessage;
-		history.currentId = userMessageId;
-
-		await tick();
-		await sendPrompt(userPrompt, userMessageId);
 	};
 
 	const updateChatMessages = async () => {
@@ -326,7 +333,7 @@
 									{showNextMessage}
 									copyToClipboard={copyToClipboardWithToast}
 								/>
-							{:else if $mobile || (history.messages[message.parentId]?.models?.length ?? 1) === 1}
+							{:else if (history.messages[message.parentId]?.models?.length ?? 1) === 1}
 								{#key message.id && history.currentId}
 									<ResponseMessage
 										{message}
@@ -342,7 +349,13 @@
 										{continueGeneration}
 										{regenerateResponse}
 										on:action={async (e) => {
-											await chatActionHandler(chatId, e.detail, message.model, message.id);
+											console.log('action', e);
+											if (typeof e.detail === 'string') {
+												await chatActionHandler(chatId, e.detail, message.model, message.id);
+											} else {
+												const { id, event } = e.detail;
+												await chatActionHandler(chatId, id, message.model, message.id, event);
+											}
 										}}
 										on:save={async (e) => {
 											console.log('save', e);
@@ -358,8 +371,9 @@
 								{/key}
 							{:else}
 								{#key message.parentId}
-									<CompareMessages
+									<MultiResponseMessages
 										bind:history
+										isLastMessage={messageIdx + 1 === messages.length}
 										{messages}
 										{readOnly}
 										{chatId}
@@ -370,7 +384,17 @@
 										{rateMessage}
 										copyToClipboard={copyToClipboardWithToast}
 										{continueGeneration}
+										{mergeResponses}
 										{regenerateResponse}
+										on:action={async (e) => {
+											console.log('action', e);
+											if (typeof e.detail === 'string') {
+												await chatActionHandler(chatId, e.detail, message.model, message.id);
+											} else {
+												const { id, event } = e.detail;
+												await chatActionHandler(chatId, id, message.model, message.id, event);
+											}
+										}}
 										on:change={async () => {
 											await updateChatById(localStorage.token, chatId, {
 												messages: messages,

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import CitationsModal from './CitationsModal.svelte';
+
+	export let citations = [];
+
+	let showCitationModal = false;
+	let selectedCitation = null;
+</script>
+
+<CitationsModal bind:show={showCitationModal} citation={selectedCitation} />
+
+<div class="mt-1 mb-2 w-full flex gap-1 items-center flex-wrap">
+	{#each citations.reduce((acc, citation) => {
+		citation.document.forEach((document, index) => {
+			const metadata = citation.metadata?.[index];
+			const id = metadata?.source ?? 'N/A';
+			let source = citation?.source;
+
+			if (metadata?.name) {
+				source = { ...source, name: metadata.name };
+			}
+
+			// Check if ID looks like a URL
+			if (id.startsWith('http://') || id.startsWith('https://')) {
+				source = { name: id };
+			}
+
+			const existingSource = acc.find((item) => item.id === id);
+
+			if (existingSource) {
+				existingSource.document.push(document);
+				existingSource.metadata.push(metadata);
+			} else {
+				acc.push( { id: id, source: source, document: [document], metadata: metadata ? [metadata] : [] } );
+			}
+		});
+		return acc;
+	}, []) as citation, idx}
+		<div class="flex gap-1 text-xs font-semibold">
+			<button
+				class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl"
+				on:click={() => {
+					showCitationModal = true;
+					selectedCitation = citation;
+				}}
+			>
+				<div class="bg-white dark:bg-gray-700 rounded-full size-4">
+					{idx + 1}
+				</div>
+				<div class="flex-1 mx-2 line-clamp-1">
+					{citation.source.name}
+				</div>
+			</button>
+		</div>
+	{/each}
+</div>

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

@@ -3,6 +3,8 @@
 	import { loadPyodide } from 'pyodide';
 	import mermaid from 'mermaid';
 
+	import { v4 as uuidv4 } from 'uuid';
+
 	import { getContext, getAllContexts, onMount } from 'svelte';
 	import { copyToClipboard } from '$lib/utils';
 
@@ -213,15 +215,19 @@ __builtins__.input = input`);
 
 	let debounceTimeout;
 
-	$: if (code) {
-		if (lang === 'mermaid' && (token?.raw ?? '').endsWith('```')) {
+	const drawMermaidDiagram = async () => {
+		try {
+			const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code);
+			mermaidHtml = svg;
+		} catch (error) {
+			console.log('Error:', error);
+		}
+	};
+
+	$: if (token.raw) {
+		if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
 			(async () => {
-				try {
-					const { svg } = await mermaid.render(`mermaid-${id}`, code);
-					mermaidHtml = svg;
-				} catch (error) {
-					console.error('Error:', error);
-				}
+				await drawMermaidDiagram();
 			})();
 		} else {
 			// Function to perform the code highlighting
@@ -237,15 +243,18 @@ __builtins__.input = input`);
 	}
 
 	onMount(async () => {
-		await mermaid.initialize({ startOnLoad: true });
-
-		if (lang === 'mermaid' && (token?.raw ?? '').endsWith('```')) {
-			try {
-				const { svg } = await mermaid.render(`mermaid-${id}`, code);
-				mermaidHtml = svg;
-			} catch (error) {
-				console.error('Error:', error);
-			}
+		if (document.documentElement.classList.contains('dark')) {
+			mermaid.initialize({
+				startOnLoad: true,
+				theme: 'dark',
+				securityLevel: 'loose'
+			});
+		} else {
+			mermaid.initialize({
+				startOnLoad: true,
+				theme: 'default',
+				securityLevel: 'loose'
+			});
 		}
 	});
 </script>
@@ -253,15 +262,15 @@ __builtins__.input = input`);
 <div class="my-2" dir="ltr">
 	{#if lang === 'mermaid'}
 		{#if mermaidHtml}
-			{@html mermaidHtml}
+			{@html `${mermaidHtml}`}
 		{:else}
-			<pre class=" mermaid-{id}">{code}</pre>
+			<pre class="mermaid">{code}</pre>
 		{/if}
 	{:else}
 		<div
 			class="flex justify-between bg-[#202123] text-white text-xs px-4 pt-1 pb-0.5 rounded-t-lg overflow-x-auto"
 		>
-			<div class="p-1">{@html lang}</div>
+			<div class="p-1">{lang}</div>
 
 			<div class="flex items-center">
 				{#if lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code))}

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

@@ -1,167 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	import { updateChatById } from '$lib/apis/chats';
-	import { onMount, tick } from 'svelte';
-	import ResponseMessage from './ResponseMessage.svelte';
-
-	export let chatId;
-
-	export let history;
-	export let messages = [];
-	export let messageIdx;
-
-	export let parentMessage;
-
-	export let readOnly = false;
-
-	export let updateChatMessages: Function;
-	export let confirmEditResponseMessage: Function;
-	export let rateMessage: Function;
-
-	export let copyToClipboard: Function;
-	export let continueGeneration: Function;
-	export let regenerateResponse: Function;
-
-	const dispatch = createEventDispatcher();
-
-	let currentMessageId;
-
-	let groupedMessagesIdx = {};
-	let groupedMessages = {};
-
-	$: groupedMessages = parentMessage?.models.reduce((a, model) => {
-		const modelMessages = parentMessage?.childrenIds
-			.map((id) => history.messages[id])
-			.filter((m) => m.model === model);
-
-		return {
-			...a,
-			[model]: { messages: modelMessages }
-		};
-	}, {});
-
-	const showPreviousMessage = (model) => {
-		groupedMessagesIdx[model] = Math.max(0, groupedMessagesIdx[model] - 1);
-		let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
-
-		console.log(messageId);
-		let messageChildrenIds = history.messages[messageId].childrenIds;
-
-		while (messageChildrenIds.length !== 0) {
-			messageId = messageChildrenIds.at(-1);
-			messageChildrenIds = history.messages[messageId].childrenIds;
-		}
-
-		history.currentId = messageId;
-
-		dispatch('change');
-	};
-
-	const showNextMessage = (model) => {
-		groupedMessagesIdx[model] = Math.min(
-			groupedMessages[model].messages.length - 1,
-			groupedMessagesIdx[model] + 1
-		);
-
-		let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
-		console.log(messageId);
-
-		let messageChildrenIds = history.messages[messageId].childrenIds;
-
-		while (messageChildrenIds.length !== 0) {
-			messageId = messageChildrenIds.at(-1);
-			messageChildrenIds = history.messages[messageId].childrenIds;
-		}
-
-		history.currentId = messageId;
-
-		dispatch('change');
-	};
-
-	onMount(async () => {
-		await tick();
-		currentMessageId = messages[messageIdx].id;
-
-		for (const model of parentMessage?.models) {
-			const idx = groupedMessages[model].messages.findIndex((m) => m.id === currentMessageId);
-
-			if (idx !== -1) {
-				groupedMessagesIdx[model] = idx;
-			} else {
-				groupedMessagesIdx[model] = 0;
-			}
-		}
-	});
-</script>
-
-<div>
-	<div
-		class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden"
-		id="responses-container-{parentMessage.id}"
-	>
-		{#key currentMessageId}
-			{#each Object.keys(groupedMessages) as model}
-				{#if groupedMessagesIdx[model] !== undefined && groupedMessages[model].messages.length > 0}
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					{@const message = groupedMessages[model].messages[groupedMessagesIdx[model]]}
-
-					<div
-						class=" snap-center min-w-80 w-full max-w-full m-1 border {history.messages[
-							currentMessageId
-						].model === model
-							? 'border-gray-100 dark:border-gray-800 border-[1.5px]'
-							: 'border-gray-50 dark:border-gray-850 '} transition p-5 rounded-3xl"
-						on:click={() => {
-							if (currentMessageId != message.id) {
-								currentMessageId = message.id;
-								let messageId = message.id;
-								console.log(messageId);
-								//
-								let messageChildrenIds = history.messages[messageId].childrenIds;
-								while (messageChildrenIds.length !== 0) {
-									messageId = messageChildrenIds.at(-1);
-									messageChildrenIds = history.messages[messageId].childrenIds;
-								}
-								history.currentId = messageId;
-								dispatch('change');
-							}
-						}}
-					>
-						{#key history.currentId}
-							<ResponseMessage
-								message={groupedMessages[model].messages[groupedMessagesIdx[model]]}
-								siblings={groupedMessages[model].messages.map((m) => m.id)}
-								isLastMessage={true}
-								{updateChatMessages}
-								{confirmEditResponseMessage}
-								showPreviousMessage={() => showPreviousMessage(model)}
-								showNextMessage={() => showNextMessage(model)}
-								{readOnly}
-								{rateMessage}
-								{copyToClipboard}
-								{continueGeneration}
-								regenerateResponse={async (message) => {
-									regenerateResponse(message);
-									await tick();
-									groupedMessagesIdx[model] = groupedMessages[model].messages.length - 1;
-								}}
-								on:save={async (e) => {
-									console.log('save', e);
-
-									const message = e.detail;
-									history.messages[message.id] = message;
-									await updateChatById(localStorage.token, chatId, {
-										messages: messages,
-										history: history
-									});
-								}}
-							/>
-						{/key}
-					</div>
-				{/if}
-			{/each}
-		{/key}
-	</div>
-</div>

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let content = '';
+</script>
+
+<div
+	class="flex mt-2 mb-4 space-x-2 border px-4 py-3 border-red-800 bg-red-800/30 font-medium rounded-lg"
+>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="w-5 h-5 self-center"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+		/>
+	</svg>
+
+	<div class=" self-center">
+		{content}
+	</div>
+</div>

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

@@ -1,30 +0,0 @@
-<script lang="ts">
-	import Image from '$lib/components/common/Image.svelte';
-	import CodeBlock from './CodeBlock.svelte';
-
-	/* The html content of the tag */
-	export let html; //: string;
-	let parsedHTML = [html];
-
-	export let images;
-	export let codes;
-
-	//  all images are in {{IMAGE_0}}, {{IMAGE_1}}....  format
-	// all codes are in {{CODE_0}}, {{CODE_1}}....  format
-
-	const rules = [];
-	rules.forEach((rule) => {
-		parsedHTML = parsedHTML.map((substr) => substr.split(rule.regex)).flat();
-	});
-</script>
-
-{#each parsedHTML as part}
-	{@const match = rules.find((rule) => rule.regex.test(part))}
-	{#if match}
-		<svelte:component this={match.component} {...match.props}>
-			{@html part}
-		</svelte:component>
-	{:else}
-		{@html part}
-	{/if}
-{/each}

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

@@ -0,0 +1,32 @@
+<script>
+	import { marked } from 'marked';
+	import markedKatex from '$lib/utils/marked/katex-extension';
+	import { replaceTokens, processResponseContent } from '$lib/utils';
+	import { user } from '$lib/stores';
+
+	import MarkdownTokens from './Markdown/MarkdownTokens.svelte';
+
+	export let id;
+	export let content;
+	export let model = null;
+
+	let tokens = [];
+
+	const options = {
+		throwOnError: false
+	};
+
+	marked.use(markedKatex(options));
+
+	$: (async () => {
+		if (content) {
+			tokens = marked.lexer(
+				replaceTokens(processResponseContent(content), model?.name, $user?.name)
+			);
+		}
+	})();
+</script>
+
+{#key id}
+	<MarkdownTokens {tokens} {id} />
+{/key}

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import katex from 'katex';
 	import 'katex/contrib/mhchem';
+	import 'katex/dist/katex.min.css';
 
 	export let content: string;
 	export let displayMode: boolean = false;

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

@@ -1,9 +1,16 @@
 <script lang="ts">
-	import type { Token } from 'marked';
-	import { revertSanitizedResponseContent, unescapeHtml } from '$lib/utils';
-	import { onMount } from 'svelte';
-	import Image from '$lib/components/common/Image.svelte';
+	import DOMPurify from 'dompurify';
+	import { toast } from 'svelte-sonner';
 
+	import type { Token } from 'marked';
+	import { getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { copyToClipboard, revertSanitizedResponseContent, unescapeHtml } from '$lib/utils';
+
+	import Image from '$lib/components/common/Image.svelte';
 	import KatexRenderer from './KatexRenderer.svelte';
 
 	export let id: string;
@@ -14,7 +21,14 @@
 	{#if token.type === 'escape'}
 		{unescapeHtml(token.text)}
 	{:else if token.type === 'html'}
-		{@html token.text}
+		{@const html = DOMPurify.sanitize(token.text)}
+		{#if html && html.includes('<video')}
+			{@html html}
+		{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
+			{@html `${token.text}`}
+		{:else}
+			{token.text}
+		{/if}
 	{:else if token.type === 'link'}
 		<a href={token.href} target="_blank" rel="nofollow" title={token.title}>{token.text}</a>
 	{:else if token.type === 'image'}
@@ -28,7 +42,15 @@
 			<svelte:self id={`${id}-em`} tokens={token.tokens} />
 		</em>
 	{:else if token.type === 'codespan'}
-		<code class="codespan">{revertSanitizedResponseContent(token.raw)}</code>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+		<code
+			class="codespan cursor-pointer"
+			on:click={() => {
+				copyToClipboard(unescapeHtml(token.text));
+				toast.success($i18n.t('Copied to clipboard'));
+			}}>{unescapeHtml(token.text)}</code
+		>
 	{:else if token.type === 'br'}
 		<br />
 	{:else if token.type === 'del'}
@@ -39,6 +61,14 @@
 		{#if token.text}
 			<KatexRenderer content={revertSanitizedResponseContent(token.text)} displayMode={false} />
 		{/if}
+	{:else if token.type === 'iframe'}
+		<iframe
+			src="{WEBUI_BASE_URL}/api/v1/files/{token.fileId}/content"
+			title={token.fileId}
+			width="100%"
+			frameborder="0"
+			onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"
+		></iframe>
 	{:else if token.type === 'text'}
 		{token.raw}
 	{/if}

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

@@ -1,11 +1,13 @@
 <script lang="ts">
+	import DOMPurify from 'dompurify';
 	import { onMount } from 'svelte';
-	import type { Token } from 'marked';
+	import { marked, type Token } from 'marked';
 	import { revertSanitizedResponseContent, unescapeHtml } from '$lib/utils';
 
 	import CodeBlock from '$lib/components/chat/Messages/CodeBlock.svelte';
-	import MarkdownInlineTokens from '$lib/components/chat/Messages/MarkdownInlineTokens.svelte';
+	import MarkdownInlineTokens from '$lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte';
 	import KatexRenderer from './KatexRenderer.svelte';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	export let id: string;
 	export let tokens: Token[];
@@ -91,7 +93,22 @@
 			</ul>
 		{/if}
 	{:else if token.type === 'html'}
-		{@html token.text}
+		{@const html = DOMPurify.sanitize(token.text)}
+		{#if html && html.includes('<video')}
+			{@html html}
+		{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
+			{@html `${token.text}`}
+		{:else}
+			{token.text}
+		{/if}
+	{:else if token.type === 'iframe'}
+		<iframe
+			src="{WEBUI_BASE_URL}/api/v1/files/{token.fileId}/content"
+			title={token.fileId}
+			width="100%"
+			frameborder="0"
+			onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"
+		></iframe>
 	{:else if token.type === 'paragraph'}
 		<p>
 			<MarkdownInlineTokens id={`${id}-${tokenIdx}-p`} tokens={token.tokens ?? []} />
@@ -125,7 +142,7 @@
 			/>
 		{/if}
 	{:else if token.type === 'space'}
-		{''}
+		<div class="my-0.5" />
 	{:else}
 		{console.log('Unknown token', token)}
 	{/if}

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

@@ -0,0 +1,274 @@
+<script lang="ts">
+	import dayjs from 'dayjs';
+	import { onMount, tick, getContext } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	import { mobile, settings } from '$lib/stores';
+
+	import { generateMoACompletion } from '$lib/apis';
+	import { updateChatById } from '$lib/apis/chats';
+	import { createOpenAITextStream } from '$lib/apis/streaming';
+
+	import ResponseMessage from './ResponseMessage.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Merge from '$lib/components/icons/Merge.svelte';
+
+	import Markdown from './Markdown.svelte';
+	import Name from './Name.svelte';
+	import Skeleton from './Skeleton.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let chatId;
+
+	export let history;
+	export let messages = [];
+	export let messageIdx;
+
+	export let parentMessage;
+	export let isLastMessage;
+
+	export let readOnly = false;
+
+	export let updateChatMessages: Function;
+	export let confirmEditResponseMessage: Function;
+	export let rateMessage: Function;
+
+	export let copyToClipboard: Function;
+	export let continueGeneration: Function;
+	export let mergeResponses: Function;
+	export let regenerateResponse: Function;
+
+	const dispatch = createEventDispatcher();
+
+	let currentMessageId;
+	let groupedMessages = {};
+	let groupedMessagesIdx = {};
+
+	$: if (parentMessage) {
+		initHandler();
+	}
+
+	const showPreviousMessage = (modelIdx) => {
+		groupedMessagesIdx[modelIdx] = Math.max(0, groupedMessagesIdx[modelIdx] - 1);
+		let messageId = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]].id;
+
+		console.log(messageId);
+		let messageChildrenIds = history.messages[messageId].childrenIds;
+
+		while (messageChildrenIds.length !== 0) {
+			messageId = messageChildrenIds.at(-1);
+			messageChildrenIds = history.messages[messageId].childrenIds;
+		}
+
+		history.currentId = messageId;
+		dispatch('change');
+	};
+
+	const showNextMessage = (modelIdx) => {
+		groupedMessagesIdx[modelIdx] = Math.min(
+			groupedMessages[modelIdx].messages.length - 1,
+			groupedMessagesIdx[modelIdx] + 1
+		);
+
+		let messageId = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]].id;
+		console.log(messageId);
+
+		let messageChildrenIds = history.messages[messageId].childrenIds;
+
+		while (messageChildrenIds.length !== 0) {
+			messageId = messageChildrenIds.at(-1);
+			messageChildrenIds = history.messages[messageId].childrenIds;
+		}
+
+		history.currentId = messageId;
+		dispatch('change');
+	};
+
+	const initHandler = async () => {
+		await tick();
+		currentMessageId = messages[messageIdx].id;
+
+		groupedMessages = parentMessage?.models.reduce((a, model, modelIdx) => {
+			// Find all messages that are children of the parent message and have the same model
+			let modelMessages = parentMessage?.childrenIds
+				.map((id) => history.messages[id])
+				.filter((m) => m?.modelIdx === modelIdx);
+
+			if (modelMessages.length === 0) {
+				modelMessages = parentMessage?.childrenIds
+					.map((id) => history.messages[id])
+					.filter((m) => m?.model === model);
+
+				modelMessages.forEach((m) => {
+					m.modelIdx = modelIdx;
+				});
+			}
+
+			return {
+				...a,
+				[modelIdx]: { messages: modelMessages }
+			};
+		}, {});
+
+		groupedMessagesIdx = parentMessage?.models.reduce((a, model, modelIdx) => {
+			const idx = groupedMessages[modelIdx].messages.findIndex((m) => m.id === currentMessageId);
+			if (idx !== -1) {
+				return {
+					...a,
+					[modelIdx]: idx
+				};
+			} else {
+				return {
+					...a,
+					[modelIdx]: 0
+				};
+			}
+		}, {});
+	};
+
+	const mergeResponsesHandler = async () => {
+		const responses = Object.keys(groupedMessages).map((modelIdx) => {
+			const { messages } = groupedMessages[modelIdx];
+			return messages[groupedMessagesIdx[modelIdx]].content;
+		});
+		mergeResponses(currentMessageId, responses, chatId);
+	};
+
+	onMount(async () => {
+		initHandler();
+	});
+</script>
+
+<div>
+	<div
+		class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden"
+		id="responses-container-{chatId}-{parentMessage.id}"
+	>
+		{#key currentMessageId}
+			{#each Object.keys(groupedMessages) as modelIdx}
+				{#if groupedMessagesIdx[modelIdx] !== undefined && groupedMessages[modelIdx].messages.length > 0}
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					{@const message = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]]}
+
+					<div
+						class=" snap-center w-full max-w-full m-1 border {history.messages[currentMessageId]
+							?.modelIdx == modelIdx
+							? `border-gray-100 dark:border-gray-800 border-[1.5px] ${
+									$mobile ? 'min-w-full' : 'min-w-[32rem]'
+								}`
+							: `border-gray-50 dark:border-gray-850 border-dashed ${
+									$mobile ? 'min-w-full' : 'min-w-80'
+								}`} transition-all p-5 rounded-2xl"
+						on:click={() => {
+							if (currentMessageId != message.id) {
+								currentMessageId = message.id;
+								let messageId = message.id;
+								console.log(messageId);
+								//
+								let messageChildrenIds = history.messages[messageId].childrenIds;
+								while (messageChildrenIds.length !== 0) {
+									messageId = messageChildrenIds.at(-1);
+									messageChildrenIds = history.messages[messageId].childrenIds;
+								}
+								history.currentId = messageId;
+								dispatch('change');
+							}
+						}}
+					>
+						{#key history.currentId}
+							{#if message}
+								<ResponseMessage
+									{message}
+									siblings={groupedMessages[modelIdx].messages.map((m) => m.id)}
+									isLastMessage={true}
+									{updateChatMessages}
+									{confirmEditResponseMessage}
+									showPreviousMessage={() => showPreviousMessage(modelIdx)}
+									showNextMessage={() => showNextMessage(modelIdx)}
+									{readOnly}
+									{rateMessage}
+									{copyToClipboard}
+									{continueGeneration}
+									regenerateResponse={async (message) => {
+										regenerateResponse(message);
+										await tick();
+										groupedMessagesIdx[modelIdx] = groupedMessages[modelIdx].messages.length - 1;
+									}}
+									on:action={async (e) => {
+										dispatch('action', e.detail);
+									}}
+									on:save={async (e) => {
+										console.log('save', e);
+
+										const message = e.detail;
+										history.messages[message.id] = message;
+										await updateChatById(localStorage.token, chatId, {
+											messages: messages,
+											history: history
+										});
+									}}
+								/>
+							{/if}
+						{/key}
+					</div>
+				{/if}
+			{/each}
+		{/key}
+	</div>
+
+	{#if !readOnly && isLastMessage}
+		{#if !Object.keys(groupedMessages).find((modelIdx) => {
+			const { messages } = groupedMessages[modelIdx];
+			return !messages[groupedMessagesIdx[modelIdx]]?.done ?? false;
+		})}
+			<div class="flex justify-end">
+				<div class="w-full">
+					{#if history.messages[currentMessageId]?.merged?.status}
+						{@const message = history.messages[currentMessageId]?.merged}
+
+						<div class="w-full rounded-xl pl-5 pr-2 py-2">
+							<Name>
+								Merged Response
+
+								{#if message.timestamp}
+									<span
+										class=" self-center invisible group-hover:visible text-gray-400 text-xs font-medium uppercase ml-0.5 -mt-0.5"
+									>
+										{dayjs(message.timestamp * 1000).format($i18n.t('h:mm a'))}
+									</span>
+								{/if}
+							</Name>
+
+							<div class="mt-1 markdown-prose w-full min-w-full">
+								{#if (message?.content ?? '') === ''}
+									<Skeleton />
+								{:else}
+									<Markdown id={`merged`} content={message.content ?? ''} />
+								{/if}
+							</div>
+						</div>
+					{/if}
+				</div>
+
+				<div class=" flex-shrink-0 text-gray-600 dark:text-gray-500 mt-1">
+					<Tooltip content={$i18n.t('Merge Responses')} placement="bottom">
+						<button
+							type="button"
+							id="merge-response-button"
+							class="{true
+								? 'visible'
+								: 'invisible group-hover:visible'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
+							on:click={() => {
+								mergeResponsesHandler();
+							}}
+						>
+							<Merge className=" size-5 " />
+						</button>
+					</Tooltip>
+				</div>
+			</div>
+		{/if}
+	{/if}
+</div>

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

@@ -2,7 +2,7 @@
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { marked } from 'marked';
 
-	import { config, user, models as _models } from '$lib/stores';
+	import { config, user, models as _models, temporaryChatEnabled } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
 
 	import { blur, fade } from 'svelte/transition';
@@ -10,6 +10,7 @@
 	import Suggestions from '../MessageInput/Suggestions.svelte';
 	import { sanitizeResponseContent } from '$lib/utils';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import EyeSlash from '$lib/components/icons/EyeSlash.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -64,6 +65,18 @@
 			</div>
 		</div>
 
+		{#if $temporaryChatEnabled}
+			<Tooltip
+				content="This chat won't appear in history and your messages will not be saved."
+				className="w-fit"
+				placement="top-start"
+			>
+				<div class="flex items-center gap-2 text-gray-500 font-medium text-lg my-2 w-fit">
+					<EyeSlash strokeWidth="2.5" className="size-5" /> Temporary Chat
+				</div>
+			</Tooltip>
+		{/if}
+
 		<div
 			class=" mt-2 mb-4 text-3xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4 font-primary"
 		>
@@ -113,7 +126,8 @@
 		<div class=" w-full font-primary" in:fade={{ duration: 200, delay: 300 }}>
 			<Suggestions
 				suggestionPrompts={models[selectedModelIdx]?.info?.meta?.suggestion_prompts ??
-					$config.default_prompt_suggestions}
+					$config?.default_prompt_suggestions ??
+					[]}
 				{submitPrompt}
 			/>
 		</div>

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

@@ -57,7 +57,10 @@
 		message.annotation.reason = selectedReason;
 		message.annotation.comment = comment;
 
-		dispatch('submit');
+		dispatch('submit', {
+			reason: selectedReason,
+			comment: comment
+		});
 
 		toast.success($i18n.t('Thanks for your feedback!'));
 		show = false;

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

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
-	import { marked } from 'marked';
 
-	import { fade } from 'svelte/transition';
 	import { createEventDispatcher } from 'svelte';
 	import { onMount, tick, getContext } from 'svelte';
 
-	const i18n = getContext('i18n');
+	const i18n = getContext<Writable<i18nType>>('i18n');
 
 	const dispatch = createEventDispatcher();
 
@@ -16,27 +14,69 @@
 	import { imageGenerations } from '$lib/apis/images';
 	import {
 		approximateToHumanReadable,
-		extractSentences,
-		replaceTokens,
-		revertSanitizedResponseContent,
-		sanitizeResponseContent
+		extractParagraphsForAudio,
+		extractSentencesForAudio,
+		cleanText,
+		getMessageContentParts
 	} from '$lib/utils';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
 	import Skeleton from './Skeleton.svelte';
-	import CodeBlock from './CodeBlock.svelte';
 	import Image from '$lib/components/common/Image.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import RateComment from './RateComment.svelte';
-	import CitationsModal from '$lib/components/chat/Messages/CitationsModal.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import WebSearchResults from './ResponseMessage/WebSearchResults.svelte';
 	import Sparkles from '$lib/components/icons/Sparkles.svelte';
-	import MarkdownTokens from './MarkdownTokens.svelte';
+	import Markdown from './Markdown.svelte';
+	import Error from './Error.svelte';
+	import Citations from './Citations.svelte';
 
-	export let message;
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
+
+	interface MessageType {
+		id: string;
+		model: string;
+		content: string;
+		files?: { type: string; url: string }[];
+		timestamp: number;
+		role: string;
+		statusHistory?: {
+			done: boolean;
+			action: string;
+			description: string;
+			urls?: string[];
+			query?: string;
+		}[];
+		status?: {
+			done: boolean;
+			action: string;
+			description: string;
+			urls?: string[];
+			query?: string;
+		};
+		done: boolean;
+		error?: boolean | { content: string };
+		citations?: string[];
+		info?: {
+			openai?: boolean;
+			prompt_tokens?: number;
+			completion_tokens?: number;
+			total_tokens?: number;
+			eval_count?: number;
+			eval_duration?: number;
+			prompt_eval_count?: number;
+			prompt_eval_duration?: number;
+			total_duration?: number;
+			load_duration?: number;
+		};
+		annotation?: { type: string; rating: number };
+	}
+
+	export let message: MessageType;
 	export let siblings;
 
 	export let isLastMessage = true;
@@ -59,53 +99,34 @@
 	let edit = false;
 	let editedContent = '';
 	let editTextAreaElement: HTMLTextAreaElement;
-	let tooltipInstance = null;
 
-	let sentencesAudio = {};
-	let speaking = null;
-	let speakingIdx = null;
+	let audioParts: Record<number, HTMLAudioElement | null> = {};
+	let speaking = false;
+	let speakingIdx: number | undefined;
 
 	let loadingSpeech = false;
 	let generatingImage = false;
 
 	let showRateComment = false;
-	let showCitationModal = false;
 
-	let selectedCitation = null;
-
-	let tokens;
-
-	import 'katex/dist/katex.min.css';
-
-	import markedKatex from '$lib/utils/katex-extension';
-
-	const options = {
-		throwOnError: false
-	};
-
-	marked.use(markedKatex(options));
-
-	$: (async () => {
-		if (message?.content) {
-			tokens = marked.lexer(
-				replaceTokens(sanitizeResponseContent(message?.content), model?.name, $user?.name)
-			);
-		}
-	})();
-
-	const playAudio = (idx) => {
-		return new Promise((res) => {
+	const playAudio = (idx: number) => {
+		return new Promise<void>((res) => {
 			speakingIdx = idx;
-			const audio = sentencesAudio[idx];
+			const audio = audioParts[idx];
+
+			if (!audio) {
+				return res();
+			}
+
 			audio.play();
-			audio.onended = async (e) => {
+			audio.onended = async () => {
 				await new Promise((r) => setTimeout(r, 300));
 
-				if (Object.keys(sentencesAudio).length - 1 === idx) {
-					speaking = null;
+				if (Object.keys(audioParts).length - 1 === idx) {
+					speaking = false;
 				}
 
-				res(e);
+				res();
 			};
 		});
 	};
@@ -115,113 +136,111 @@
 			try {
 				speechSynthesis.cancel();
 
-				sentencesAudio[speakingIdx].pause();
-				sentencesAudio[speakingIdx].currentTime = 0;
+				if (speakingIdx !== undefined && audioParts[speakingIdx]) {
+					audioParts[speakingIdx]!.pause();
+					audioParts[speakingIdx]!.currentTime = 0;
+				}
 			} catch {}
 
-			speaking = null;
-			speakingIdx = null;
-		} else {
-			if ((message?.content ?? '').trim() !== '') {
-				speaking = true;
+			speaking = false;
+			speakingIdx = undefined;
+			return;
+		}
 
-				if ($config.audio.tts.engine !== '') {
-					loadingSpeech = true;
+		if (!(message?.content ?? '').trim().length) {
+			toast.info($i18n.t('No content to speak'));
+			return;
+		}
 
-					const sentences = extractSentences(message.content).reduce((mergedTexts, currentText) => {
-						const lastIndex = mergedTexts.length - 1;
-						if (lastIndex >= 0) {
-							const previousText = mergedTexts[lastIndex];
-							const wordCount = previousText.split(/\s+/).length;
-							if (wordCount < 2) {
-								mergedTexts[lastIndex] = previousText + ' ' + currentText;
-							} else {
-								mergedTexts.push(currentText);
-							}
-						} else {
-							mergedTexts.push(currentText);
-						}
-						return mergedTexts;
-					}, []);
+		speaking = true;
 
-					console.log(sentences);
+		if ($config.audio.tts.engine !== '') {
+			loadingSpeech = true;
 
-					if (sentences.length > 0) {
-						sentencesAudio = sentences.reduce((a, e, i, arr) => {
-							a[i] = null;
-							return a;
-						}, {});
+			const messageContentParts: string[] = getMessageContentParts(
+				message.content,
+				$config?.audio?.tts?.split_on ?? 'punctuation'
+			);
 
-						let lastPlayedAudioPromise = Promise.resolve(); // Initialize a promise that resolves immediately
+			if (!messageContentParts.length) {
+				console.log('No content to speak');
+				toast.info($i18n.t('No content to speak'));
 
-						for (const [idx, sentence] of sentences.entries()) {
-							const res = await synthesizeOpenAISpeech(
-								localStorage.token,
-								$settings?.audio?.tts?.defaultVoice === $config.audio.tts.voice
-									? ($settings?.audio?.tts?.voice ?? $config?.audio?.tts?.voice)
-									: $config?.audio?.tts?.voice,
-								sentence
-							).catch((error) => {
-								toast.error(error);
-
-								speaking = null;
-								loadingSpeech = false;
-
-								return null;
-							});
-
-							if (res) {
-								const blob = await res.blob();
-								const blobUrl = URL.createObjectURL(blob);
-								const audio = new Audio(blobUrl);
-								sentencesAudio[idx] = audio;
-								loadingSpeech = false;
-								lastPlayedAudioPromise = lastPlayedAudioPromise.then(() => playAudio(idx));
-							}
-						}
-					} else {
-						speaking = null;
-						loadingSpeech = false;
-					}
-				} else {
-					let voices = [];
-					const getVoicesLoop = setInterval(async () => {
-						voices = await speechSynthesis.getVoices();
-						if (voices.length > 0) {
-							clearInterval(getVoicesLoop);
-
-							const voice =
-								voices
-									?.filter(
-										(v) =>
-											v.voiceURI === ($settings?.audio?.tts?.voice ?? $config?.audio?.tts?.voice)
-									)
-									?.at(0) ?? undefined;
-
-							console.log(voice);
-
-							const speak = new SpeechSynthesisUtterance(message.content);
-
-							console.log(speak);
-
-							speak.onend = () => {
-								speaking = null;
-								if ($settings.conversationMode) {
-									document.getElementById('voice-input-button')?.click();
-								}
-							};
-
-							if (voice) {
-								speak.voice = voice;
-							}
-
-							speechSynthesis.speak(speak);
-						}
-					}, 100);
-				}
-			} else {
-				toast.error($i18n.t('No content to speak'));
+				speaking = false;
+				loadingSpeech = false;
+				return;
 			}
+
+			console.debug('Prepared message content for TTS', messageContentParts);
+
+			audioParts = messageContentParts.reduce(
+				(acc, _sentence, idx) => {
+					acc[idx] = null;
+					return acc;
+				},
+				{} as typeof audioParts
+			);
+
+			let lastPlayedAudioPromise = Promise.resolve(); // Initialize a promise that resolves immediately
+
+			for (const [idx, sentence] of messageContentParts.entries()) {
+				const res = await synthesizeOpenAISpeech(
+					localStorage.token,
+					$settings?.audio?.tts?.defaultVoice === $config.audio.tts.voice
+						? ($settings?.audio?.tts?.voice ?? $config?.audio?.tts?.voice)
+						: $config?.audio?.tts?.voice,
+					sentence
+				).catch((error) => {
+					console.error(error);
+					toast.error(error);
+
+					speaking = false;
+					loadingSpeech = false;
+				});
+
+				if (res) {
+					const blob = await res.blob();
+					const blobUrl = URL.createObjectURL(blob);
+					const audio = new Audio(blobUrl);
+					audioParts[idx] = audio;
+					loadingSpeech = false;
+					lastPlayedAudioPromise = lastPlayedAudioPromise.then(() => playAudio(idx));
+				}
+			}
+		} else {
+			let voices = [];
+			const getVoicesLoop = setInterval(() => {
+				voices = speechSynthesis.getVoices();
+				if (voices.length > 0) {
+					clearInterval(getVoicesLoop);
+
+					const voice =
+						voices
+							?.filter(
+								(v) => v.voiceURI === ($settings?.audio?.tts?.voice ?? $config?.audio?.tts?.voice)
+							)
+							?.at(0) ?? undefined;
+
+					console.log(voice);
+
+					const speak = new SpeechSynthesisUtterance(message.content);
+
+					console.log(speak);
+
+					speak.onend = () => {
+						speaking = false;
+						if ($settings.conversationMode) {
+							document.getElementById('voice-input-button')?.click();
+						}
+					};
+
+					if (voice) {
+						speak.voice = voice;
+					}
+
+					speechSynthesis.speak(speak);
+				}
+			}, 100);
 		}
 	};
 
@@ -254,7 +273,7 @@
 		await tick();
 	};
 
-	const generateImage = async (message) => {
+	const generateImage = async (message: MessageType) => {
 		generatingImage = true;
 		const res = await imageGenerations(localStorage.token, message.content).catch((error) => {
 			toast.error(error);
@@ -284,8 +303,6 @@
 	});
 </script>
 
-<CitationsModal bind:show={showCitationModal} citation={selectedCitation} />
-
 {#key message.id}
 	<div
 		class=" flex w-full message-{message.id}"
@@ -303,7 +320,7 @@
 
 				{#if message.timestamp}
 					<span
-						class=" self-center invisible group-hover:visible text-gray-400 text-xs font-medium uppercase"
+						class=" self-center invisible group-hover:visible text-gray-400 text-xs font-medium uppercase ml-0.5 -mt-0.5"
 					>
 						{dayjs(message.timestamp * 1000).format($i18n.t('h:mm a'))}
 					</span>
@@ -311,7 +328,7 @@
 			</Name>
 
 			<div>
-				{#if (message?.files ?? []).filter((f) => f.type === 'image').length > 0}
+				{#if message?.files && message.files?.filter((f) => f.type === 'image').length > 0}
 					<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
 						{#each message.files as file}
 							<div>
@@ -323,16 +340,14 @@
 					</div>
 				{/if}
 
-				<div
-					class="prose chat-{message.role} w-full max-w-full 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"
-				>
+				<div class="chat-{message.role} w-full min-w-full markdown-prose">
 					<div>
 						{#if (message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]).length > 0}
 							{@const status = (
 								message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]
 							).at(-1)}
-							<div class="flex items-center gap-2 pt-0.5 pb-1">
-								{#if status.done === false}
+							<div class="status-description flex items-center gap-2 pt-0.5 pb-1">
+								{#if status?.done === false}
 									<div class="">
 										<Spinner className="size-4" />
 									</div>
@@ -341,14 +356,16 @@
 								{#if status?.action === 'web_search' && status?.urls}
 									<WebSearchResults {status}>
 										<div class="flex flex-col justify-center -space-y-0.5">
-											<div class="text-base line-clamp-1 text-wrap">
+											<div class="shimmer text-base line-clamp-1 text-wrap">
 												{status?.description}
 											</div>
 										</div>
 									</WebSearchResults>
 								{:else}
 									<div class="flex flex-col justify-center -space-y-0.5">
-										<div class=" text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap">
+										<div
+											class="shimmer text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap"
+										>
 											{status?.description}
 										</div>
 									</div>
@@ -410,82 +427,15 @@
 								{:else if message.content && message.error !== true}
 									<!-- always show message contents even if there's an error -->
 									<!-- unless message.error === true which is legacy error handling, where the error message is stored in message.content -->
-									{#key message.id}
-										<MarkdownTokens id={message.id} {tokens} />
-									{/key}
+									<Markdown id={message.id} content={message.content} {model} />
 								{/if}
 
 								{#if message.error}
-									<div
-										class="flex mt-2 mb-4 space-x-2 border px-4 py-3 border-red-800 bg-red-800/30 font-medium rounded-lg"
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											class="w-5 h-5 self-center"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
-											/>
-										</svg>
-
-										<div class=" self-center">
-											{message?.error?.content ?? message.content}
-										</div>
-									</div>
+									<Error content={message?.error?.content ?? message.content} />
 								{/if}
 
 								{#if message.citations}
-									<div class="mt-1 mb-2 w-full flex gap-1 items-center flex-wrap">
-										{#each message.citations.reduce((acc, citation) => {
-											citation.document.forEach((document, index) => {
-												const metadata = citation.metadata?.[index];
-												const id = metadata?.source ?? 'N/A';
-												let source = citation?.source;
-
-												if (metadata?.name) {
-													source = { ...source, name: metadata.name };
-												}
-
-												// Check if ID looks like a URL
-												if (id.startsWith('http://') || id.startsWith('https://')) {
-													source = { name: id };
-												}
-
-												const existingSource = acc.find((item) => item.id === id);
-
-												if (existingSource) {
-													existingSource.document.push(document);
-													existingSource.metadata.push(metadata);
-												} else {
-													acc.push( { id: id, source: source, document: [document], metadata: metadata ? [metadata] : [] } );
-												}
-											});
-											return acc;
-										}, []) as citation, idx}
-											<div class="flex gap-1 text-xs font-semibold">
-												<button
-													class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl"
-													on:click={() => {
-														showCitationModal = true;
-														selectedCitation = citation;
-													}}
-												>
-													<div class="bg-white dark:bg-gray-700 rounded-full size-4">
-														{idx + 1}
-													</div>
-													<div class="flex-1 mx-2 line-clamp-1">
-														{citation.source.name}
-													</div>
-												</button>
-											</div>
-										{/each}
-									</div>
+									<Citations citations={message.citations} />
 								{/if}
 							</div>
 						{/if}
@@ -495,7 +445,7 @@
 				{#if !edit}
 					{#if message.done || siblings.length > 1}
 						<div
-							class=" flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500"
+							class=" flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500 mt-0.5"
 						>
 							{#if siblings.length > 1}
 								<div class="flex self-center min-w-fit" dir="ltr">
@@ -553,31 +503,33 @@
 
 							{#if message.done}
 								{#if !readOnly}
-									<Tooltip content={$i18n.t('Edit')} placement="bottom">
-										<button
-											class="{isLastMessage
-												? 'visible'
-												: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
-											on:click={() => {
-												editMessageHandler();
-											}}
-										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke-width="2.3"
-												stroke="currentColor"
-												class="w-4 h-4"
+									{#if $user.role === 'user' ? ($config?.permissions?.chat?.editing ?? true) : true}
+										<Tooltip content={$i18n.t('Edit')} placement="bottom">
+											<button
+												class="{isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+												on:click={() => {
+													editMessageHandler();
+												}}
 											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
-												/>
-											</svg>
-										</button>
-									</Tooltip>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="2.3"
+													stroke="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+													/>
+												</svg>
+											</button>
+										</Tooltip>
+									{/if}
 								{/if}
 
 								<Tooltip content={$i18n.t('Copy')} placement="bottom">
@@ -614,7 +566,7 @@
 											: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
 										on:click={() => {
 											if (!loadingSpeech) {
-												toggleSpeakMessage(message);
+												toggleSpeakMessage();
 											}
 										}}
 									>
@@ -754,7 +706,7 @@
 													`${
 														Math.round(
 															((message.info.eval_count ?? 0) /
-																(message.info.eval_duration / 1000000000)) *
+																((message.info.eval_duration ?? 0) / 1000000000)) *
 																100
 														) / 100
 													} tokens` ?? 'N/A'
@@ -762,7 +714,7 @@
 					prompt_token/s: ${
 						Math.round(
 							((message.info.prompt_eval_count ?? 0) /
-								(message.info.prompt_eval_duration / 1000000000)) *
+								((message.info.prompt_eval_duration ?? 0) / 1000000000)) *
 								100
 						) / 100 ?? 'N/A'
 					} tokens<br/>
@@ -781,7 +733,7 @@
 		            eval_duration: ${
 									Math.round(((message.info.eval_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
 								}ms<br/>
-		            approximate_total: ${approximateToHumanReadable(message.info.total_duration)}`}
+		            approximate_total: ${approximateToHumanReadable(message.info.total_duration ?? 0)}`}
 										placement="top"
 									>
 										<Tooltip content={$i18n.t('Generation Info')} placement="bottom">
@@ -814,84 +766,130 @@
 								{/if}
 
 								{#if !readOnly}
-									<Tooltip content={$i18n.t('Good Response')} placement="bottom">
-										<button
-											class="{isLastMessage
-												? 'visible'
-												: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(message
-												?.annotation?.rating ?? null) === 1
-												? 'bg-gray-100 dark:bg-gray-800'
-												: ''} dark:hover:text-white hover:text-black transition"
-											on:click={() => {
-												rateMessage(message.id, 1);
-												showRateComment = true;
+									{#if $config?.features.enable_message_rating ?? true}
+										<Tooltip content={$i18n.t('Good Response')} placement="bottom">
+											<button
+												class="{isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(message
+													?.annotation?.rating ?? null) === 1
+													? 'bg-gray-100 dark:bg-gray-800'
+													: ''} dark:hover:text-white hover:text-black transition"
+												on:click={async () => {
+													await rateMessage(message.id, 1);
 
-												window.setTimeout(() => {
-													document
-														.getElementById(`message-feedback-${message.id}`)
-														?.scrollIntoView();
-												}, 0);
-											}}
-										>
-											<svg
-												stroke="currentColor"
-												fill="none"
-												stroke-width="2.3"
-												viewBox="0 0 24 24"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												class="w-4 h-4"
-												xmlns="http://www.w3.org/2000/svg"
-												><path
-													d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
-												/></svg
-											>
-										</button>
-									</Tooltip>
+													(model?.actions ?? [])
+														.filter((action) => action?.__webui__ ?? false)
+														.forEach((action) => {
+															dispatch('action', {
+																id: action.id,
+																event: {
+																	id: 'good-response',
+																	data: {
+																		messageId: message.id
+																	}
+																}
+															});
+														});
 
-									<Tooltip content={$i18n.t('Bad Response')} placement="bottom">
-										<button
-											class="{isLastMessage
-												? 'visible'
-												: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(message
-												?.annotation?.rating ?? null) === -1
-												? 'bg-gray-100 dark:bg-gray-800'
-												: ''} dark:hover:text-white hover:text-black transition"
-											on:click={() => {
-												rateMessage(message.id, -1);
-												showRateComment = true;
-												window.setTimeout(() => {
-													document
-														.getElementById(`message-feedback-${message.id}`)
-														?.scrollIntoView();
-												}, 0);
-											}}
-										>
-											<svg
-												stroke="currentColor"
-												fill="none"
-												stroke-width="2.3"
-												viewBox="0 0 24 24"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												class="w-4 h-4"
-												xmlns="http://www.w3.org/2000/svg"
-												><path
-													d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
-												/></svg
+													showRateComment = true;
+													window.setTimeout(() => {
+														document
+															.getElementById(`message-feedback-${message.id}`)
+															?.scrollIntoView();
+													}, 0);
+												}}
 											>
-										</button>
-									</Tooltip>
+												<svg
+													stroke="currentColor"
+													fill="none"
+													stroke-width="2.3"
+													viewBox="0 0 24 24"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													class="w-4 h-4"
+													xmlns="http://www.w3.org/2000/svg"
+													><path
+														d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
+													/></svg
+												>
+											</button>
+										</Tooltip>
+
+										<Tooltip content={$i18n.t('Bad Response')} placement="bottom">
+											<button
+												class="{isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(message
+													?.annotation?.rating ?? null) === -1
+													? 'bg-gray-100 dark:bg-gray-800'
+													: ''} dark:hover:text-white hover:text-black transition"
+												on:click={async () => {
+													await rateMessage(message.id, -1);
+
+													(model?.actions ?? [])
+														.filter((action) => action?.__webui__ ?? false)
+														.forEach((action) => {
+															dispatch('action', {
+																id: action.id,
+																event: {
+																	id: 'bad-response',
+																	data: {
+																		messageId: message.id
+																	}
+																}
+															});
+														});
+
+													showRateComment = true;
+													window.setTimeout(() => {
+														document
+															.getElementById(`message-feedback-${message.id}`)
+															?.scrollIntoView();
+													}, 0);
+												}}
+											>
+												<svg
+													stroke="currentColor"
+													fill="none"
+													stroke-width="2.3"
+													viewBox="0 0 24 24"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													class="w-4 h-4"
+													xmlns="http://www.w3.org/2000/svg"
+													><path
+														d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
+													/></svg
+												>
+											</button>
+										</Tooltip>
+									{/if}
 
 									{#if isLastMessage}
 										<Tooltip content={$i18n.t('Continue Response')} placement="bottom">
 											<button
 												type="button"
+												id="continue-response-button"
 												class="{isLastMessage
 													? 'visible'
 													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
 												on:click={() => {
 													continueGeneration();
+
+													(model?.actions ?? [])
+														.filter((action) => action?.__webui__ ?? false)
+														.forEach((action) => {
+															dispatch('action', {
+																id: action.id,
+																event: {
+																	id: 'continue-response',
+																	data: {
+																		messageId: message.id
+																	}
+																}
+															});
+														});
 												}}
 											>
 												<svg
@@ -925,6 +923,20 @@
 												on:click={() => {
 													showRateComment = false;
 													regenerateResponse(message);
+
+													(model?.actions ?? [])
+														.filter((action) => action?.__webui__ ?? false)
+														.forEach((action) => {
+															dispatch('action', {
+																id: action.id,
+																event: {
+																	id: 'regenerate-response',
+																	data: {
+																		messageId: message.id
+																	}
+																}
+															});
+														});
 												}}
 											>
 												<svg
@@ -944,7 +956,7 @@
 											</button>
 										</Tooltip>
 
-										{#each model?.actions ?? [] as action}
+										{#each (model?.actions ?? []).filter((action) => !(action?.__webui__ ?? false)) as action}
 											<Tooltip content={action.name} placement="bottom">
 												<button
 													type="button"
@@ -981,8 +993,24 @@
 							messageId={message.id}
 							bind:show={showRateComment}
 							bind:message
-							on:submit={() => {
+							on:submit={(e) => {
 								updateChatMessages();
+
+								(model?.actions ?? [])
+									.filter((action) => action?.__webui__ ?? false)
+									.forEach((action) => {
+										dispatch('action', {
+											id: action.id,
+											event: {
+												id: 'rate-comment',
+												data: {
+													messageId: message.id,
+													comment: e.detail.comment,
+													reason: e.detail.reason
+												}
+											}
+										});
+									});
 							}}
 						/>
 					{/if}
@@ -1001,4 +1029,47 @@
 		-ms-overflow-style: none; /* IE and Edge */
 		scrollbar-width: none; /* Firefox */
 	}
+	@keyframes shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	.shimmer {
+		background: linear-gradient(90deg, #9a9b9e 25%, #2a2929 50%, #9a9b9e 75%);
+		background-size: 200% 100%;
+		background-clip: text;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		animation: shimmer 4s linear infinite;
+		color: #818286; /* Fallback color */
+	}
+
+	:global(.dark) .shimmer {
+		background: linear-gradient(90deg, #818286 25%, #eae5e5 50%, #818286 75%);
+		background-size: 200% 100%;
+		background-clip: text;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		animation: shimmer 4s linear infinite;
+		color: #a1a3a7; /* Darker fallback color for dark mode */
+	}
+
+	@keyframes smoothFadeIn {
+		0% {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.status-description {
+		animation: smoothFadeIn 0.2s forwards;
+	}
 </style>

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

@@ -10,6 +10,10 @@
 	import { user as _user } from '$lib/stores';
 	import { getFileContentById } from '$lib/apis/files';
 	import FileItem from '$lib/components/common/FileItem.svelte';
+	import { marked } from 'marked';
+	import { processResponseContent, replaceTokens } from '$lib/utils';
+	import MarkdownTokens from './Markdown/MarkdownTokens.svelte';
+	import Markdown from './Markdown.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -41,8 +45,8 @@
 		messageEditTextAreaElement?.focus();
 	};
 
-	const editMessageConfirmHandler = async () => {
-		confirmEditMessage(message.id, editedContent);
+	const editMessageConfirmHandler = async (submit = true) => {
+		confirmEditMessage(message.id, editedContent, submit);
 
 		edit = false;
 		editedContent = '';
@@ -81,7 +85,7 @@
 
 					{#if message.timestamp}
 						<span
-							class=" invisible group-hover:visible text-gray-400 text-xs font-medium uppercase"
+							class=" invisible group-hover:visible text-gray-400 text-xs font-medium uppercase ml-0.5 -mt-0.5"
 						>
 							{dayjs(message.timestamp * 1000).format($i18n.t('h:mm a'))}
 						</span>
@@ -90,9 +94,7 @@
 			</div>
 		{/if}
 
-		<div
-			class="prose chat-{message.role} w-full max-w-full flex flex-col justify-end dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
-		>
+		<div class="chat-{message.role} w-full min-w-full markdown-prose">
 			{#if message.files}
 				<div class="mt-2.5 mb-1 w-full flex flex-col justify-end overflow-x-auto gap-1 flex-wrap">
 					{#each message.files as file}
@@ -133,44 +135,60 @@
 							const isEnterPressed = e.key === 'Enter';
 
 							if (isCmdOrCtrlPressed && isEnterPressed) {
-								document.getElementById('save-edit-message-button')?.click();
+								document.getElementById('confirm-edit-message-button')?.click();
 							}
 						}}
 					/>
 
-					<div class=" mt-2 mb-1 flex justify-end space-x-1.5 text-sm font-medium">
-						<button
-							id="close-edit-message-button"
-							class="px-4 py-2 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
-							on:click={() => {
-								cancelEditMessage();
-							}}
-						>
-							{$i18n.t('Cancel')}
-						</button>
+					<div class=" mt-2 mb-1 flex justify-between text-sm font-medium">
+						<div>
+							<button
+								id="save-edit-message-button"
+								class=" px-4 py-2 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:border-gray-700 text-gray-700 dark:text-gray-200 transition rounded-3xl"
+								on:click={() => {
+									editMessageConfirmHandler(false);
+								}}
+							>
+								{$i18n.t('Save')}
+							</button>
+						</div>
 
-						<button
-							id="save-edit-message-button"
-							class=" px-4 py-2 bg-gray-900 dark:bg-white hover:bg-gray-850 text-gray-100 dark:text-gray-800 transition rounded-3xl"
-							on:click={() => {
-								editMessageConfirmHandler();
-							}}
-						>
-							{$i18n.t('Send')}
-						</button>
+						<div class="flex space-x-1.5">
+							<button
+								id="close-edit-message-button"
+								class="px-4 py-2 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
+								on:click={() => {
+									cancelEditMessage();
+								}}
+							>
+								{$i18n.t('Cancel')}
+							</button>
+
+							<button
+								id="confirm-edit-message-button"
+								class=" px-4 py-2 bg-gray-900 dark:bg-white hover:bg-gray-850 text-gray-100 dark:text-gray-800 transition rounded-3xl"
+								on:click={() => {
+									editMessageConfirmHandler();
+								}}
+							>
+								{$i18n.t('Send')}
+							</button>
+						</div>
 					</div>
 				</div>
 			{:else}
 				<div class="w-full">
-					<div class="flex {($settings?.chatBubble ?? true) ? 'justify-end' : ''} mb-2">
+					<div class="flex {($settings?.chatBubble ?? true) ? 'justify-end pb-1' : 'w-full'}">
 						<div
 							class="rounded-3xl {($settings?.chatBubble ?? true)
 								? `max-w-[90%] px-5 py-2  bg-gray-50 dark:bg-gray-850 ${
 										message.files ? 'rounded-tr-lg' : ''
 									}`
-								: ''}  "
+								: ' w-full'}"
 						>
-							<pre id="user-message">{message.content}</pre>
+							{#if message.content}
+								<Markdown id={message.id} content={message.content} />
+							{/if}
 						</div>
 					</div>
 

src/lib/components/chat/ModelSelector.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { models, showSettings, settings, user, mobile } from '$lib/stores';
+	import { models, showSettings, settings, user, mobile, config } from '$lib/stores';
 	import { onMount, tick, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import Selector from './ModelSelector/Selector.svelte';
@@ -46,6 +46,9 @@
 							label: model.name,
 							model: model
 						}))}
+						showTemporaryChatControl={$user.role === 'user'
+							? ($config?.permissions?.chat?.temporary ?? true)
+							: true}
 						bind:value={selectedModel}
 					/>
 				</div>

src/lib/components/chat/ModelSelector/Selector.svelte

@@ -12,12 +12,15 @@
 
 	import { deleteModel, getOllamaVersion, pullModel } from '$lib/apis/ollama';
 
-	import { user, MODEL_DOWNLOAD_POOL, models, mobile } from '$lib/stores';
+	import { user, MODEL_DOWNLOAD_POOL, models, mobile, temporaryChatEnabled } from '$lib/stores';
 	import { toast } from 'svelte-sonner';
 	import { capitalizeFirstLetter, sanitizeResponseContent, splitStream } from '$lib/utils';
 	import { getModels } from '$lib/apis';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Switch from '$lib/components/common/Switch.svelte';
+	import ChatBubbleOval from '$lib/components/icons/ChatBubbleOval.svelte';
+	import { goto } from '$app/navigation';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
@@ -27,12 +30,15 @@
 	export let searchEnabled = true;
 	export let searchPlaceholder = $i18n.t('Search a model');
 
+	export let showTemporaryChatControl = false;
+
 	export let items: {
 		label: string;
 		value: string;
+		model: Model;
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		[key: string]: any;
-	} = [];
+	}[] = [];
 
 	export let className = 'w-[32rem]';
 
@@ -59,7 +65,8 @@
 				return _item;
 			}),
 		{
-			keys: ['value', 'label', 'tags', 'desc', 'modelName']
+			keys: ['value', 'tags', 'modelName'],
+			threshold: 0.3
 		}
 	);
 
@@ -513,6 +520,43 @@
 				{/each}
 			</div>
 
+			{#if showTemporaryChatControl}
+				<hr class="border-gray-100 dark:border-gray-800" />
+
+				<div class="flex items-center mx-2 my-2">
+					<button
+						class="flex justify-between w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 px-3 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-[highlighted]:bg-muted"
+						on:click={async () => {
+							temporaryChatEnabled.set(!$temporaryChatEnabled);
+							await goto('/');
+							const newChatButton = document.getElementById('new-chat-button');
+							setTimeout(() => {
+								newChatButton?.click();
+							}, 0);
+
+							// add 'temporary-chat=true' to the URL
+							if ($temporaryChatEnabled) {
+								history.replaceState(null, '', '?temporary-chat=true');
+							} else {
+								history.replaceState(null, '', location.pathname);
+							}
+
+							show = false;
+						}}
+					>
+						<div class="flex gap-2.5 items-center">
+							<ChatBubbleOval className="size-4" strokeWidth="2.5" />
+
+							{$i18n.t(`Temporary Chat`)}
+						</div>
+
+						<div>
+							<Switch state={$temporaryChatEnabled} />
+						</div>
+					</button>
+				</div>
+			{/if}
+
 			<div class="hidden w-[42rem]" />
 			<div class="hidden w-[32rem]" />
 		</slot>

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

@@ -20,8 +20,8 @@
 	const i18n = getContext('i18n');
 
 	export let saveSettings: Function;
+
 	// Chats
-	let saveChatHistory = true;
 	let importFiles;
 
 	let showArchiveConfirm = false;
@@ -95,82 +95,10 @@
 		await chats.set(await getChatList(localStorage.token, $currentChatPage));
 		scrollPaginationEnabled.set(true);
 	};
-
-	const toggleSaveChatHistory = async () => {
-		saveChatHistory = !saveChatHistory;
-		console.log(saveChatHistory);
-
-		if (saveChatHistory === false) {
-			await goto('/');
-		}
-		saveSettings({ saveChatHistory: saveChatHistory });
-	};
-
-	onMount(async () => {
-		saveChatHistory = $settings.saveChatHistory ?? true;
-	});
 </script>
 
 <div class="flex flex-col h-full justify-between space-y-3 text-sm max-h-[22rem]">
 	<div class=" space-y-2">
-		<div
-			class="flex flex-col justify-between rounded-md items-center py-2 px-3.5 w-full transition"
-		>
-			<div class="flex w-full justify-between">
-				<div class=" self-center text-sm font-medium">{$i18n.t('Chat History')}</div>
-
-				<button
-					class="p-1 px-3 text-xs flex rounded transition"
-					type="button"
-					on:click={() => {
-						toggleSaveChatHistory();
-					}}
-				>
-					{#if saveChatHistory === true}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
-							<path
-								fill-rule="evenodd"
-								d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-
-						<span class="ml-2 self-center"> {$i18n.t('On')} </span>
-					{:else}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
-								clip-rule="evenodd"
-							/>
-							<path
-								d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
-							/>
-						</svg>
-
-						<span class="ml-2 self-center">{$i18n.t('Off')}</span>
-					{/if}
-				</button>
-			</div>
-
-			<div class="text-xs text-left w-full font-medium mt-0.5">
-				{$i18n.t('This setting does not sync across browsers or devices.')}
-			</div>
-		</div>
-
-		<hr class=" dark:border-gray-850" />
-
 		<div class="flex flex-col">
 			<input
 				id="chat-import-input"

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

@@ -17,7 +17,7 @@
 	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light', 'oled-dark'];
 	let selectedTheme = 'system';
 
-	let languages = [];
+	let languages: Awaited<ReturnType<typeof getLanguages>> = [];
 	let lang = $i18n.language;
 	let notificationEnabled = false;
 	let system = '';
@@ -41,7 +41,7 @@
 
 	// Advanced
 	let requestFormat = '';
-	let keepAlive = null;
+	let keepAlive: string | null = null;
 
 	let params = {
 		// Advanced
@@ -59,7 +59,8 @@
 		num_ctx: null,
 		num_batch: null,
 		num_keep: null,
-		max_tokens: null
+		max_tokens: null,
+		num_gpu: null
 	};
 
 	const toggleRequestFormat = async () => {
@@ -321,7 +322,8 @@
 						max_tokens: params.max_tokens !== null ? params.max_tokens : undefined,
 						use_mmap: params.use_mmap !== null ? params.use_mmap : undefined,
 						use_mlock: params.use_mlock !== null ? params.use_mlock : undefined,
-						num_thread: params.num_thread !== null ? params.num_thread : undefined
+						num_thread: params.num_thread !== null ? params.num_thread : undefined,
+						num_gpu: params.num_gpu !== null ? params.num_gpu : undefined
 					},
 					keepAlive: keepAlive ? (isNaN(keepAlive) ? keepAlive : parseInt(keepAlive)) : undefined
 				});

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

@@ -31,7 +31,7 @@
 	let ollamaEnabled = null;
 
 	let OLLAMA_URLS = [];
-	let selectedOllamaUrlIdx: string | null = null;
+	let selectedOllamaUrlIdx: number | null = null;
 
 	let updateModelId = null;
 	let updateProgress = null;

src/lib/components/chat/SettingsModal.svelte

@@ -94,7 +94,7 @@
 				class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 dark:text-gray-200 text-xs text-left mb-3 md:mb-0"
 			>
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'general'
 						? 'bg-gray-200 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
@@ -120,7 +120,7 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'interface'
 						? 'bg-gray-200 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
@@ -146,7 +146,7 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'personalization'
 						? 'bg-gray-200 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
@@ -161,7 +161,7 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'audio'
 						? 'bg-gray-200 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
@@ -188,7 +188,7 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'chats'
 						? 'bg-gray-200 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
@@ -214,7 +214,7 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'account'
 						? 'bg-gray-200 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
@@ -241,7 +241,7 @@
 
 				{#if $user.role === 'admin'}
 					<button
-						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 						'admin'
 							? 'bg-gray-200 dark:bg-gray-800'
 							: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
@@ -269,7 +269,7 @@
 				{/if}
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'about'
 						? 'bg-gray-200 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"

src/lib/components/common/Image.svelte

@@ -5,7 +5,7 @@
 	export let src = '';
 	export let alt = '';
 
-	export let className = '';
+	export let className = ' w-full';
 
 	let _src = '';
 	$: _src = src.startsWith('/') ? `${WEBUI_BASE_URL}${src}` : src;

src/lib/components/common/ImagePreview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 
 	export let show = false;
 	export let src = '';
@@ -45,6 +45,14 @@
 		document.body.removeChild(previewElement);
 		document.body.style.overflow = 'unset';
 	}
+
+	onDestroy(() => {
+		show = false;
+
+		if (previewElement) {
+			document.body.removeChild(previewElement);
+		}
+	});
 </script>
 
 {#if show}

src/lib/components/common/Modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 
 	import { flyAndScale } from '$lib/utils/transitions';
@@ -47,6 +47,13 @@
 		document.body.removeChild(modalElement);
 		document.body.style.overflow = 'unset';
 	}
+
+	onDestroy(() => {
+		show = false;
+		if (modalElement) {
+			document.body.removeChild(modalElement);
+		}
+	});
 </script>
 
 {#if show}

src/lib/components/common/Tags/TagInput.svelte

@@ -27,7 +27,7 @@
 		<div class="flex items-center">
 			<input
 				bind:value={tagName}
-				class=" px-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[5.5rem]"
+				class=" px-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[6.5rem]"
 				placeholder={$i18n.t('Add a tag')}
 				list="tagOptions"
 				on:keydown={(event) => {

src/lib/components/documents/Settings/ChunkParams.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-	import { getDocs } from '$lib/apis/documents';
-	import {
-		getRAGConfig,
-		updateRAGConfig,
-		getQuerySettings,
-		scanDocs,
-		updateQuerySettings,
-		resetVectorDB,
-		getEmbeddingConfig,
-		updateEmbeddingConfig,
-		getRerankingConfig,
-		updateRerankingConfig
-	} from '$lib/apis/rag';
-
-	import { documents, models } from '$lib/stores';
-	import { onMount, getContext } from 'svelte';
-	import { toast } from 'svelte-sonner';
-
-	import Tooltip from '$lib/components/common/Tooltip.svelte';
-
-	const i18n = getContext('i18n');
-
-	export let saveHandler: Function;
-
-	let scanDirLoading = false;
-	let updateEmbeddingModelLoading = false;
-	let updateRerankingModelLoading = false;
-
-	let showResetConfirm = false;
-
-	let chunkSize = 0;
-	let chunkOverlap = 0;
-	let pdfExtractImages = true;
-
-	const submitHandler = async () => {
-		const res = await updateRAGConfig(localStorage.token, {
-			pdf_extract_images: pdfExtractImages,
-			chunk: {
-				chunk_overlap: chunkOverlap,
-				chunk_size: chunkSize
-			}
-		});
-	};
-
-	onMount(async () => {
-		const res = await getRAGConfig(localStorage.token);
-
-		if (res) {
-			pdfExtractImages = res.pdf_extract_images;
-
-			chunkSize = res.chunk.chunk_size;
-			chunkOverlap = res.chunk.chunk_overlap;
-		}
-	});
-</script>
-
-<form
-	class="flex flex-col h-full justify-between space-y-3 text-sm"
-	on:submit|preventDefault={() => {
-		submitHandler();
-		saveHandler();
-	}}
->
-	<div class=" space-y-3 pr-1.5 overflow-y-scroll h-full max-h-[22rem]">
-		<div class=" ">
-			<div class=" text-sm font-medium">{$i18n.t('Chunk Params')}</div>
-
-			<div class=" flex">
-				<div class="  flex w-full justify-between">
-					<div class="self-center text-xs font-medium min-w-fit">{$i18n.t('Chunk Size')}</div>
-
-					<div class="self-center p-3">
-						<input
-							class=" w-full rounded-lg py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-							type="number"
-							placeholder={$i18n.t('Enter Chunk Size')}
-							bind:value={chunkSize}
-							autocomplete="off"
-							min="0"
-						/>
-					</div>
-				</div>
-
-				<div class="flex w-full">
-					<div class=" self-center text-xs font-medium min-w-fit">
-						{$i18n.t('Chunk Overlap')}
-					</div>
-
-					<div class="self-center p-3">
-						<input
-							class="w-full rounded-lg py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-							type="number"
-							placeholder={$i18n.t('Enter Chunk Overlap')}
-							bind:value={chunkOverlap}
-							autocomplete="off"
-							min="0"
-						/>
-					</div>
-				</div>
-			</div>
-
-			<div class="pr-2">
-				<div class="flex justify-between items-center text-xs">
-					<div class=" text-xs font-medium">{$i18n.t('PDF Extract Images (OCR)')}</div>
-
-					<button
-						class=" text-xs font-medium text-gray-500"
-						type="button"
-						on:click={() => {
-							pdfExtractImages = !pdfExtractImages;
-						}}>{pdfExtractImages ? $i18n.t('On') : $i18n.t('Off')}</button
-					>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="flex justify-end pt-3 text-sm font-medium">
-		<button
-			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
-			type="submit"
-		>
-			{$i18n.t('Save')}
-		</button>
-	</div>
-</form>

src/lib/components/documents/Settings/QueryParams.svelte

@@ -1,119 +0,0 @@
-<script lang="ts">
-	import { getDocs } from '$lib/apis/documents';
-	import {
-		getRAGConfig,
-		updateRAGConfig,
-		getQuerySettings,
-		scanDocs,
-		updateQuerySettings,
-		resetVectorDB,
-		getEmbeddingConfig,
-		updateEmbeddingConfig,
-		getRerankingConfig,
-		updateRerankingConfig
-	} from '$lib/apis/rag';
-
-	import { documents, models } from '$lib/stores';
-	import { onMount, getContext } from 'svelte';
-	import { toast } from 'svelte-sonner';
-
-	import Tooltip from '$lib/components/common/Tooltip.svelte';
-
-	const i18n = getContext('i18n');
-
-	export let saveHandler: Function;
-
-	let querySettings = {
-		template: '',
-		r: 0.0,
-		k: 4,
-		hybrid: false
-	};
-
-	const submitHandler = async () => {
-		querySettings = await updateQuerySettings(localStorage.token, querySettings);
-	};
-
-	onMount(async () => {
-		querySettings = await getQuerySettings(localStorage.token);
-	});
-</script>
-
-<form
-	class="flex flex-col h-full justify-between space-y-3 text-sm"
-	on:submit|preventDefault={() => {
-		submitHandler();
-		saveHandler();
-	}}
->
-	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[25rem]">
-		<div class=" ">
-			<div class=" text-sm font-medium">{$i18n.t('Query Params')}</div>
-
-			<div class=" flex">
-				<div class="  flex w-full justify-between">
-					<div class="self-center text-xs font-medium min-w-fit">{$i18n.t('Top K')}</div>
-
-					<div class="self-center p-3">
-						<input
-							class=" w-full rounded-lg py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-							type="number"
-							placeholder={$i18n.t('Enter Top K')}
-							bind:value={querySettings.k}
-							autocomplete="off"
-							min="0"
-						/>
-					</div>
-				</div>
-
-				{#if querySettings.hybrid === true}
-					<div class="flex w-full">
-						<div class=" self-center text-xs font-medium min-w-fit">
-							{$i18n.t('Minimum Score')}
-						</div>
-
-						<div class="self-center p-3">
-							<input
-								class=" w-full rounded-lg py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-								type="number"
-								step="0.01"
-								placeholder={$i18n.t('Enter Score')}
-								bind:value={querySettings.r}
-								autocomplete="off"
-								min="0.0"
-								title={$i18n.t('The score should be a value between 0.0 (0%) and 1.0 (100%).')}
-							/>
-						</div>
-					</div>
-				{/if}
-			</div>
-
-			{#if querySettings.hybrid === true}
-				<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
-					{$i18n.t(
-						'Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.'
-					)}
-				</div>
-
-				<hr class=" dark:border-gray-850 my-3" />
-			{/if}
-
-			<div>
-				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('RAG Template')}</div>
-				<textarea
-					bind:value={querySettings.template}
-					class="w-full rounded-lg px-4 py-3 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none resize-none"
-					rows="4"
-				/>
-			</div>
-		</div>
-	</div>
-	<div class="flex justify-end pt-3 text-sm font-medium">
-		<button
-			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
-			type="submit"
-		>
-			{$i18n.t('Save')}
-		</button>
-	</div>
-</form>

src/lib/components/documents/Settings/WebParams.svelte

@@ -1,285 +0,0 @@
-<script lang="ts">
-	import { getRAGConfig, updateRAGConfig } from '$lib/apis/rag';
-	import Switch from '$lib/components/common/Switch.svelte';
-
-	import { documents, models } from '$lib/stores';
-	import { onMount, getContext } from 'svelte';
-	import { toast } from 'svelte-sonner';
-
-	const i18n = getContext('i18n');
-
-	export let saveHandler: Function;
-
-	let webConfig = null;
-	let webSearchEngines = ['searxng', 'google_pse', 'brave', 'serpstack', 'serper', 'serply'];
-
-	let youtubeLanguage = 'en';
-	let youtubeTranslation = null;
-
-	const submitHandler = async () => {
-		const res = await updateRAGConfig(localStorage.token, {
-			web: webConfig,
-			youtube: {
-				language: youtubeLanguage.split(',').map((lang) => lang.trim()),
-				translation: youtubeTranslation
-			}
-		});
-	};
-
-	onMount(async () => {
-		const res = await getRAGConfig(localStorage.token);
-
-		if (res) {
-			webConfig = res.web;
-
-			youtubeLanguage = res.youtube.language.join(',');
-			youtubeTranslation = res.youtube.translation;
-		}
-	});
-</script>
-
-<form
-	class="flex flex-col h-full justify-between space-y-3 text-sm"
-	on:submit|preventDefault={async () => {
-		await submitHandler();
-		saveHandler();
-	}}
->
-	<div class=" space-y-3 pr-1.5 overflow-y-scroll h-full max-h-[22rem]">
-		{#if webConfig}
-			<div>
-				<div class=" mb-1 text-sm font-medium">
-					{$i18n.t('Web Search')}
-				</div>
-
-				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div class=" self-center text-xs font-medium">
-							{$i18n.t('Enable Web Search')}
-						</div>
-
-						<Switch bind:state={webConfig.search.enabled} />
-					</div>
-				</div>
-
-				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">{$i18n.t('Web Search Engine')}</div>
-					<div class="flex items-center relative">
-						<select
-							class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
-							bind:value={webConfig.search.engine}
-							placeholder={$i18n.t('Select a engine')}
-							required
-						>
-							<option disabled selected value="">{$i18n.t('Select a engine')}</option>
-							{#each webSearchEngines as engine}
-								<option value={engine}>{engine}</option>
-							{/each}
-						</select>
-					</div>
-				</div>
-
-				{#if webConfig.search.engine !== ''}
-					<div class="mt-1.5">
-						{#if webConfig.search.engine === 'searxng'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Searxng Query URL')}
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
-											placeholder={$i18n.t('Enter Searxng Query URL')}
-											bind:value={webConfig.search.searxng_query_url}
-											autocomplete="off"
-										/>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.search.engine === 'google_pse'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Google PSE API Key')}
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
-											placeholder={$i18n.t('Enter Google PSE API Key')}
-											bind:value={webConfig.search.google_pse_api_key}
-											autocomplete="off"
-										/>
-									</div>
-								</div>
-							</div>
-							<div class="mt-1.5">
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Google PSE Engine Id')}
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
-											placeholder={$i18n.t('Enter Google PSE Engine Id')}
-											bind:value={webConfig.search.google_pse_engine_id}
-											autocomplete="off"
-										/>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.search.engine === 'brave'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Brave Search API Key')}
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
-											placeholder={$i18n.t('Enter Brave Search API Key')}
-											bind:value={webConfig.search.brave_search_api_key}
-											autocomplete="off"
-										/>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.search.engine === 'serpstack'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Serpstack API Key')}
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
-											placeholder={$i18n.t('Enter Serpstack API Key')}
-											bind:value={webConfig.search.serpstack_api_key}
-											autocomplete="off"
-										/>
-									</div>
-								</div>
-							</div>
-						{:else if webConfig.search.engine === 'serper'}
-							<div>
-								<div class=" self-center text-xs font-medium mb-1">
-									{$i18n.t('Serper API Key')}
-								</div>
-
-								<div class="flex w-full">
-									<div class="flex-1">
-										<input
-											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-											type="text"
-											placeholder={$i18n.t('Enter Serper API Key')}
-											bind:value={webConfig.search.serper_api_key}
-											autocomplete="off"
-										/>
-									</div>
-								</div>
-							</div>
-						{/if}
-					</div>
-				{/if}
-
-				{#if webConfig.search.enabled}
-					<div class="mt-2 flex gap-2 mb-1">
-						<div class="w-full">
-							<div class=" self-center text-xs font-medium mb-1">
-								{$i18n.t('Search Result Count')}
-							</div>
-
-							<input
-								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-								placeholder={$i18n.t('Search Result Count')}
-								bind:value={webConfig.search.result_count}
-								required
-							/>
-						</div>
-
-						<div class="w-full">
-							<div class=" self-center text-xs font-medium mb-1">
-								{$i18n.t('Concurrent Requests')}
-							</div>
-
-							<input
-								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-								placeholder={$i18n.t('Concurrent Requests')}
-								bind:value={webConfig.search.concurrent_requests}
-								required
-							/>
-						</div>
-					</div>
-				{/if}
-			</div>
-
-			<hr class=" dark:border-gray-850 my-2" />
-
-			<div>
-				<div class=" mb-1 text-sm font-medium">
-					{$i18n.t('Web Loader Settings')}
-				</div>
-
-				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div class=" self-center text-xs font-medium">
-							{$i18n.t('Bypass SSL verification for Websites')}
-						</div>
-
-						<button
-							class="p-1 px-3 text-xs flex rounded transition"
-							on:click={() => {
-								webConfig.ssl_verification = !webConfig.ssl_verification;
-								submitHandler();
-							}}
-							type="button"
-						>
-							{#if webConfig.ssl_verification === true}
-								<span class="ml-2 self-center">{$i18n.t('On')}</span>
-							{:else}
-								<span class="ml-2 self-center">{$i18n.t('Off')}</span>
-							{/if}
-						</button>
-					</div>
-				</div>
-
-				<div class=" mt-2 mb-1 text-sm font-medium">
-					{$i18n.t('Youtube Loader Settings')}
-				</div>
-
-				<div>
-					<div class=" py-0.5 flex w-full justify-between">
-						<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Language')}</div>
-						<div class=" flex-1 self-center">
-							<input
-								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-								type="text"
-								placeholder={$i18n.t('Enter language codes')}
-								bind:value={youtubeLanguage}
-								autocomplete="off"
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
-		{/if}
-	</div>
-	<div class="flex justify-end pt-3 text-sm font-medium">
-		<button
-			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
-			type="submit"
-		>
-			{$i18n.t('Save')}
-		</button>
-	</div>
-</form>