up to 0.3.35

CHANGELOG.md

@@ -5,6 +5,40 @@ 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.35] - 2024-10-26
+
+### Added
+
+- **📁 Robust File Handling**: Enhanced file input handling for chat. If the content extraction fails or is empty, users will now receive a clear warning, preventing silent failures and ensuring you always know what's happening with your uploads.
+- **🌍 New Language Support**: Introduced Hungarian translations and updated French translations, expanding the platform's language accessibility for a more global user base.
+
+### Fixed
+
+- **📚 Knowledge Base Loading Issue**: Resolved a critical bug where the Knowledge Base was not loading, ensuring smooth access to your stored documents and improving information retrieval in RAG-enhanced workflows.
+- **🛠️ Tool Parameters Issue**: Fixed an error where tools were not functioning correctly when required parameters were missing, ensuring reliable tool performance and more efficient task completions.
+- **🔗 Merged Response Loss in Multi-Model Chats**: Addressed an issue where responses in multi-model chat workflows were being deleted after follow-up queries, improving consistency and ensuring smoother interactions across models.
+
+## [0.3.34] - 2024-10-26
+
+### Added
+
+- **🔧 Feedback Export Enhancements**: Feedback history data can now be exported to JSON, allowing for seamless integration in RLHF processing and further analysis.
+- **🗂️ Embedding Model Lazy Loading**: Search functionality for leaderboard reranking is now more efficient, as embedding models are lazy-loaded only when needed, optimizing performance.
+- **🎨 Rich Text Input Toggle**: Users can now switch back to legacy textarea input for chat if they prefer simpler text input, though rich text is still the default until deprecation.
+- **🛠️ Improved Tool Calling Mechanism**: Enhanced method for parsing and calling tools, improving the reliability and robustness of tool function calls.
+- **🌐 Globalization Enhancements**: Updates to internationalization (i18n) support, further refining multi-language compatibility and accuracy.
+
+### Fixed
+
+- **🖥️ Folder Rename Fix for Firefox**: Addressed a persistent issue where users could not rename folders by pressing enter in Firefox, now ensuring seamless folder management across browsers.
+- **🔠 Tiktoken Model Text Splitter Issue**: Resolved an issue where the tiktoken text splitter wasn’t working in Docker installations, restoring full functionality for tokenized text editing.
+- **💼 S3 File Upload Issue**: Fixed a problem affecting S3 file uploads, ensuring smooth operations for those who store files on cloud storage.
+- **🔒 Strict-Transport-Security Crash**: Resolved a crash when setting the Strict-Transport-Security (HSTS) header, improving stability and security enhancements.
+- **🚫 OIDC Boolean Access Fix**: Addressed an issue with boolean values not being accessed correctly during OIDC logins, ensuring login reliability.
+- **⚙️ Rich Text Paste Behavior**: Refined paste behavior in rich text input to make it smoother and more intuitive when pasting various content types.
+- **🔨 Model Exclusion for Arena Fix**: Corrected the filter function that was not properly excluding models from the arena, improving model management.
+- **🏷️ "Tags Generation Prompt" Fix**: Addressed an issue preventing custom "tags generation prompts" from registering properly, ensuring custom prompt work seamlessly.
+
 ## [0.3.33] - 2024-10-24
 
 ### Added

Dockerfile

@@ -77,7 +77,7 @@ ENV RAG_EMBEDDING_MODEL="$USE_EMBEDDING_MODEL_DOCKER" \
     SENTENCE_TRANSFORMERS_HOME="/app/backend/data/cache/embedding/models"
 
 ## Tiktoken model settings ##
-ENV TIKTOKEN_ENCODING_NAME="$USE_TIKTOKEN_ENCODING_NAME" \
+ENV TIKTOKEN_ENCODING_NAME="cl100k_base" \
     TIKTOKEN_CACHE_DIR="/app/backend/data/cache/tiktoken"
 
 ## Hugging Face download cache ##

backend/open_webui/apps/audio/main.py

