From c5935cf5ce50062339ecdad5ed4d96a254d53aba Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Fri, 12 Dec 2025 16:53:26 -0600
Subject: [PATCH 1/3] add knowledge base dictionary

---
 src/lib/common/Breadcrumb.svelte              |   2 +-
 src/lib/helpers/http.js                       |   3 +
 src/lib/helpers/types/commonTypes.js          |   6 +
 src/lib/helpers/types/knowledgeTypes.js       |  29 ++
 src/lib/helpers/utils/common.js               |   5 +-
 src/lib/scss/custom/pages/_knowledgebase.scss |  24 +-
 src/lib/services/api-endpoints.js             |   4 +
 src/lib/services/knowledge-base-service.js    |  33 ++
 .../common/table/table-item.svelte            | 119 ++++++
 .../knowledge-base/dictionary/+page.svelte    | 374 ++++++++++++++++++
 .../knowledge-base/documents/+page.svelte     |   4 +-
 .../question-answer/+page.svelte              |   4 +-
 svelte.config.js                              |   3 +-
 13 files changed, 598 insertions(+), 12 deletions(-)
 create mode 100644 src/routes/page/knowledge-base/common/table/table-item.svelte
 create mode 100644 src/routes/page/knowledge-base/dictionary/+page.svelte

diff --git a/src/lib/common/Breadcrumb.svelte b/src/lib/common/Breadcrumb.svelte
index 438bcc74..02cf6bf0 100644
--- a/src/lib/common/Breadcrumb.svelte
+++ b/src/lib/common/Breadcrumb.svelte
@@ -2,7 +2,7 @@
 	import { Row, Col, Breadcrumb, BreadcrumbItem } from '@sveltestrap/sveltestrap';
 	import Link from 'svelte-link';
 
