Merge branch 'ollama-webui:main' into main

README.md

@@ -39,6 +39,8 @@ Also check our sibling project, [OllamaHub](https://ollamahub.com/), where you c
 
 - 👍👎 **RLHF Annotation**: Empower your messages by rating them with thumbs up and thumbs down, facilitating the creation of datasets for Reinforcement Learning from Human Feedback (RLHF). Utilize your messages to train or fine-tune models, all while ensuring the confidentiality of locally saved data.
 
+- 🏷️ **Conversation Tagging**: Effortlessly categorize and locate specific chats for quick reference and streamlined data collection.
+
 - 📥🗑️ **Download/Delete Models**: Easily download or remove models directly from the web UI.
 
 - ⬆️ **GGUF File Model Creation**: Effortlessly create Ollama models by uploading GGUF files directly from the web UI. Streamlined process with options to upload from your machine or download GGUF files from Hugging Face.

backend/apps/ollama/main.py

@@ -5,6 +5,7 @@ from fastapi.concurrency import run_in_threadpool
 
 import requests
 import json
+import uuid
 from pydantic import BaseModel
 
 from apps.web.models.users import Users
@@ -26,6 +27,9 @@ app.state.OLLAMA_API_BASE_URL = OLLAMA_API_BASE_URL
 # TARGET_SERVER_URL = OLLAMA_API_BASE_URL
 
 
+REQUEST_POOL = []
+
+
 @app.get("/url")
 async def get_ollama_api_url(user=Depends(get_current_user)):
     if user and user.role == "admin":
@@ -49,6 +53,16 @@ async def update_ollama_api_url(
         raise HTTPException(status_code=401, detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
 
 
+@app.get("/cancel/{request_id}")
+async def cancel_ollama_request(request_id: str, user=Depends(get_current_user)):
+    if user:
+        if request_id in REQUEST_POOL:
+            REQUEST_POOL.remove(request_id)
+        return True
+    else:
+        raise HTTPException(status_code=401, detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
+
+
 @app.api_route("/{path:path}", methods=["GET", "POST", "PUT", "DELETE"])
 async def proxy(path: str, request: Request, user=Depends(get_current_user)):
     target_url = f"{app.state.OLLAMA_API_BASE_URL}/{path}"
@@ -74,7 +88,27 @@ async def proxy(path: str, request: Request, user=Depends(get_current_user)):
 
     def get_request():
         nonlocal r
+
+        request_id = str(uuid.uuid4())
         try:
+            REQUEST_POOL.append(request_id)
+
+            def stream_content():
+                try:
+                    if path in ["chat"]:
+                        yield json.dumps({"id": request_id, "done": False}) + "\n"
+
+                    for chunk in r.iter_content(chunk_size=8192):
+                        if request_id in REQUEST_POOL:
+                            yield chunk
+                        else:
+                            print("User: canceled request")
+                            break
+                finally:
+                    if hasattr(r, "close"):
+                        r.close()
+                        REQUEST_POOL.remove(request_id)
+
             r = requests.request(
                 method=request.method,
                 url=target_url,
@@ -85,8 +119,10 @@ async def proxy(path: str, request: Request, user=Depends(get_current_user)):
 
             r.raise_for_status()
 
+            # r.close()
+
             return StreamingResponse(
-                r.iter_content(chunk_size=8192),
+                stream_content(),
                 status_code=r.status_code,
                 headers=dict(r.headers),
             )

backend/apps/openai/main.py

@@ -37,19 +37,16 @@ async def get_openai_url(user=Depends(get_current_user)):
     if user and user.role == "admin":
         return {"OPENAI_API_BASE_URL": app.state.OPENAI_API_BASE_URL}
     else:
-        raise HTTPException(status_code=401,
+        raise HTTPException(status_code=401, detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
-                            detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
 
 
 @app.post("/url/update")
-async def update_openai_url(form_data: UrlUpdateForm,
+async def update_openai_url(form_data: UrlUpdateForm, user=Depends(get_current_user)):
-                            user=Depends(get_current_user)):
     if user and user.role == "admin":
         app.state.OPENAI_API_BASE_URL = form_data.url
         return {"OPENAI_API_BASE_URL": app.state.OPENAI_API_BASE_URL}
     else:
-        raise HTTPException(status_code=401,
+        raise HTTPException(status_code=401, detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
-                            detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
 
 
 @app.get("/key")
@@ -57,19 +54,16 @@ async def get_openai_key(user=Depends(get_current_user)):
     if user and user.role == "admin":
         return {"OPENAI_API_KEY": app.state.OPENAI_API_KEY}
     else:
-        raise HTTPException(status_code=401,
+        raise HTTPException(status_code=401, detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
-                            detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
 
 
 @app.post("/key/update")
-async def update_openai_key(form_data: KeyUpdateForm,
+async def update_openai_key(form_data: KeyUpdateForm, user=Depends(get_current_user)):
-                            user=Depends(get_current_user)):
     if user and user.role == "admin":
         app.state.OPENAI_API_KEY = form_data.key
         return {"OPENAI_API_KEY": app.state.OPENAI_API_KEY}
     else:
-        raise HTTPException(status_code=401,
+        raise HTTPException(status_code=401, detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
-                            detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
 
 
 @app.api_route("/{path:path}", methods=["GET", "POST", "PUT", "DELETE"])
@@ -78,15 +72,29 @@ async def proxy(path: str, request: Request, user=Depends(get_current_user)):
     print(target_url, app.state.OPENAI_API_KEY)
 
     if user.role not in ["user", "admin"]:
-        raise HTTPException(status_code=401,
+        raise HTTPException(status_code=401, detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
-                            detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
     if app.state.OPENAI_API_KEY == "":
-        raise HTTPException(status_code=401,
+        raise HTTPException(status_code=401, detail=ERROR_MESSAGES.API_KEY_NOT_FOUND)
-                            detail=ERROR_MESSAGES.API_KEY_NOT_FOUND)
 
     body = await request.body()
-    # headers = dict(request.headers)
+
-    # print(headers)
+    # TODO: Remove below after gpt-4-vision fix from Open AI
+    # Try to decode the body of the request from bytes to a UTF-8 string (Require add max_token to fix gpt-4-vision)
+    try:
+        body = body.decode("utf-8")
+        body = json.loads(body)
+
+        # Check if the model is "gpt-4-vision-preview" and set "max_tokens" to 4000
+        # This is a workaround until OpenAI fixes the issue with this model
+        if body.get("model") == "gpt-4-vision-preview":
+            if "max_tokens" not in body:
+                body["max_tokens"] = 4000
+            print("Modified body_dict:", body)
+
+        # Convert the modified body back to JSON
+        body = json.dumps(body)
+    except json.JSONDecodeError as e:
+        print("Error loading request body into a dictionary:", e)
 
     headers = {}
     headers["Authorization"] = f"Bearer {app.state.OPENAI_API_KEY}"
@@ -125,8 +133,8 @@ async def proxy(path: str, request: Request, user=Depends(get_current_user)):
 
             if "openai" in app.state.OPENAI_API_BASE_URL and path == "models":
                 response_data["data"] = list(
-                    filter(lambda model: "gpt" in model["id"],
+                    filter(lambda model: "gpt" in model["id"], response_data["data"])
-                           response_data["data"]))
+                )
 
             return response_data
     except Exception as e:

backend/apps/web/models/chats.py

@@ -60,23 +60,23 @@ class ChatTitleIdResponse(BaseModel):
 
 
 class ChatTable:
-
     def __init__(self, db):
         self.db = db
         db.create_tables([Chat])
 
-    def insert_new_chat(self, user_id: str,
+    def insert_new_chat(self, user_id: str, form_data: ChatForm) -> Optional[ChatModel]:
-                        form_data: ChatForm) -> Optional[ChatModel]:
         id = str(uuid.uuid4())
         chat = ChatModel(
             **{
                 "id": id,
                 "user_id": user_id,
-                "title": form_data.chat["title"] if "title" in
+                "title": form_data.chat["title"]
-                form_data.chat else "New Chat",
+                if "title" in form_data.chat
+                else "New Chat",
                 "chat": json.dumps(form_data.chat),
                 "timestamp": int(time.time()),
-            })
+            }
+        )
 
         result = Chat.create(**chat.model_dump())
         return chat if result else None
@@ -109,25 +109,37 @@ class ChatTable:
         except:
             return None
 
-    def get_chat_lists_by_user_id(self,
+    def get_chat_lists_by_user_id(
-                                  user_id: str,
+        self, user_id: str, skip: int = 0, limit: int = 50
-                                  skip: int = 0,
+    ) -> List[ChatModel]:
-                                  limit: int = 50) -> List[ChatModel]:
         return [
-            ChatModel(**model_to_dict(chat)) for chat in Chat.select().where(
+            ChatModel(**model_to_dict(chat))
-                Chat.user_id == user_id).order_by(Chat.timestamp.desc())
+            for chat in Chat.select()
+            .where(Chat.user_id == user_id)
+            .order_by(Chat.timestamp.desc())
             # .limit(limit)
             # .offset(skip)
         ]
 
-    def get_all_chats_by_user_id(self, user_id: str) -> List[ChatModel]:
+    def get_chat_lists_by_chat_ids(
+        self, chat_ids: List[str], skip: int = 0, limit: int = 50
+    ) -> List[ChatModel]:
         return [
-            ChatModel(**model_to_dict(chat)) for chat in Chat.select().where(
+            ChatModel(**model_to_dict(chat))
-                Chat.user_id == user_id).order_by(Chat.timestamp.desc())
+            for chat in Chat.select()
+            .where(Chat.id.in_(chat_ids))
+            .order_by(Chat.timestamp.desc())
         ]
 
-    def get_chat_by_id_and_user_id(self, id: str,
+    def get_all_chats_by_user_id(self, user_id: str) -> List[ChatModel]:
-                                   user_id: str) -> Optional[ChatModel]:
+        return [
+            ChatModel(**model_to_dict(chat))
+            for chat in Chat.select()
+            .where(Chat.user_id == user_id)
+            .order_by(Chat.timestamp.desc())
+        ]
+
+    def get_chat_by_id_and_user_id(self, id: str, user_id: str) -> Optional[ChatModel]:
         try:
             chat = Chat.get(Chat.id == id, Chat.user_id == user_id)
             return ChatModel(**model_to_dict(chat))
@@ -142,8 +154,7 @@ class ChatTable:
 
     def delete_chat_by_id_and_user_id(self, id: str, user_id: str) -> bool:
         try:
-            query = Chat.delete().where((Chat.id == id)
+            query = Chat.delete().where((Chat.id == id) & (Chat.user_id == user_id))
-                                        & (Chat.user_id == user_id))
             query.execute()  # Remove the rows, return number of rows removed.
 
             return True

backend/apps/web/models/tags.py

@@ -0,0 +1,206 @@
+from pydantic import BaseModel
+from typing import List, Union, Optional
+from peewee import *
+from playhouse.shortcuts import model_to_dict
+
+import json
+import uuid
+import time
+
+from apps.web.internal.db import DB
+
+####################
+# Tag DB Schema
+####################
+
+
+class Tag(Model):
+    id = CharField(unique=True)
+    name = CharField()
+    user_id = CharField()
+    data = TextField(null=True)
+
+    class Meta:
+        database = DB
+
+
+class ChatIdTag(Model):
+    id = CharField(unique=True)
+    tag_name = CharField()
+    chat_id = CharField()
+    user_id = CharField()
+    timestamp = DateField()
+
+    class Meta:
+        database = DB
+
+
+class TagModel(BaseModel):
+    id: str
+    name: str
+    user_id: str
+    data: Optional[str] = None
+
+
+class ChatIdTagModel(BaseModel):
+    id: str
+    tag_name: str
+    chat_id: str
+    user_id: str
+    timestamp: int
+
+
+####################
+# Forms
+####################
+
+
+class ChatIdTagForm(BaseModel):
+    tag_name: str
+    chat_id: str
+
+
+class TagChatIdsResponse(BaseModel):
+    chat_ids: List[str]
+
+
+class ChatTagsResponse(BaseModel):
+    tags: List[str]
+
+
+class TagTable:
+    def __init__(self, db):
+        self.db = db
+        db.create_tables([Tag, ChatIdTag])
+
+    def insert_new_tag(self, name: str, user_id: str) -> Optional[TagModel]:
+        id = str(uuid.uuid4())
+        tag = TagModel(**{"id": id, "user_id": user_id, "name": name})
+        try:
+            result = Tag.create(**tag.model_dump())
+            if result:
+                return tag
+            else:
+                return None
+        except Exception as e:
+            return None
+
+    def get_tag_by_name_and_user_id(
+        self, name: str, user_id: str
+    ) -> Optional[TagModel]:
+        try:
+            tag = Tag.get(Tag.name == name, Tag.user_id == user_id)
+            return TagModel(**model_to_dict(tag))
+        except Exception as e:
+            return None
+
+    def add_tag_to_chat(
+        self, user_id: str, form_data: ChatIdTagForm
+    ) -> Optional[ChatIdTagModel]:
+        tag = self.get_tag_by_name_and_user_id(form_data.tag_name, user_id)
+        if tag == None:
+            tag = self.insert_new_tag(form_data.tag_name, user_id)
+
+        id = str(uuid.uuid4())
+        chatIdTag = ChatIdTagModel(
+            **{
+                "id": id,
+                "user_id": user_id,
+                "chat_id": form_data.chat_id,
+                "tag_name": tag.name,
+                "timestamp": int(time.time()),
+            }
+        )
+        try:
+            result = ChatIdTag.create(**chatIdTag.model_dump())
+            if result:
+                return chatIdTag
+            else:
+                return None
+        except:
+            return None
+
+    def get_tags_by_user_id(self, user_id: str) -> List[TagModel]:
+        tag_names = [
+            ChatIdTagModel(**model_to_dict(chat_id_tag)).tag_name
+            for chat_id_tag in ChatIdTag.select()
+            .where(ChatIdTag.user_id == user_id)
+            .order_by(ChatIdTag.timestamp.desc())
+        ]
+
+        return [
+            TagModel(**model_to_dict(tag))
+            for tag in Tag.select().where(Tag.name.in_(tag_names))
+        ]
+
+    def get_tags_by_chat_id_and_user_id(
+        self, chat_id: str, user_id: str
+    ) -> List[TagModel]:
+        tag_names = [
+            ChatIdTagModel(**model_to_dict(chat_id_tag)).tag_name
+            for chat_id_tag in ChatIdTag.select()
+            .where((ChatIdTag.user_id == user_id) & (ChatIdTag.chat_id == chat_id))
+            .order_by(ChatIdTag.timestamp.desc())
+        ]
+
+        return [
+            TagModel(**model_to_dict(tag))
+            for tag in Tag.select().where(Tag.name.in_(tag_names))
+        ]
+
+    def get_chat_ids_by_tag_name_and_user_id(
+        self, tag_name: str, user_id: str
+    ) -> Optional[ChatIdTagModel]:
+        return [
+            ChatIdTagModel(**model_to_dict(chat_id_tag))
+            for chat_id_tag in ChatIdTag.select()
+            .where((ChatIdTag.user_id == user_id) & (ChatIdTag.tag_name == tag_name))
+            .order_by(ChatIdTag.timestamp.desc())
+        ]
+
+    def count_chat_ids_by_tag_name_and_user_id(
+        self, tag_name: str, user_id: str
+    ) -> int:
+        return (
+            ChatIdTag.select()
+            .where((ChatIdTag.tag_name == tag_name) & (ChatIdTag.user_id == user_id))
+            .count()
+        )
+
+    def delete_tag_by_tag_name_and_chat_id_and_user_id(
+        self, tag_name: str, chat_id: str, user_id: str
+    ) -> bool:
+        try:
+            query = ChatIdTag.delete().where(
+                (ChatIdTag.tag_name == tag_name)
+                & (ChatIdTag.chat_id == chat_id)
+                & (ChatIdTag.user_id == user_id)
+            )
+            res = query.execute()  # Remove the rows, return number of rows removed.
+            print(res)
+
+            tag_count = self.count_chat_ids_by_tag_name_and_user_id(tag_name, user_id)
+            if tag_count == 0:
+                # Remove tag item from Tag col as well
+                query = Tag.delete().where(
+                    (Tag.name == tag_name) & (Tag.user_id == user_id)
+                )
+                query.execute()  # Remove the rows, return number of rows removed.
+
+            return True
+        except Exception as e:
+            print("delete_tag", e)
+            return False
+
+    def delete_tags_by_chat_id_and_user_id(self, chat_id: str, user_id: str) -> bool:
+        tags = self.get_tags_by_chat_id_and_user_id(chat_id, user_id)
+
+        for tag in tags:
+            self.delete_tag_by_tag_name_and_chat_id_and_user_id(
+                tag.tag_name, chat_id, user_id
+            )
+
+        return True
+
+
+Tags = TagTable(DB)

backend/apps/web/routers/auths.py

@@ -91,42 +91,40 @@ async def signin(form_data: SigninForm):
 
 @router.post("/signup", response_model=SigninResponse)
 async def signup(request: Request, form_data: SignupForm):
-    if request.app.state.ENABLE_SIGNUP:
+    if not request.app.state.ENABLE_SIGNUP:
-        if validate_email_format(form_data.email.lower()):
-            if not Users.get_user_by_email(form_data.email.lower()):
-                try:
-                    role = "admin" if Users.get_num_users() == 0 else "pending"
-                    hashed = get_password_hash(form_data.password)
-                    user = Auths.insert_new_auth(form_data.email.lower(),
-                                                 hashed, form_data.name, role)
-
-                    if user:
-                        token = create_token(data={"email": user.email})
-                        # response.set_cookie(key='token', value=token, httponly=True)
-
-                        return {
-                            "token": token,
-                            "token_type": "Bearer",
-                            "id": user.id,
-                            "email": user.email,
-                            "name": user.name,
-                            "role": user.role,
-                            "profile_image_url": user.profile_image_url,
-                        }
-                    else:
-                        raise HTTPException(
-                            500, detail=ERROR_MESSAGES.CREATE_USER_ERROR)
-                except Exception as err:
-                    raise HTTPException(500,
-                                        detail=ERROR_MESSAGES.DEFAULT(err))
-            else:
-                raise HTTPException(400, detail=ERROR_MESSAGES.EMAIL_TAKEN)
-        else:
-            raise HTTPException(400,
-                                detail=ERROR_MESSAGES.INVALID_EMAIL_FORMAT)
-    else:
         raise HTTPException(400, detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
+        
+    if not validate_email_format(form_data.email.lower()):
+        raise HTTPException(400, detail=ERROR_MESSAGES.INVALID_EMAIL_FORMAT)
+        
+    if Users.get_user_by_email(form_data.email.lower()):
+        raise HTTPException(400, detail=ERROR_MESSAGES.EMAIL_TAKEN)
+        
+    try:
+        role = "admin" if Users.get_num_users() == 0 else "pending"
+        hashed = get_password_hash(form_data.password)
+        user = Auths.insert_new_auth(form_data.email.lower(),
+                                     hashed, form_data.name, role)
 
+        if user:
+            token = create_token(data={"email": user.email})
+            # response.set_cookie(key='token', value=token, httponly=True)
+
+            return {
+                "token": token,
+                "token_type": "Bearer",
+                "id": user.id,
+                "email": user.email,
+                "name": user.name,
+                "role": user.role,
+                "profile_image_url": user.profile_image_url,
+            }
+        else:
+            raise HTTPException(
+                500, detail=ERROR_MESSAGES.CREATE_USER_ERROR)
+    except Exception as err:
+        raise HTTPException(500,
+                            detail=ERROR_MESSAGES.DEFAULT(err))
 
 ############################
 # ToggleSignUp

backend/apps/web/routers/chats.py

@@ -16,6 +16,15 @@ from apps.web.models.chats import (
     Chats,
 )
 
+
+from apps.web.models.tags import (
+    TagModel,
+    ChatIdTagModel,
+    ChatIdTagForm,
+    ChatTagsResponse,
+    Tags,
+)
+
 from utils.utils import (
     bearer_scheme,
 )
@@ -65,6 +74,42 @@ async def create_new_chat(form_data: ChatForm, user=Depends(get_current_user)):
         )
 
 
+############################
+# GetAllTags
+############################
+
+
+@router.get("/tags/all", response_model=List[TagModel])
+async def get_all_tags(user=Depends(get_current_user)):
+    try:
+        tags = Tags.get_tags_by_user_id(user.id)
+        return tags
+    except Exception as e:
+        print(e)
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST, detail=ERROR_MESSAGES.DEFAULT()
+        )
+
+
+############################
+# GetChatsByTags
+############################
+
+
+@router.get("/tags/tag/{tag_name}", response_model=List[ChatTitleIdResponse])
+async def get_user_chats_by_tag_name(
+    tag_name: str, user=Depends(get_current_user), skip: int = 0, limit: int = 50
+):
+    chat_ids = [
+        chat_id_tag.chat_id
+        for chat_id_tag in Tags.get_chat_ids_by_tag_name_and_user_id(tag_name, user.id)
+    ]
+
+    print(chat_ids)
+
+    return Chats.get_chat_lists_by_chat_ids(chat_ids, skip, limit)
+
+
 ############################
 # GetChatById
 ############################
@@ -115,6 +160,88 @@ async def delete_chat_by_id(id: str, user=Depends(get_current_user)):
     return result
 
 
+############################
+# GetChatTagsById
+############################
+
+
+@router.get("/{id}/tags", response_model=List[TagModel])
+async def get_chat_tags_by_id(id: str, user=Depends(get_current_user)):
+    tags = Tags.get_tags_by_chat_id_and_user_id(id, user.id)
+
+    if tags != None:
+        return tags
+    else:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED, detail=ERROR_MESSAGES.NOT_FOUND
+        )
+
+
+############################
+# AddChatTagById
+############################
+
+
+@router.post("/{id}/tags", response_model=Optional[ChatIdTagModel])
+async def add_chat_tag_by_id(
+    id: str, form_data: ChatIdTagForm, user=Depends(get_current_user)
+):
+    tags = Tags.get_tags_by_chat_id_and_user_id(id, user.id)
+
+    if form_data.tag_name not in tags:
+        tag = Tags.add_tag_to_chat(user.id, form_data)
+
+        if tag:
+            return tag
+        else:
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail=ERROR_MESSAGES.NOT_FOUND,
+            )
+    else:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED, detail=ERROR_MESSAGES.DEFAULT()
+        )
+
+
+############################
+# DeleteChatTagById
+############################
+
+
+@router.delete("/{id}/tags", response_model=Optional[bool])
+async def delete_chat_tag_by_id(
+    id: str, form_data: ChatIdTagForm, user=Depends(get_current_user)
+):
+    result = Tags.delete_tag_by_tag_name_and_chat_id_and_user_id(
+        form_data.tag_name, id, user.id
+    )
+
+    if result:
+        return result
+    else:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED, detail=ERROR_MESSAGES.NOT_FOUND
+        )
+
+
+############################
+# DeleteAllChatTagsById
+############################
+
+
+@router.delete("/{id}/tags/all", response_model=Optional[bool])
+async def delete_all_chat_tags_by_id(id: str, user=Depends(get_current_user)):
+    result = Tags.delete_tags_by_chat_id_and_user_id(id, user.id)
+
+    if result:
+        return result
+    else:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED, detail=ERROR_MESSAGES.NOT_FOUND
+        )
+
+
 ############################
 # DeleteAllChats
 ############################

src/lib/apis/chats/index.ts

@@ -93,6 +93,68 @@ export const getAllChats = async (token: string) => {
 	return res;
 };
 
+export const getAllChatTags = async (token: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/tags/all`, {
+		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();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getChatListByTagName = async (token: string = '', tagName: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/tags/tag/${tagName}`, {
+		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();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const getChatById = async (token: string, id: string) => {
 	let error = null;
 
@@ -192,6 +254,141 @@ export const deleteChatById = async (token: string, id: string) => {
 	return res;
 };
 
+export const getTagsById = async (token: string, id: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/${id}/tags`, {
+		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();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const addTagById = async (token: string, id: string, tagName: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/${id}/tags`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			tag_name: tagName,
+			chat_id: id
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const deleteTagById = async (token: string, id: string, tagName: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/${id}/tags`, {
+		method: 'DELETE',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			tag_name: tagName,
+			chat_id: id
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+export const deleteTagsById = async (token: string, id: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/${id}/tags/all`, {
+		method: 'DELETE',
+		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();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const deleteAllChats = async (token: string) => {
 	let error = null;
 

src/lib/apis/ollama/index.ts

@@ -206,9 +206,11 @@ export const generatePrompt = async (token: string = '', model: string, conversa
 };
 
 export const generateChatCompletion = async (token: string = '', body: object) => {
+	let controller = new AbortController();
 	let error = null;
 
 	const res = await fetch(`${OLLAMA_API_BASE_URL}/chat`, {
+		signal: controller.signal,
 		method: 'POST',
 		headers: {
 			'Content-Type': 'text/event-stream',
@@ -224,6 +226,27 @@ export const generateChatCompletion = async (token: string = '', body: object) =
 		throw error;
 	}
 
+	return [res, controller];
+};
+
+export const cancelChatCompletion = async (token: string = '', requestId: string) => {
+	let error = null;
+
+	const res = await fetch(`${OLLAMA_API_BASE_URL}/cancel/${requestId}`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'text/event-stream',
+			Authorization: `Bearer ${token}`
+		}
+	}).catch((err) => {
+		error = err;
+		return null;
+	});
+
+	if (error) {
+		throw error;
+	}
+
 	return res;
 };
 

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { copyToClipboard } from '$lib/utils';
+	import hljs from 'highlight.js';
+	import 'highlight.js/styles/github-dark.min.css';
+
+	export let lang = '';
+	export let code = '';
+
+	let copied = false;
+
+	const copyCode = async () => {
+		copied = true;
+		await copyToClipboard(code);
+
+		setTimeout(() => {
+			copied = false;
+		}, 1000);
+	};
+
+	$: highlightedCode = code ? hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value : '';
+</script>
+
+{#if code}
+	<div class="mb-4">
+		<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>
+			<button class="copy-code-button bg-none border-none p-1" on:click={copyCode}
+				>{copied ? 'Copied' : 'Copy Code'}</button
+			>
+		</div>
+
+		<pre class=" rounded-b-lg hljs p-4 px-5 overflow-x-auto rounded-t-none"><code
+				class="language-{lang} rounded-t-none whitespace-pre">{@html highlightedCode || code}</code
+			></pre>
+	</div>
+{/if}

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

@@ -1,3 +1,3 @@
-<div class=" self-center font-bold mb-0.5 capitalize">
+<div class=" self-center font-bold mb-0.5 capitalize line-clamp-1">
 	<slot />
 </div>

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

@@ -1,16 +1,16 @@
 <script lang="ts">
+	import dayjs from 'dayjs';
 	import { marked } from 'marked';
-
 	import tippy from 'tippy.js';
-	import hljs from 'highlight.js';
-	import 'highlight.js/styles/github-dark.min.css';
 	import auto_render from 'katex/dist/contrib/auto-render.mjs';
 	import 'katex/dist/katex.min.css';
 
+	import { onMount, tick } from 'svelte';
+
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
 	import Skeleton from './Skeleton.svelte';
-	import { onMount, tick } from 'svelte';
+	import CodeBlock from './CodeBlock.svelte';
 
 	export let modelfiles = [];
 	export let message;
@@ -32,6 +32,20 @@
 	let tooltipInstance = null;
 	let speaking = null;
 
+	$: tokens = marked.lexer(message.content);
+
+	const renderer = new marked.Renderer();
+
+	// For code blocks with simple backticks
+	renderer.codespan = (code) => {
+		return `<code>${code.replaceAll('&amp;', '&')}</code>`;
+	};
+
+	const { extensions, ...defaults } = marked.getDefaults() as marked.MarkedOptions & {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		extensions: any;
+	};
+
 	$: if (message) {
 		renderStyling();
 	}
@@ -44,8 +58,6 @@
 		}
 
 		renderLatex();
-		hljs.highlightAll();
-		createCopyCodeBlockButton();
 
 		if (message.info) {
 			tooltipInstance = tippy(`#info-${message.id}`, {
@@ -77,71 +89,6 @@
 		}
 	};
 
-	const createCopyCodeBlockButton = () => {
-		// use a class selector if available
-		let blocks = document.querySelectorAll('pre');
-
-		blocks.forEach((block) => {
-			// only add button if browser supports Clipboard API
-
-			if (block.childNodes.length < 2 && block.id !== 'user-message') {
-				let code = block.querySelector('code');
-				code.style.borderTopRightRadius = 0;
-				code.style.borderTopLeftRadius = 0;
-				code.style.whiteSpace = 'pre';
-
-				let topBarDiv = document.createElement('div');
-				topBarDiv.style.backgroundColor = '#202123';
-				topBarDiv.style.overflowX = 'auto';
-				topBarDiv.style.display = 'flex';
-				topBarDiv.style.justifyContent = 'space-between';
-				topBarDiv.style.padding = '0 1rem';
-				topBarDiv.style.paddingTop = '4px';
-				topBarDiv.style.borderTopRightRadius = '8px';
-				topBarDiv.style.borderTopLeftRadius = '8px';
-
-				let langDiv = document.createElement('div');
-
-				let codeClassNames = code?.className.split(' ');
-				langDiv.textContent =
-					codeClassNames[0] === 'hljs' ? codeClassNames[1].slice(9) : codeClassNames[0].slice(9);
-				langDiv.style.color = 'white';
-				langDiv.style.margin = '4px';
-				langDiv.style.fontSize = '0.75rem';
-
-				let button = document.createElement('button');
-				button.className = 'copy-code-button';
-				button.textContent = 'Copy Code';
-				button.style.background = 'none';
-				button.style.fontSize = '0.75rem';
-				button.style.border = 'none';
-				button.style.margin = '4px';
-				button.style.cursor = 'pointer';
-				button.style.color = '#ddd';
-				button.addEventListener('click', () => copyCode(block, button));
-
-				topBarDiv.appendChild(langDiv);
-				topBarDiv.appendChild(button);
-
-				block.prepend(topBarDiv);
-			}
-		});
-
-		async function copyCode(block, button) {
-			let code = block.querySelector('code');
-			let text = code.innerText;
-
-			await copyToClipboard(text);
-
-			// visual feedback that task is completed
-			button.innerText = 'Copied!';
-
-			setTimeout(() => {
-				button.innerText = 'Copy Code';
-			}, 1000);
-		}
-	};
-
 	const renderLatex = () => {
 		let chatMessageElements = document.getElementsByClassName('chat-assistant');
 		// let lastChatMessageElement = chatMessageElements[chatMessageElements.length - 1];
@@ -207,309 +154,164 @@
 	});
 </script>
 
-<div class=" flex w-full message-{message.id}">
+{#key message.id}
-	<ProfileImage src={modelfiles[message.model]?.imageUrl ?? '/favicon.png'} />
+	<div class=" flex w-full message-{message.id}">
+		<ProfileImage src={modelfiles[message.model]?.imageUrl ?? '/favicon.png'} />
 
-	<div class="w-full overflow-hidden">
+		<div class="w-full overflow-hidden">
-		<Name>
+			<Name>
-			{#if message.model in modelfiles}
+				{#if message.model in modelfiles}
-				{modelfiles[message.model]?.title}
+					{modelfiles[message.model]?.title}
+				{:else}
+					Ollama <span class=" text-gray-500 text-sm font-medium"
+						>{message.model ? ` ${message.model}` : ''}</span
+					>
+				{/if}
+
+				{#if message.timestamp}
+					<span class=" invisible group-hover:visible text-gray-400 text-xs font-medium">
+						{dayjs(message.timestamp * 1000).format('DD/MM/YYYY HH:MM')}
+					</span>
+				{/if}
+			</Name>
+
+			{#if message.content === ''}
+				<Skeleton />
 			{:else}
-				Ollama <span class=" text-gray-500 text-sm font-medium"
+				<div
-					>{message.model ? ` ${message.model}` : ''}</span
+					class="prose chat-{message.role} w-full max-w-full 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"
 				>
-			{/if}
+					<div>
-		</Name>
+						{#if edit === true}
-
+							<div class=" w-full">
-		{#if message.content === ''}
+								<textarea
-			<Skeleton />
+									id="message-edit-{message.id}"
-		{:else}
+									class=" bg-transparent outline-none w-full resize-none"
-			<div
+									bind:value={editedContent}
-				class="prose chat-{message.role} w-full max-w-full 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"
+									on:input={(e) => {
-			>
+										e.target.style.height = `${e.target.scrollHeight}px`;
-				<div>
-					{#if edit === true}
-						<div class=" w-full">
-							<textarea
-								id="message-edit-{message.id}"
-								class=" bg-transparent outline-none w-full resize-none"
-								bind:value={editedContent}
-								on:input={(e) => {
-									e.target.style.height = `${e.target.scrollHeight}px`;
-								}}
-							/>
-
-							<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
-								<button
-									class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
-									on:click={() => {
-										editMessageConfirmHandler();
 									}}
-								>
+								/>
-									Save
-								</button>
 
-								<button
+								<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
-									class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
+									<button
-									on:click={() => {
+										class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
-										cancelEditMessage();
+										on:click={() => {
-									}}
+											editMessageConfirmHandler();
-								>
+										}}
-									Cancel
-								</button>
-							</div>
-						</div>
-					{:else}
-						<div class="w-full">
-							{#if message?.error === true}
-								<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
+										Save
-											stroke-linecap="round"
+									</button>
-											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">
+									<button
-										{message.content}
+										class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
-									</div>
+										on:click={() => {
+											cancelEditMessage();
+										}}
+									>
+										Cancel
+									</button>
 								</div>
-							{:else}
+							</div>
-								{@html marked(message.content.replaceAll('\\', '\\\\'))}
+						{:else}
-							{/if}
+							<div class="w-full">
+								{#if message?.error === true}
+									<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>
 
-							{#if message.done}
+										<div class=" self-center">
-								<div class=" flex justify-start space-x-1 -mt-2">
+											{message.content}
-									{#if siblings.length > 1}
-										<div class="flex self-center">
-											<button
-												class="self-center"
-												on:click={() => {
-													showPreviousMessage(message);
-												}}
-											>
-												<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="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											</button>
-
-											<div class="text-xs font-bold self-center">
-												{siblings.indexOf(message.id) + 1} / {siblings.length}
-											</div>
-
-											<button
-												class="self-center"
-												on:click={() => {
-													showNextMessage(message);
-												}}
-											>
-												<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="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											</button>
 										</div>
-									{/if}
+									</div>
-
+								{:else}
-									<button
+									{#each tokens as token}
-										class="{isLastMessage
+										{#if token.type === 'code'}
-											? 'visible'
+											<!-- {token.text} -->
-											: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
+											<CodeBlock lang={token.lang} code={token.text} />
-										on:click={() => {
-											editMessageHandler();
-										}}
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											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>
-
-									<button
-										class="{isLastMessage
-											? 'visible'
-											: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition copy-response-button"
-										on:click={() => {
-											copyToClipboard(message.content);
-										}}
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
-											/>
-										</svg>
-									</button>
-
-									<button
-										class="{isLastMessage
-											? 'visible'
-											: 'invisible group-hover:visible'} p-1 rounded {message.rating === 1
-											? 'bg-gray-100 dark:bg-gray-900'
-											: ''} transition"
-										on:click={() => {
-											rateMessage(message.id, 1);
-										}}
-									>
-										<svg
-											stroke="currentColor"
-											fill="none"
-											stroke-width="2"
-											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>
-									<button
-										class="{isLastMessage
-											? 'visible'
-											: 'invisible group-hover:visible'} p-1 rounded {message.rating === -1
-											? 'bg-gray-100 dark:bg-gray-900'
-											: ''} transition"
-										on:click={() => {
-											rateMessage(message.id, -1);
-										}}
-									>
-										<svg
-											stroke="currentColor"
-											fill="none"
-											stroke-width="2"
-											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>
-
-									<button
-										class="{isLastMessage
-											? 'visible'
-											: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
-										on:click={() => {
-											toggleSpeakMessage(message);
-										}}
-									>
-										{#if speaking}
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
-												class="w-4 h-4"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
-												/>
-											</svg>
 										{:else}
-											<svg
+											{@html marked.parse(token.raw, {
-												xmlns="http://www.w3.org/2000/svg"
+												...defaults,
-												fill="none"
+												gfm: true,
-												viewBox="0 0 24 24"
+												breaks: true,
-												stroke-width="1.5"
+												renderer
-												stroke="currentColor"
+											})}
-												class="w-4 h-4"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
-												/>
-											</svg>
 										{/if}
-									</button>
+									{/each}
+									<!-- {@html marked(message.content.replaceAll('\\', '\\\\'))} -->
+								{/if}
 
-									{#if message.info}
+								{#if message.done}
-										<button
+									<div class=" flex justify-start space-x-1 -mt-2">
-											class=" {isLastMessage
+										{#if siblings.length > 1}
-												? 'visible'
+											<div class="flex self-center">
-												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition whitespace-pre-wrap"
+												<button
-											on:click={() => {
+													class="self-center"
-												console.log(message);
+													on:click={() => {
-											}}
+														showPreviousMessage(message);
-											id="info-{message.id}"
+													}}
-										>
+												>
-											<svg
+													<svg
-												xmlns="http://www.w3.org/2000/svg"
+														xmlns="http://www.w3.org/2000/svg"
-												fill="none"
+														viewBox="0 0 20 20"
-												viewBox="0 0 24 24"
+														fill="currentColor"
-												stroke-width="1.5"
+														class="w-4 h-4"
-												stroke="currentColor"
+													>
-												class="w-4 h-4"
+														<path
-											>
+															fill-rule="evenodd"
-												<path
+															d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-													stroke-linecap="round"
+															clip-rule="evenodd"
-													stroke-linejoin="round"
+														/>
-													d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+													</svg>
-												/>
+												</button>
-											</svg>
+
-										</button>
+												<div class="text-xs font-bold self-center">
-									{/if}
+													{siblings.indexOf(message.id) + 1} / {siblings.length}
+												</div>
+
+												<button
+													class="self-center"
+													on:click={() => {
+														showNextMessage(message);
+													}}
+												>
+													<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="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+												</button>
+											</div>
+										{/if}
 
-									{#if isLastMessage}
 										<button
-											type="button"
 											class="{isLastMessage
 												? 'visible'
-												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition regenerate-response-button"
+												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
-											on:click={regenerateResponse}
+											on:click={() => {
+												editMessageHandler();
+											}}
 										>
 											<svg
 												xmlns="http://www.w3.org/2000/svg"
@@ -522,17 +324,183 @@
 												<path
 													stroke-linecap="round"
 													stroke-linejoin="round"
-													d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+													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>
-									{/if}
+
-								</div>
+										<button
-							{/if}
+											class="{isLastMessage
-						</div>
+												? 'visible'
-					{/if}
+												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition copy-response-button"
+											on:click={() => {
+												copyToClipboard(message.content);
+											}}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+												class="w-4 h-4"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+												/>
+											</svg>
+										</button>
+
+										<button
+											class="{isLastMessage
+												? 'visible'
+												: 'invisible group-hover:visible'} p-1 rounded {message.rating === 1
+												? 'bg-gray-100 dark:bg-gray-900'
+												: ''} transition"
+											on:click={() => {
+												rateMessage(message.id, 1);
+											}}
+										>
+											<svg
+												stroke="currentColor"
+												fill="none"
+												stroke-width="2"
+												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>
+										<button
+											class="{isLastMessage
+												? 'visible'
+												: 'invisible group-hover:visible'} p-1 rounded {message.rating === -1
+												? 'bg-gray-100 dark:bg-gray-900'
+												: ''} transition"
+											on:click={() => {
+												rateMessage(message.id, -1);
+											}}
+										>
+											<svg
+												stroke="currentColor"
+												fill="none"
+												stroke-width="2"
+												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>
+
+										<button
+											class="{isLastMessage
+												? 'visible'
+												: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
+											on:click={() => {
+												toggleSpeakMessage(message);
+											}}
+										>
+											{#if speaking}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
+													/>
+												</svg>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
+													/>
+												</svg>
+											{/if}
+										</button>
+
+										{#if message.info}
+											<button
+												class=" {isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition whitespace-pre-wrap"
+												on:click={() => {
+													console.log(message);
+												}}
+												id="info-{message.id}"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+													/>
+												</svg>
+											</button>
+										{/if}
+
+										{#if isLastMessage}
+											<button
+												type="button"
+												class="{isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition regenerate-response-button"
+												on:click={regenerateResponse}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+													/>
+												</svg>
+											</button>
+										{/if}
+									</div>
+								{/if}
+							</div>
+						{/if}
+					</div>
 				</div>
-			</div>
+			{/if}
-		{/if}
+		</div>
 	</div>
-</div>
+{/key}

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import dayjs from 'dayjs';
+
 	import { tick } from 'svelte';
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
@@ -61,6 +63,12 @@
 				{:else}
 					You
 				{/if}
+
+				{#if message.timestamp}
+					<span class=" invisible group-hover:visible text-gray-400 text-xs font-medium">
+						{dayjs(message.timestamp * 1000).format('DD/MM/YYYY HH:MM')}
+					</span>
+				{/if}
 			</Name>
 		</div>
 

src/lib/components/chat/ModelSelector.svelte

@@ -45,7 +45,10 @@
 					{#if model.name === 'hr'}
 						<hr />
 					{:else}
-						<option value={model.name} class="text-gray-700 text-lg">{model.name}</option>
+						<option value={model.name} class="text-gray-700 text-lg"
+							>{model.name +
+								`${model.size ? ` (${(model.size / 1024 ** 3).toFixed(1)}GB)` : ''}`}</option
+						>
 					{/if}
 				{/each}
 			</select>

src/lib/components/chat/SettingsModal.svelte

@@ -142,13 +142,20 @@
 			importChats(chats);
 		};
 
-		reader.readAsText(importFiles[0]);
+		if (importFiles.length > 0) {
+			reader.readAsText(importFiles[0]);
+		}
 	}
 
 	const importChats = async (_chats) => {
 		for (const chat of _chats) {
 			console.log(chat);
-			await createNewChat(localStorage.token, chat.chat);
+
+			if (chat.chat) {
+				await createNewChat(localStorage.token, chat.chat);
+			} else {
+				await createNewChat(localStorage.token, chat);
+			}
 		}
 
 		await chats.set(await getChatList(localStorage.token));

src/lib/components/chat/ShareChatModal.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import Modal from '../common/Modal.svelte';
+
+	export let downloadChat: Function;
+	export let shareChat: Function;
+
+	export let show = false;
+</script>
+
+<Modal bind:show size="xs">
+	<div class="px-4 pt-4 pb-5 w-full flex flex-col justify-center">
+		<button
+			class=" self-center px-8 py-1.5 w-full rounded-full text-sm font-medium bg-blue-600 hover:bg-blue-500 text-white"
+			type="button"
+			on:click={() => {
+				shareChat();
+				show = false;
+			}}
+		>
+			Share to OllamaHub
+		</button>
+
+		<div class="flex justify-center space-x-1 mt-1.5">
+			<div class=" self-center text-gray-400 text-xs font-medium">or</div>
+
+			<button
+				class=" self-center rounded-full text-xs font-medium text-gray-700 dark:text-gray-500 underline"
+				type="button"
+				on:click={() => {
+					downloadChat();
+					show = false;
+				}}
+			>
+				Download as a File
+			</button>
+		</div>
+	</div>
+</Modal>

src/lib/components/common/Modal.svelte

@@ -8,7 +8,9 @@
 	let mounted = false;
 
 	const sizeToWidth = (size) => {
-		if (size === 'sm') {
+		if (size === 'xs') {
+			return 'w-[16rem]';
+		} else if (size === 'sm') {
 			return 'w-[30rem]';
 		} else {
 			return 'w-[40rem]';

src/lib/components/layout/Navbar.svelte

@@ -5,11 +5,21 @@
 
 	import { getChatById } from '$lib/apis/chats';
 	import { chatId, modelfiles } from '$lib/stores';
+	import ShareChatModal from '../chat/ShareChatModal.svelte';
 
 	export let initNewChat: Function;
 	export let title: string = 'Ollama Web UI';
 	export let shareEnabled: boolean = false;
 
+	export let tags = [];
+	export let addTag: Function;
+	export let deleteTag: Function;
+
+	let showShareChatModal = false;
+
+	let tagName = '';
+	let showTagInput = false;
+
 	const shareChat = async () => {
 		const chat = (await getChatById(localStorage.token, $chatId)).chat;
 		console.log('share', chat);
@@ -51,18 +61,34 @@
 
 		saveAs(blob, `chat-${chat.title}.txt`);
 	};
+
+	const addTagHandler = () => {
+		// if (!tags.find((e) => e.name === tagName)) {
+		// 	tags = [
+		// 		...tags,
+		// 		{
+		// 			name: JSON.parse(JSON.stringify(tagName))
+		// 		}
+		// 	];
+		// }
+
+		addTag(tagName);
+		tagName = '';
+		showTagInput = false;
+	};
 </script>
 
+<ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} />
 <nav
 	id="nav"
 	class=" fixed py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-800/90 dark:text-gray-200 backdrop-blur-xl w-screen z-30"
 >
 	<div class=" flex max-w-3xl w-full mx-auto px-3">
-		<div class="flex w-full max-w-full">
+		<div class="flex items-center w-full max-w-full">
-			<div class="pr-2 self-center">
+			<div class="pr-2 self-start">
 				<button
 					id="new-chat-button"
-					class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
+					class=" cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-lg transition"
 					on:click={initNewChat}
 				>
 					<div class=" m-auto self-center">
@@ -82,59 +108,121 @@
 					</div>
 				</button>
 			</div>
-			<div class=" flex-1 self-center font-medium text-ellipsis whitespace-nowrap overflow-hidden">
+			<div class=" flex-1 self-center font-medium line-clamp-1">
-				{title != '' ? title : 'Ollama Web UI'}
+				<div>
+					{title != '' ? title : 'Ollama Web UI'}
+				</div>
 			</div>
 
-			{#if shareEnabled}
+			<div class="pl-2 self-center flex items-center space-x-2">
-				<div class="pl-2 flex space-x-1.5">
+				{#if shareEnabled}
-					<button
+					<div class="flex flex-row space-x-0.5 line-clamp-1">
-						class=" cursor-pointer p-2 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600"
+						{#each tags as tag}
-						on:click={async () => {
+							<div
-							downloadChat();
+								class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition border dark:border-gray-600 dark:text-white"
-						}}
-					>
-						<div class=" m-auto self-center">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
 							>
-								<path
+								<div class=" text-[0.65rem] font-medium self-center line-clamp-1">
-									d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
+									{tag.name}
-								/>
+								</div>
-								<path
+								<button
-									d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
+									class=" m-auto self-center cursor-pointer"
-								/>
+									on:click={() => {
-							</svg>
+										deleteTag(tag.name);
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 16 16"
+										fill="currentColor"
+										class="w-3 h-3"
+									>
+										<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>
+						{/each}
+
+						<div class="flex space-x-1 pl-1.5">
+							{#if showTagInput}
+								<div class="flex items-center">
+									<input
+										bind:value={tagName}
+										class=" cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[4rem]"
+										placeholder="Add a tag"
+									/>
+
+									<button
+										on:click={() => {
+											addTagHandler();
+										}}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="currentColor"
+											class="w-3 h-3"
+										>
+											<path
+												fill-rule="evenodd"
+												d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									</button>
+								</div>
+
+								<!-- TODO: Tag Suggestions -->
+							{/if}
+
+							<button
+								class=" cursor-pointer self-center p-0.5 space-x-1 flex h-fit items-center dark:hover:bg-gray-700 rounded-full transition border dark:border-gray-600 border-dashed"
+								on:click={() => {
+									showTagInput = !showTagInput;
+								}}
+							>
+								<div class=" m-auto self-center">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 16 16"
+										fill="currentColor"
+										class="w-3 h-3 {showTagInput ? 'rotate-45' : ''} transition-all transform"
+									>
+										<path
+											d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
+										/>
+									</svg>
+								</div>
+							</button>
 						</div>
-					</button>
+					</div>
 
 					<button
-						class=" cursor-pointer p-2 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600"
+						class=" cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600"
 						on:click={async () => {
-							shareChat();
+							showShareChatModal = !showShareChatModal;
+
+							// console.log(showShareChatModal);
 						}}
 					>
 						<div class=" m-auto self-center">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
+								viewBox="0 0 24 24"
 								fill="currentColor"
 								class="w-4 h-4"
 							>
 								<path
-									d="M7.25 10.25a.75.75 0 0 0 1.5 0V4.56l2.22 2.22a.75.75 0 1 0 1.06-1.06l-3.5-3.5a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06l2.22-2.22v5.69Z"
+									fill-rule="evenodd"
-								/>
+									d="M15.75 4.5a3 3 0 1 1 .825 2.066l-8.421 4.679a3.002 3.002 0 0 1 0 1.51l8.421 4.679a3 3 0 1 1-.729 1.31l-8.421-4.678a3 3 0 1 1 0-4.132l8.421-4.679a3 3 0 0 1-.096-.755Z"
-								<path
+									clip-rule="evenodd"
-									d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
 								/>
 							</svg>
 						</div>
 					</button>
-				</div>
+				{/if}
-			{/if}
+			</div>
 		</div>
 	</div>
 </nav>

src/lib/components/layout/Sidebar.svelte

@@ -6,9 +6,14 @@
 
 	import { goto, invalidateAll } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { user, chats, settings, showSettings, chatId } from '$lib/stores';
+	import { user, chats, settings, showSettings, chatId, tags } from '$lib/stores';
 	import { onMount } from 'svelte';
-	import { deleteChatById, getChatList, updateChatById } from '$lib/apis/chats';
+	import {
+		deleteChatById,
+		getChatList,
+		getChatListByTagName,
+		updateChatById
+	} from '$lib/apis/chats';
 
 	let show = false;
 	let navElement;
@@ -28,6 +33,12 @@
 		}
 
 		await chats.set(await getChatList(localStorage.token));
+
+		tags.subscribe(async (value) => {
+			if (value.length === 0) {
+				await chats.set(await getChatList(localStorage.token));
+			}
+		});
 	});
 
 	const loadChat = async (id) => {
@@ -281,6 +292,29 @@
 				</div>
 			</div>
 
+			{#if $tags.length > 0}
+				<div class="px-2.5 mt-0.5 mb-2 flex gap-1 flex-wrap">
+					<button
+						class="px-2.5 text-xs font-medium bg-gray-900 hover:bg-gray-800 transition rounded-full"
+						on:click={async () => {
+							await chats.set(await getChatList(localStorage.token));
+						}}
+					>
+						all
+					</button>
+					{#each $tags as tag}
+						<button
+							class="px-2.5 text-xs font-medium bg-gray-900 hover:bg-gray-800 transition rounded-full"
+							on:click={async () => {
+								await chats.set(await getChatListByTagName(localStorage.token, tag.name));
+							}}
+						>
+							{tag.name}
+						</button>
+					{/each}
+				</div>
+			{/if}
+
 			<div class="pl-2.5 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto">
 				{#each $chats.filter((chat) => {
 					if (search === '') {

src/lib/stores/index.ts

@@ -10,6 +10,7 @@ export const theme = writable('dark');
 export const chatId = writable('');
 
 export const chats = writable([]);
+export const tags = writable([]);
 export const models = writable([]);
 
 export const modelfiles = writable([]);

src/lib/utils/index.ts

@@ -206,25 +206,32 @@ const convertOpenAIMessages = (convo) => {
 	const mapping = convo['mapping'];
 	const messages = [];
 	let currentId = '';
+	let lastId = null;
 
 	for (let message_id in mapping) {
 		const message = mapping[message_id];
 		currentId = message_id;
-		if (message['message'] == null || message['message']['content']['parts'][0] == '') {
+		try {
-			// Skip chat messages with no content
+				if (messages.length == 0 && (message['message'] == null || 
-			continue;
+				(message['message']['content']['parts']?.[0] == '' && message['message']['content']['text'] == null))) {
-		} else {
+				// Skip chat messages with no content
-			const new_chat = {
+				continue;
-				id: message_id,
+			} else {
-				parentId: messages.length > 0 && message['parent'] in mapping ? message['parent'] : null,
+				const new_chat = {
-				childrenIds: message['children'] || [],
+					id: message_id,
-				role: message['message']?.['author']?.['role'] !== 'user' ? 'assistant' : 'user',
+					parentId: lastId,
-				content: message['message']?.['content']?.['parts']?.[0] || '',
+					childrenIds: message['children'] || [],
-				model: 'gpt-3.5-turbo',
+					role: message['message']?.['author']?.['role'] !== 'user' ? 'assistant' : 'user',
-				done: true,
+					content: message['message']?.['content']?.['parts']?.[0] ||  message['message']?.['content']?.['text'] || '',
-				context: null
+					model: 'gpt-3.5-turbo',
-			};
+					done: true,
-			messages.push(new_chat);
+					context: null
+				};
+				messages.push(new_chat);
+				lastId = currentId;
+			}
+		} catch (error) {
+			console.log("Error with", message, "\nError:", error);
 		}
 	}
 
@@ -245,13 +252,45 @@ const convertOpenAIMessages = (convo) => {
 	return chat;
 };
 
+const validateChat = (chat) => {
+	// Because ChatGPT sometimes has features we can't use like DALL-E or migh have corrupted messages, need to validate
+	const messages = chat.messages;
+
+    // Check if messages array is empty
+    if (messages.length === 0) {
+        return false;
+    }
+
+    // Last message's children should be an empty array
+    const lastMessage = messages[messages.length - 1];
+    if (lastMessage.childrenIds.length !== 0) {
+        return false;
+    }
+
+    // First message's parent should be null
+    const firstMessage = messages[0];
+    if (firstMessage.parentId !== null) {
+        return false;
+    }
+
+    // Every message's content should be a string
+    for (let message of messages) {
+        if (typeof message.content !== 'string') {
+            return false;
+        }
+    }
+
+    return true;
+};
+
 export const convertOpenAIChats = (_chats) => {
 	// Create a list of dictionaries with each conversation from import
 	const chats = [];
+	let failed = 0;
 	for (let convo of _chats) {
 		const chat = convertOpenAIMessages(convo);
 
-		if (Object.keys(chat.history.messages).length > 0) {
+		if (validateChat(chat)) {
 			chats.push({
 				id: convo['id'],
 				user_id: '',
@@ -259,7 +298,8 @@ export const convertOpenAIChats = (_chats) => {
 				chat: chat,
 				timestamp: convo['timestamp']
 			});
-		}
+		} else { failed ++}
 	}
+	console.log(failed, "Conversations could not be imported");
 	return chats;
 };

src/routes/(app)/+layout.svelte

@@ -20,7 +20,8 @@
 		models,
 		modelfiles,
 		prompts,
-		documents
+		documents,
+		tags
 	} from '$lib/stores';
 	import { REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
 
@@ -29,6 +30,7 @@
 	import { checkVersion } from '$lib/utils';
 	import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte';
 	import { getDocs } from '$lib/apis/documents';
+	import { getAllChatTags } from '$lib/apis/chats';
 
 	let ollamaVersion = '';
 	let loaded = false;
@@ -106,6 +108,7 @@
 			await modelfiles.set(await getModelfiles(localStorage.token));
 			await prompts.set(await getPrompts(localStorage.token));
 			await documents.set(await getDocs(localStorage.token));
+			await tags.set(await getAllChatTags(localStorage.token));
 
 			modelfiles.subscribe(async () => {
 				// should fetch models

src/routes/(app)/+page.svelte

@@ -6,11 +6,28 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
-	import { models, modelfiles, user, settings, chats, chatId, config } from '$lib/stores';
+	import {
+		models,
+		modelfiles,
+		user,
+		settings,
+		chats,
+		chatId,
+		config,
+		tags as _tags
+	} from '$lib/stores';
 	import { copyToClipboard, splitStream } from '$lib/utils';
 
-	import { generateChatCompletion, generateTitle } from '$lib/apis/ollama';
+	import { generateChatCompletion, cancelChatCompletion, generateTitle } from '$lib/apis/ollama';
-	import { createNewChat, getChatList, updateChatById } from '$lib/apis/chats';
+	import {
+		addTagById,
+		createNewChat,
+		deleteTagById,
+		getAllChatTags,
+		getChatList,
+		getTagsById,
+		updateChatById
+	} from '$lib/apis/chats';
 	import { queryVectorDB } from '$lib/apis/rag';
 	import { generateOpenAIChatCompletion } from '$lib/apis/openai';
 
@@ -24,6 +41,8 @@
 	let autoScroll = true;
 	let processing = '';
 
+	let currentRequestId = null;
+
 	let selectedModels = [''];
 
 	let selectedModelfile = null;
@@ -45,6 +64,7 @@
 	}, {});
 
 	let chat = null;
+	let tags = [];
 
 	let title = '';
 	let prompt = '';
@@ -78,6 +98,11 @@
 	//////////////////////////
 
 	const initNewChat = async () => {
+		if (currentRequestId !== null) {
+			await cancelChatCompletion(localStorage.token, currentRequestId);
+			currentRequestId = null;
+		}
+
 		window.history.replaceState(history.state, '', `/`);
 
 		console.log('initNewChat');
@@ -145,7 +170,8 @@
 				role: 'user',
 				user: _user ?? undefined,
 				content: userPrompt,
-				files: files.length > 0 ? files : undefined
+				files: files.length > 0 ? files : undefined,
+				timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 			};
 
 			// Add message to history and Set currentId to messageId
@@ -173,6 +199,7 @@
 						},
 						messages: messages,
 						history: history,
+						tags: [],
 						timestamp: Date.now()
 					});
 					await chats.set(await getChatList(localStorage.token));
@@ -256,7 +283,8 @@
 			childrenIds: [],
 			role: 'assistant',
 			content: '',
-			model: model
+			model: model,
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		// Add message to history and Set currentId to messageId
@@ -277,7 +305,7 @@
 		// Scroll down
 		window.scrollTo({ top: document.body.scrollHeight });
 
-		const res = await generateChatCompletion(localStorage.token, {
+		const [res, controller] = await generateChatCompletion(localStorage.token, {
 			model: model,
 			messages: [
 				$settings.system
@@ -305,6 +333,8 @@
 		});
 
 		if (res && res.ok) {
+			console.log('controller', controller);
+
 			const reader = res.body
 				.pipeThrough(new TextDecoderStream())
 				.pipeThrough(splitStream('\n'))
@@ -315,6 +345,14 @@
 				if (done || stopResponseFlag || _chatId !== $chatId) {
 					responseMessage.done = true;
 					messages = messages;
+
+					if (stopResponseFlag) {
+						controller.abort('User: Stop Response');
+						await cancelChatCompletion(localStorage.token, currentRequestId);
+					}
+
+					currentRequestId = null;
+
 					break;
 				}
 
@@ -330,52 +368,57 @@
 								throw data;
 							}
 
-							if (data.done == false) {
+							if ('id' in data) {
-								if (responseMessage.content == '' && data.message.content == '\n') {
+								console.log(data);
-									continue;
+								currentRequestId = data.id;
-								} else {
-									responseMessage.content += data.message.content;
-									messages = messages;
-								}
 							} else {
-								responseMessage.done = true;
+								if (data.done == false) {
+									if (responseMessage.content == '' && data.message.content == '\n') {
+										continue;
+									} else {
+										responseMessage.content += data.message.content;
+										messages = messages;
+									}
+								} else {
+									responseMessage.done = true;
 
-								if (responseMessage.content == '') {
+									if (responseMessage.content == '') {
-									responseMessage.error = true;
+										responseMessage.error = true;
-									responseMessage.content =
+										responseMessage.content =
-										'Oops! No text generated from Ollama, Please try again.';
+											'Oops! No text generated from Ollama, Please try again.';
-								}
+									}
 
-								responseMessage.context = data.context ?? null;
+									responseMessage.context = data.context ?? null;
-								responseMessage.info = {
+									responseMessage.info = {
-									total_duration: data.total_duration,
+										total_duration: data.total_duration,
-									load_duration: data.load_duration,
+										load_duration: data.load_duration,
-									sample_count: data.sample_count,
+										sample_count: data.sample_count,
-									sample_duration: data.sample_duration,
+										sample_duration: data.sample_duration,
-									prompt_eval_count: data.prompt_eval_count,
+										prompt_eval_count: data.prompt_eval_count,
-									prompt_eval_duration: data.prompt_eval_duration,
+										prompt_eval_duration: data.prompt_eval_duration,
-									eval_count: data.eval_count,
+										eval_count: data.eval_count,
-									eval_duration: data.eval_duration
+										eval_duration: data.eval_duration
-								};
+									};
-								messages = messages;
+									messages = messages;
 
-								if ($settings.notificationEnabled && !document.hasFocus()) {
+									if ($settings.notificationEnabled && !document.hasFocus()) {
-									const notification = new Notification(
+										const notification = new Notification(
-										selectedModelfile
+											selectedModelfile
-											? `${
+												? `${
-													selectedModelfile.title.charAt(0).toUpperCase() +
+														selectedModelfile.title.charAt(0).toUpperCase() +
-													selectedModelfile.title.slice(1)
+														selectedModelfile.title.slice(1)
-											  }`
+												  }`
-											: `Ollama - ${model}`,
+												: `Ollama - ${model}`,
-										{
+											{
-											body: responseMessage.content,
+												body: responseMessage.content,
-											icon: selectedModelfile?.imageUrl ?? '/favicon.png'
+												icon: selectedModelfile?.imageUrl ?? '/favicon.png'
-										}
+											}
-									);
+										);
-								}
+									}
 
-								if ($settings.responseAutoCopy) {
+									if ($settings.responseAutoCopy) {
-									copyToClipboard(responseMessage.content);
+										copyToClipboard(responseMessage.content);
+									}
 								}
 							}
 						}
@@ -446,7 +489,8 @@
 			childrenIds: [],
 			role: 'assistant',
 			content: '',
-			model: model
+			model: model,
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		history.messages[responseMessageId] = responseMessage;
@@ -648,6 +692,34 @@
 		}
 	};
 
+	const getTags = async () => {
+		return await getTagsById(localStorage.token, $chatId).catch(async (error) => {
+			return [];
+		});
+	};
+
+	const addTag = async (tagName) => {
+		const res = await addTagById(localStorage.token, $chatId, tagName);
+		tags = await getTags();
+
+		chat = await updateChatById(localStorage.token, $chatId, {
+			tags: tags
+		});
+
+		_tags.set(await getAllChatTags(localStorage.token));
+	};
+
+	const deleteTag = async (tagName) => {
+		const res = await deleteTagById(localStorage.token, $chatId, tagName);
+		tags = await getTags();
+
+		chat = await updateChatById(localStorage.token, $chatId, {
+			tags: tags
+		});
+
+		_tags.set(await getAllChatTags(localStorage.token));
+	};
+
 	const setChatTitle = async (_chatId, _title) => {
 		if (_chatId === $chatId) {
 			title = _title;
@@ -666,7 +738,7 @@
 	}}
 />
 
-<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} />
+<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} />
 <div class="min-h-screen w-full flex justify-center">
 	<div class=" py-2.5 flex flex-col justify-between w-full">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">

src/routes/(app)/c/[id]/+page.svelte

@@ -6,11 +6,29 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
-	import { models, modelfiles, user, settings, chats, chatId, config } from '$lib/stores';
+	import {
+		models,
+		modelfiles,
+		user,
+		settings,
+		chats,
+		chatId,
+		config,
+		tags as _tags
+	} from '$lib/stores';
 	import { copyToClipboard, splitStream, convertMessagesToHistory } from '$lib/utils';
 
 	import { generateChatCompletion, generateTitle } from '$lib/apis/ollama';
-	import { createNewChat, getChatById, getChatList, updateChatById } from '$lib/apis/chats';
+	import {
+		addTagById,
+		createNewChat,
+		deleteTagById,
+		getAllChatTags,
+		getChatById,
+		getChatList,
+		getTagsById,
+		updateChatById
+	} from '$lib/apis/chats';
 	import { queryVectorDB } from '$lib/apis/rag';
 	import { generateOpenAIChatCompletion } from '$lib/apis/openai';
 
@@ -26,6 +44,8 @@
 	let autoScroll = true;
 	let processing = '';
 
+	let currentRequestId = null;
+
 	// let chatId = $page.params.id;
 	let selectedModels = [''];
 	let selectedModelfile = null;
@@ -47,6 +67,7 @@
 	}, {});
 
 	let chat = null;
+	let tags = [];
 
 	let title = '';
 	let prompt = '';
@@ -95,6 +116,7 @@
 		});
 
 		if (chat) {
+			tags = await getTags();
 			const chatContent = chat.chat;
 
 			if (chatContent) {
@@ -135,8 +157,7 @@
 	// Ollama functions
 	//////////////////////////
 
-	const submitPrompt = async (userPrompt, user) => {
+	const submitPrompt = async (userPrompt, _user = null) => {
-		console.log(userPrompt, user);
 		console.log('submitPrompt', $chatId);
 
 		if (selectedModels.includes('')) {
@@ -163,8 +184,10 @@
 				parentId: messages.length !== 0 ? messages.at(-1).id : null,
 				childrenIds: [],
 				role: 'user',
+				user: _user ?? undefined,
 				content: userPrompt,
-				files: files.length > 0 ? files : undefined
+				files: files.length > 0 ? files : undefined,
+				timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 			};
 
 			// Add message to history and Set currentId to messageId
@@ -200,15 +223,7 @@
 					await chatId.set('local');
 				}
 				await tick();
-			} else if (chat.chat["models"] != selectedModels) {
-				// If model is not saved in DB, then save selectedmodel when message is sent
-
-				chat = await updateChatById(localStorage.token, $chatId, {
-						models: selectedModels
-					});
-				await chats.set(await getChatList(localStorage.token));
 			}
-			
 			// Reset chat input textarea
 			prompt = '';
 			files = [];
@@ -282,7 +297,8 @@
 			childrenIds: [],
 			role: 'assistant',
 			content: '',
-			model: model
+			model: model,
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		// Add message to history and Set currentId to messageId
@@ -303,7 +319,7 @@
 		// Scroll down
 		window.scrollTo({ top: document.body.scrollHeight });
 
-		const res = await generateChatCompletion(localStorage.token, {
+		const [res, controller] = await generateChatCompletion(localStorage.token, {
 			model: model,
 			messages: [
 				$settings.system
@@ -341,6 +357,13 @@
 				if (done || stopResponseFlag || _chatId !== $chatId) {
 					responseMessage.done = true;
 					messages = messages;
+
+					if (stopResponseFlag) {
+						controller.abort('User: Stop Response');
+						await cancelChatCompletion(localStorage.token, currentRequestId);
+					}
+
+					currentRequestId = null;
 					break;
 				}
 
@@ -356,52 +379,57 @@
 								throw data;
 							}
 
-							if (data.done == false) {
+							if ('id' in data) {
-								if (responseMessage.content == '' && data.message.content == '\n') {
+								console.log(data);
-									continue;
+								currentRequestId = data.id;
-								} else {
-									responseMessage.content += data.message.content;
-									messages = messages;
-								}
 							} else {
-								responseMessage.done = true;
+								if (data.done == false) {
+									if (responseMessage.content == '' && data.message.content == '\n') {
+										continue;
+									} else {
+										responseMessage.content += data.message.content;
+										messages = messages;
+									}
+								} else {
+									responseMessage.done = true;
 
-								if (responseMessage.content == '') {
+									if (responseMessage.content == '') {
-									responseMessage.error = true;
+										responseMessage.error = true;
-									responseMessage.content =
+										responseMessage.content =
-										'Oops! No text generated from Ollama, Please try again.';
+											'Oops! No text generated from Ollama, Please try again.';
-								}
+									}
 
-								responseMessage.context = data.context ?? null;
+									responseMessage.context = data.context ?? null;
-								responseMessage.info = {
+									responseMessage.info = {
-									total_duration: data.total_duration,
+										total_duration: data.total_duration,
-									load_duration: data.load_duration,
+										load_duration: data.load_duration,
-									sample_count: data.sample_count,
+										sample_count: data.sample_count,
-									sample_duration: data.sample_duration,
+										sample_duration: data.sample_duration,
-									prompt_eval_count: data.prompt_eval_count,
+										prompt_eval_count: data.prompt_eval_count,
-									prompt_eval_duration: data.prompt_eval_duration,
+										prompt_eval_duration: data.prompt_eval_duration,
-									eval_count: data.eval_count,
+										eval_count: data.eval_count,
-									eval_duration: data.eval_duration
+										eval_duration: data.eval_duration
-								};
+									};
-								messages = messages;
+									messages = messages;
 
-								if ($settings.notificationEnabled && !document.hasFocus()) {
+									if ($settings.notificationEnabled && !document.hasFocus()) {
-									const notification = new Notification(
+										const notification = new Notification(
-										selectedModelfile
+											selectedModelfile
-											? `${
+												? `${
-													selectedModelfile.title.charAt(0).toUpperCase() +
+														selectedModelfile.title.charAt(0).toUpperCase() +
-													selectedModelfile.title.slice(1)
+														selectedModelfile.title.slice(1)
-											  }`
+												  }`
-											: `Ollama - ${model}`,
+												: `Ollama - ${model}`,
-										{
+											{
-											body: responseMessage.content,
+												body: responseMessage.content,
-											icon: selectedModelfile?.imageUrl ?? '/favicon.png'
+												icon: selectedModelfile?.imageUrl ?? '/favicon.png'
-										}
+											}
-									);
+										);
-								}
+									}
 
-								if ($settings.responseAutoCopy) {
+									if ($settings.responseAutoCopy) {
-									copyToClipboard(responseMessage.content);
+										copyToClipboard(responseMessage.content);
+									}
 								}
 							}
 						}
@@ -472,7 +500,8 @@
 			childrenIds: [],
 			role: 'assistant',
 			content: '',
-			model: model
+			model: model,
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		history.messages[responseMessageId] = responseMessage;
@@ -679,6 +708,34 @@
 		await chats.set(await getChatList(localStorage.token));
 	};
 
+	const getTags = async () => {
+		return await getTagsById(localStorage.token, $chatId).catch(async (error) => {
+			return [];
+		});
+	};
+
+	const addTag = async (tagName) => {
+		const res = await addTagById(localStorage.token, $chatId, tagName);
+		tags = await getTags();
+
+		chat = await updateChatById(localStorage.token, $chatId, {
+			tags: tags
+		});
+
+		_tags.set(await getAllChatTags(localStorage.token));
+	};
+
+	const deleteTag = async (tagName) => {
+		const res = await deleteTagById(localStorage.token, $chatId, tagName);
+		tags = await getTags();
+
+		chat = await updateChatById(localStorage.token, $chatId, {
+			tags: tags
+		});
+
+		_tags.set(await getAllChatTags(localStorage.token));
+	};
+
 	onMount(async () => {
 		if (!($settings.saveChatHistory ?? true)) {
 			await goto('/');
@@ -696,14 +753,25 @@
 	<Navbar
 		{title}
 		shareEnabled={messages.length > 0}
-		initNewChat={() => {
+		initNewChat={async () => {
+			if (currentRequestId !== null) {
+				await cancelChatCompletion(localStorage.token, currentRequestId);
+				currentRequestId = null;
+			}
+
 			goto('/');
 		}}
+		{tags}
+		{addTag}
+		{deleteTag}
 	/>
 	<div class="min-h-screen w-full flex justify-center">
 		<div class=" py-2.5 flex flex-col justify-between w-full">
 			<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
-				<ModelSelector bind:selectedModels disabled={messages.length > 0 && !selectedModels.includes('')} />
+				<ModelSelector
+					bind:selectedModels
+					disabled={messages.length > 0 && !selectedModels.includes('')}
+				/>
 			</div>
 
 			<div class=" h-full mt-10 mb-32 w-full flex flex-col">