@@ -522,7 +522,8 @@ def transcription(
             else:
                 data = transcribe(file_path)
 
-            return data
+            file_path = file_path.split("/")[-1]
+            return {**data, "filename": file_path}
         except Exception as e:
             log.exception(e)
             raise HTTPException(

backend/open_webui/apps/ollama/main.py

@@ -692,7 +692,7 @@ class GenerateCompletionForm(BaseModel):
     options: Optional[dict] = None
     system: Optional[str] = None
     template: Optional[str] = None
-    context: Optional[str] = None
+    context: Optional[list[int]] = None
     stream: Optional[bool] = True
     raw: Optional[bool] = None
     keep_alive: Optional[Union[int, str]] = None
@@ -739,7 +739,7 @@ class GenerateChatCompletionForm(BaseModel):
     format: Optional[str] = None
     options: Optional[dict] = None
     template: Optional[str] = None
-    stream: Optional[bool] = None
+    stream: Optional[bool] = True
     keep_alive: Optional[Union[int, str]] = None
 
 

backend/open_webui/apps/retrieval/main.py

@@ -14,6 +14,7 @@ from typing import Iterator, Optional, Sequence, Union
 from fastapi import Depends, FastAPI, File, Form, HTTPException, UploadFile, status
 from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel
+import tiktoken
 
 
 from open_webui.storage.provider import Storage
@@ -666,8 +667,13 @@ def save_docs_to_vector_db(
                 add_start_index=True,
             )
         elif app.state.config.TEXT_SPLITTER == "token":
+            log.info(
+                f"Using token text splitter: {app.state.config.TIKTOKEN_ENCODING_NAME}"
+            )
+
+            tiktoken.get_encoding(str(app.state.config.TIKTOKEN_ENCODING_NAME))
             text_splitter = TokenTextSplitter(
-                encoding_name=app.state.config.TIKTOKEN_ENCODING_NAME,
+                encoding_name=str(app.state.config.TIKTOKEN_ENCODING_NAME),
                 chunk_size=app.state.config.CHUNK_SIZE,
                 chunk_overlap=app.state.config.CHUNK_OVERLAP,
                 add_start_index=True,

backend/open_webui/apps/retrieval/vector/dbs/chroma.py

@@ -13,11 +13,22 @@ from open_webui.config import (
     CHROMA_HTTP_SSL,
     CHROMA_TENANT,
     CHROMA_DATABASE,
+    CHROMA_CLIENT_AUTH_PROVIDER,
+    CHROMA_CLIENT_AUTH_CREDENTIALS,
 )
 
 
 class ChromaClient:
     def __init__(self):
+        settings_dict = {
+            "allow_reset": True,
+            "anonymized_telemetry": False,
+        }
+        if CHROMA_CLIENT_AUTH_PROVIDER is not None:
+            settings_dict["chroma_client_auth_provider"] = CHROMA_CLIENT_AUTH_PROVIDER
+        if CHROMA_CLIENT_AUTH_CREDENTIALS is not None:
+            settings_dict["chroma_client_auth_credentials"] = CHROMA_CLIENT_AUTH_CREDENTIALS
+
         if CHROMA_HTTP_HOST != "":
             self.client = chromadb.HttpClient(
                 host=CHROMA_HTTP_HOST,
@@ -26,12 +37,12 @@ class ChromaClient:
                 ssl=CHROMA_HTTP_SSL,
                 tenant=CHROMA_TENANT,
                 database=CHROMA_DATABASE,
-                settings=Settings(allow_reset=True, anonymized_telemetry=False),
+                settings=Settings(**settings_dict),
             )
         else:
             self.client = chromadb.PersistentClient(
                 path=CHROMA_DATA_PATH,
-                settings=Settings(allow_reset=True, anonymized_telemetry=False),
+                settings=Settings(**settings_dict),
                 tenant=CHROMA_TENANT,
                 database=CHROMA_DATABASE,
             )

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

@@ -73,6 +73,8 @@ class FileModelResponse(BaseModel):
     created_at: int  # timestamp in epoch
     updated_at: int  # timestamp in epoch
 
+    model_config = ConfigDict(extra="allow")
+
 
 class FileMetadataResponse(BaseModel):
     id: str

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

@@ -5,6 +5,7 @@ from pydantic import BaseModel
 from open_webui.apps.webui.models.users import Users, UserModel
 from open_webui.apps.webui.models.feedbacks import (
     FeedbackModel,
+    FeedbackResponse,
     FeedbackForm,
     Feedbacks,
 )
@@ -55,27 +56,15 @@ async def update_config(
     }
 
 
-@router.get("/feedbacks", response_model=list[FeedbackModel])
-async def get_feedbacks(user=Depends(get_verified_user)):
-    feedbacks = Feedbacks.get_feedbacks_by_user_id(user.id)
-    return feedbacks
-
-
-@router.delete("/feedbacks", response_model=bool)
-async def delete_feedbacks(user=Depends(get_verified_user)):
-    success = Feedbacks.delete_feedbacks_by_user_id(user.id)
-    return success
-
-
-class FeedbackUserModel(FeedbackModel):
+class FeedbackUserResponse(FeedbackResponse):
     user: Optional[UserModel] = None
 
 
-@router.get("/feedbacks/all", response_model=list[FeedbackUserModel])
+@router.get("/feedbacks/all", response_model=list[FeedbackUserResponse])
 async def get_all_feedbacks(user=Depends(get_admin_user)):
     feedbacks = Feedbacks.get_all_feedbacks()
     return [
-        FeedbackUserModel(
+        FeedbackUserResponse(
             **feedback.model_dump(), user=Users.get_user_by_id(feedback.user_id)
         )
         for feedback in feedbacks
@@ -88,6 +77,29 @@ async def delete_all_feedbacks(user=Depends(get_admin_user)):
     return success
 
 
+@router.get("/feedbacks/all/export", response_model=list[FeedbackModel])
+async def get_all_feedbacks(user=Depends(get_admin_user)):
+    feedbacks = Feedbacks.get_all_feedbacks()
+    return [
+        FeedbackModel(
+            **feedback.model_dump(), user=Users.get_user_by_id(feedback.user_id)
+        )
+        for feedback in feedbacks
+    ]
+
+
+@router.get("/feedbacks/user", response_model=list[FeedbackUserResponse])
+async def get_feedbacks(user=Depends(get_verified_user)):
+    feedbacks = Feedbacks.get_feedbacks_by_user_id(user.id)
+    return feedbacks
+
+
+@router.delete("/feedbacks", response_model=bool)
+async def delete_feedbacks(user=Depends(get_verified_user)):
+    success = Feedbacks.delete_feedbacks_by_user_id(user.id)
+    return success
+
+
 @router.post("/feedback", response_model=FeedbackModel)
 async def create_feedback(
     request: Request,

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

@@ -38,7 +38,7 @@ router = APIRouter()
 ############################
 
 
-@router.post("/")
+@router.post("/", response_model=FileModelResponse)
 def upload_file(file: UploadFile = File(...), user=Depends(get_verified_user)):
     log.info(f"file.content_type: {file.content_type}")
     try:
@@ -73,6 +73,12 @@ def upload_file(file: UploadFile = File(...), user=Depends(get_verified_user)):
         except Exception as e:
             log.exception(e)
             log.error(f"Error processing file: {file_item.id}")
+            file_item = FileModelResponse(
+                **{
+                    **file_item.model_dump(),
+                    "error": str(e.detail) if hasattr(e, "detail") else str(e),
+                }
+            )
 
         if file_item:
             return file_item

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

@@ -47,15 +47,43 @@ async def get_knowledge_items(
                 detail=ERROR_MESSAGES.NOT_FOUND,
             )
     else:
-        return [
-            KnowledgeResponse(
-                **knowledge.model_dump(),
-                files=Files.get_file_metadatas_by_ids(
-                    knowledge.data.get("file_ids", []) if knowledge.data else []
-                ),
+        knowledge_bases = []
+
+        for knowledge in Knowledges.get_knowledge_items():
+
+            files = []
+            if knowledge.data:
+                files = Files.get_file_metadatas_by_ids(
+                    knowledge.data.get("file_ids", [])
+                )
+
+                # Check if all files exist
+                if len(files) != len(knowledge.data.get("file_ids", [])):
+                    missing_files = list(
+                        set(knowledge.data.get("file_ids", []))
+                        - set([file.id for file in files])
+                    )
+                    if missing_files:
+                        data = knowledge.data or {}
+                        file_ids = data.get("file_ids", [])
+
+                        for missing_file in missing_files:
+                            file_ids.remove(missing_file)
+
+                        data["file_ids"] = file_ids
+                        Knowledges.update_knowledge_by_id(
+                            id=knowledge.id, form_data=KnowledgeUpdateForm(data=data)
+                        )
+
+                        files = Files.get_file_metadatas_by_ids(file_ids)
+
+            knowledge_bases.append(
+                KnowledgeResponse(
+                    **knowledge.model_dump(),
+                    files=files,
+                )
             )
-            for knowledge in Knowledges.get_knowledge_items()
-        ]
+        return knowledge_bases
 
 
 ############################

backend/open_webui/config.py

@@ -937,6 +937,8 @@ CHROMA_TENANT = os.environ.get("CHROMA_TENANT", chromadb.DEFAULT_TENANT)
 CHROMA_DATABASE = os.environ.get("CHROMA_DATABASE", chromadb.DEFAULT_DATABASE)
 CHROMA_HTTP_HOST = os.environ.get("CHROMA_HTTP_HOST", "")
 CHROMA_HTTP_PORT = int(os.environ.get("CHROMA_HTTP_PORT", "8000"))
+CHROMA_CLIENT_AUTH_PROVIDER = os.environ.get("CHROMA_CLIENT_AUTH_PROVIDER", "")
+CHROMA_CLIENT_AUTH_CREDENTIALS = os.environ.get("CHROMA_CLIENT_AUTH_CREDENTIALS", "")
 # Comma-separated list of header=value pairs
 CHROMA_HTTP_HEADERS = os.environ.get("CHROMA_HTTP_HEADERS", "")
 if CHROMA_HTTP_HEADERS:

backend/open_webui/main.py

@@ -439,9 +439,20 @@ async def chat_completion_tools_handler(
             tool_function_params = result.get("parameters", {})
 
             try:
-                tool_output = await tools[tool_function_name]["callable"](
-                    **tool_function_params
+                required_params = (
+                    tools[tool_function_name]
+                    .get("spec", {})
+                    .get("parameters", {})
+                    .get("required", [])
                 )
+                tool_function = tools[tool_function_name]["callable"]
+                tool_function_params = {
+                    k: v
+                    for k, v in tool_function_params.items()
+                    if k in required_params
+                }
+                tool_output = await tool_function(**tool_function_params)
+
             except Exception as e:
                 tool_output = str(e)
 

backend/open_webui/migrations/versions/242a2047eae0_update_chat_table.py

@@ -19,17 +19,41 @@ depends_on = None
 
 
 def upgrade():
-    # Step 1: Rename current 'chat' column to 'old_chat'
-    op.alter_column("chat", "chat", new_column_name="old_chat", existing_type=sa.Text)
+    conn = op.get_bind()
+    inspector = sa.inspect(conn)
 
-    # Step 2: Add new 'chat' column of type JSON
-    op.add_column("chat", sa.Column("chat", sa.JSON(), nullable=True))
+    columns = inspector.get_columns("chat")
+    column_dict = {col["name"]: col for col in columns}
+
+    chat_column = column_dict.get("chat")
+    old_chat_exists = "old_chat" in column_dict
+
+    if chat_column:
+        if isinstance(chat_column["type"], sa.Text):
+            print("Converting 'chat' column to JSON")
+
+            if old_chat_exists:
+                print("Dropping old 'old_chat' column")
+                op.drop_column("chat", "old_chat")
+
+            # Step 1: Rename current 'chat' column to 'old_chat'
+            print("Renaming 'chat' column to 'old_chat'")
+            op.alter_column(
+                "chat", "chat", new_column_name="old_chat", existing_type=sa.Text()
+            )
+
+            # Step 2: Add new 'chat' column of type JSON
+            print("Adding new 'chat' column of type JSON")
+            op.add_column("chat", sa.Column("chat", sa.JSON(), nullable=True))
+        else:
+            # If the column is already JSON, no need to do anything
+            pass
 
     # Step 3: Migrate data from 'old_chat' to 'chat'
     chat_table = table(
         "chat",
-        sa.Column("id", sa.String, primary_key=True),
-        sa.Column("old_chat", sa.Text),
+        sa.Column("id", sa.String(), primary_key=True),
+        sa.Column("old_chat", sa.Text()),
         sa.Column("chat", sa.JSON()),
     )
 
@@ -50,6 +74,7 @@ def upgrade():
         )
 
     # Step 4: Drop 'old_chat' column
+    print("Dropping 'old_chat' column")
     op.drop_column("chat", "old_chat")
 
 
@@ -60,7 +85,7 @@ def downgrade():
     # Step 2: Convert 'chat' JSON data back to text and store in 'old_chat'
     chat_table = table(
         "chat",
-        sa.Column("id", sa.String, primary_key=True),
+        sa.Column("id", sa.String(), primary_key=True),
         sa.Column("chat", sa.JSON()),
         sa.Column("old_chat", sa.Text()),
     )
@@ -79,4 +104,4 @@ def downgrade():
     op.drop_column("chat", "chat")
 
     # Step 4: Rename 'old_chat' back to 'chat'
-    op.alter_column("chat", "old_chat", new_column_name="chat", existing_type=sa.Text)
+    op.alter_column("chat", "old_chat", new_column_name="chat", existing_type=sa.Text())

backend/open_webui/storage/provider.py

@@ -44,14 +44,14 @@ class StorageProvider:
         )
         self.bucket_name = S3_BUCKET_NAME
 
-    def _upload_to_s3(self, file: BinaryIO, filename: str) -> Tuple[bytes, str]:
+    def _upload_to_s3(self, file_path: str, filename: str) -> Tuple[bytes, str]:
         """Handles uploading of the file to S3 storage."""
         if not self.s3_client:
             raise RuntimeError("S3 Client is not initialized.")
 
         try:
-            self.s3_client.upload_fileobj(file, self.bucket_name, filename)
-            return file.read(), f"s3://{self.bucket_name}/{filename}"
+            self.s3_client.upload_file(file_path, self.bucket_name, filename)
+            return open(file_path, "rb").read(), file_path
         except ClientError as e:
             raise RuntimeError(f"Error uploading file to S3: {e}")
 
@@ -132,10 +132,11 @@ class StorageProvider:
         contents = file.read()
         if not contents:
             raise ValueError(ERROR_MESSAGES.EMPTY_CONTENT)
+        contents, file_path = self._upload_to_local(contents, filename)
 
         if self.storage_provider == "s3":
-            return self._upload_to_s3(file, filename)
-        return self._upload_to_local(contents, filename)
+            return self._upload_to_s3(file_path, filename)
+        return contents, file_path
 
     def get_file(self, file_path: str) -> str:
         """Downloads a file either from S3 or the local file system and returns the file path."""

backend/open_webui/utils/oauth.py

@@ -162,7 +162,7 @@ class OAuthManager:
 
         if not user:
             # If the user does not exist, check if merging is enabled
-            if auth_manager_config.OAUTH_MERGE_ACCOUNTS_BY_EMAIL.value:
+            if auth_manager_config.OAUTH_MERGE_ACCOUNTS_BY_EMAIL:
                 # Check if the user exists by email
                 user = Users.get_user_by_email(email)
                 if user:
@@ -176,7 +176,7 @@ class OAuthManager:
 
         if not user:
             # If the user does not exist, check if signups are enabled
-            if auth_manager_config.ENABLE_OAUTH_SIGNUP.value:
+            if auth_manager_config.ENABLE_OAUTH_SIGNUP:
                 # Check if an existing user with the same email already exists
                 existing_user = Users.get_user_by_email(
                     user_data.get("email", "").lower()

backend/open_webui/utils/security_headers.py

@@ -60,7 +60,7 @@ def set_hsts(value: str):
     pattern = r"^max-age=(\d+)(;includeSubDomains)?(;preload)?$"
     match = re.match(pattern, value, re.IGNORECASE)
     if not match:
-        return "max-age=31536000;includeSubDomains"
+        value = "max-age=31536000;includeSubDomains"
     return {"Strict-Transport-Security": value}
 
 

backend/requirements.txt

@@ -40,7 +40,7 @@ langchain-community==0.2.12
 langchain-chroma==0.1.4
 
 fake-useragent==1.5.1
-chromadb==0.5.9
+chromadb==0.5.15
 pymilvus==2.4.7
 qdrant-client~=1.12.0
 

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "open-webui",
-	"version": "0.3.33",
+	"version": "0.3.35",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "open-webui",
-			"version": "0.3.33",
+			"version": "0.3.35",
 			"dependencies": {
 				"@codemirror/lang-javascript": "^6.2.2",
 				"@codemirror/lang-python": "^6.1.6",

package.json

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

src/app.css

@@ -189,7 +189,7 @@ input[type='number'] {
 }
 
 .ProseMirror {
-	@apply h-full  min-h-fit max-h-full;
+	@apply h-full  min-h-fit max-h-full whitespace-pre-wrap;
 }
 
 .ProseMirror:focus {

src/lib/apis/evaluations/index.ts

@@ -93,6 +93,37 @@ export const getAllFeedbacks = async (token: string = '') => {
 	return res;
 };
 
+export const exportAllFeedbacks = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/evaluations/feedbacks/all/export`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const createNewFeedback = async (token: string, feedback: object) => {
 	let error = null;
 

src/lib/components/admin/Evaluations.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
 	import { onMount, getContext } from 'svelte';
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
@@ -12,7 +15,7 @@
 	let model = null;
 
 	import { models } from '$lib/stores';
-	import { deleteFeedbackById, getAllFeedbacks } from '$lib/apis/evaluations';
+	import { deleteFeedbackById, exportAllFeedbacks, getAllFeedbacks } from '$lib/apis/evaluations';
 
 	import FeedbackMenu from './Evaluations/FeedbackMenu.svelte';
 	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
@@ -23,6 +26,10 @@
 	import Share from '../icons/Share.svelte';
 	import CloudArrowUp from '../icons/CloudArrowUp.svelte';
 	import { toast } from 'svelte-sonner';
+	import Spinner from '../common/Spinner.svelte';
+	import DocumentArrowUpSolid from '../icons/DocumentArrowUpSolid.svelte';
+	import DocumentArrowDown from '../icons/DocumentArrowDown.svelte';
+	import ArrowDownTray from '../icons/ArrowDownTray.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -35,6 +42,7 @@
 	let tagEmbeddings = new Map();
 
 	let loaded = false;
+	let loadingLeaderboard = true;
 	let debounceTimer;
 
 	$: paginatedFeedbacks = feedbacks.slice((page - 1) * 10, page * 10);
@@ -91,6 +99,8 @@
 				if (a.rating !== '-' && b.rating !== '-') return b.rating - a.rating;
 				return a.name.localeCompare(b.name);
 			});
+
+		loadingLeaderboard = false;
 	};
 
 	function calculateModelStats(
@@ -206,6 +216,25 @@
 	//
 	//////////////////////
 
+	const loadEmbeddingModel = async () => {
+		// Check if the tokenizer and model are already loaded and stored in the window object
+		if (!window.tokenizer) {
+			window.tokenizer = await AutoTokenizer.from_pretrained(EMBEDDING_MODEL);
+		}
+
+		if (!window.model) {
+			window.model = await AutoModel.from_pretrained(EMBEDDING_MODEL);
+		}
+
+		// Use the tokenizer and model from the window object
+		tokenizer = window.tokenizer;
+		model = window.model;
+
+		// Pre-compute embeddings for all unique tags
+		const allTags = new Set(feedbacks.flatMap((feedback) => feedback.data.tags || []));
+		await getTagEmbeddings(Array.from(allTags));
+	};
+
 	const getEmbeddings = async (text: string) => {
 		const tokens = await tokenizer(text);
 		const output = await model(tokens);
@@ -227,6 +256,8 @@
 	};
 
 	const debouncedQueryHandler = async () => {
+		loadingLeaderboard = true;
+
 		if (query.trim() === '') {
 			rankHandler();
 			return;
@@ -294,26 +325,23 @@
 		window.addEventListener('message', messageHandler, false);
 	};
 
-	onMount(async () => {
-		feedbacks = await getAllFeedbacks(localStorage.token);
-		loaded = true;
-
-		// Check if the tokenizer and model are already loaded and stored in the window object
-		if (!window.tokenizer) {
-			window.tokenizer = await AutoTokenizer.from_pretrained(EMBEDDING_MODEL);
-		}
+	const exportHandler = async () => {
+		const _feedbacks = await exportAllFeedbacks(localStorage.token).catch((err) => {
+			toast.error(err);
+			return null;
+		});
 
-		if (!window.model) {
-			window.model = await AutoModel.from_pretrained(EMBEDDING_MODEL);
+		if (_feedbacks) {
+			let blob = new Blob([JSON.stringify(_feedbacks)], {
+				type: 'application/json'
+			});
+			saveAs(blob, `feedback-history-export-${Date.now()}.json`);
 		}
+	};
 
-		// Use the tokenizer and model from the window object
-		tokenizer = window.tokenizer;
-		model = window.model;
-
-		// Pre-compute embeddings for all unique tags
-		const allTags = new Set(feedbacks.flatMap((feedback) => feedback.data.tags || []));
-		await getTagEmbeddings(Array.from(allTags));
+	onMount(async () => {
+		feedbacks = await getAllFeedbacks(localStorage.token);
+		loaded = true;
 
 		rankHandler();
 	});
@@ -343,6 +371,9 @@
 						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
 						bind:value={query}
 						placeholder={$i18n.t('Search')}
+						on:focus={() => {
+							loadEmbeddingModel();
+						}}
 					/>
 				</div>
 			</Tooltip>
@@ -352,13 +383,22 @@
 	<div
 		class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded pt-0.5"
 	>
+		{#if loadingLeaderboard}
+			<div class=" absolute top-0 bottom-0 left-0 right-0 flex">
+				<div class="m-auto">
+					<Spinner />
+				</div>
+			</div>
+		{/if}
 		{#if (rankedModels ?? []).length === 0}
 			<div class="text-center text-xs text-gray-500 dark:text-gray-400 py-1">
 				{$i18n.t('No models found')}
 			</div>
 		{:else}
 			<table
-				class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded"
+				class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded {loadingLeaderboard
+					? 'opacity-20'
+					: ''}"
 			>
 				<thead
 					class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
@@ -463,6 +503,21 @@
 
 			<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{feedbacks.length}</span>
 		</div>
+
+		<div>
+			<div>
+				<Tooltip content={$i18n.t('Export')}>
+					<button
+						class=" p-2 rounded-xl hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition font-medium text-sm flex items-center space-x-1"
+						on:click={() => {
+							exportHandler();
+						}}
+					>
+						<ArrowDownTray className="size-3" />
+					</button>
+				</Tooltip>
+			</div>
+		</div>
 	</div>
 
 	<div
@@ -606,18 +661,7 @@
 						</div>
 
 						<div class=" self-center">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-3.5 h-3.5"
-							>
-								<path
-									fill-rule="evenodd"
-									d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
-									clip-rule="evenodd"
-								/>
-							</svg>
+							<CloudArrowUp className="size-3" strokeWidth="3" />
 						</div>
 					</button>
 				</Tooltip>

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

@@ -24,7 +24,7 @@
 		TASK_MODEL: '',
 		TASK_MODEL_EXTERNAL: '',
 		TITLE_GENERATION_PROMPT_TEMPLATE: '',
-		TAG_GENERATION_PROMPT_TEMPLATE: '',
+		TAGS_GENERATION_PROMPT_TEMPLATE: '',
 		ENABLE_SEARCH_QUERY: true,
 		SEARCH_QUERY_GENERATION_PROMPT_TEMPLATE: ''
 	};
@@ -141,7 +141,7 @@
 					placement="top-start"
 				>
 					<Textarea
-						bind:value={taskConfig.TAG_GENERATION_PROMPT_TEMPLATE}
+						bind:value={taskConfig.TAGS_GENERATION_PROMPT_TEMPLATE}
 						placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
 					/>
 				</Tooltip>

src/lib/components/chat/Chat.svelte

@@ -1070,7 +1070,7 @@
 				// Prepare the base message object
 				const baseMessage = {
 					role: message.role,
-					content: message.content
+					content: message?.merged?.content ?? message.content
 				};
 
 				// Extract and format image URLs if any exist
@@ -1535,10 +1535,7 @@
 										content: [
 											{
 												type: 'text',
-												text:
-													arr.length - 1 !== idx
-														? message.content
-														: (message?.raContent ?? message.content)
+												text: message?.merged?.content ?? message.content
 											},
 											...message.files
 												.filter((file) => file.type === 'image')
@@ -1551,10 +1548,7 @@
 										]
 									}
 								: {
-										content:
-											arr.length - 1 !== idx
-												? message.content
-												: (message?.raContent ?? message.content)
+										content: message?.merged?.content ?? message.content
 									})
 						})),
 					seed: params?.seed ?? $settings?.params?.seed ?? undefined,

src/lib/components/chat/MessageInput.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
+	import { v4 as uuidv4 } from 'uuid';
+
 	import { onMount, tick, getContext, createEventDispatcher, onDestroy } from 'svelte';
 	const dispatch = createEventDispatcher();
 
@@ -89,6 +91,7 @@
 	const uploadFileHandler = async (file) => {
 		console.log(file);
 
+		const tempItemId = uuidv4();
 		const fileItem = {
 			type: 'file',
 			file: '',
@@ -98,10 +101,16 @@
 			collection_name: '',
 			status: 'uploading',
 			size: file.size,
-			error: ''
+			error: '',
+			itemId: tempItemId
 		};
-		files = [...files, fileItem];
 
+		if (fileItem.size == 0) {
+			toast.error($i18n.t('You cannot upload an empty file.'));
+			return null;
+		}
+
+		files = [...files, fileItem];
 		// Check if the file is an audio file and transcribe/convert it to text file
 		if (['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/x-m4a'].includes(file['type'])) {
 			const res = await transcribeAudio(localStorage.token, file).catch((error) => {
@@ -124,6 +133,10 @@
 			const uploadedFile = await uploadFile(localStorage.token, file);
 
 			if (uploadedFile) {
+				if (uploadedFile.error) {
+					toast.warning(uploadedFile.error);
+				}
+
 				fileItem.status = 'uploaded';
 				fileItem.file = uploadedFile;
 				fileItem.id = uploadedFile.id;
@@ -132,11 +145,11 @@
 
 				files = files;
 			} else {
-				files = files.filter((item) => item.status !== null);
+				files = files.filter((item) => item?.itemId !== tempItemId);
 			}
 		} catch (e) {
 			toast.error(e);
-			files = files.filter((item) => item.status !== null);
+			files = files.filter((item) => item?.itemId !== tempItemId);
 		}
 	};
 
@@ -361,8 +374,8 @@
 							document.getElementById('chat-input')?.focus();
 						}}
 						on:confirm={async (e) => {
-							const response = e.detail;
-							prompt = `${prompt}${response} `;
+							const { text, filename } = e.detail;
+							prompt = `${prompt}${text} `;
 
 							recording = false;
 
@@ -509,54 +522,202 @@
 									</InputMenu>
 								</div>
 
-								<div
-									bind:this={chatInputContainerElement}
-									id="chat-input-container"
-									class="scrollbar-hidden text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-2.5 px-1 rounded-xl resize-none h-[48px] overflow-auto"
-								>
-									<RichTextInput
-										bind:this={chatInputElement}
+								{#if $settings?.richTextInput ?? true}
+									<div
+										bind:this={chatInputContainerElement}
+										id="chat-input-container"
+										class="scrollbar-hidden text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-2.5 px-1 rounded-xl resize-none h-[48px] overflow-auto"
+									>
+										<RichTextInput
+											bind:this={chatInputElement}
+											id="chat-input"
+											trim={true}
+											placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
+											bind:value={prompt}
+											shiftEnter={!$mobile ||
+												!(
+													'ontouchstart' in window ||
+													navigator.maxTouchPoints > 0 ||
+													navigator.msMaxTouchPoints > 0
+												)}
+											on:enter={async (e) => {
+												if (prompt !== '') {
+													dispatch('submit', prompt);
+												}
+											}}
+											on:input={async (e) => {
+												if (chatInputContainerElement) {
+													chatInputContainerElement.style.height = '';
+													chatInputContainerElement.style.height =
+														Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
+												}
+											}}
+											on:focus={async (e) => {
+												if (chatInputContainerElement) {
+													chatInputContainerElement.style.height = '';
+													chatInputContainerElement.style.height =
+														Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
+												}
+											}}
+											on:keypress={(e) => {
+												e = e.detail.event;
+											}}
+											on:keydown={async (e) => {
+												e = e.detail.event;
+
+												if (chatInputContainerElement) {
+													chatInputContainerElement.style.height = '';
+													chatInputContainerElement.style.height =
+														Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
+												}
+
+												const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
+												const commandsContainerElement =
+													document.getElementById('commands-container');
+
+												// Command/Ctrl + Shift + Enter to submit a message pair
+												if (isCtrlPressed && e.key === 'Enter' && e.shiftKey) {
+													e.preventDefault();
+													createMessagePair(prompt);
+												}
+
+												// Check if Ctrl + R is pressed
+												if (prompt === '' && isCtrlPressed && e.key.toLowerCase() === 'r') {
+													e.preventDefault();
+													console.log('regenerate');
+
+													const regenerateButton = [
+														...document.getElementsByClassName('regenerate-response-button')
+													]?.at(-1);
+
+													regenerateButton?.click();
+												}
+
+												if (prompt === '' && e.key == 'ArrowUp') {
+													e.preventDefault();
+
+													const userMessageElement = [
+														...document.getElementsByClassName('user-message')
+													]?.at(-1);
+
+													const editButton = [
+														...document.getElementsByClassName('edit-user-message-button')
+													]?.at(-1);
+
+													console.log(userMessageElement);
+
+													userMessageElement.scrollIntoView({ block: 'center' });
+													editButton?.click();
+												}
+
+												if (commandsContainerElement && e.key === 'ArrowUp') {
+													e.preventDefault();
+													commandsElement.selectUp();
+
+													const commandOptionButton = [
+														...document.getElementsByClassName('selected-command-option-button')
+													]?.at(-1);
+													commandOptionButton.scrollIntoView({ block: 'center' });
+												}
+
+												if (commandsContainerElement && e.key === 'ArrowDown') {
+													e.preventDefault();
+													commandsElement.selectDown();
+
+													const commandOptionButton = [
+														...document.getElementsByClassName('selected-command-option-button')
+													]?.at(-1);
+													commandOptionButton.scrollIntoView({ block: 'center' });
+												}
+
+												if (commandsContainerElement && e.key === 'Enter') {
+													e.preventDefault();
+
+													const commandOptionButton = [
+														...document.getElementsByClassName('selected-command-option-button')
+													]?.at(-1);
+
+													if (e.shiftKey) {
+														prompt = `${prompt}\n`;
+													} else if (commandOptionButton) {
+														commandOptionButton?.click();
+													} else {
+														document.getElementById('send-message-button')?.click();
+													}
+												}
+
+												if (commandsContainerElement && e.key === 'Tab') {
+													e.preventDefault();
+
+													const commandOptionButton = [
+														...document.getElementsByClassName('selected-command-option-button')
+													]?.at(-1);
+
+													commandOptionButton?.click();
+												}
+
+												if (e.key === 'Escape') {
+													console.log('Escape');
+													atSelectedModel = undefined;
+												}
+											}}
+											on:paste={async (e) => {
+												e = e.detail.event;
+												console.log(e);
+
+												const clipboardData = e.clipboardData || window.clipboardData;
+
+												if (clipboardData && clipboardData.items) {
+													for (const item of clipboardData.items) {
+														if (item.type.indexOf('image') !== -1) {
+															const blob = item.getAsFile();
+															const reader = new FileReader();
+
+															reader.onload = function (e) {
+																files = [
+																	...files,
+																	{
+																		type: 'image',
+																		url: `${e.target.result}`
+																	}
+																];
+															};
+
+															reader.readAsDataURL(blob);
+														}
+													}
+												}
+											}}
+										/>
+									</div>
+								{:else}
+									<textarea
 										id="chat-input"
-										trim={true}
+										bind:this={chatInputElement}
+										class="scrollbar-hidden bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-3 px-1 rounded-xl resize-none h-[48px]"
 										placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
 										bind:value={prompt}
-										shiftEnter={!$mobile ||
-											!(
-												'ontouchstart' in window ||
-												navigator.maxTouchPoints > 0 ||
-												navigator.msMaxTouchPoints > 0
-											)}
-										on:enter={async (e) => {
-											if (prompt !== '') {
-												dispatch('submit', prompt);
-											}
-										}}
-										on:input={async (e) => {
-											if (chatInputContainerElement) {
-												chatInputContainerElement.style.height = '';
-												chatInputContainerElement.style.height =
-													Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
-											}
-										}}
-										on:focus={async (e) => {
-											if (chatInputContainerElement) {
-												chatInputContainerElement.style.height = '';
-												chatInputContainerElement.style.height =
-													Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
-											}
-										}}
 										on:keypress={(e) => {
-											e = e.detail.event;
-										}}
-										on:keydown={async (e) => {
-											e = e.detail.event;
+											if (
+												!$mobile ||
+												!(
+													'ontouchstart' in window ||
+													navigator.maxTouchPoints > 0 ||
+													navigator.msMaxTouchPoints > 0
+												)
+											) {
+												// Prevent Enter key from creating a new line
+												if (e.key === 'Enter' && !e.shiftKey) {
+													e.preventDefault();
+												}
 
-											if (chatInputContainerElement) {
-												chatInputContainerElement.style.height = '';
-												chatInputContainerElement.style.height =
-													Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
+												// Submit the prompt when Enter key is pressed
+												if (prompt !== '' && e.key === 'Enter' && !e.shiftKey) {
+													dispatch('submit', prompt);
+												}
 											}
-
+										}}
+										on:keydown={async (e) => {
 											const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
 											const commandsContainerElement =
 												document.getElementById('commands-container');
@@ -640,6 +801,26 @@
 												]?.at(-1);
 
 												commandOptionButton?.click();
+											} else if (e.key === 'Tab') {
+												const words = findWordIndices(prompt);
+
+												if (words.length > 0) {
+													const word = words.at(0);
+													const fullPrompt = prompt;
+
+													prompt = prompt.substring(0, word?.endIndex + 1);
+													await tick();
+
+													e.target.scrollTop = e.target.scrollHeight;
+													prompt = fullPrompt;
+													await tick();
+
+													e.preventDefault();
+													e.target.setSelectionRange(word?.startIndex, word.endIndex + 1);
+												}
+
+												e.target.style.height = '';
+												e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
 											}
 
 											if (e.key === 'Escape') {
@@ -647,10 +828,17 @@
 												atSelectedModel = undefined;
 											}
 										}}
+										rows="1"
+										on:input={async (e) => {
+											e.target.style.height = '';
+											e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
+											user = null;
+										}}
+										on:focus={async (e) => {
+											e.target.style.height = '';
+											e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
+										}}
 										on:paste={async (e) => {
-											e = e.detail.event;
-											console.log(e);
-
 											const clipboardData = e.clipboardData || window.clipboardData;
 
 											if (clipboardData && clipboardData.items) {
@@ -675,7 +863,7 @@
 											}
 										}}
 									/>
-								</div>
+								{/if}
 
 								<div class="self-end mb-2 flex space-x-1 mr-1">
 									{#if !history?.currentId || history.messages[history.currentId]?.done == true}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { prompts } from '$lib/stores';
+	import { prompts, user } from '$lib/stores';
 	import {
 		findWordIndices,
 		getUserPosition,
@@ -78,6 +78,12 @@
 			text = text.replaceAll('{{USER_LOCATION}}', String(location));
 		}
 
+		if (command.content.includes('{{USER_NAME}}')) {
+			console.log($user);
+			const name = $user.name || 'User';
+			text = text.replaceAll('{{USER_NAME}}', name);
+		}
+
 		if (command.content.includes('{{USER_LANGUAGE}}')) {
 			const language = localStorage.getItem('locale') || 'en-US';
 			text = text.replaceAll('{{USER_LANGUAGE}}', language);
@@ -114,13 +120,16 @@
 		const chatInputElement = document.getElementById('chat-input');
 
 		await tick();
-
 		if (chatInputContainerElement) {
 			chatInputContainerElement.style.height = '';
 			chatInputContainerElement.style.height =
 				Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
+		}
 
-			chatInputElement?.focus();
+		await tick();
+		if (chatInputElement) {
+			chatInputElement.focus();
+			chatInputElement.dispatchEvent(new Event('input'));
 		}
 	};
 </script>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { createEventDispatcher, tick, getContext } from 'svelte';
+	import { createEventDispatcher, tick, getContext, onMount, onDestroy } from 'svelte';
 	import { config, settings } from '$lib/stores';
 	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
 
@@ -52,7 +52,7 @@
 	let audioChunks = [];
 
 	const MIN_DECIBELS = -45;
-	const VISUALIZER_BUFFER_LENGTH = 300;
+	let VISUALIZER_BUFFER_LENGTH = 300;
 
 	let visualizerData = Array(VISUALIZER_BUFFER_LENGTH).fill(0);
 
@@ -142,8 +142,8 @@
 		});
 
 		if (res) {
-			console.log(res.text);
-			dispatch('confirm', res.text);
+			console.log(res);
+			dispatch('confirm', res);
 		}
 	};
 
@@ -278,12 +278,40 @@
 
 		stream = null;
 	};
+
+	let resizeObserver;
+	let containerWidth;
+
+	let maxVisibleItems = 300;
+	$: maxVisibleItems = Math.floor(containerWidth / 5); // 2px width + 0.5px gap
+
+	onMount(() => {
+		// listen to width changes
+		resizeObserver = new ResizeObserver(() => {
+			VISUALIZER_BUFFER_LENGTH = Math.floor(window.innerWidth / 4);
+			if (visualizerData.length > VISUALIZER_BUFFER_LENGTH) {
+				visualizerData = visualizerData.slice(visualizerData.length - VISUALIZER_BUFFER_LENGTH);
+			} else {
+				visualizerData = Array(VISUALIZER_BUFFER_LENGTH - visualizerData.length)
+					.fill(0)
+					.concat(visualizerData);
+			}
+		});
+
+		resizeObserver.observe(document.body);
+	});
+
+	onDestroy(() => {
+		// remove resize observer
+		resizeObserver.disconnect();
+	});
 </script>
 
 <div
+	bind:clientWidth={containerWidth}
 	class="{loading
 		? ' bg-gray-100/50 dark:bg-gray-850/50'
-		: 'bg-indigo-300/10 dark:bg-indigo-500/10 '} rounded-full flex {className}"
+		: 'bg-indigo-300/10 dark:bg-indigo-500/10 '} rounded-full flex justify-between {className}"
 >
 	<div class="flex items-center mr-1">
 		<button
@@ -318,146 +346,152 @@
 		class="flex flex-1 self-center items-center justify-between ml-2 mx-1 overflow-hidden h-6"
 		dir="rtl"
 	>
-		<div class="flex-1 flex items-center gap-0.5 h-6">
+		<div
+			class="flex items-center gap-0.5 h-6 w-full max-w-full overflow-hidden overflow-x-hidden flex-wrap"
+		>
 			{#each visualizerData.slice().reverse() as rms}
-				<div
-					class="w-[2px]
+				<div class="flex items-center h-full">
+					<div
+						class="w-[2px] flex-shrink-0
                     
                     {loading
-						? ' bg-gray-500 dark:bg-gray-400   '
-						: 'bg-indigo-500 dark:bg-indigo-400  '} 
+							? ' bg-gray-500 dark:bg-gray-400   '
+							: 'bg-indigo-500 dark:bg-indigo-400  '} 
                     
                     inline-block h-full"
-					style="height: {Math.min(100, Math.max(14, rms * 100))}%;"
-				/>
+						style="height: {Math.min(100, Math.max(14, rms * 100))}%;"
+					/>
+				</div>
 			{/each}
 		</div>
 	</div>
 
-	<div class="  mx-1.5 pr-1 flex justify-center items-center">
-		<div
-			class="text-sm
+	<div class="flex">
+		<div class="  mx-1.5 pr-1 flex justify-center items-center">
+			<div
+				class="text-sm
         
         
         {loading ? ' text-gray-500  dark:text-gray-400  ' : ' text-indigo-400 '} 
        font-medium flex-1 mx-auto text-center"
-		>
-			{formatSeconds(durationSeconds)}
+			>
+				{formatSeconds(durationSeconds)}
+			</div>
 		</div>
-	</div>
 
-	<div class="flex items-center mr-1">
-		{#if loading}
-			<div class=" text-gray-500 rounded-full cursor-not-allowed">
-				<svg
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					xmlns="http://www.w3.org/2000/svg"
-					fill="currentColor"
-					><style>
-						.spinner_OSmW {
-							transform-origin: center;
-							animation: spinner_T6mA 0.75s step-end infinite;
-						}
-						@keyframes spinner_T6mA {
-							8.3% {
-								transform: rotate(30deg);
-							}
-							16.6% {
-								transform: rotate(60deg);
-							}
-							25% {
-								transform: rotate(90deg);
-							}
-							33.3% {
-								transform: rotate(120deg);
-							}
-							41.6% {
-								transform: rotate(150deg);
-							}
-							50% {
-								transform: rotate(180deg);
-							}
-							58.3% {
-								transform: rotate(210deg);
-							}
-							66.6% {
-								transform: rotate(240deg);
+		<div class="flex items-center">
+			{#if loading}
+				<div class=" text-gray-500 rounded-full cursor-not-allowed">
+					<svg
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="currentColor"
+						><style>
+							.spinner_OSmW {
+								transform-origin: center;
+								animation: spinner_T6mA 0.75s step-end infinite;
 							}
-							75% {
-								transform: rotate(270deg);
+							@keyframes spinner_T6mA {
+								8.3% {
+									transform: rotate(30deg);
+								}
+								16.6% {
+									transform: rotate(60deg);
+								}
+								25% {
+									transform: rotate(90deg);
+								}
+								33.3% {
+									transform: rotate(120deg);
+								}
+								41.6% {
+									transform: rotate(150deg);
+								}
+								50% {
+									transform: rotate(180deg);
+								}
+								58.3% {
+									transform: rotate(210deg);
+								}
+								66.6% {
+									transform: rotate(240deg);
+								}
+								75% {
+									transform: rotate(270deg);
+								}
+								83.3% {
+									transform: rotate(300deg);
+								}
+								91.6% {
+									transform: rotate(330deg);
+								}
+								100% {
+									transform: rotate(360deg);
+								}
 							}
-							83.3% {
-								transform: rotate(300deg);
-							}
-							91.6% {
-								transform: rotate(330deg);
-							}
-							100% {
-								transform: rotate(360deg);
-							}
-						}
-					</style><g class="spinner_OSmW"
-						><rect x="11" y="1" width="2" height="5" opacity=".14" /><rect
-							x="11"
-							y="1"
-							width="2"
-							height="5"
-							transform="rotate(30 12 12)"
-							opacity=".29"
-						/><rect
-							x="11"
-							y="1"
-							width="2"
-							height="5"
-							transform="rotate(60 12 12)"
-							opacity=".43"
-						/><rect
-							x="11"
-							y="1"
-							width="2"
-							height="5"
-							transform="rotate(90 12 12)"
-							opacity=".57"
-						/><rect
-							x="11"
-							y="1"
-							width="2"
-							height="5"
-							transform="rotate(120 12 12)"
-							opacity=".71"
-						/><rect
-							x="11"
-							y="1"
-							width="2"
-							height="5"
-							transform="rotate(150 12 12)"
-							opacity=".86"
-						/><rect x="11" y="1" width="2" height="5" transform="rotate(180 12 12)" /></g
-					></svg
+						</style><g class="spinner_OSmW"
+							><rect x="11" y="1" width="2" height="5" opacity=".14" /><rect
+								x="11"
+								y="1"
+								width="2"
+								height="5"
+								transform="rotate(30 12 12)"
+								opacity=".29"
+							/><rect
+								x="11"
+								y="1"
+								width="2"
+								height="5"
+								transform="rotate(60 12 12)"
+								opacity=".43"
+							/><rect
+								x="11"
+								y="1"
+								width="2"
+								height="5"
+								transform="rotate(90 12 12)"
+								opacity=".57"
+							/><rect
+								x="11"
+								y="1"
+								width="2"
+								height="5"
+								transform="rotate(120 12 12)"
+								opacity=".71"
+							/><rect
+								x="11"
+								y="1"
+								width="2"
+								height="5"
+								transform="rotate(150 12 12)"
+								opacity=".86"
+							/><rect x="11" y="1" width="2" height="5" transform="rotate(180 12 12)" /></g
+						></svg
+					>
+				</div>
+			{:else}
+				<button
+					type="button"
+					class="p-1.5 bg-indigo-500 text-white dark:bg-indigo-500 dark:text-blue-950 rounded-full"
+					on:click={async () => {
+						await confirmRecording();
+					}}
 				>
-			</div>
-		{:else}
-			<button
-				type="button"
-				class="p-1.5 bg-indigo-500 text-white dark:bg-indigo-500 dark:text-blue-950 rounded-full"
-				on:click={async () => {
-					await confirmRecording();
-				}}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="2.5"
-					stroke="currentColor"
-					class="size-4"
-				>
-					<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
-				</svg>
-			</button>
-		{/if}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2.5"
+						stroke="currentColor"
+						class="size-4"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+					</svg>
+				</button>
+			{/if}
+		</div>
 	</div>
 </div>
 

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

@@ -16,7 +16,6 @@
 	import Markdown from './Markdown.svelte';
 	import Name from './Name.svelte';
 	import Skeleton from './Skeleton.svelte';
-
 	const i18n = getContext('i18n');
 
 	export let chatId;
@@ -155,7 +154,6 @@
 		await tick();
 
 		const messageElement = document.getElementById(`message-${messageId}`);
-		console.log(messageElement);
 		if (messageElement) {
 			messageElement.scrollIntoView({ block: 'start' });
 		}
@@ -237,7 +235,7 @@
 			{/each}
 		</div>
 
-		{#if !readOnly && isLastMessage}
+		{#if !readOnly}
 			{#if !Object.keys(groupedMessageIds).find((modelIdx) => {
 				const { messageIds } = groupedMessageIds[modelIdx];
 				const _messageId = messageIds[groupedMessageIdsIdx[modelIdx]];
@@ -272,22 +270,24 @@
 						{/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>
+					{#if isLastMessage}
+						<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>
+					{/if}
 				</div>
 			{/if}
 		{/if}

src/lib/components/chat/Placeholder.svelte

@@ -58,13 +58,18 @@
 		await tick();
 
 		const chatInputContainerElement = document.getElementById('chat-input-container');
+		const chatInputElement = document.getElementById('chat-input');
+
 		if (chatInputContainerElement) {
 			chatInputContainerElement.style.height = '';
 			chatInputContainerElement.style.height =
 				Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
+		}
 
-			const chatInputElement = document.getElementById('chat-input');
-			chatInputElement?.focus();
+		await tick();
+		if (chatInputElement) {
+			chatInputElement.focus();
+			chatInputElement.dispatchEvent(new Event('input'));
 		}
 
 		await tick();

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

@@ -30,11 +30,15 @@
 	// Interface
 	let defaultModelId = '';
 	let showUsername = false;
+	let richTextInput = true;
 
 	let landingPageMode = '';
 	let chatBubble = true;
 	let chatDirection: 'LTR' | 'RTL' = 'LTR';
+
+	// Admin - Show Update Available Toast
 	let showUpdateToast = true;
+	let showChangelog = true;
 
 	let showEmojiInCall = false;
 	let voiceInterruption = false;
@@ -70,6 +74,11 @@
 		saveSettings({ showUpdateToast: showUpdateToast });
 	};
 
+	const toggleShowChangelog = async () => {
+		showChangelog = !showChangelog;
+		saveSettings({ showChangelog: showChangelog });
+	};
+
 	const toggleShowUsername = async () => {
 		showUsername = !showUsername;
 		saveSettings({ showUsername: showUsername });
@@ -125,6 +134,11 @@
 		saveSettings({ autoTags });
 	};
 
+	const toggleRichTextInput = async () => {
+		richTextInput = !richTextInput;
+		saveSettings({ richTextInput });
+	};
+
 	const toggleResponseAutoCopy = async () => {
 		const permission = await navigator.clipboard
 			.readText()
@@ -168,10 +182,12 @@
 
 		showUsername = $settings.showUsername ?? false;
 		showUpdateToast = $settings.showUpdateToast ?? true;
+		showChangelog = $settings.showChangelog ?? true;
 
 		showEmojiInCall = $settings.showEmojiInCall ?? false;
 		voiceInterruption = $settings.voiceInterruption ?? false;
 
+		richTextInput = $settings.richTextInput ?? true;
 		landingPageMode = $settings.landingPageMode ?? '';
 		chatBubble = $settings.chatBubble ?? true;
 		widescreenMode = $settings.widescreenMode ?? false;
@@ -376,22 +392,44 @@
 						</button>
 					</div>
 				</div>
+
+				<div>
+					<div class=" py-0.5 flex w-full justify-between">
+						<div class=" self-center text-xs">
+							{$i18n.t(`Show "What's New" modal on login`)}
+						</div>
+
+						<button
+							class="p-1 px-3 text-xs flex rounded transition"
+							on:click={() => {
+								toggleShowChangelog();
+							}}
+							type="button"
+						>
+							{#if showChangelog === 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>
 			{/if}
 
+			<div class=" my-1.5 text-sm font-medium">{$i18n.t('Chat')}</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs">
-						{$i18n.t('Fluidly stream large external response chunks')}
-					</div>
+					<div class=" self-center text-xs">{$i18n.t('Title Auto-Generation')}</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
 						on:click={() => {
-							toggleSplitLargeChunks();
+							toggleTitleAutoGenerate();
 						}}
 						type="button"
 					>
-						{#if splitLargeChunks === true}
+						{#if titleAutoGenerate === true}
 							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
 							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
@@ -402,18 +440,16 @@
 
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs">
-						{$i18n.t('Scroll to bottom when switching between branches')}
-					</div>
+					<div class=" self-center text-xs">{$i18n.t('Chat Tags Auto-Generation')}</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
 						on:click={() => {
-							togglesScrollOnBranchChange();
+							toggleAutoTags();
 						}}
 						type="button"
 					>
-						{#if scrollOnBranchChange === true}
+						{#if autoTags === true}
 							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
 							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
@@ -425,44 +461,39 @@
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div class=" self-center text-xs">
-						{$i18n.t('Chat Background Image')}
+						{$i18n.t('Response AutoCopy to Clipboard')}
 					</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
 						on:click={() => {
-							if (backgroundImageUrl !== null) {
-								backgroundImageUrl = null;
-								saveSettings({ backgroundImageUrl });
-							} else {
-								filesInputElement.click();
-							}
+							toggleResponseAutoCopy();
 						}}
 						type="button"
 					>
-						{#if backgroundImageUrl !== null}
-							<span class="ml-2 self-center">{$i18n.t('Reset')}</span>
+						{#if responseAutoCopy === true}
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
-							<span class="ml-2 self-center">{$i18n.t('Upload')}</span>
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 						{/if}
 					</button>
 				</div>
 			</div>
 
-			<div class=" my-1.5 text-sm font-medium">{$i18n.t('Chat')}</div>
-
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs">{$i18n.t('Title Auto-Generation')}</div>
+					<div class=" self-center text-xs">
+						{$i18n.t('Rich Text Input for Chat')}
+					</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
 						on:click={() => {
-							toggleTitleAutoGenerate();
+							toggleRichTextInput();
 						}}
 						type="button"
 					>
-						{#if titleAutoGenerate === true}
+						{#if richTextInput === true}
 							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
 							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
@@ -473,16 +504,43 @@
 
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs">{$i18n.t('Chat Tags Auto-Generation')}</div>
+					<div class=" self-center text-xs">
+						{$i18n.t('Chat Background Image')}
+					</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
 						on:click={() => {
-							toggleAutoTags();
+							if (backgroundImageUrl !== null) {
+								backgroundImageUrl = null;
+								saveSettings({ backgroundImageUrl });
+							} else {
+								filesInputElement.click();
+							}
 						}}
 						type="button"
 					>
-						{#if autoTags === true}
+						{#if backgroundImageUrl !== null}
+							<span class="ml-2 self-center">{$i18n.t('Reset')}</span>
+						{:else}
+							<span class="ml-2 self-center">{$i18n.t('Upload')}</span>
+						{/if}
+					</button>
+				</div>
+			</div>
+
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs">{$i18n.t('Allow User Location')}</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							toggleUserLocation();
+						}}
+						type="button"
+					>
+						{#if userLocation === true}
 							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
 							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
@@ -493,18 +551,16 @@
 
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs">
-						{$i18n.t('Response AutoCopy to Clipboard')}
-					</div>
+					<div class=" self-center text-xs">{$i18n.t('Haptic Feedback')}</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
 						on:click={() => {
-							toggleResponseAutoCopy();
+							toggleHapticFeedback();
 						}}
 						type="button"
 					>
-						{#if responseAutoCopy === true}
+						{#if hapticFeedback === true}
 							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
 							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
@@ -515,16 +571,18 @@
 
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs">{$i18n.t('Allow User Location')}</div>
+					<div class=" self-center text-xs">
+						{$i18n.t('Fluidly stream large external response chunks')}
+					</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
 						on:click={() => {
-							toggleUserLocation();
+							toggleSplitLargeChunks();
 						}}
 						type="button"
 					>
-						{#if userLocation === true}
+						{#if splitLargeChunks === true}
 							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
 							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
@@ -535,16 +593,18 @@
 
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs">{$i18n.t('Haptic Feedback')}</div>
+					<div class=" self-center text-xs">
+						{$i18n.t('Scroll to bottom when switching between branches')}
+					</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
 						on:click={() => {
-							toggleHapticFeedback();
+							togglesScrollOnBranchChange();
 						}}
 						type="button"
 					>
-						{#if hapticFeedback === true}
+						{#if scrollOnBranchChange === true}
 							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
 							<span class="ml-2 self-center">{$i18n.t('Off')}</span>

src/lib/components/common/RichTextInput.svelte

@@ -288,6 +288,12 @@
 		return false;
 	}
 
+	// Replace tabs with four spaces
+	function handleTabIndentation(text: string): string {
+		// Replace each tab character with four spaces
+		return text.replace(/\t/g, '    ');
+	}
+
 	onMount(() => {
 		const initialDoc = markdownToProseMirrorDoc(value || ''); // Convert the initial content
 
@@ -403,6 +409,22 @@
 				},
 				paste: (view, event) => {
 					if (event.clipboardData) {
+						// Extract plain text from clipboard and paste it without formatting
+						const plainText = event.clipboardData.getData('text/plain');
+						if (plainText) {
+							const modifiedText = handleTabIndentation(plainText);
+							console.log(modifiedText);
+
+							// Replace the current selection with the plain text content
+							const tr = view.state.tr.replaceSelectionWith(
+								view.state.schema.text(modifiedText),
+								false
+							);
+							view.dispatch(tr.scrollIntoView());
+							event.preventDefault(); // Prevent the default paste behavior
+							return true;
+						}
+
 						// Check if the pasted content contains image files
 						const hasImageFile = Array.from(event.clipboardData.files).some((file) =>
 							file.type.startsWith('image/')

src/lib/components/icons/DocumentArrowDown.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m.75 12 3 3m0 0 3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+	/>
+</svg>

src/lib/components/icons/SparklesSolid.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class={className}>
+	<path
+		fill-rule="evenodd"
+		d="M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z"
+		clip-rule="evenodd"
+	/>
+</svg>

src/lib/components/layout/Sidebar.svelte

@@ -571,10 +571,15 @@
 							importChatHandler(e.detail, true);
 						}}
 						on:drop={async (e) => {
-							const { type, id } = e.detail;
+							const { type, id, item } = e.detail;
 
 							if (type === 'chat') {
-								const chat = await getChatById(localStorage.token, id);
+								let chat = await getChatById(localStorage.token, id).catch((error) => {
+									return null;
+								});
+								if (!chat && item) {
+									chat = await importChat(localStorage.token, item.chat, item?.meta ?? {});
+								}
 
 								if (chat) {
 									console.log(chat);
@@ -587,19 +592,13 @@
 											toast.error(error);
 											return null;
 										});
-
-										if (res) {
-											initChatList();
-										}
 									}
 
 									if (!chat.pinned) {
-										const res = await toggleChatPinnedStatusById(localStorage.token, id);
-
-										if (res) {
-											initChatList();
-										}
+										const res = await toggleChatPinnedStatusById(localStorage.token, chat.id);
 									}
+
+									initChatList();
 								}
 							}
 						}}
@@ -660,10 +659,15 @@
 						importChatHandler(e.detail);
 					}}
 					on:drop={async (e) => {
-						const { type, id } = e.detail;
+						const { type, id, item } = e.detail;
 
 						if (type === 'chat') {
-							const chat = await getChatById(localStorage.token, id);
+							let chat = await getChatById(localStorage.token, id).catch((error) => {
+								return null;
+							});
+							if (!chat && item) {
+								chat = await importChat(localStorage.token, item.chat, item?.meta ?? {});
+							}
 
 							if (chat) {
 								console.log(chat);
@@ -674,19 +678,13 @@
 											return null;
 										}
 									);
-
-									if (res) {
-										initChatList();
-									}
 								}
 
 								if (chat.pinned) {
-									const res = await toggleChatPinnedStatusById(localStorage.token, id);
-
-									if (res) {
-										initChatList();
-									}
+									const res = await toggleChatPinnedStatusById(localStorage.token, chat, id);
 								}
+
+								initChatList();
 							}
 						} else if (type === 'folder') {
 							if (folders[id].parent_id === null) {

src/lib/components/layout/Sidebar/ChatItem.svelte

@@ -11,6 +11,7 @@
 		cloneChatById,
 		deleteChatById,
 		getAllTags,
+		getChatById,
 		getChatList,
 		getChatListByTagName,
 		getPinnedChatList,
@@ -46,7 +47,21 @@
 	export let selected = false;
 	export let shiftKey = false;
 
+	let chat = null;
+
 	let mouseOver = false;
+	let draggable = false;
+	$: if (mouseOver) {
+		loadChat();
+	}
+
+	const loadChat = async () => {
+		if (!chat) {
+			draggable = false;
+			chat = await getChatById(localStorage.token, id);
+			draggable = true;
+		}
+	};
 
 	let showShareChatModal = false;
 	let confirmEdit = false;
@@ -133,7 +148,8 @@
 			'text/plain',
 			JSON.stringify({
 				type: 'chat',
-				id: id
+				id: id,
+				item: chat
 			})
 		);
 
@@ -204,7 +220,7 @@
 	</DragGhost>
 {/if}
 
-<div bind:this={itemElement} class=" w-full {className} relative group" draggable="true">
+<div bind:this={itemElement} class=" w-full {className} relative group" {draggable}>
 	{#if confirmEdit}
 		<div
 			class=" w-full flex justify-between rounded-lg px-[11px] py-[6px] {id === $chatId ||

src/lib/components/layout/Sidebar/RecursiveFolder.svelte

@@ -22,7 +22,12 @@
 		updateFolderParentIdById
 	} from '$lib/apis/folders';
 	import { toast } from 'svelte-sonner';
-	import { getChatsByFolderId, updateChatFolderIdById } from '$lib/apis/chats';
+	import {
+		getChatById,
+		getChatsByFolderId,
+		importChat,
+		updateChatFolderIdById
+	} from '$lib/apis/chats';
 	import ChatItem from './ChatItem.svelte';
 	import FolderMenu from './Folders/FolderMenu.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
@@ -101,7 +106,7 @@
 						const data = JSON.parse(dataTransfer);
 						console.log(data);
 
-						const { type, id } = data;
+						const { type, id, item } = data;
 
 						if (type === 'folder') {
 							open = true;
@@ -122,8 +127,15 @@
 						} else if (type === 'chat') {
 							open = true;
 
+							let chat = await getChatById(localStorage.token, id).catch((error) => {
+								return null;
+							});
+							if (!chat && item) {
+								chat = await importChat(localStorage.token, item.chat, item?.meta ?? {});
+							}
+
 							// Move the chat
-							const res = await updateChatFolderIdById(localStorage.token, id, folderId).catch(
+							const res = await updateChatFolderIdById(localStorage.token, chat.id, folderId).catch(
 								(error) => {
 									toast.error(error);
 									return null;
@@ -396,6 +408,7 @@
 							}}
 							on:keydown={(e) => {
 								if (e.key === 'Enter') {
+									nameUpdateHandler();
 									edit = false;
 								}
 							}}

src/lib/components/playground/Notes.svelte

@@ -0,0 +1,121 @@
+<script>
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import RichTextInput from '../common/RichTextInput.svelte';
+	import Spinner from '../common/Spinner.svelte';
+	import Sparkles from '../icons/Sparkles.svelte';
+	import SparklesSolid from '../icons/SparklesSolid.svelte';
+	import Mic from '../icons/Mic.svelte';
+	import VoiceRecording from '../chat/MessageInput/VoiceRecording.svelte';
+	import Tooltip from '../common/Tooltip.svelte';
+	import { toast } from 'svelte-sonner';
+
+	let name = '';
+	let content = '';
+
+	let voiceInput = false;
+	let loading = false;
+</script>
+
+<div class="relative flex-1 w-full h-full flex justify-center overflow-auto px-5 py-1">
+	{#if loading}
+		<div class=" absolute top-0 bottom-0 left-0 right-0 flex">
+			<div class="m-auto">
+				<Spinner />
+			</div>
+		</div>
+	{/if}
+
+	<div class=" w-full flex flex-col gap-2 {loading ? 'opacity-20' : ''}">
+		<div class="flex-shrink-0 w-full flex justify-between items-center">
+			<div class="w-full">
+				<input
+					class="w-full text-2xl font-medium bg-transparent outline-none"
+					type="text"
+					bind:value={name}
+					placeholder={$i18n.t('Title')}
+					required
+				/>
+			</div>
+		</div>
+
+		<div class=" flex-1 w-full h-full">
+			<RichTextInput
+				className=" input-prose-sm"
+				bind:value={content}
+				placeholder={$i18n.t('Write something...')}
+			/>
+		</div>
+	</div>
+
+	<div class="absolute bottom-0 left-0 right-0 p-5 max-w-full flex justify-end">
+		<div class="flex gap-0.5 justify-end w-full">
+			{#if voiceInput}
+				<div class="flex-1 w-full">
+					<VoiceRecording
+						bind:recording={voiceInput}
+						className="p-1 w-full max-w-full"
+						on:cancel={() => {
+							voiceInput = false;
+						}}
+						on:confirm={(e) => {
+							const { text, filename } = e.detail;
+
+							// url is hostname + /cache/audio/transcription/ + filename
+							const url = `${window.location.origin}/cache/audio/transcription/${filename}`;
+
+							// Open in new tab
+
+							if (content.trim() !== '') {
+								content = `${content}\n\n${text}\n\nRecording: ${url}\n\n`;
+							} else {
+								content = `${content}${text}\n\nRecording: ${url}\n\n`;
+							}
+
+							voiceInput = false;
+						}}
+					/>
+				</div>
+			{:else}
+				<Tooltip content={$i18n.t('Voice Input')}>
+					<button
+						class="cursor-pointer p-2.5 flex rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition shadow-xl"
+						type="button"
+						on:click={async () => {
+							try {
+								let stream = await navigator.mediaDevices
+									.getUserMedia({ audio: true })
+									.catch(function (err) {
+										toast.error(
+											$i18n.t(`Permission denied when accessing microphone: {{error}}`, {
+												error: err
+											})
+										);
+										return null;
+									});
+
+								if (stream) {
+									voiceInput = true;
+									const tracks = stream.getTracks();
+									tracks.forEach((track) => track.stop());
+								}
+								stream = null;
+							} catch {
+								toast.error($i18n.t('Permission denied when accessing microphone'));
+							}
+						}}
+					>
+						<Mic className="size-4" />
+					</button>
+				</Tooltip>
+			{/if}
+
+			<!-- <button
+				class="cursor-pointer p-2.5 flex rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition shadow-xl"
+			>
+				<SparklesSolid className="size-4" />
+			</button> -->
+		</div>
+	</div>
+</div>

src/lib/components/workspace/Knowledge/Collection/AddTextContentModal.svelte

@@ -85,8 +85,8 @@
 									voiceInput = false;
 								}}
 								on:confirm={(e) => {
-									const response = e.detail;
-									content = `${content}${response} `;
+									const { text, filename } = e.detail;
+									content = `${content}${text} `;
 
 									voiceInput = false;
 								}}

src/lib/i18n/locales/ar-BH/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "ليس صحيحا من حيث الواقع",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "ملاحظة: إذا قمت بتعيين الحد الأدنى من النقاط، فلن يؤدي البحث إلا إلى إرجاع المستندات التي لها نقاط أكبر من أو تساوي الحد الأدنى من النقاط.",
+	"Notes": "",
 	"Notifications": "إشعارات",
 	"November": "نوفمبر",
 	"num_gpu (Ollama)": "",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "",
 	"Response splitting": "",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "منصب",
 	"Rosé Pine": "Rosé Pine",

src/lib/i18n/locales/bg-BG/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "Не е фактологически правилно",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "Забележка: Ако зададете минимален резултат, търсенето ще върне само документи с резултат, по-голям или равен на минималния резултат.",
+	"Notes": "",
 	"Notifications": "Десктоп Известия",
 	"November": "Ноември",
 	"num_gpu (Ollama)": "",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "",
 	"Response splitting": "",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "Роля",
 	"Rosé Pine": "Rosé Pine",

src/lib/i18n/locales/bn-BD/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "তথ্যগত দিক থেকে সঠিক নয়",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "দ্রষ্টব্য: আপনি যদি ন্যূনতম স্কোর সেট করেন তবে অনুসন্ধানটি কেবলমাত্র ন্যূনতম স্কোরের চেয়ে বেশি বা সমান স্কোর সহ নথিগুলি ফেরত দেবে।",
+	"Notes": "",
 	"Notifications": "নোটিফিকেশনসমূহ",
 	"November": "নভেম্বর",
 	"num_gpu (Ollama)": "",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "",
 	"Response splitting": "",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "পদবি",
 	"Rosé Pine": "রোজ পাইন",

src/lib/i18n/locales/ca-ES/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "No és clarament correcte",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "Nota: Si s'estableix una puntuació mínima, la cerca només retornarà documents amb una puntuació major o igual a la puntuació mínima.",
+	"Notes": "",
 	"Notifications": "Notificacions",
 	"November": "Novembre",
 	"num_gpu (Ollama)": "num_gpu (Ollama)",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "Les notifications de resposta no es poden activar perquè els permisos del lloc web han estat rebutjats. Comprova les preferències del navegador per donar l'accés necessari.",
 	"Response splitting": "Divisió de la resposta",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "Rol",
 	"Rosé Pine": "Rosé Pine",

src/lib/i18n/locales/ceb-PH/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "",
+	"Notes": "",
 	"Notifications": "Mga pahibalo sa desktop",
 	"November": "",
 	"num_gpu (Ollama)": "",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "",
 	"Response splitting": "",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "Papel",
 	"Rosé Pine": "Rosé Pine",

src/lib/i18n/locales/da-DK/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "Ikke faktuelt korrekt",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "Bemærk: Hvis du angiver en minimumscore, returnerer søgningen kun dokumenter med en score, der er større end eller lig med minimumscoren.",
+	"Notes": "",
 	"Notifications": "Notifikationer",
 	"November": "November",
 	"num_gpu (Ollama)": "num_gpu (Ollama)",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "Svarnotifikationer kan ikke aktiveres, da webstedets tilladelser er blevet nægtet. Besøg dine browserindstillinger for at give den nødvendige adgang.",
 	"Response splitting": "Svaropdeling",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "Rolle",
 	"Rosé Pine": "Rosé Pine",

src/lib/i18n/locales/de-DE/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "Nicht sachlich korrekt",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "Hinweis: Wenn Sie eine Mindestpunktzahl festlegen, werden in der Suche nur Dokumente mit einer Punktzahl größer oder gleich der Mindestpunktzahl zurückgegeben.",
+	"Notes": "",
 	"Notifications": "Benachrichtigungen",
 	"November": "November",
 	"num_gpu (Ollama)": "",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "Benachrichtigungen können nicht aktiviert werden, da die Website-Berechtigungen abgelehnt wurden. Bitte besuchen Sie Ihre Browser-Einstellungen, um den erforderlichen Zugriff zu gewähren.",
 	"Response splitting": "",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "Rolle",
 	"Rosé Pine": "Rosé Pine",

src/lib/i18n/locales/dg-DG/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "",
+	"Notes": "",
 	"Notifications": "Notifications",
 	"November": "",
 	"num_gpu (Ollama)": "",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "",
 	"Response splitting": "",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "Role",
 	"Rosé Pine": "Rosé Pine",

src/lib/i18n/locales/en-GB/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "",
+	"Notes": "",
 	"Notifications": "",
 	"November": "",
 	"num_gpu (Ollama)": "",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "",
 	"Response splitting": "",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "",
 	"Rosé Pine": "",

src/lib/i18n/locales/en-US/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "",
+	"Notes": "",
 	"Notifications": "",
 	"November": "",
 	"num_gpu (Ollama)": "",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "",
 	"Response splitting": "",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "",
 	"Rosé Pine": "",

src/lib/i18n/locales/es-ES/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "No es correcto en todos los aspectos",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "Nota: Si estableces una puntuación mínima, la búsqueda sólo devolverá documentos con una puntuación mayor o igual a la puntuación mínima.",
+	"Notes": "",
 	"Notifications": "Notificaciones",
 	"November": "Noviembre",
 	"num_gpu (Ollama)": "",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "Las notificaciones de respuesta no pueden activarse debido a que los permisos del sitio web han sido denegados. Por favor, visite las configuraciones de su navegador para otorgar el acceso necesario.",
 	"Response splitting": "División de respuestas",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "Rol",
 	"Rosé Pine": "Rosé Pine",

src/lib/i18n/locales/fa-IR/translation.json

@@ -490,6 +490,7 @@
 	"Not factually correct": "اشتباهی فکری نیست",
 	"Not helpful": "",
 	"Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.": "توجه: اگر حداقل نمره را تعیین کنید، جستجو تنها اسنادی را با نمره بیشتر یا برابر با حداقل نمره باز می گرداند.",
+	"Notes": "",
 	"Notifications": "اعلان",
 	"November": "نوامبر",
 	"num_gpu (Ollama)": "",
@@ -587,6 +588,7 @@
 	"Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.": "",
 	"Response splitting": "",
 	"Result": "",
+	"Rich Text Input for Chat": "",
 	"RK": "",
 	"Role": "نقش",
 	"Rosé Pine": "Rosé Pine",