-	 export let title = '';
+	export let title = '';
 	export let pagetitle = '';
 </script>
 
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 8e49d548..56d7e19f 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -184,6 +184,7 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/(.*?)/search', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/create', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/page', 'g'),
+        new RegExp('http(s*)://(.*?)/knowledge/tokenize', 'g'),
         new RegExp('http(s*)://(.*?)/users', 'g'),
         new RegExp('http(s*)://(.*?)/instruct/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
@@ -227,6 +228,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/llm-provider/(.*?)/models', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/collections', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/exist', 'g'),
+        new RegExp('http(s*)://(.*?)/knowledge/tokenizer/providers', 'g'),
+        new RegExp('http(s*)://(.*?)/knowledge/tokenizer/data-providers', 'g'),
         new RegExp('http(s*)://(.*?)/logger/instruction/log', 'g'),
         new RegExp('http(s*)://(.*?)/logger/instruction/log/keys', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/content-log', 'g'),
diff --git a/src/lib/helpers/types/commonTypes.js b/src/lib/helpers/types/commonTypes.js
index a97df90b..4158299c 100644
--- a/src/lib/helpers/types/commonTypes.js
+++ b/src/lib/helpers/types/commonTypes.js
@@ -82,4 +82,10 @@
  * @property {any[]} fail
  */
 
+/**
+ * @typedef {Object} TableItemConfig
+ * @property {string} dataName
+ * @property {string} displayName
+ */
+
 export default {};
\ No newline at end of file
diff --git a/src/lib/helpers/types/knowledgeTypes.js b/src/lib/helpers/types/knowledgeTypes.js
index 5d105db1..ead3e86e 100644
--- a/src/lib/helpers/types/knowledgeTypes.js
+++ b/src/lib/helpers/types/knowledgeTypes.js
@@ -160,4 +160,33 @@
  * @property {string} field_schema_type
  */
 
+/**
+ * @typedef {Object} TokenizeRequest
+ * @property {string} text
+ * @property {string?} [provider]
+ * @property {TokenizeOptions?} [options]
+ */
+
+/**
+ * @typedef {Object} TokenizeOptions
+ * @property {string[]?} [data_providers]
+ * @property {number?} [max_ngram]
+ * @property {number?} [cutoff]
+ * @property {number?} [top_k]
+ */
+
+/**
+ * @typedef {Object} TokenizeResponse
+ * @property {TokenizeResult[]} [results]
+ * @property {boolean?} [success]
+ * @property {string?} [error_message]
+ */
+
+/**
+ * @typedef {Object} TokenizeResult
+ * @property {string} token
+ * @property {string?} [canonical_text]
+ * @property {any} data
+ */
+
 export default {};
\ No newline at end of file
diff --git a/src/lib/helpers/utils/common.js b/src/lib/helpers/utils/common.js
index 5a348daf..590f2ae5 100644
--- a/src/lib/helpers/utils/common.js
+++ b/src/lib/helpers/utils/common.js
@@ -161,11 +161,12 @@ export function scrollToBottom(container, behavior = 'smooth') {
 
 /**
  * @param {string} str
+ * @param {string} separator
  */
-export function splitTextByCase(str) {
+export function splitTextByCase(str, separator = '_') {
     if (!str) return str;
 
-    let words = str.split("_");
+    let words = str.split(separator);
     if (words.length === 1) {
         // split by camel case
         words = str.split(/(?=[A-Z])/);
diff --git a/src/lib/scss/custom/pages/_knowledgebase.scss b/src/lib/scss/custom/pages/_knowledgebase.scss
index 1c683c41..4cc25e6d 100644
--- a/src/lib/scss/custom/pages/_knowledgebase.scss
+++ b/src/lib/scss/custom/pages/_knowledgebase.scss
@@ -288,10 +288,11 @@
         display: flex;
         gap: 5px;
         justify-content: flex-end;
-        min-width: 300px;
+        flex-wrap: wrap;
 
         .collection-dropdown {
-            width: 100%;
+            flex: 1 1 auto;
+            min-width: 150px;
         }
 
         .collection-action-btn {
@@ -304,6 +305,17 @@
             outline: none !important;
             box-shadow: none !important;
         }
+
+        @media (max-width: 350px) {
+            flex-direction: column;
+            justify-content: center;
+            gap: 5px;
+
+            .collection-dropdown {
+                width: 100%;
+                min-width: 100%;
+            }
+        }
     }
 
     .collection-add-container {
@@ -385,15 +397,19 @@
 
         .more-detail-list {
             margin: 1px 0px 15px 0px;
-            font-size: 10px;
+            font-size: 12px;
             padding-left: 4rem;
             overflow-y: auto;
             scrollbar-width: none;
             max-height: 200px;
             
-            .more-dtail-item {
+            .more-detail-item {
                 list-style-type: square;
             }
+
+            ul {
+                font-size: 15px;
+            }
         }
     }
 }
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index a958f2d7..ad5c635a 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -114,6 +114,10 @@ export const endpoints = {
     knowledgeDocumentDeleteAllUrl: `${host}/knowledge/document/{collection}/delete`,
     knowledgeDocumentPageListUrl: `${host}/knowledge/document/{collection}/page`,
 
+    tokenizersUrl: `${host}/knowledge/tokenizer/providers`,
+    tokenizerDataLoadersUrl: `${host}/knowledge/tokenizer/data-providers`,
+    tokenizeUrl: `${host}/knowledge/tokenize`,
+
     // chathub 
     chatHubUrl: `${host}/chatHub`,
 
diff --git a/src/lib/services/knowledge-base-service.js b/src/lib/services/knowledge-base-service.js
index 919d9214..2c2b721d 100644
--- a/src/lib/services/knowledge-base-service.js
+++ b/src/lib/services/knowledge-base-service.js
@@ -274,4 +274,37 @@ export async function deleteVectorIndexes(collection, options) {
         }
     });
     return response.data;
+}
+
+
+
+
+/**
+ * @returns {Promise<string[]>}
+ */
+export async function getTokenizers() {
+    const url = endpoints.tokenizersUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
+
+/**
+ * @returns {Promise<string[]>}
+ */
+export async function getTokenizerDataLoaders() {
+    const url = endpoints.tokenizerDataLoadersUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
+
+/**
+ * @param {import('$knowledgeTypes').TokenizeRequest} request
+ * @returns {Promise<import('$knowledgeTypes').TokenizeResponse>}
+ */
+export async function tokenize(request) {
+    const url = endpoints.tokenizeUrl;
+    const response = await axios.post(url, {
+        ...request
+    });
+    return response.data;
 }
\ No newline at end of file
diff --git a/src/routes/page/knowledge-base/common/table/table-item.svelte b/src/routes/page/knowledge-base/common/table/table-item.svelte
new file mode 100644
index 00000000..223f52a2
--- /dev/null
+++ b/src/routes/page/knowledge-base/common/table/table-item.svelte
@@ -0,0 +1,119 @@
+<script>
+    import { Button } from "@sveltestrap/sveltestrap";
+    import { fly } from 'svelte/transition';
+	import Loader from "$lib/common/Loader.svelte";
+    import JSONTree from 'svelte-json-tree';
+	import { formatObject, splitTextByCase } from "$lib/helpers/utils/common";
+
+    /** @type {any} */
+    export let item;
+
+    /** @type {import('$commonTypes').TableItemConfig[]} */
+    export let columns;
+
+    /** @type {string | null} */
+    export let detailKey = null;
+
+    /** @type {boolean} */
+    export let useJsonDisplay = false;
+
+    /** @type {boolean} */
+    export let open = false;
+
+    let isLoading = false;
+    let loadMore = false;
+
+    $: {
+        if (!open) {
+            loadMore = false;
+        }
+    }
+
+    function toggleDetail() {
+        open = !open;
+    }
+</script>
+
+{#if isLoading}
+    <Loader />
+{/if}
+
+<tr in:fly={{ y: -5, duration: 800 }}>
+    {#if columns?.length > 0}
+    {#each columns as column, idx (idx)}
+        <td style={`max-width: 50px; width: ${80 / columns.length}%;`}>
+            <div class="ellipsis">{item[column.dataName] || ''}</div>
+        </td>
+    {/each}
+    {/if}
+    <td class="knowledge-op">
+        <ul class="list-unstyled hstack gap-1 mb-0 knowledge-op-list">
+            {#if detailKey}
+            <li data-bs-toggle="tooltip" data-bs-placement="top" title="View Detail">
+                <Button
+                    class="btn btn-sm btn-soft-primary"
+                    on:click={() => toggleDetail()}
+                >
+                    {#if open}
+                        <i class="bx bx-hide" />
+                    {:else}
+                        <i class="mdi mdi-eye-outline" />
+                    {/if}
+                </Button>
+            </li>
+            {/if}
+        </ul>
+    </td>
+</tr>
+
+{#if open}
+    <tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
+        <td colspan="12">
+            <div class="knowledge-detail">
+                <ul>
+                    {#each columns as column, idx (idx)}
+                    <li>
+                        <div class="wrappable fw-bold text-primary">
+                            {column.displayName || column.dataName}
+                        </div>
+                        <div class="wrappable">
+                            {item[column.dataName] || ''}
+                        </div>
+                    </li>
+                    {/each}
+                </ul>
+                <div class="more-detail">
+                    <Button class='toggle-btn btn-sm' color="link" on:click={() => loadMore = !loadMore}>
+                        {`${loadMore ? 'Less -' : 'More +'}`}
+                    </Button>
+                </div>
+                {#if loadMore}
+                    <ul
+                        class="more-detail-list text-secondary"
+                        in:fly={{ y: -5, duration: 300 }}
+                        out:fly={{ y: -5, duration: 200 }}
+                    >
+                        {#if detailKey && item[detailKey]}
+                            {#if useJsonDisplay}
+                                <JSONTree
+                                    value={formatObject(item[detailKey])}
+                                    defaultExpandedLevel={1}
+                                    --json-tree-number-color="var(--bs-info)"
+                                    --json-tree-boolean-color="var(--bs-info)"
+                                    --json-tree-string-color="var(--bs-info)"
+                                />
+                            {:else}
+                                {#each Object.keys(item[detailKey]) as key, idx (idx)}
+                                    <li class="more-detail-item wrappable">
+                                        <span>{splitTextByCase(key)}: </span>
+                                        <span>{item[detailKey][key]}</span>
+                                    </li>
+                                {/each}
+                            {/if}
+                        {/if}
+                    </ul>
+                {/if}
+            </div>
+        </td>
+    </tr>
+{/if}
\ No newline at end of file
diff --git a/src/routes/page/knowledge-base/dictionary/+page.svelte b/src/routes/page/knowledge-base/dictionary/+page.svelte
new file mode 100644
index 00000000..94065f53
--- /dev/null
+++ b/src/routes/page/knowledge-base/dictionary/+page.svelte
@@ -0,0 +1,374 @@
+<script>
+	import { onMount } from 'svelte';
+    import { fly } from 'svelte/transition';
+	import { _ } from 'svelte-i18n';
+	import util from "lodash";
+	import {
+        Button,
+        Card,
+        CardBody,
+        Table
+    } from '@sveltestrap/sveltestrap';
+    import {
+		getTokenizers,
+		getTokenizerDataLoaders,
+		tokenize
+    } from '$lib/services/knowledge-base-service';
+	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+    import HeadTitle from '$lib/common/HeadTitle.svelte';
+	import LoadingDots from '$lib/common/LoadingDots.svelte';
+	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import Select from '$lib/common/Select.svelte';
+	import TableItem from '../common/table/table-item.svelte';
+	
+	const maxLength = 4096;
+    const columns = [
+        {
+            dataName: "token",
+            displayName: "Text"
+        },
+        {
+            dataName: "canonical_text",
+            displayName: "Canonical Text"
+        }
+    ];
+	
+	/** @type {string} */
+	let text = "";
+	let successText = "Done";
+	let errorText = "Error";
+	let elapsedTime = '';
+
+	/** @type {string | null} */
+	let selectedTokenizer = null;
+
+    /** @type {string[]} */
+    let selectedDataLoaders = [];
+
+	/** @type {import('$knowledgeTypes').TokenizeResult[]} */
+	let items = [];
+
+	/** @type {import('$commonTypes').LabelValuePair[]} */
+	let tokenizers = [];
+
+    /** @type {import('$commonTypes').LabelValuePair[]} */
+    let tokenizerDataLoaders = [];
+
+	/** @type {number | null | undefined} */
+	let totalDataCount;
+
+	/** @type {boolean} */
+	let showDemo = true;
+    let disableSearchBtn = false;
+	let isSearching = false;
+	let searchDone = false;
+	let isLoading = false;
+	let isComplete = false;
+	let isError = false;
+
+	$: {
+		disableSearchBtn = false;
+		if (!selectedTokenizer || isSearching) {
+			disableSearchBtn = true;
+		} else if (!text || util.trim(text).length === 0) {
+			disableSearchBtn = true;
+		}
+	}
+
+	onMount(() => {
+		initData();
+	});
+
+	function initData() {
+		isLoading = true;
+        Promise.all([
+            getTokenizerProviders(),
+            getTokenizerDataLoaderProviders()
+        ]).finally(() => {
+			isLoading = false;
+		});
+	}
+
+
+	// Search knowledge
+	function toggleDemo() {
+		showDemo = !showDemo;
+	}
+
+	function search() {
+		items = [];
+		isSearching = true;
+		searchDone = false;
+		elapsedTime = '';
+		const start = new Date();
+
+        getTokenizeResult().finally(() => {
+            isSearching = false;
+            searchDone = true;
+            const gap = new Date().getTime() - start.getTime();
+            elapsedTime = `${(gap / 1000).toFixed(3)}s`;
+        });
+	}
+
+	/** @param {KeyboardEvent} e */
+	function pressKey(e) {
+		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !!!util.trim(text) || isSearching) {
+			return;
+		}
+
+		if (e.key === 'Enter') {
+			e.preventDefault();
+		}
+
+		search();
+	}
+
+	function reset() {
+		resetStates();
+	}
+
+	function resetStates() {
+		text = "";
+		elapsedTime = '';
+		isSearching = false;
+        searchDone = false;
+        items = [];
+        totalDataCount = null;
+        selectedDataLoaders = [];
+	}
+
+	function getTokenizerProviders() {
+		return new Promise((resolve, reject) => {
+			getTokenizers().then(res => {
+				const retProviders = res?.map(x => ({  label: x, value: x })) || [];
+				tokenizers = [ ...retProviders ];
+				selectedTokenizer = tokenizers[0]?.value;
+				resolve(res);
+			}).catch(err => {
+				tokenizers = [];
+				selectedTokenizer = tokenizers[0]?.value;
+				reject(err);
+			});
+		});
+	}
+
+    function getTokenizerDataLoaderProviders() {
+		return new Promise((resolve, reject) => {
+			getTokenizerDataLoaders().then(res => {
+				const retProviders = res?.map(x => ({  label: x, value: x })) || [];
+				tokenizerDataLoaders = [ ...retProviders ];
+				resolve(res);
+			}).catch(err => {
+				tokenizerDataLoaders = [];
+				reject(err);
+			});
+		});
+	}
+
+    function getTokenizeResult() {
+        return new Promise((resolve, reject) => {
+            const request = {
+                text: util.trim(text),
+                provider: selectedTokenizer,
+                options: {
+                    data_providers: selectedDataLoaders?.length > 0 ? selectedDataLoaders : null
+                }
+            };
+
+            tokenize(request).then(res => {
+                items = res?.results || [];
+                totalDataCount = items.length;
+                resolve(res);
+            }).catch(err => {
+                totalDataCount = null;
+                console.log(err);
+                reject(err);
+            });
+        });
+    }
+
+	/** @param {any} e */
+	function changeTokenizer(e) {
+		const selectedValues = e?.detail?.selecteds || [];
+		selectedTokenizer = selectedValues[0]?.value;
+	}
+
+    /** @param {any} e */
+	function changeTokenizerDataLoaders(e) {
+		const selectedValues = e?.detail?.selecteds || [];
+		// @ts-ignore
+		selectedDataLoaders = selectedValues.map(x => x.value);
+	}
+</script>
+
+<HeadTitle title="{$_('Dictionary')}" addOn="Knowledge Base" />
+<Breadcrumb pagetitle="{$_('Dictionary')}" title="{$_('Knowledge Base')}"/>
+
+<LoadingToComplete
+	isLoading={isLoading}
+	isComplete={isComplete}
+	isError={isError}
+	successText={successText}
+	errorText={errorText}
+/>
+
+<div class="knowledge-demo-btn mb-4">
+	<div class="demo-btn">
+		<Button
+			color={`${showDemo ? 'danger' : 'primary'}`}
+			on:click={() => toggleDemo()}
+		>
+			{#if !showDemo}
+				<div class="btn-content">
+					<div class="knowledge-btn-icon"><i class="bx bx-search-alt" /></div>
+					<div>{'Start Search'}</div>
+				</div>
+			{:else}
+				<div class="btn-content">
+					<div class="knowledge-btn-icon"><i class="bx bx-hide" /></div>
+					<div>{'Hide Search'}</div>
+				</div>
+			{/if}
+		</Button>
+	</div>
+	
+	<div class="reset-btn">
+		<Button
+			on:click={() => reset()}
+		>
+			<div class="btn-content">
+				<div class="knowledge-btn-icon"><i class="bx bx-reset" /></div>
+				<div>{'Reset'}</div>
+			</div>
+		</Button>
+	</div>
+</div>
+
+<div class="d-xl-flex">
+	<div class="w-100">
+		{#if showDemo}
+			<div
+				in:fly={{ y: -10, duration: 500 }}
+				out:fly={{ y: -10, duration: 200 }}
+			>
+				<div class="knowledge-search-container mb-4">
+					<textarea
+						class='form-control knowledge-textarea'
+						rows={5}
+						maxlength={maxLength}
+						disabled={isSearching}
+						placeholder={'Start searching here...'}
+						bind:value={text}
+						on:keydown={(e) => pressKey(e)}
+					/>
+					<div class="text-secondary text-count d-flex justify-content-between">
+						<div>
+							{#if elapsedTime}
+								{`Elapsed time: ${elapsedTime}`}
+							{/if}
+						</div>
+						<div>{text?.length || 0}/{maxLength}</div>
+					</div>
+				
+                    <div class="mt-3 knowledge-search-footer">
+                        <div class="search-input"></div>
+                        <div class="line-align-center">
+							<Button
+								color="primary"
+								disabled={disableSearchBtn}
+								on:click={() => search()}
+							>
+								{'Search'}
+							</Button>
+                        </div>
+                    </div>
+				
+					{#if isSearching}
+						<div class="knowledge-loader mt-5">
+							<LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
+						</div>
+					{:else if searchDone && (!items || items.length === 0)}
+						<div class="mt-5 text-center">
+							<h4 class="text-secondary">{"Ehhh, no idea..."}</h4>
+						</div>
+					{/if}
+			  	</div>
+			</div>
+		{/if}
+		<div class="d-md-flex mt-5">
+			<div class="w-100">
+				<Card>
+					<CardBody>
+						<div class="mt-2 knowledge-table-header">
+							{#if totalDataCount != null && totalDataCount != undefined}
+								<div class="knowledge-count line-align-center text-muted font-size-12">
+									{`Total data: ${Number(totalDataCount).toLocaleString("en-US")}`}
+								</div>
+							{/if}
+							<div class="d-flex flex-wrap mb-3 justify-content-between">
+								<div class="action-container-padding d-flex" style="gap: 5px;">
+									<h5 class="knowledge-header-text line-align-center font-size-16">
+										<div>{$_('Dictionary')}</div>
+									</h5>
+								</div>
+								<div class="collection-action-container action-container-padding">
+									<div class="collection-dropdown-container">
+										<div class="line-align-center collection-dropdown">
+                                            <div>Tokenizer</div>
+											<Select
+												tag={'tokenizer-select'}
+												placeholder={'Select Tokenizer'}
+												searchMode
+												selectedValues={selectedTokenizer ? [selectedTokenizer] : []}
+												options={tokenizers}
+												on:select={e => changeTokenizer(e)}
+											/>
+										</div>
+                                        <div class="line-align-center collection-dropdown">
+                                            <div>Data Loaders</div>
+											<Select
+												tag={'tokenizer-data-loader-select'}
+												placeholder={'Select Data Loaders'}
+												searchMode
+                                                selectAll
+                                                multiSelect
+												selectedValues={selectedDataLoaders}
+												options={tokenizerDataLoaders}
+												on:select={e => changeTokenizerDataLoaders(e)}
+											/>
+										</div>
+									</div>
+								</div>
+							</div>
+						  
+							<hr class="mt-2" />
+						  
+							<div class="table-responsive knowledge-table">
+								<Table class="table align-middle table-nowrap table-hover mb-0">
+									<thead>
+										<tr>
+                                            {#each columns as column, idx (idx) }
+                                                <th scope="col" style="width: 40%;">{column.displayName}</th>
+                                            {/each}
+											<th style="width: 20%;"></th>
+										</tr>
+									</thead>
+									<tbody>
+										{#each items as item, idx (idx)}
+                                            <TableItem
+												item={item}
+                                                columns={columns}
+                                                detailKey={'data'}
+												open={idx === 0}
+											/>
+										{/each}
+									</tbody>
+								</Table>
+							</div>
+						</div>
+					</CardBody>
+				</Card>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/knowledge-base/documents/+page.svelte b/src/routes/page/knowledge-base/documents/+page.svelte
index 744be0fa..e8ae087c 100644
--- a/src/routes/page/knowledge-base/documents/+page.svelte
+++ b/src/routes/page/knowledge-base/documents/+page.svelte
@@ -861,7 +861,7 @@
 	}
 </script>
 
-<HeadTitle title="{$_('Document Knowledge')}" />
+<HeadTitle title="{$_('Document Knowledge')}" addOn="Knowledge Base" />
 <Breadcrumb pagetitle="{$_('Document Knowledge')}" title="{$_('Knowledge Base')}"/>
 
 <LoadingToComplete
@@ -1096,7 +1096,7 @@
 					<CardBody>
 						<div class="mt-2 knowledge-table-header">
 							{#if totalDataCount != null && totalDataCount != undefined}
-								<div class="knowledge-count line-align-center text-muted font-size-11">
+								<div class="knowledge-count line-align-center text-muted font-size-12">
 									{`Total data: ${Number(totalDataCount).toLocaleString("en-US")}`}
 								</div>
 							{/if}
diff --git a/src/routes/page/knowledge-base/question-answer/+page.svelte b/src/routes/page/knowledge-base/question-answer/+page.svelte
index 42412c38..e0b5a306 100644
--- a/src/routes/page/knowledge-base/question-answer/+page.svelte
+++ b/src/routes/page/knowledge-base/question-answer/+page.svelte
@@ -824,7 +824,7 @@
 	}
 </script>
 
-<HeadTitle title="{$_('Q&A Knowledge')}" />
+<HeadTitle title="{$_('Q&A Knowledge')}" addOn="Knowledge Base" />
 <Breadcrumb pagetitle="{$_('Q&A Knowledge')}" title="{$_('Knowledge Base')}"/>
 
 <LoadingToComplete
@@ -1049,7 +1049,7 @@
 					<CardBody>
 						<div class="mt-2 knowledge-table-header">
 							{#if totalDataCount != null && totalDataCount != undefined}
-								<div class="knowledge-count line-align-center text-muted font-size-11">
+								<div class="knowledge-count line-align-center text-muted font-size-12">
 									{`Total data: ${Number(totalDataCount).toLocaleString("en-US")}`}
 								</div>
 							{/if}
diff --git a/svelte.config.js b/svelte.config.js
index f6f17a39..fcd95909 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -73,7 +73,8 @@ const config = {
 				"/chat/[agentId]/[conversationId]",
 				"/page/knowledge-base/question-answer",
 				"/page/knowledge-base/relationships",
-				"/page/knowledge-base/documents"
+				"/page/knowledge-base/documents",
+				"/page/knowledge-base/dictionary"
 			]
 		}
 	},

From 230805ed5cdedb0de75fa24620072969fa5e141e Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Fri, 12 Dec 2025 19:11:32 -0600
Subject: [PATCH 2/3] refine style

---
 src/lib/scss/custom/pages/_knowledgebase.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/scss/custom/pages/_knowledgebase.scss b/src/lib/scss/custom/pages/_knowledgebase.scss
index 4cc25e6d..34eacedf 100644
--- a/src/lib/scss/custom/pages/_knowledgebase.scss
+++ b/src/lib/scss/custom/pages/_knowledgebase.scss
@@ -363,6 +363,9 @@
         border-color: var(--#{$prefix}light) !important;
         background-color: var(--#{$prefix}light) !important;
         position: relative;
+        overflow-y: auto;
+        scrollbar-width: none;
+        max-height: 300px;
 
         ul {
             margin: 15px 0px;
@@ -399,9 +402,6 @@
             margin: 1px 0px 15px 0px;
             font-size: 12px;
             padding-left: 4rem;
-            overflow-y: auto;
-            scrollbar-width: none;
-            max-height: 200px;
             
             .more-detail-item {
                 list-style-type: square;

From 7060ded04bcf381cf65e020e19829d53c166d990 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 17 Dec 2025 11:46:46 -0600
Subject: [PATCH 3/3] refine doc knowledge

---
 src/lib/helpers/http.js                       |   2 +
 src/lib/helpers/types/knowledgeTypes.js       |   1 +
 src/lib/scss/custom/pages/_knowledgebase.scss |  23 ++-
 src/lib/services/api-endpoints.js             |   1 +
 src/lib/services/knowledge-base-service.js    |   9 +
 .../knowledge-base/documents/+page.svelte     |  75 ++++++-
 .../knowledge-document-upload.svelte          | 134 ++++++++-----
 .../documents/knowledge-upload-modal.svelte   | 189 ++++++++++++++++++
 8 files changed, 371 insertions(+), 63 deletions(-)
 create mode 100644 src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte

diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 56d7e19f..ab66e444 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -184,6 +184,7 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/(.*?)/search', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/create', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/page', 'g'),
+        new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/upload', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/tokenize', 'g'),
         new RegExp('http(s*)://(.*?)/users', 'g'),
         new RegExp('http(s*)://(.*?)/instruct/(.*?)', 'g'),
@@ -228,6 +229,7 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/llm-provider/(.*?)/models', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/collections', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/exist', 'g'),
+        new RegExp('http(s*)://(.*?)/knowledge/document/processors', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/tokenizer/providers', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/tokenizer/data-providers', 'g'),
         new RegExp('http(s*)://(.*?)/logger/instruction/log', 'g'),
diff --git a/src/lib/helpers/types/knowledgeTypes.js b/src/lib/helpers/types/knowledgeTypes.js
index ead3e86e..635ca3c3 100644
--- a/src/lib/helpers/types/knowledgeTypes.js
+++ b/src/lib/helpers/types/knowledgeTypes.js
@@ -98,6 +98,7 @@
 /**
  * @typedef {Object} VectorKnowledgeUploadRequest
  * @property {import('$fileTypes').FileModel[]} files - The files.
+ * @property {any} [options]
  */
 
 /**
diff --git a/src/lib/scss/custom/pages/_knowledgebase.scss b/src/lib/scss/custom/pages/_knowledgebase.scss
index 34eacedf..1184ef12 100644
--- a/src/lib/scss/custom/pages/_knowledgebase.scss
+++ b/src/lib/scss/custom/pages/_knowledgebase.scss
@@ -482,7 +482,7 @@
     }
 
     .doc-upload-footer {
-        margin-top: 30px;
+        margin-top: 0px;
 
         .load-doc-btn {
             font-size: 12px;
@@ -820,4 +820,25 @@
             gap: 0;
         }
     }
+}
+
+
+.knowledge-upload-modal-container {
+    .doc-upload-body {
+        width: 100%;
+        height: 100%;
+
+        .gallery-item, .doc-drop-zone {
+            width: 100%;
+            min-height: 200px;
+        }
+
+        i {
+            font-size: 5em;
+        }
+
+        .doc-drop-icon {
+            text-align: center;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index ad5c635a..59331f46 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -113,6 +113,7 @@ export const endpoints = {
     knowledgeDocumentDeleteUrl: `${host}/knowledge/document/{collection}/delete/{fileId}`,
     knowledgeDocumentDeleteAllUrl: `${host}/knowledge/document/{collection}/delete`,
     knowledgeDocumentPageListUrl: `${host}/knowledge/document/{collection}/page`,
+    knowledgeDocumentProcessorsUrl: `${host}/knowledge/document/processors`,
 
     tokenizersUrl: `${host}/knowledge/tokenizer/providers`,
     tokenizerDataLoadersUrl: `${host}/knowledge/tokenizer/data-providers`,
diff --git a/src/lib/services/knowledge-base-service.js b/src/lib/services/knowledge-base-service.js
index 2c2b721d..91f5455c 100644
--- a/src/lib/services/knowledge-base-service.js
+++ b/src/lib/services/knowledge-base-service.js
@@ -193,6 +193,15 @@ export async function getKnowledgeDocumentPageList(collection, request) {
     return response.data;
 }
 
+/**
+ * @returns {Promise<string[]>}
+ */
+export async function getKnowledgeDocumentProcessors() {
+    const url = endpoints.knowledgeDocumentProcessorsUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
+
 
 /**
  * @param {import('$knowledgeTypes').CreateVectorCollectionRequest} request
diff --git a/src/routes/page/knowledge-base/documents/+page.svelte b/src/routes/page/knowledge-base/documents/+page.svelte
index e8ae087c..9c164153 100644
--- a/src/routes/page/knowledge-base/documents/+page.svelte
+++ b/src/routes/page/knowledge-base/documents/+page.svelte
@@ -25,9 +25,8 @@
 		createVectorCollection,
 		createVectorIndexes,
 		deleteVectorIndexes,
-
-		getVectorCollectionDetails
-
+		getVectorCollectionDetails,
+		getKnowledgeDocumentProcessors
     } from '$lib/services/knowledge-base-service';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
     import HeadTitle from '$lib/common/HeadTitle.svelte';
@@ -41,13 +40,14 @@
 		VectorDataSource,
 		VectorPayloadDataType
 	} from '$lib/helpers/enums';
+	import { DECIMAL_REGEX } from '$lib/helpers/constants';
 	import VectorItem from '../common/vector-table/vector-item.svelte';
 	import VectorItemEditModal from '../common/vector-table/vector-item-edit-modal.svelte';
 	import CollectionCreateModal from '../common/collection/collection-create-modal.svelte';
 	import VectorIndexModal from '../common/indexes/vector-index-modal.svelte';
 	import AdvancedSearch from '../common/search/advanced-search.svelte';
 	import KnowledgeDocumentUpload from './knowledge-document-upload.svelte';
-	import { DECIMAL_REGEX } from '$lib/helpers/constants';
+	import KnowledgeUploadModal from './knowledge-upload-modal.svelte';
 	
 	const pageSize = 8;
   	const duration = 2000;
@@ -106,6 +106,9 @@
 		order: 'desc'
 	};
 
+	/** @type {import('$commonTypes').LabelValuePair[]} */
+	let docProcessors = [];
+
 	/** @type {boolean} */
     let showDemo = true;
     let isSearching = false;
@@ -122,6 +125,8 @@
 	let isAdvSearchOn = false;
 	let disableSearchBtn = false;
 	let isExactSearch = false;
+	let isOpenUploadModal = false;
+	let showDocList = false;
 
     /** @type {any} */
     let docUploadrCmp;
@@ -168,6 +173,7 @@
 			if (selectedCollection) {
 				Promise.all([
 					getCollectionDetail(),
+					getDocProcessors(),
 					getData({
 						...defaultParams,
 						isReset: true,
@@ -456,6 +462,19 @@
 		});
 	}
 
+	function getDocProcessors() {
+		return new Promise((resolve, reject) => {
+			getKnowledgeDocumentProcessors().then(res => {
+				const retProcessors = res?.map(x => ({  label: x, value: x })) || [];
+				docProcessors = [ ...retProcessors ];
+				resolve(res);
+			}).catch(err => {
+				docProcessors = [];
+				reject(err);
+			});
+		});
+	}
+
 	/** @param {boolean} isLocalLoading */
 	function toggleLoader(isLocalLoading) {
 		if (isLocalLoading) {
@@ -740,9 +759,12 @@
         });
 	}
 
-    /** @param {any} e */
-    function onDocUploaded(e) {
-        reset();
+    /**
+	 * @param {any} e
+	 * @param {boolean} skipLoader
+	 */
+    function onDocUploaded(e, skipLoader = false) {
+        reset(skipLoader);
     }
 
     /** @param {any} e */
@@ -859,6 +881,10 @@
 	function toggleIndexModal() {
 		isOpenIndexModal = !isOpenIndexModal;
 	}
+
+	function toggleUploadModal() {
+		isOpenUploadModal = !isOpenUploadModal;
+	}
 </script>
 
 <HeadTitle title="{$_('Document Knowledge')}" addOn="Knowledge Base" />
@@ -905,6 +931,21 @@
 	/>
 {/if}
 
+<KnowledgeUploadModal
+	className={'knowledge-upload-modal-container'}
+	size={'md'}
+	accept={'.txt,.pdf'}
+	collection={selectedCollection}
+	open={isOpenUploadModal}
+	processors={docProcessors}
+	toggleModal={() => toggleUploadModal()}
+	on:docuploaded={(e) => {
+		showDocList = false;
+		isOpenUploadModal = false;
+		onDocUploaded(e, true);
+	}}
+/>
+
 <CollectionCreateModal
 	title={'Create new collection'}
 	open={isOpenCreateCollection}
@@ -1082,9 +1123,13 @@
         {#if selectedCollection}
             <KnowledgeDocumentUpload
                 collection={selectedCollection}
+				accept={'.txt'}
+				disableFileUpload={true}
+				disableFileDelete={false}
                 disabled={disabled}
                 bind:this={docUploadrCmp}
-                on:docuploaded={(e) => onDocUploaded(e)}
+				bind:showDocList={showDocList}
+                on:docuploaded={(e) => onDocUploaded(e, true)}
                 on:docdeleted={(e) => onDocDeleted(e)}
 				on:resetdocs={(e) => onDocsReset(e)}
             />
@@ -1133,6 +1178,20 @@
 											<i class="mdi mdi-minus" />
 										</Button>
 									</div>
+									<div
+										class="line-align-center"
+										data-bs-toggle="tooltip"
+										data-bs-placement="top"
+										title="Upload doc"
+									>
+										<Button
+											class="btn btn-sm btn-soft-info knowledge-btn-icon"
+											disabled={disabled}
+											on:click={() => toggleUploadModal()}
+										>
+											<i class="mdi mdi-file-upload" />
+										</Button>
+									</div>
 								</div>
 								<div class="collection-action-container action-container-padding">
 									{#if selectedCollection}
diff --git a/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte b/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte
index fcac3029..7b9276f2 100644
--- a/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte
+++ b/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte
@@ -1,5 +1,4 @@
 <script>
-	import KnowledgeUploadResult from './knowledge-upload-result.svelte';
     import { onMount, onDestroy, createEventDispatcher } from 'svelte';
     import { fly } from 'svelte/transition';
 	import { Tooltip, Button, Input } from '@sveltestrap/sveltestrap';
@@ -10,24 +9,24 @@
     import FileDropZone from '$lib/common/FileDropZone.svelte';
     import FileGallery from '$lib/common/FileGallery.svelte';
     import LoadingDots from '$lib/common/LoadingDots.svelte';
+    import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
     import { isExternalUrl } from '$lib/helpers/utils/common';
 	import { knowledgeBaseDocumentStore, userStore } from '$lib/helpers/store';
     import { KnowledgeDocSource } from '$lib/helpers/enums';
+    import { isHtml } from '$lib/helpers/utils/file';
 	import {
         getKnowledgeDocumentPageList,
         uploadKnowledgeDocuments,
         deleteKnowledgeDocument,
         deleteAllKnowledgeDocuments
     } from '$lib/services/knowledge-base-service';
-	import { isHtml } from '$lib/helpers/utils/file';
+    import KnowledgeUploadResult from './knowledge-upload-result.svelte';
 
     const svelteDispatch = createEventDispatcher();
 
-    const accept = ".txt";
-    const acceptDisplayList = "txt";
-    const fileMaxSize = 10 * 1024 * 1024;
     const startPage = 1;
     const docPageSize = 8;
+    const defaultProcessor = 'botsharp-txt-knowledge';
 
     const options = {
 		scrollbars: {
@@ -47,9 +46,24 @@
     /** @type {number} */
     export let fileLimit = 3;
 
+    /** @type {boolean} */
+    export let showDocList = false;
+
     /** @type {boolean} */
     export let disabled = false;
 
+    /** @type {boolean} */
+    export let disableFileUpload = false;
+
+    /** @type {boolean} */
+    export let disableFileDelete = false;
+
+    /** @type {string} */
+    export let accept = ".txt,.pdf";
+
+    /** @type {number} mb */
+    export let fileMaxSize = 10;
+
     /** @type {() => void} */
     export const onCollectionChanged = () => {
         showDocList = false;
@@ -59,9 +73,9 @@
 
     /** @type {boolean} */
     let showUploader = false;
-    let showDocList = false;
     let disableFileDrop = false;
     let isLoading = false;
+    let isLoadingFiles = false;
     let noMoreDocs = false;
 
     /** @type {number} */
@@ -155,7 +169,14 @@
                 });
 
                 disabled = true;
-				uploadKnowledgeDocuments(collection, { files: files }).then(res => {
+                isLoading = true;
+				uploadKnowledgeDocuments(collection,
+                {
+                    files: files,
+                    options: {
+                        processor: defaultProcessor
+                    }
+                }).then(res => {
                     successFiles = res.success || [];
                     failedFiles = res.failed || [];
                     uploadFiles = [];
@@ -171,6 +192,7 @@
                     failedFiles = files.map(x => x.file_name);
                 }).finally(() => {
                     disabled = false;
+                    isLoading = false;
                 });
             }
         });
@@ -184,7 +206,7 @@
     }
 
     function loadMoreDocs() {
-        if (isLoading) return;
+        if (isLoadingFiles) return;
         
         getKnowledgeDocumentList().then(() => {
             autoScrollToBottom();
@@ -192,7 +214,7 @@
     }
 
     function getKnowledgeDocumentList() {
-        isLoading = true;
+        isLoadingFiles = true;
         disabled = true;
         noMoreDocs = false;
 
@@ -214,13 +236,13 @@
                 } else {
                     noMoreDocs = true;
                 }
-                isLoading = false;
                 disabled = false;
                 resolve(res);
             }).catch(err => {
-                isLoading = false;
                 disabled = false;
                 reject(err);
+            }).finally(() => {
+                isLoadingFiles = false;
             });
         });
         
@@ -333,6 +355,8 @@
     }
 </script>
 
+<LoadingToComplete {isLoading} />
+
 <div
     class="knowledge-doc-upload-container"
     in:fly={{ y: -10, duration: 500 }}
@@ -347,7 +371,7 @@
             on:change={e => toggleUploader(e)}
         />
         <div class="line-align-center">
-            <div>{`${showUploader ? 'Upload' : 'View'} Documents`}</div>
+            <div>{`${showUploader && !disableFileUpload ? 'Upload' : 'View'} Documents`}</div>
         </div>
         {#if showUploader}
             <div class="line-align-center" id="upload-tooltip">
@@ -356,8 +380,8 @@
             <Tooltip target="upload-tooltip" placement="top" class="demo-tooltip-note">
                 <ul>
                     <li>{`At most ${fileLimit} ${fileLimit > 1 ? 'documents are' : 'document is'} allowed for each upload.`}</li>
-                    <li>{'Each document cannot exceed 10 MB.'}</li>
-                    <li>{`Allowed document types: ${acceptDisplayList}`}</li>
+                    <li>{`Each document cannot exceed ${fileMaxSize} MB.`}</li>
+                    <li>{`Document types allowed: ${accept?.split(',')?.join(', ') || 'none'}`}</li>
                 </ul>
             </Tooltip>
         {/if}
@@ -368,49 +392,51 @@
             in:fly={{ y: -10, duration: 500 }}
             out:fly={{ y: -10, duration: 200 }}
         >
-            <FileGallery
-                containerClasses={'doc-upload-body'}
-                files={uploadFiles}
-                showFileName
-                needDelete
-                disabled={disabled}
-                onDelete={idx => deleteUploadFile(idx)}
-                showPrefix={true}
-                showSuffix={uploadFiles?.length > 0}
-            >
-                <FileDropZone
-                    slot="prefix"
-                    accept={accept}
-                    containerClasses={'doc-drop-zone'}
-                    disabled={disabled || disableFileDrop}
-                    fileLimit={localFileUploadLimit}
-                    maxSize={fileMaxSize}
-                    on:drop={e => handleFileDrop(e)}
-                >
-                    <i class="bx bx-cloud-upload" />
-                </FileDropZone>
-                <div
-                    slot="suffix"
-                    class="doc-card-btn"
+            {#if !disableFileUpload}
+                <FileGallery
+                    containerClasses={'doc-upload-body'}
+                    files={uploadFiles}
+                    showFileName
+                    needDelete
+                    disabled={disabled}
+                    onDelete={idx => deleteUploadFile(idx)}
+                    showPrefix={true}
+                    showSuffix={uploadFiles?.length > 0}
                 >
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-no-static-element-interactions -->
-                    <i
-                        class="mdi mdi-arrow-up-bold-circle clickable"
-                        data-bs-toggle="tooltip"
-                        data-bs-placement="top"
-                        title="Submit"
-                        on:click={() => handleFileSubmit()}
-                    />
-                </div>
-            </FileGallery>
+                    <FileDropZone
+                        slot="prefix"
+                        accept={accept}
+                        containerClasses={'doc-drop-zone'}
+                        disabled={disabled || disableFileDrop}
+                        fileLimit={localFileUploadLimit}
+                        maxSize={fileMaxSize * 1024 * 1024}
+                        on:drop={e => handleFileDrop(e)}
+                    >
+                        <i class="bx bx-cloud-upload" />
+                    </FileDropZone>
+                    <div
+                        slot="suffix"
+                        class="doc-card-btn"
+                    >
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <!-- svelte-ignore a11y-no-static-element-interactions -->
+                        <i
+                            class="mdi mdi-arrow-up-bold-circle clickable"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Submit"
+                            on:click={() => handleFileSubmit()}
+                        />
+                    </div>
+                </FileGallery>
+            {/if}
 
             <KnowledgeUploadResult
                 successFiles={successFiles}
                 failedFiles={failedFiles}
             />
 
-            <div class="doc-upload-footer">
+            <div class="doc-upload-footer" style={`margin-top: ${!disableFileUpload ? '30px;' : '0px;'}`}>
                 <div class="load-doc-btn">
                     <Button
                         class={`btn btn-md knowledge-demo-btn ${showDocList ? 'btn-soft-warning' : 'btn-soft-primary'}`}
@@ -429,7 +455,7 @@
                             </div>
                         {/if}
                     </Button>
-                    {#if showDocList}
+                    {#if showDocList && !disableFileDelete}
                         <div class="reset-docs-btn line-align-center">
                             <!-- svelte-ignore a11y-click-events-have-key-events -->
                             <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -451,7 +477,7 @@
                                     files={savedFiles}
                                     showFileName
                                     disabled={disabled}
-                                    needDelete
+                                    needDelete={!disableFileDelete}
                                     onDelete={idx => handleDeleteSavedFile(idx)}
                                     needDownload
                                     onDownload={idx => handleDownloadSavedFile(idx)}
@@ -469,12 +495,12 @@
                                         />
                                     </div>
                                 </FileGallery>
-                            {:else if !isLoading && savedFiles.length === 0}
+                            {:else if !isLoadingFiles && savedFiles.length === 0}
                                 <div class="mt-3 text-center">
                                     <h4 class="text-secondary">{"Ehhh, nothing is found..."}</h4>
                                 </div>
                             {/if}
-                            {#if isLoading}
+                            {#if isLoadingFiles}
                                 <div class="knowledge-loader mt-3 mb-3">
                                     <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
                                 </div>
diff --git a/src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte b/src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte
new file mode 100644
index 00000000..4734f0d9
--- /dev/null
+++ b/src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte
@@ -0,0 +1,189 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import {
+        Form,
+        Modal,
+        ModalBody,
+        ModalHeader
+    } from "@sveltestrap/sveltestrap";
+    import Select from "$lib/common/Select.svelte";
+    import FileDropZone from '$lib/common/FileDropZone.svelte';
+    import FileGallery from '$lib/common/FileGallery.svelte';
+	import { uploadKnowledgeDocuments } from "$lib/services/knowledge-base-service";
+	import { KnowledgeDocSource } from "$lib/helpers/enums";
+	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+
+    const svelteDispatch = createEventDispatcher();
+
+    const duration = 3000;
+
+    /** @type {string} */
+    export let collection;
+
+    /** @type {boolean} */
+    export let open = false;
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+    /** @type {string} */
+    export let className = "";
+
+    /** @type {string} */
+    export let size = 'md';
+
+    /** @type {string} */
+    export let accept = ".txt";
+
+    /** @type {import('$commonTypes').LabelValuePair[]} */
+    export let processors;
+
+    /** @type {number} MB */
+    export let fileMaxSize = 10;
+
+    /** @type {() => void} */
+    export let toggleModal;
+
+
+    /** @type {boolean} */
+    let isLoading = false;
+    let isComplete = false;
+    let isError = false;
+
+    /** @type {string | null} */
+    let selectedProcessor = null;
+    let successText = 'Knowledge has been uploaded!';
+    let errorText = 'Error when uploading knowledge!';
+
+    /** @param {any} e */
+    function changeProcessor(e) {
+        selectedProcessor = e?.detail?.selecteds[0]?.value || null;
+    }
+
+    /** @param {any} e */
+    function handleFileDrop(e) {
+        const { acceptedFiles } = e.detail;
+
+        if (!acceptedFiles
+            || acceptedFiles.length === 0
+            || !selectedProcessor
+        ) {
+            return;
+        }
+
+        // @ts-ignore
+        const files = acceptedFiles.map(x => {
+            return {
+                file_name: x.file_name,
+                file_data: x.file_data,
+                file_source: KnowledgeDocSource.User
+            };
+        });
+
+        isLoading = true;
+        disabled = true;
+        toggleModal?.();
+
+        uploadKnowledgeDocuments(collection,
+        {
+            files: files,
+            options: {
+                processor: selectedProcessor
+            }
+        }).then(res => {
+            if (res.failed?.length > 0) {
+                isError = true;
+                setTimeout(() => {
+                    isError = false;
+                }, duration);
+            } else {
+                isComplete = true;
+                setTimeout(() => {
+                    isComplete = false;
+                }, duration);
+            }
+            svelteDispatch("docuploaded");
+        }).catch((err) => {
+            console.log('Upload document error:', err);
+            isError = true;
+            setTimeout(() => {
+                isError = false;
+            }, duration);
+        }).finally(() => {
+            disabled = false;
+            isLoading = false;
+        });
+    }
+</script>
+
+<LoadingToComplete
+    spinnerStyles={'position: fixed;'}
+    {isLoading}
+    {isComplete}
+    {isError}
+    {successText}
+    {errorText}
+/>
+
+<Modal
+    class={className}
+    fade
+    size={size}
+    isOpen={open}
+    toggle={() => toggleModal?.()}
+    unmountOnClose
+>
+    <ModalHeader toggle={() => toggleModal?.()}>
+        <div>
+            <span class="fw-bold">{'Collection: '}</span>
+            <span class="text-primary collection-value">{collection}</span>
+        </div>
+    </ModalHeader>
+    <ModalBody>
+        <Form>
+            <div class="mt-2 d-flex flex-column gap-2">
+                <div class="d-flex gap-1">
+                    <div class="fw-bold">{'Document Processor'}</div>
+                </div>
+                <Select
+                    tag={'kn-doc-processor-select'}
+                    placeholder={'Select Processor'}
+                    searchMode
+                    selectedValues={selectedProcessor ? [selectedProcessor] : []}
+                    options={processors}
+                    on:select={e => changeProcessor(e)}
+                />
+            </div>
+            <div class="mt-2 d-flex flex-column gap-2">
+                <FileGallery
+                    containerClasses={'doc-upload-body'}
+                    showPrefix={true}
+                    disabled={disabled || !selectedProcessor}
+                >
+                    <FileDropZone
+                        slot="prefix"
+                        accept={accept}
+                        containerClasses={'doc-drop-zone'}
+                        disabled={!selectedProcessor}
+                        fileLimit={1}
+                        maxSize={fileMaxSize * 1024 * 1024}
+                        on:drop={e => handleFileDrop(e)}
+                    >
+                        <div>
+                            <div class="doc-drop-icon">
+                                <i class="bx bx-cloud-upload" />
+                            </div>
+                            <div>
+                                <ul>
+                                    <li>{'Please select a processor before uploading.'}</li>
+                                    <li>{'File cannot exceed 10 MB.'}</li>
+                                    <li>{`File types allowed: ${accept?.split(',')?.join(', ') || 'none'}`}</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </FileDropZone>
+                </FileGallery>
+            </div>
+        </Form>
+    </ModalBody>
+</Modal>
\ No newline at end of file