Merge branch 'open-webui:dev' into dev
This commit is contained in:
Aleix Dorca
+136
-11
@@ -70,23 +70,23 @@ textarea::placeholder {
|
||||
}
|
||||
|
||||
.input-prose {
|
||||
@apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-1 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5 whitespace-pre-line;
|
||||
@apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-50 prose-hr:dark:border-gray-850 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-1 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5 whitespace-pre-line;
|
||||
}
|
||||
|
||||
.input-prose-sm {
|
||||
@apply prose dark:prose-invert prose-headings:font-medium prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-1 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-1 whitespace-pre-line text-sm;
|
||||
@apply prose dark:prose-invert prose-headings:font-medium prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-hr:my-4 prose-hr:border-gray-50 prose-hr:dark:border-gray-850 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-1 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-1 whitespace-pre-line text-sm;
|
||||
}
|
||||
|
||||
.markdown-prose {
|
||||
@apply prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
|
||||
@apply prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-50 prose-hr:dark:border-gray-850 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
|
||||
}
|
||||
|
||||
.markdown-prose-sm {
|
||||
@apply text-sm prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-2 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
|
||||
@apply text-sm prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-2 prose-hr:border-gray-50 prose-hr:dark:border-gray-850 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
|
||||
}
|
||||
|
||||
.markdown-prose-xs {
|
||||
@apply text-xs prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-0.5 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
|
||||
@apply text-xs prose dark:prose-invert prose-blockquote:border-s-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-s-2 prose-blockquote:not-italic prose-blockquote:font-normal prose-headings:font-semibold prose-hr:my-0.5 prose-hr:border-gray-50 prose-hr:dark:border-gray-850 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
|
||||
}
|
||||
|
||||
.markdown a {
|
||||
@@ -116,7 +116,7 @@ li p {
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
--tw-border-opacity: 1;
|
||||
background-color: rgba(215, 215, 215, 0.8);
|
||||
background-color: rgba(215, 215, 215, 0.6);
|
||||
border-color: rgba(255, 255, 255, var(--tw-border-opacity));
|
||||
border-radius: 9999px;
|
||||
border-width: 1px;
|
||||
@@ -124,12 +124,12 @@ li p {
|
||||
|
||||
/* Dark theme scrollbar styles */
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(67, 67, 67, 0.8); /* Darker color for dark theme */
|
||||
background-color: rgba(67, 67, 67, 0.6); /* Darker color for dark theme */
|
||||
border-color: rgba(0, 0, 0, var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 0.6rem;
|
||||
height: 0.4rem;
|
||||
width: 0.4rem;
|
||||
}
|
||||
|
||||
@@ -409,17 +409,33 @@ input[type='number'] {
|
||||
}
|
||||
}
|
||||
|
||||
.tiptap .mention {
|
||||
.mention {
|
||||
border-radius: 0.4rem;
|
||||
box-decoration-break: clone;
|
||||
padding: 0.1rem 0.3rem;
|
||||
@apply text-blue-900 dark:text-blue-100 bg-blue-300/20 dark:bg-blue-500/20;
|
||||
@apply text-sky-800 dark:text-sky-200 bg-sky-300/15 dark:bg-sky-500/15;
|
||||
}
|
||||
|
||||
.tiptap .mention::after {
|
||||
.mention::after {
|
||||
content: '\200B';
|
||||
}
|
||||
|
||||
.tiptap .suggestion {
|
||||
border-radius: 0.4rem;
|
||||
box-decoration-break: clone;
|
||||
padding: 0.1rem 0.3rem;
|
||||
@apply text-sky-800 dark:text-sky-200 bg-sky-300/15 dark:bg-sky-500/15;
|
||||
}
|
||||
|
||||
.tiptap .suggestion::after {
|
||||
content: '\200B';
|
||||
}
|
||||
|
||||
.tiptap .suggestion.is-empty::after {
|
||||
content: '\00A0';
|
||||
border-bottom: 1px dotted rgba(31, 41, 55, 0.12);
|
||||
}
|
||||
|
||||
.input-prose .tiptap ul[data-type='taskList'] {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
@@ -645,3 +661,112 @@ body {
|
||||
background: #171717;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
/* Position the handle relative to each LI */
|
||||
.pm-li--with-handle {
|
||||
position: relative;
|
||||
margin-left: 12px; /* make space for the handle */
|
||||
}
|
||||
|
||||
.tiptap ul[data-type='taskList'] .pm-list-drag-handle {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
/* The drag handle itself */
|
||||
.pm-list-drag-handle {
|
||||
position: absolute;
|
||||
left: -36px; /* pull into the left gutter */
|
||||
top: 1px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
opacity: 0.35;
|
||||
transition:
|
||||
opacity 120ms ease,
|
||||
background 120ms ease;
|
||||
}
|
||||
|
||||
.tiptap ul[data-type='taskList'] .pm-list-drag-handle {
|
||||
left: -16px; /* pull into the left gutter more to avoid the checkbox */
|
||||
}
|
||||
|
||||
.pm-list-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.pm-li--with-handle:hover > .pm-list-drag-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
.pm-list-drag-handle:hover {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:root {
|
||||
--pm-accent: color-mix(in oklab, Highlight 70%, transparent);
|
||||
--pm-fill-target: color-mix(in oklab, Highlight 26%, transparent);
|
||||
--pm-fill-ancestor: color-mix(in oklab, Highlight 16%, transparent);
|
||||
}
|
||||
|
||||
.pm-li-drop-before,
|
||||
.pm-li-drop-after,
|
||||
.pm-li-drop-into,
|
||||
.pm-li-drop-outdent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* BEFORE/AFTER lines */
|
||||
.pm-li-drop-before::before,
|
||||
.pm-li-drop-after::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--pm-accent);
|
||||
pointer-events: none;
|
||||
}
|
||||
.pm-li-drop-before::before {
|
||||
top: -2px;
|
||||
}
|
||||
.pm-li-drop-after::after {
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
.pm-li-drop-before,
|
||||
.pm-li-drop-after,
|
||||
.pm-li-drop-into,
|
||||
.pm-li-drop-outdent {
|
||||
background: var(--pm-fill-target);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.pm-li-drop-outdent::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-block: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 3px;
|
||||
background: color-mix(in oklab, Highlight 35%, transparent);
|
||||
}
|
||||
|
||||
.pm-li--with-handle:has(.pm-li-drop-before),
|
||||
.pm-li--with-handle:has(.pm-li-drop-after),
|
||||
.pm-li--with-handle:has(.pm-li-drop-into),
|
||||
.pm-li--with-handle:has(.pm-li-drop-outdent) {
|
||||
background: var(--pm-fill-ancestor);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.pm-li-drop-before,
|
||||
.pm-li-drop-after,
|
||||
.pm-li-drop-into,
|
||||
.pm-li-drop-outdent {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
+30
-17
@@ -2,29 +2,42 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/png" href="/static/favicon.png" />
|
||||
<link rel="icon" type="image/png" href="/static/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/static/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="Open WebUI" />
|
||||
|
||||
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
|
||||
<link rel="icon" type="image/png" href="/static/favicon.png" crossorigin="use-credentials" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="/static/favicon-96x96.png"
|
||||
sizes="96x96"
|
||||
crossorigin="use-credentials"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/svg+xml"
|
||||
href="/static/favicon.svg"
|
||||
crossorigin="use-credentials"
|
||||
/>
|
||||
<link rel="shortcut icon" href="/static/favicon.ico" crossorigin="use-credentials" />
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="/static/apple-touch-icon.png"
|
||||
crossorigin="use-credentials"
|
||||
/>
|
||||
<link
|
||||
rel="manifest"
|
||||
href="/manifest.json"
|
||||
crossorigin="use-credentials"
|
||||
crossorigin="use-credentials"
|
||||
/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
|
||||
/>
|
||||
<meta name="theme-color" content="#171717" />
|
||||
<meta name="robots" content="noindex,nofollow" />
|
||||
<meta name="description" content="Open WebUI" />
|
||||
<link
|
||||
rel="search"
|
||||
type="application/opensearchdescription+xml"
|
||||
title="Open WebUI"
|
||||
href="/opensearch.xml"
|
||||
/>
|
||||
<script src="/static/loader.js" defer></script>
|
||||
<link rel="stylesheet" href="/static/custom.css" />
|
||||
|
||||
<script src="/static/loader.js" defer crossorigin="use-credentials"></script>
|
||||
<link rel="stylesheet" href="/static/custom.css" crossorigin="use-credentials" />
|
||||
|
||||
<script>
|
||||
function resizeIframe(obj) {
|
||||
|
||||
+12
-1
@@ -354,8 +354,19 @@ export const getToolServersData = async (servers: object[]) => {
|
||||
.filter((server) => server?.config?.enable)
|
||||
.map(async (server) => {
|
||||
let error = null;
|
||||
|
||||
let toolServerToken = null;
|
||||
const auth_type = server?.auth_type ?? 'bearer';
|
||||
if (auth_type === 'bearer') {
|
||||
toolServerToken = server?.key;
|
||||
} else if (auth_type === 'none') {
|
||||
// No authentication
|
||||
} else if (auth_type === 'session') {
|
||||
toolServerToken = localStorage.token;
|
||||
}
|
||||
|
||||
const data = await getToolServerData(
|
||||
(server?.auth_type ?? 'bearer') === 'bearer' ? server?.key : localStorage.token,
|
||||
toolServerToken,
|
||||
(server?.path ?? '').includes('://')
|
||||
? server?.path
|
||||
: `${server?.url}${(server?.path ?? '').startsWith('/') ? '' : '/'}${server?.path}`
|
||||
|
||||
@@ -91,10 +91,15 @@ export const getNotes = async (token: string = '', raw: boolean = false) => {
|
||||
return grouped;
|
||||
};
|
||||
|
||||
export const getNoteList = async (token: string = '') => {
|
||||
export const getNoteList = async (token: string = '', page: number | null = null) => {
|
||||
let error = null;
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/notes/list`, {
|
||||
if (page !== null) {
|
||||
searchParams.append('page', `${page}`);
|
||||
}
|
||||
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/notes/list?${searchParams.toString()}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
|
||||
@@ -194,6 +194,34 @@ export const getAllUsers = async (token: string) => {
|
||||
return res;
|
||||
};
|
||||
|
||||
export const searchUsers = async (token: string, query: string) => {
|
||||
let error = null;
|
||||
let res = null;
|
||||
|
||||
res = await fetch(`${WEBUI_API_BASE_URL}/users/search?query=${encodeURIComponent(query)}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
error = err.detail;
|
||||
return null;
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const getUserSettings = async (token: string) => {
|
||||
let error = null;
|
||||
const res = await fetch(`${WEBUI_API_BASE_URL}/users/user/settings`, {
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
|
||||
let url = '';
|
||||
let key = '';
|
||||
let auth_type = 'bearer';
|
||||
|
||||
let connectionType = 'external';
|
||||
let azure = false;
|
||||
@@ -74,6 +75,7 @@
|
||||
url,
|
||||
key,
|
||||
config: {
|
||||
auth_type,
|
||||
azure: azure,
|
||||
api_version: apiVersion
|
||||
}
|
||||
@@ -120,7 +122,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (!key) {
|
||||
if (!key && !['azure_ad', 'microsoft_entra_id'].includes(auth_type)) {
|
||||
loading = false;
|
||||
|
||||
toast.error($i18n.t('Key is required'));
|
||||
@@ -146,6 +148,7 @@
|
||||
prefix_id: prefixId,
|
||||
model_ids: modelIds,
|
||||
connection_type: connectionType,
|
||||
auth_type,
|
||||
...(!ollama && azure ? { azure: true, api_version: apiVersion } : {})
|
||||
}
|
||||
};
|
||||
@@ -157,6 +160,7 @@
|
||||
|
||||
url = '';
|
||||
key = '';
|
||||
auth_type = 'bearer';
|
||||
prefixId = '';
|
||||
tags = [];
|
||||
modelIds = [];
|
||||
@@ -167,6 +171,8 @@
|
||||
url = connection.url;
|
||||
key = connection.key;
|
||||
|
||||
auth_type = connection.config.auth_type ?? 'bearer';
|
||||
|
||||
enable = connection.config?.enable ?? true;
|
||||
tags = connection.config?.tags ?? [];
|
||||
prefixId = connection.config?.prefix_id ?? '';
|
||||
@@ -305,23 +311,72 @@
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div class="flex flex-col w-full">
|
||||
<div
|
||||
class={`mb-0.5 text-xs text-gray-500
|
||||
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
|
||||
<label
|
||||
for="select-bearer-or-session"
|
||||
class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
|
||||
>{$i18n.t('Auth')}</label
|
||||
>
|
||||
{$i18n.t('Key')}
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<SensitiveInput
|
||||
inputClassName={`w-full text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
|
||||
bind:value={key}
|
||||
placeholder={$i18n.t('API Key')}
|
||||
required={false}
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex-shrink-0 self-start">
|
||||
<select
|
||||
id="select-bearer-or-session"
|
||||
class={`w-full text-sm bg-transparent pr-5 ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
|
||||
bind:value={auth_type}
|
||||
>
|
||||
<option value="none">{$i18n.t('None')}</option>
|
||||
<option value="bearer">{$i18n.t('Bearer')}</option>
|
||||
|
||||
{#if !ollama}
|
||||
<option value="session">{$i18n.t('Session')}</option>
|
||||
{#if !direct}
|
||||
<option value="system_oauth">{$i18n.t('OAuth')}</option>
|
||||
{#if azure}
|
||||
<option value="microsoft_entra_id">{$i18n.t('Entra ID')}</option>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 items-center">
|
||||
{#if auth_type === 'bearer'}
|
||||
<SensitiveInput
|
||||
bind:value={key}
|
||||
placeholder={$i18n.t('API Key')}
|
||||
required={false}
|
||||
/>
|
||||
{:else if auth_type === 'none'}
|
||||
<div
|
||||
class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
|
||||
>
|
||||
{$i18n.t('No authentication')}
|
||||
</div>
|
||||
{:else if auth_type === 'session'}
|
||||
<div
|
||||
class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
|
||||
>
|
||||
{$i18n.t('Forwards system user session credentials to authenticate')}
|
||||
</div>
|
||||
{:else if auth_type === 'system_oauth'}
|
||||
<div
|
||||
class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
|
||||
>
|
||||
{$i18n.t('Forwards system user OAuth access token to authenticate')}
|
||||
</div>
|
||||
{:else if ['azure_ad', 'microsoft_entra_id'].includes(auth_type)}
|
||||
<div
|
||||
class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
|
||||
>
|
||||
{$i18n.t('Uses DefaultAzureCredential to authenticate')}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div class="flex flex-col w-full">
|
||||
<label
|
||||
for="prefix-id-input"
|
||||
@@ -355,7 +410,7 @@
|
||||
for="prefix-id-input"
|
||||
class={`mb-0.5 text-xs text-gray-500
|
||||
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
|
||||
>{$i18n.t('Provider')}</label
|
||||
>{$i18n.t('Provider Type')}</label
|
||||
>
|
||||
|
||||
<div>
|
||||
@@ -397,37 +452,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div class="flex flex-col w-full">
|
||||
<div
|
||||
class={`mb-0.5 text-xs text-gray-500
|
||||
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
|
||||
>
|
||||
{$i18n.t('Tags')}
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<Tags
|
||||
bind:tags
|
||||
on:add={(e) => {
|
||||
tags = [
|
||||
...tags,
|
||||
{
|
||||
name: e.detail
|
||||
}
|
||||
];
|
||||
}}
|
||||
on:delete={(e) => {
|
||||
tags = tags.filter((tag) => tag.name !== e.detail);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex flex-col w-full mt-2">
|
||||
<div class="mb-1 flex justify-between">
|
||||
<div
|
||||
class={`mb-0.5 text-xs text-gray-500
|
||||
@@ -483,8 +508,6 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<hr class=" border-gray-100 dark:border-gray-700/10 my-1.5 w-full" />
|
||||
|
||||
<div class="flex items-center">
|
||||
<label class="sr-only" for="add-model-id-input">{$i18n.t('Add a model ID')}</label>
|
||||
<input
|
||||
@@ -512,6 +535,34 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div class="flex flex-col w-full">
|
||||
<div
|
||||
class={`mb-0.5 text-xs text-gray-500
|
||||
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
|
||||
>
|
||||
{$i18n.t('Tags')}
|
||||
</div>
|
||||
|
||||
<div class="flex-1 mt-0.5">
|
||||
<Tags
|
||||
bind:tags
|
||||
on:add={(e) => {
|
||||
tags = [
|
||||
...tags,
|
||||
{
|
||||
name: e.detail
|
||||
}
|
||||
];
|
||||
}}
|
||||
on:delete={(e) => {
|
||||
tags = tags.filter((tag) => tag.name !== e.detail);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
|
||||
{#if edit}
|
||||
<button
|
||||
|
||||
@@ -7,8 +7,7 @@
|
||||
</script>
|
||||
|
||||
<div class="px-3">
|
||||
<div class="text-center text-6xl mb-3">📄</div>
|
||||
<div class="text-center dark:text-white text-xl font-semibold z-50">
|
||||
<div class="text-center dark:text-white text-2xl font-medium z-50">
|
||||
{#if title}
|
||||
{title}
|
||||
{:else}
|
||||
@@ -17,7 +16,7 @@
|
||||
</div>
|
||||
|
||||
<slot
|
||||
><div class="px-2 mt-2 text-center text-sm dark:text-gray-200 w-full">
|
||||
><div class="px-2 mt-2 text-center text-gray-700 dark:text-gray-200 w-full">
|
||||
{#if content}
|
||||
{content}
|
||||
{:else}
|
||||
|
||||
+103
-28
@@ -30,6 +30,8 @@
|
||||
let url = '';
|
||||
let path = 'openapi.json';
|
||||
|
||||
let type = 'openapi'; // 'openapi', 'mcp'
|
||||
|
||||
let auth_type = 'bearer';
|
||||
let key = '';
|
||||
|
||||
@@ -70,6 +72,7 @@
|
||||
const res = await verifyToolServerConnection(localStorage.token, {
|
||||
url,
|
||||
path,
|
||||
type,
|
||||
auth_type,
|
||||
key,
|
||||
config: {
|
||||
@@ -97,10 +100,16 @@
|
||||
|
||||
// remove trailing slash from url
|
||||
url = url.replace(/\/$/, '');
|
||||
if (id.includes(':') || id.includes('|')) {
|
||||
toast.error($i18n.t('ID cannot contain ":" or "|" characters'));
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const connection = {
|
||||
url,
|
||||
path,
|
||||
type,
|
||||
auth_type,
|
||||
key,
|
||||
config: {
|
||||
@@ -119,8 +128,11 @@
|
||||
loading = false;
|
||||
show = false;
|
||||
|
||||
// reset form
|
||||
url = '';
|
||||
path = 'openapi.json';
|
||||
type = 'openapi';
|
||||
|
||||
key = '';
|
||||
auth_type = 'bearer';
|
||||
|
||||
@@ -137,6 +149,7 @@
|
||||
url = connection.url;
|
||||
path = connection?.path ?? 'openapi.json';
|
||||
|
||||
type = connection?.type ?? 'openapi';
|
||||
auth_type = connection?.auth_type ?? 'bearer';
|
||||
key = connection?.key ?? '';
|
||||
|
||||
@@ -189,6 +202,50 @@
|
||||
}}
|
||||
>
|
||||
<div class="px-1">
|
||||
{#if !direct}
|
||||
<div class="flex gap-2 mb-1.5">
|
||||
<div class="flex w-full justify-between items-center">
|
||||
<div class=" text-xs text-gray-500">{$i18n.t('Type')}</div>
|
||||
|
||||
<div class="">
|
||||
<button
|
||||
on:click={() => {
|
||||
type = ['', 'openapi'].includes(type) ? 'mcp' : 'openapi';
|
||||
}}
|
||||
type="button"
|
||||
class=" text-xs text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
{#if ['', 'openapi'].includes(type)}
|
||||
{$i18n.t('OpenAPI')}
|
||||
{:else if type === 'mcp'}
|
||||
{$i18n.t('MCP')}
|
||||
<span class="text-gray-500">{$i18n.t('Streamable HTTP')}</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if type === 'mcp'}
|
||||
<div
|
||||
class=" bg-yellow-500/20 text-yellow-700 dark:text-yellow-200 rounded-2xl text-xs px-4 py-3 mb-2"
|
||||
>
|
||||
<span class="font-medium">
|
||||
{$i18n.t('Warning')}:
|
||||
</span>
|
||||
{$i18n.t(
|
||||
'MCP support is experimental and its specification changes often, which can lead to incompatibilities. OpenAPI specification support is directly maintained by the Open WebUI team, making it the more reliable option for compatibility.'
|
||||
)}
|
||||
|
||||
<a
|
||||
class="font-medium underline"
|
||||
href="https://docs.openwebui.com/features/mcp"
|
||||
target="_blank">{$i18n.t('Read more →')}</a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-2">
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex justify-between mb-0.5">
|
||||
@@ -243,30 +300,36 @@
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex items-center">
|
||||
<label for="url-or-path" class="sr-only"
|
||||
>{$i18n.t('openapi.json URL or Path')}</label
|
||||
>
|
||||
<input
|
||||
class={`w-full text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
|
||||
type="text"
|
||||
id="url-or-path"
|
||||
bind:value={path}
|
||||
placeholder={$i18n.t('openapi.json URL or Path')}
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{#if ['', 'openapi'].includes(type)}
|
||||
<div class="flex-1 flex items-center">
|
||||
<label for="url-or-path" class="sr-only"
|
||||
>{$i18n.t('openapi.json URL or Path')}</label
|
||||
>
|
||||
<input
|
||||
class={`w-full text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
|
||||
type="text"
|
||||
id="url-or-path"
|
||||
bind:value={path}
|
||||
placeholder={$i18n.t('openapi.json URL or Path')}
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class={`text-xs mt-1 ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
|
||||
>
|
||||
{$i18n.t(`WebUI will make requests to "{{url}}"`, {
|
||||
url: path.includes('://') ? path : `${url}${path.startsWith('/') ? '' : '/'}${path}`
|
||||
})}
|
||||
</div>
|
||||
{#if ['', 'openapi'].includes(type)}
|
||||
<div
|
||||
class={`text-xs mt-1 ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
|
||||
>
|
||||
{$i18n.t(`WebUI will make requests to "{{url}}"`, {
|
||||
url: path.includes('://')
|
||||
? path
|
||||
: `${url}${path.startsWith('/') ? '' : '/'}${path}`
|
||||
})}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div class="flex flex-col w-full">
|
||||
@@ -283,11 +346,13 @@
|
||||
class={`w-full text-sm bg-transparent pr-5 ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
|
||||
bind:value={auth_type}
|
||||
>
|
||||
<option value="none">{$i18n.t('None')}</option>
|
||||
|
||||
<option value="bearer">{$i18n.t('Bearer')}</option>
|
||||
<option value="session">{$i18n.t('Session')}</option>
|
||||
|
||||
{#if !direct}
|
||||
<option value="request_headers">{$i18n.t('Request Headers')}</option>
|
||||
<option value="system_oauth">{$i18n.t('OAuth')}</option>
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
@@ -299,17 +364,23 @@
|
||||
placeholder={$i18n.t('API Key')}
|
||||
required={false}
|
||||
/>
|
||||
{:else if auth_type === 'none'}
|
||||
<div
|
||||
class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
|
||||
>
|
||||
{$i18n.t('No authentication')}
|
||||
</div>
|
||||
{:else if auth_type === 'session'}
|
||||
<div
|
||||
class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
|
||||
>
|
||||
{$i18n.t('Forwards system user session credentials to authenticate')}
|
||||
</div>
|
||||
{:else if auth_type === 'request_headers'}
|
||||
{:else if auth_type === 'system_oauth'}
|
||||
<div
|
||||
class={`text-xs self-center translate-y-[1px] ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
|
||||
>
|
||||
{$i18n.t('Forwards system user headers to authenticate')}
|
||||
{$i18n.t('Forwards system user OAuth access token to authenticate')}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -326,9 +397,12 @@
|
||||
for="enter-id"
|
||||
class={`mb-0.5 text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
|
||||
>{$i18n.t('ID')}
|
||||
<span class="text-xs text-gray-200 dark:text-gray-800 ml-0.5"
|
||||
>{$i18n.t('Optional')}</span
|
||||
>
|
||||
|
||||
{#if type !== 'mcp'}
|
||||
<span class="text-xs text-gray-200 dark:text-gray-800 ml-0.5"
|
||||
>{$i18n.t('Optional')}</span
|
||||
>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
<div class="flex-1">
|
||||
@@ -339,6 +413,7 @@
|
||||
bind:value={id}
|
||||
placeholder={$i18n.t('Enter ID')}
|
||||
autocomplete="off"
|
||||
required={type === 'mcp'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -388,7 +463,7 @@
|
||||
<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
|
||||
|
||||
<div class="my-2 -mx-2">
|
||||
<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg">
|
||||
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
|
||||
<AccessControl bind:accessControl />
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
import { onMount, getContext } from 'svelte';
|
||||
import { Confetti } from 'svelte-confetti';
|
||||
|
||||
@@ -17,16 +19,19 @@
|
||||
|
||||
let changelog = null;
|
||||
|
||||
onMount(async () => {
|
||||
const res = await getChangelog();
|
||||
changelog = res;
|
||||
});
|
||||
const init = async () => {
|
||||
changelog = await getChangelog();
|
||||
};
|
||||
|
||||
$: if (show) {
|
||||
init();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal bind:show size="lg">
|
||||
<div class="px-5 pt-4 dark:text-gray-300 text-gray-700">
|
||||
<Modal bind:show size="xl">
|
||||
<div class="px-6 pt-5 dark:text-white text-black">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="text-xl font-semibold">
|
||||
<div class="text-xl font-medium">
|
||||
{$i18n.t("What's New in")}
|
||||
{$WEBUI_NAME}
|
||||
<Confetti x={[-1, -0.25]} y={[0, 0.5]} />
|
||||
@@ -46,7 +51,7 @@
|
||||
</div>
|
||||
<div class="flex items-center mt-1">
|
||||
<div class="text-sm dark:text-gray-200">{$i18n.t('Release Notes')}</div>
|
||||
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
|
||||
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50/50 dark:bg-gray-850/50" />
|
||||
<div class="text-sm dark:text-gray-200">
|
||||
v{WEBUI_VERSION}
|
||||
</div>
|
||||
@@ -54,7 +59,7 @@
|
||||
</div>
|
||||
|
||||
<div class=" w-full p-4 px-5 text-gray-700 dark:text-gray-100">
|
||||
<div class=" overflow-y-scroll max-h-96 scrollbar-hidden">
|
||||
<div class=" overflow-y-scroll max-h-[30rem] scrollbar-hidden">
|
||||
<div class="mb-3">
|
||||
{#if changelog}
|
||||
{#each Object.keys(changelog) as version}
|
||||
@@ -63,31 +68,28 @@
|
||||
v{version} - {changelog[version].date}
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-100 dark:border-gray-850 my-2" />
|
||||
<hr class="border-gray-50/50 dark:border-gray-850/50 my-2" />
|
||||
|
||||
{#each Object.keys(changelog[version]).filter((section) => section !== 'date') as section}
|
||||
<div class="">
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="font-semibold uppercase text-xs {section === 'added'
|
||||
? 'text-white bg-blue-600'
|
||||
? 'bg-blue-500/20 text-blue-700 dark:text-blue-200'
|
||||
: section === 'fixed'
|
||||
? 'text-white bg-green-600'
|
||||
? 'bg-green-500/20 text-green-700 dark:text-green-200'
|
||||
: section === 'changed'
|
||||
? 'text-white bg-yellow-600'
|
||||
? 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-200'
|
||||
: section === 'removed'
|
||||
? 'text-white bg-red-600'
|
||||
: ''} w-fit px-3 rounded-full my-2.5"
|
||||
? 'bg-red-500/20 text-red-700 dark:text-red-200'
|
||||
: ''} w-fit rounded-xl px-2 my-2.5"
|
||||
>
|
||||
{section}
|
||||
</div>
|
||||
|
||||
<div class="my-2.5 px-1.5">
|
||||
{#each Object.keys(changelog[version][section]) as item}
|
||||
<div class="text-sm mb-2">
|
||||
<div class="font-semibold uppercase">
|
||||
{changelog[version][section][item].title}
|
||||
</div>
|
||||
<div class="mb-2 mt-1">{changelog[version][section][item].content}</div>
|
||||
<div class="my-2.5 px-1.5 markdown-prose-sm !list-none !w-full !max-w-none">
|
||||
{#each changelog[version][section] as entry}
|
||||
<div class="my-2">
|
||||
{@html DOMPurify.sanitize(entry?.raw)}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,43 @@
|
||||
export let title: string = 'HI';
|
||||
export let content: string;
|
||||
|
||||
let startX = 0,
|
||||
startY = 0;
|
||||
let moved = false;
|
||||
const DRAG_THRESHOLD_PX = 6;
|
||||
|
||||
const clickHandler = () => {
|
||||
onClick();
|
||||
dispatch('closeToast');
|
||||
};
|
||||
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
moved = false;
|
||||
// Ensure we continue to get events even if the toast moves under the pointer.
|
||||
(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
|
||||
}
|
||||
|
||||
function onPointerMove(e: PointerEvent) {
|
||||
if (moved) return;
|
||||
const dx = e.clientX - startX;
|
||||
const dy = e.clientY - startY;
|
||||
if (dx * dx + dy * dy > DRAG_THRESHOLD_PX * DRAG_THRESHOLD_PX) {
|
||||
moved = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerUp(e: PointerEvent) {
|
||||
// Release capture if taken
|
||||
(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId);
|
||||
|
||||
// Only treat as a click if there wasn't a drag
|
||||
if (!moved) {
|
||||
clickHandler();
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!navigator.userActivation.hasBeenActive) {
|
||||
return;
|
||||
@@ -31,24 +68,33 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="flex gap-2.5 text-left min-w-[var(--width)] w-full dark:bg-gray-850 dark:text-white bg-white text-black border border-gray-100 dark:border-gray-850 rounded-xl px-3.5 py-3.5"
|
||||
on:click={() => {
|
||||
onClick();
|
||||
dispatch('closeToast');
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="flex gap-2.5 text-left min-w-[var(--width)] w-full dark:bg-gray-850 dark:text-white bg-white text-black border border-gray-100 dark:border-gray-800 rounded-3xl px-4 py-3.5 cursor-pointer select-none"
|
||||
on:dragstart|preventDefault
|
||||
on:pointerdown={onPointerDown}
|
||||
on:pointermove={onPointerMove}
|
||||
on:pointerup={onPointerUp}
|
||||
on:pointercancel={() => (moved = true)}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
clickHandler();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="shrink-0 self-top -translate-y-0.5">
|
||||
<img src="{WEBUI_BASE_URL}/static/favicon.png" alt="favicon" class="size-7 rounded-full" />
|
||||
<img src="{WEBUI_BASE_URL}/static/favicon.png" alt="favicon" class="size-6 rounded-full" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{#if title}
|
||||
<div class=" text-[13px] font-medium mb-0.5 line-clamp-1 capitalize">{title}</div>
|
||||
<div class=" text-[13px] font-medium mb-0.5 line-clamp-1">{title}</div>
|
||||
{/if}
|
||||
|
||||
<div class=" line-clamp-2 text-xs self-center dark:text-gray-300 font-normal">
|
||||
{@html DOMPurify.sanitize(marked(content))}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
<div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
|
||||
<div
|
||||
id="users-tabs-container"
|
||||
class="tabs flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
|
||||
class="tabs mx-[16px] lg:mx-0 lg:px-[16px] flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-50 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
|
||||
>
|
||||
<button
|
||||
id="leaderboard"
|
||||
@@ -113,7 +113,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 mt-1 lg:mt-0 overflow-y-scroll">
|
||||
<div class="flex-1 mt-1 lg:mt-0 px-[16px] lg:pr-[16px] lg:pl-0 overflow-y-scroll">
|
||||
{#if selectedTab === 'leaderboard'}
|
||||
<Leaderboard {feedbacks} />
|
||||
{:else if selectedTab === 'feedbacks'}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
|
||||
import Pencil from '$lib/components/icons/Pencil.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Download from '$lib/components/icons/ArrowDownTray.svelte';
|
||||
import Download from '$lib/components/icons/Download.svelte';
|
||||
|
||||
let show = false;
|
||||
</script>
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-[150px] rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
|
||||
class="w-full max-w-[150px] rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
|
||||
sideOffset={-2}
|
||||
side="bottom"
|
||||
align="start"
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
import { deleteFeedbackById, exportAllFeedbacks, getAllFeedbacks } from '$lib/apis/evaluations';
|
||||
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
|
||||
import Download from '$lib/components/icons/Download.svelte';
|
||||
import Badge from '$lib/components/common/Badge.svelte';
|
||||
import CloudArrowUp from '$lib/components/icons/CloudArrowUp.svelte';
|
||||
import Pagination from '$lib/components/common/Pagination.svelte';
|
||||
@@ -169,7 +169,7 @@
|
||||
|
||||
<FeedbackModal bind:show={showFeedbackModal} {selectedFeedback} onClose={closeFeedbackModal} />
|
||||
|
||||
<div class="mt-0.5 mb-2 gap-1 flex flex-row justify-between">
|
||||
<div class="mt-0.5 mb-1 gap-1 flex flex-row justify-between">
|
||||
<div class="flex md:self-center text-lg font-medium px-0.5">
|
||||
{$i18n.t('Feedback History')}
|
||||
|
||||
@@ -187,31 +187,25 @@
|
||||
exportHandler();
|
||||
}}
|
||||
>
|
||||
<ArrowDownTray className="size-3" />
|
||||
<Download className="size-3" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm pt-0.5"
|
||||
>
|
||||
<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full">
|
||||
{#if (feedbacks ?? []).length === 0}
|
||||
<div class="text-center text-xs text-gray-500 dark:text-gray-400 py-1">
|
||||
{$i18n.t('No feedbacks found')}
|
||||
</div>
|
||||
{:else}
|
||||
<table
|
||||
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded-sm"
|
||||
>
|
||||
<thead
|
||||
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
|
||||
>
|
||||
<tr class="">
|
||||
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full">
|
||||
<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
|
||||
<tr class=" border-b-2 border-gray-100 dark:border-gray-800">
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 cursor-pointer select-none w-3"
|
||||
class="px-2.5 py-2 cursor-pointer select-none w-3"
|
||||
on:click={() => setSortKey('user')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center justify-end">
|
||||
@@ -234,7 +228,7 @@
|
||||
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 pr-1.5 cursor-pointer select-none"
|
||||
class="px-2.5 py-2 cursor-pointer select-none"
|
||||
on:click={() => setSortKey('model_id')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
@@ -257,7 +251,7 @@
|
||||
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 text-right cursor-pointer select-none w-fit"
|
||||
class="px-2.5 py-2 text-right cursor-pointer select-none w-fit"
|
||||
on:click={() => setSortKey('rating')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center justify-end">
|
||||
@@ -280,7 +274,7 @@
|
||||
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 text-right cursor-pointer select-none w-0"
|
||||
class="px-2.5 py-2 text-right cursor-pointer select-none w-0"
|
||||
on:click={() => setSortKey('updated_at')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center justify-end">
|
||||
@@ -301,7 +295,7 @@
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th scope="col" class="px-3 py-1.5 text-right cursor-pointer select-none w-0"> </th>
|
||||
<th scope="col" class="px-2.5 py-2 text-right cursor-pointer select-none w-0"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="">
|
||||
|
||||
@@ -1,9 +1,4 @@
|
||||
<script lang="ts">
|
||||
import * as ort from 'onnxruntime-web';
|
||||
import { env, AutoModel, AutoTokenizer } from '@huggingface/transformers';
|
||||
|
||||
env.backends.onnx.wasm.wasmPaths = '/wasm/';
|
||||
|
||||
import { onMount, getContext } from 'svelte';
|
||||
import { models } from '$lib/stores';
|
||||
|
||||
@@ -237,6 +232,11 @@
|
||||
//////////////////////
|
||||
|
||||
const loadEmbeddingModel = async () => {
|
||||
const { env, AutoModel, AutoTokenizer } = await import('@huggingface/transformers');
|
||||
if (env.backends.onnx.wasm) {
|
||||
env.backends.onnx.wasm.wasmPaths = '/wasm/';
|
||||
}
|
||||
|
||||
// Check if the tokenizer and model are already loaded and stored in the window object
|
||||
if (!window.tokenizer) {
|
||||
window.tokenizer = await AutoTokenizer.from_pretrained(EMBEDDING_MODEL);
|
||||
@@ -337,7 +337,7 @@
|
||||
/>
|
||||
|
||||
<div
|
||||
class="pt-0.5 pb-2 gap-1 flex flex-col md:flex-row justify-between sticky top-0 z-10 bg-white dark:bg-gray-900"
|
||||
class="pt-0.5 pb-1 gap-1 flex flex-col md:flex-row justify-between sticky top-0 z-10 bg-white dark:bg-gray-900"
|
||||
>
|
||||
<div class="flex md:self-center text-lg font-medium px-0.5 shrink-0 items-center">
|
||||
<div class=" gap-1">
|
||||
@@ -370,9 +370,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm pt-0.5"
|
||||
>
|
||||
<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm">
|
||||
{#if loadingLeaderboard}
|
||||
<div class=" absolute top-0 bottom-0 left-0 right-0 flex">
|
||||
<div class="m-auto">
|
||||
@@ -386,17 +384,15 @@
|
||||
</div>
|
||||
{:else}
|
||||
<table
|
||||
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded {loadingLeaderboard
|
||||
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full {loadingLeaderboard
|
||||
? 'opacity-20'
|
||||
: ''}"
|
||||
>
|
||||
<thead
|
||||
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
|
||||
>
|
||||
<tr class="">
|
||||
<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
|
||||
<tr class=" border-b-2 border-gray-100 dark:border-gray-800">
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 cursor-pointer select-none w-3"
|
||||
class="px-2.5 py-2 cursor-pointer select-none w-3"
|
||||
on:click={() => setSortKey('rating')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
@@ -418,7 +414,7 @@
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 cursor-pointer select-none"
|
||||
class="px-2.5 py-2 cursor-pointer select-none"
|
||||
on:click={() => setSortKey('name')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
@@ -440,7 +436,7 @@
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 text-right cursor-pointer select-none w-fit"
|
||||
class="px-2.5 py-2 text-right cursor-pointer select-none w-fit"
|
||||
on:click={() => setSortKey('rating')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center justify-end">
|
||||
@@ -462,7 +458,7 @@
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 text-right cursor-pointer select-none w-5"
|
||||
class="px-2.5 py-2 text-right cursor-pointer select-none w-5"
|
||||
on:click={() => setSortKey('won')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center justify-end">
|
||||
@@ -484,7 +480,7 @@
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 text-right cursor-pointer select-none w-5"
|
||||
class="px-2.5 py-2 text-right cursor-pointer select-none w-5"
|
||||
on:click={() => setSortKey('lost')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center justify-end">
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
toggleGlobalById
|
||||
} from '$lib/apis/functions';
|
||||
|
||||
import ArrowDownTray from '../icons/ArrowDownTray.svelte';
|
||||
import Download from '../icons/Download.svelte';
|
||||
import Tooltip from '../common/Tooltip.svelte';
|
||||
import ConfirmDialog from '../common/ConfirmDialog.svelte';
|
||||
import { getModels } from '$lib/apis';
|
||||
@@ -222,7 +222,7 @@
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class="flex flex-col mt-1.5 mb-0.5">
|
||||
<div class="flex flex-col mt-1.5 mb-0.5 px-[16px]">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<div class="flex md:self-center text-xl items-center font-medium px-0.5">
|
||||
{$i18n.t('Functions')}
|
||||
@@ -317,7 +317,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="mb-5 px-[16px]">
|
||||
{#each filteredItems as func (func.id)}
|
||||
<div
|
||||
class=" flex space-x-4 cursor-pointer w-full px-2 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
|
||||
@@ -330,14 +330,14 @@
|
||||
<div class=" flex-1 self-center pl-1">
|
||||
<div class=" font-semibold flex items-center gap-1.5">
|
||||
<div
|
||||
class=" text-xs font-bold px-1 rounded-sm uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
|
||||
class=" text-xs font-semibold px-1 rounded-sm uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
{func.type}
|
||||
</div>
|
||||
|
||||
{#if func?.meta?.manifest?.version}
|
||||
<div
|
||||
class="text-xs font-bold px-1 rounded-sm line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
|
||||
class="text-xs font-semibold px-1 rounded-sm line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
v{func?.meta?.manifest?.version ?? ''}
|
||||
</div>
|
||||
@@ -482,7 +482,7 @@
|
||||
)}
|
||||
</div> -->
|
||||
|
||||
<div class=" flex justify-end w-full mb-2">
|
||||
<div class=" flex justify-end w-full mb-2 px-[16px]">
|
||||
<div class="flex space-x-2">
|
||||
<input
|
||||
id="documents-import-input"
|
||||
@@ -562,7 +562,7 @@
|
||||
</div>
|
||||
|
||||
{#if $config?.features.enable_community_sharing}
|
||||
<div class=" my-16">
|
||||
<div class=" my-16 px-[16px]">
|
||||
<div class=" text-xl font-medium mb-1 line-clamp-1">
|
||||
{$i18n.t('Made by Open WebUI Community')}
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Share from '$lib/components/icons/Share.svelte';
|
||||
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
|
||||
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
|
||||
import Download from '$lib/components/icons/Download.svelte';
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
|
||||
import Github from '$lib/components/icons/Github.svelte';
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-[190px] text-sm rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
|
||||
class="w-full max-w-[190px] text-sm rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
|
||||
sideOffset={-2}
|
||||
side="bottom"
|
||||
align="start"
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import CodeEditor from '$lib/components/common/CodeEditor.svelte';
|
||||
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||
import Badge from '$lib/components/common/Badge.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
@@ -367,20 +366,22 @@ class Pipe:
|
||||
</div>
|
||||
|
||||
<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
|
||||
<CodeEditor
|
||||
bind:this={codeEditor}
|
||||
value={content}
|
||||
lang="python"
|
||||
{boilerplate}
|
||||
onChange={(e) => {
|
||||
_content = e;
|
||||
}}
|
||||
onSave={async () => {
|
||||
if (formElement) {
|
||||
formElement.requestSubmit();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{#await import('$lib/components/common/CodeEditor.svelte') then { default: CodeEditor }}
|
||||
<CodeEditor
|
||||
bind:this={codeEditor}
|
||||
value={content}
|
||||
lang="python"
|
||||
{boilerplate}
|
||||
onChange={(e) => {
|
||||
_content = e;
|
||||
}}
|
||||
onSave={async () => {
|
||||
if (formElement) {
|
||||
formElement.requestSubmit();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
<div class="pb-3 flex justify-between">
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Share from '$lib/components/icons/Share.svelte';
|
||||
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
|
||||
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
|
||||
import Download from '$lib/components/icons/Download.svelte';
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-[180px] rounded-xl px-1 py-1.5 border border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
|
||||
class="w-full max-w-[180px] rounded-xl p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
|
||||
sideOffset={-2}
|
||||
side="bottom"
|
||||
align="start"
|
||||
@@ -50,7 +50,7 @@
|
||||
>
|
||||
{#if ['filter', 'action'].includes(func.type)}
|
||||
<div
|
||||
class="flex gap-2 justify-between items-center px-3 py-2 text-sm font-medium cursor-pointerrounded-md"
|
||||
class="flex gap-2 justify-between items-center px-3 py-1.5 text-sm font-medium cursor-pointerrounded-md"
|
||||
>
|
||||
<div class="flex gap-2 items-center">
|
||||
<GlobeAlt />
|
||||
@@ -63,11 +63,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-100 dark:border-gray-850 my-1" />
|
||||
<hr class="border-gray-50 dark:border-gray-850 my-1" />
|
||||
{/if}
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
on:click={() => {
|
||||
editHandler();
|
||||
}}
|
||||
@@ -91,7 +91,7 @@
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
on:click={() => {
|
||||
shareHandler();
|
||||
}}
|
||||
@@ -101,7 +101,7 @@
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
on:click={() => {
|
||||
cloneHandler();
|
||||
}}
|
||||
@@ -112,20 +112,20 @@
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
on:click={() => {
|
||||
exportHandler();
|
||||
}}
|
||||
>
|
||||
<ArrowDownTray />
|
||||
<Download />
|
||||
|
||||
<div class="flex items-center">{$i18n.t('Export')}</div>
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<hr class="border-gray-100 dark:border-gray-850 my-1" />
|
||||
<hr class="border-gray-50 dark:border-gray-850 my-1" />
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
on:click={() => {
|
||||
deleteHandler();
|
||||
}}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
<div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
|
||||
<div
|
||||
id="admin-settings-tabs-container"
|
||||
class="tabs flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
|
||||
class="tabs mx-[16px] lg:mx-0 lg:px-[16px] flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-50 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
|
||||
>
|
||||
<button
|
||||
id="general"
|
||||
@@ -433,7 +433,9 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 mt-3 lg:mt-0 overflow-y-scroll pr-1 scrollbar-hidden">
|
||||
<div
|
||||
class="flex-1 mt-3 lg:mt-0 px-[16px] lg:pr-[16px] lg:pl-0 overflow-y-scroll scrollbar-hidden"
|
||||
>
|
||||
{#if selectedTab === 'general'}
|
||||
<General
|
||||
saveHandler={async () => {
|
||||
|
||||
@@ -261,10 +261,10 @@
|
||||
<div class="flex flex-col gap-1.5 mt-1.5">
|
||||
{#each OPENAI_API_BASE_URLS as url, idx}
|
||||
<OpenAIConnection
|
||||
pipeline={pipelineUrls[url] ? true : false}
|
||||
bind:url
|
||||
bind:url={OPENAI_API_BASE_URLS[idx]}
|
||||
bind:key={OPENAI_API_KEYS[idx]}
|
||||
bind:config={OPENAI_API_CONFIGS[idx]}
|
||||
pipeline={pipelineUrls[url] ? true : false}
|
||||
onSubmit={() => {
|
||||
updateOpenAIHandler();
|
||||
}}
|
||||
@@ -326,7 +326,7 @@
|
||||
<div class="flex-1 flex flex-col gap-1.5 mt-1.5">
|
||||
{#each OLLAMA_BASE_URLS as url, idx}
|
||||
<OllamaConnection
|
||||
bind:url
|
||||
bind:url={OLLAMA_BASE_URLS[idx]}
|
||||
bind:config={OLLAMA_API_CONFIGS[idx]}
|
||||
{idx}
|
||||
onSubmit={() => {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
import Cog6 from '$lib/components/icons/Cog6.svelte';
|
||||
import Wrench from '$lib/components/icons/Wrench.svelte';
|
||||
import ManageOllamaModal from './ManageOllamaModal.svelte';
|
||||
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
|
||||
import Download from '$lib/components/icons/Download.svelte';
|
||||
|
||||
export let onDelete = () => {};
|
||||
export let onSubmit = () => {};
|
||||
@@ -71,6 +71,7 @@
|
||||
class="w-full text-sm bg-transparent outline-hidden"
|
||||
placeholder={$i18n.t('Enter URL (e.g. http://localhost:11434)')}
|
||||
bind:value={url}
|
||||
readonly={true}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
@@ -83,7 +84,7 @@
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
<ArrowDownTray />
|
||||
<Download />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
@@ -69,6 +69,7 @@
|
||||
placeholder={$i18n.t('API Base URL')}
|
||||
bind:value={url}
|
||||
autocomplete="off"
|
||||
readonly={true}
|
||||
/>
|
||||
|
||||
{#if pipeline}
|
||||
@@ -94,13 +95,6 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<SensitiveInput
|
||||
inputClassName=" outline-hidden bg-transparent w-full"
|
||||
placeholder={$i18n.t('API Key')}
|
||||
required={false}
|
||||
bind:value={key}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
@@ -143,7 +143,7 @@
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<hr class="border-gray-100 dark:border-gray-850 my-1" />
|
||||
<hr class="border-gray-50 dark:border-gray-850 my-1" />
|
||||
|
||||
{#if $config?.features.enable_admin_export ?? true}
|
||||
<div class=" flex w-full justify-between">
|
||||
@@ -233,14 +233,4 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="flex justify-end pt-3 text-sm font-medium">
|
||||
<button
|
||||
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
|
||||
type="submit"
|
||||
>
|
||||
{$i18n.t('Save')}
|
||||
</button>
|
||||
|
||||
</div> -->
|
||||
</form>
|
||||
|
||||
@@ -153,6 +153,7 @@
|
||||
}
|
||||
if (
|
||||
RAGConfig.CONTENT_EXTRACTION_ENGINE === 'docling' &&
|
||||
RAGConfig.DOCLING_DO_OCR &&
|
||||
((RAGConfig.DOCLING_OCR_ENGINE === '' && RAGConfig.DOCLING_OCR_LANG !== '') ||
|
||||
(RAGConfig.DOCLING_OCR_ENGINE !== '' && RAGConfig.DOCLING_OCR_LANG === ''))
|
||||
) {
|
||||
@@ -161,6 +162,14 @@
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (
|
||||
RAGConfig.CONTENT_EXTRACTION_ENGINE === 'docling' &&
|
||||
RAGConfig.DOCLING_DO_OCR === false &&
|
||||
RAGConfig.DOCLING_FORCE_OCR === true
|
||||
) {
|
||||
toast.error($i18n.t('In order to force OCR, performing OCR must be enabled.'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
RAGConfig.CONTENT_EXTRACTION_ENGINE === 'datalab_marker' &&
|
||||
@@ -545,19 +554,91 @@
|
||||
bind:value={RAGConfig.DOCLING_SERVER_URL}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex w-full mt-2">
|
||||
<input
|
||||
class="flex-1 w-full text-sm bg-transparent outline-hidden"
|
||||
placeholder={$i18n.t('Enter Docling OCR Engine')}
|
||||
bind:value={RAGConfig.DOCLING_OCR_ENGINE}
|
||||
/>
|
||||
<input
|
||||
class="flex-1 w-full text-sm bg-transparent outline-hidden"
|
||||
placeholder={$i18n.t('Enter Docling OCR Language(s)')}
|
||||
bind:value={RAGConfig.DOCLING_OCR_LANG}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full mt-2">
|
||||
<div class="flex-1 flex justify-between">
|
||||
<div class=" self-center text-xs font-medium">
|
||||
{$i18n.t('Perform OCR')}
|
||||
</div>
|
||||
<div class="flex items-center relative">
|
||||
<Switch bind:state={RAGConfig.DOCLING_DO_OCR} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if RAGConfig.DOCLING_DO_OCR}
|
||||
<div class="flex w-full mt-2">
|
||||
<input
|
||||
class="flex-1 w-full text-sm bg-transparent outline-hidden"
|
||||
placeholder={$i18n.t('Enter Docling OCR Engine')}
|
||||
bind:value={RAGConfig.DOCLING_OCR_ENGINE}
|
||||
/>
|
||||
<input
|
||||
class="flex-1 w-full text-sm bg-transparent outline-hidden"
|
||||
placeholder={$i18n.t('Enter Docling OCR Language(s)')}
|
||||
bind:value={RAGConfig.DOCLING_OCR_LANG}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex w-full mt-2">
|
||||
<div class="flex-1 flex justify-between">
|
||||
<div class=" self-center text-xs font-medium">
|
||||
{$i18n.t('Force OCR')}
|
||||
</div>
|
||||
<div class="flex items-center relative">
|
||||
<Switch bind:state={RAGConfig.DOCLING_FORCE_OCR} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between w-full mt-2">
|
||||
<div class="self-center text-xs font-medium">
|
||||
<Tooltip content={''} placement="top-start">
|
||||
{$i18n.t('PDF Backend')}
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="">
|
||||
<select
|
||||
class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
|
||||
bind:value={RAGConfig.DOCLING_PDF_BACKEND}
|
||||
>
|
||||
<option value="pypdfium2">{$i18n.t('pypdfium2')}</option>
|
||||
<option value="dlparse_v1">{$i18n.t('dlparse_v1')}</option>
|
||||
<option value="dlparse_v2">{$i18n.t('dlparse_v2')}</option>
|
||||
<option value="dlparse_v4">{$i18n.t('dlparse_v4')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between w-full mt-2">
|
||||
<div class="self-center text-xs font-medium">
|
||||
<Tooltip content={''} placement="top-start">
|
||||
{$i18n.t('Table Mode')}
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="">
|
||||
<select
|
||||
class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
|
||||
bind:value={RAGConfig.DOCLING_TABLE_MODE}
|
||||
>
|
||||
<option value="fast">{$i18n.t('fast')}</option>
|
||||
<option value="accurate">{$i18n.t('accurate')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between w-full mt-2">
|
||||
<div class="self-center text-xs font-medium">
|
||||
<Tooltip content={''} placement="top-start">
|
||||
{$i18n.t('Pipeline')}
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="">
|
||||
<select
|
||||
class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
|
||||
bind:value={RAGConfig.DOCLING_PIPELINE}
|
||||
>
|
||||
<option value="standard">{$i18n.t('standard')}</option>
|
||||
<option value="vlm">{$i18n.t('vlm')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full mt-2">
|
||||
<div class="flex-1 flex justify-between">
|
||||
<div class=" self-center text-xs font-medium">
|
||||
@@ -1062,7 +1143,7 @@
|
||||
<div class=" mb-2.5 py-0.5 w-full justify-between">
|
||||
<Tooltip
|
||||
content={$i18n.t(
|
||||
'The Weight of BM25 Hybrid Search. 0 more lexical, 1 more semantic. Default 0.5'
|
||||
'The Weight of BM25 Hybrid Search. 0 more semantic, 1 more lexical. Default 0.5'
|
||||
)}
|
||||
placement="top-start"
|
||||
className="inline-tooltip"
|
||||
|
||||
@@ -293,7 +293,7 @@
|
||||
<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
|
||||
|
||||
<div class="my-2 -mx-2">
|
||||
<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg">
|
||||
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
|
||||
<AccessControl bind:accessControl />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
import Cog6 from '$lib/components/icons/Cog6.svelte';
|
||||
import ConfigureModelsModal from './Models/ConfigureModelsModal.svelte';
|
||||
import Wrench from '$lib/components/icons/Wrench.svelte';
|
||||
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
|
||||
import Download from '$lib/components/icons/Download.svelte';
|
||||
import ManageModelsModal from './Models/ManageModelsModal.svelte';
|
||||
import ModelMenu from '$lib/components/admin/Settings/Models/ModelMenu.svelte';
|
||||
import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
|
||||
@@ -265,7 +265,7 @@
|
||||
showManageModal = true;
|
||||
}}
|
||||
>
|
||||
<ArrowDownTray />
|
||||
<Download />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
import Share from '$lib/components/icons/Share.svelte';
|
||||
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
|
||||
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
|
||||
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
|
||||
import Download from '$lib/components/icons/Download.svelte';
|
||||
import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
|
||||
|
||||
import { config } from '$lib/stores';
|
||||
@@ -45,14 +45,14 @@
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-[170px] rounded-xl px-1 py-1.5 border border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
|
||||
class="w-full max-w-[170px] rounded-xl p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
|
||||
sideOffset={-2}
|
||||
side="bottom"
|
||||
align="start"
|
||||
transition={flyAndScale}
|
||||
>
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
on:click={() => {
|
||||
hideHandler();
|
||||
}}
|
||||
@@ -104,7 +104,7 @@
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
on:click={() => {
|
||||
copyLinkHandler();
|
||||
}}
|
||||
@@ -115,12 +115,12 @@
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
on:click={() => {
|
||||
exportHandler();
|
||||
}}
|
||||
>
|
||||
<ArrowDownTray />
|
||||
<Download />
|
||||
|
||||
<div class="flex items-center">{$i18n.t('Export')}</div>
|
||||
</DropdownMenu.Item>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
import Connection from '$lib/components/chat/Settings/Tools/Connection.svelte';
|
||||
|
||||
import AddServerModal from '$lib/components/AddServerModal.svelte';
|
||||
import AddToolServerModal from '$lib/components/AddToolServerModal.svelte';
|
||||
import { getToolServerConnections, setToolServerConnections } from '$lib/apis/configs';
|
||||
|
||||
export let saveSettings: Function;
|
||||
@@ -47,7 +47,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<AddServerModal bind:show={showConnectionModal} onSubmit={addConnectionHandler} />
|
||||
<AddToolServerModal bind:show={showConnectionModal} onSubmit={addConnectionHandler} />
|
||||
|
||||
<form
|
||||
class="flex flex-col h-full justify-between text-sm"
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
<div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
|
||||
<div
|
||||
id="users-tabs-container"
|
||||
class=" flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
|
||||
class="mx-[16px] lg:mx-0 lg:px-[16px] flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-50 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
|
||||
>
|
||||
<button
|
||||
id="overview"
|
||||
@@ -111,7 +111,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 mt-1 lg:mt-0 overflow-y-scroll">
|
||||
<div class="flex-1 mt-1 lg:mt-0 px-[16px] lg:pr-[16px] lg:pl-0 overflow-y-scroll">
|
||||
{#if selectedTab === 'overview'}
|
||||
<UserList />
|
||||
{:else if selectedTab === 'groups'}
|
||||
|
||||
@@ -216,7 +216,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div>
|
||||
<div class=" flex items-center gap-3 justify-between text-xs uppercase px-1 font-bold">
|
||||
<div class=" flex items-center gap-3 justify-between text-xs uppercase px-1 font-semibold">
|
||||
<div class="w-full basis-3/5">{$i18n.t('Group')}</div>
|
||||
|
||||
<div class="w-full basis-2/5 text-right">{$i18n.t('Users')}</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { onMount, getContext } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -10,7 +11,6 @@
|
||||
import User from '$lib/components/icons/User.svelte';
|
||||
import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte';
|
||||
import GroupModal from './EditGroupModal.svelte';
|
||||
import { querystringValue } from '$lib/utils';
|
||||
|
||||
export let users = [];
|
||||
export let group = {
|
||||
@@ -47,7 +47,7 @@
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
const groupId = querystringValue('id');
|
||||
const groupId = $page.url.searchParams.get('id');
|
||||
if (groupId && groupId === group.id) {
|
||||
showEdit = true;
|
||||
}
|
||||
|
||||
@@ -154,7 +154,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="pt-0.5 pb-2 gap-1 flex flex-col md:flex-row justify-between sticky top-0 z-10 bg-white dark:bg-gray-900"
|
||||
class="pt-0.5 pb-1 gap-1 flex flex-col md:flex-row justify-between sticky top-0 z-10 bg-white dark:bg-gray-900"
|
||||
>
|
||||
<div class="flex md:self-center text-lg font-medium px-0.5">
|
||||
<div class="flex-shrink-0">
|
||||
@@ -219,19 +219,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm pt-0.5"
|
||||
>
|
||||
<table
|
||||
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded-sm"
|
||||
>
|
||||
<thead
|
||||
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
|
||||
>
|
||||
<tr class="">
|
||||
<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full">
|
||||
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full">
|
||||
<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
|
||||
<tr class=" border-b-[1.5px] border-gray-50 dark:border-gray-850">
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 cursor-pointer select-none"
|
||||
class="px-2.5 py-2 cursor-pointer select-none"
|
||||
on:click={() => setSortKey('role')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
@@ -254,7 +248,7 @@
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 cursor-pointer select-none"
|
||||
class="px-2.5 py-2 cursor-pointer select-none"
|
||||
on:click={() => setSortKey('name')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
@@ -277,7 +271,7 @@
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 cursor-pointer select-none"
|
||||
class="px-2.5 py-2 cursor-pointer select-none"
|
||||
on:click={() => setSortKey('email')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
@@ -301,7 +295,7 @@
|
||||
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 cursor-pointer select-none"
|
||||
class="px-2.5 py-2 cursor-pointer select-none"
|
||||
on:click={() => setSortKey('last_active_at')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
@@ -324,7 +318,7 @@
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 cursor-pointer select-none"
|
||||
class="px-2.5 py-2 cursor-pointer select-none"
|
||||
on:click={() => setSortKey('created_at')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
@@ -347,7 +341,7 @@
|
||||
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-1.5 cursor-pointer select-none"
|
||||
class="px-2.5 py-2 cursor-pointer select-none"
|
||||
on:click={() => setSortKey('oauth_sub')}
|
||||
>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
@@ -369,7 +363,7 @@
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th scope="col" class="px-3 py-2 text-right" />
|
||||
<th scope="col" class="px-2.5 py-2 text-right" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="">
|
||||
@@ -508,11 +502,11 @@
|
||||
> [!NOTE]
|
||||
> # **Hey there! 👋**
|
||||
>
|
||||
> It looks like you have over 50 users — that usually falls under organizational usage.
|
||||
> It looks like you have over 50 users, that usually falls under organizational usage.
|
||||
>
|
||||
> Open WebUI is proudly open source and completely free, with no hidden limits — and we'd love to keep it that way. 🌱
|
||||
> Open WebUI is completely free to use as-is, with no restrictions or hidden limits, and we'd love to keep it that way. 🌱
|
||||
>
|
||||
> By supporting the project through sponsorship or an enterprise license, you’re not only helping us stay independent, you’re also helping us ship new features faster, improve stability, and grow the project for the long haul. With an *enterprise license*, you also get additional perks like dedicated support, customization options, and more — all at a fraction of what it would cost to build and maintain internally.
|
||||
> By supporting the project through sponsorship or an enterprise license, you’re not only helping us stay independent, you’re also helping us ship new features faster, improve stability, and grow the project for the long haul. With an *enterprise license*, you also get additional perks like dedicated support, customization options, and more, all at a fraction of what it would cost to build and maintain internally.
|
||||
>
|
||||
> Your support helps us stay independent and continue building great tools for everyone. 💛
|
||||
>
|
||||
|
||||
@@ -43,6 +43,10 @@
|
||||
let searchDebounceTimeout;
|
||||
|
||||
const searchHandler = async () => {
|
||||
if (!show) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (searchDebounceTimeout) {
|
||||
clearTimeout(searchDebounceTimeout);
|
||||
}
|
||||
|
||||
@@ -250,6 +250,8 @@
|
||||
<MessageInput
|
||||
id="root"
|
||||
{typingUsers}
|
||||
userSuggestions={true}
|
||||
channelSuggestions={true}
|
||||
{onChange}
|
||||
onSubmit={submitHandler}
|
||||
{scrollToBottom}
|
||||
@@ -279,11 +281,12 @@
|
||||
{/if}
|
||||
{:else if threadId !== null}
|
||||
<PaneResizer
|
||||
class="relative flex w-[3px] items-center justify-center bg-background group bg-gray-50 dark:bg-gray-850"
|
||||
class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850 hover:border-gray-200 dark:hover:border-gray-800 transition z-20"
|
||||
id="controls-resizer"
|
||||
>
|
||||
<div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs">
|
||||
<EllipsisVertical className="size-4 invisible group-hover:visible" />
|
||||
</div>
|
||||
<div
|
||||
class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
|
||||
/>
|
||||
</PaneResizer>
|
||||
|
||||
<Pane defaultSize={50} minSize={30} class="h-full w-full">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -13,6 +13,8 @@
|
||||
import GlobeAltSolid from '$lib/components/icons/GlobeAltSolid.svelte';
|
||||
import WrenchSolid from '$lib/components/icons/WrenchSolid.svelte';
|
||||
import CameraSolid from '$lib/components/icons/CameraSolid.svelte';
|
||||
import Camera from '$lib/components/icons/Camera.svelte';
|
||||
import Clip from '$lib/components/icons/Clip.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -44,34 +46,32 @@
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-[200px] rounded-xl px-1 py-1 border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
|
||||
sideOffset={15}
|
||||
alignOffset={-8}
|
||||
side="top"
|
||||
class="w-full max-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-999 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
|
||||
sideOffset={4}
|
||||
alignOffset={-6}
|
||||
side="bottom"
|
||||
align="start"
|
||||
transition={flyAndScale}
|
||||
>
|
||||
{#if !$mobile}
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
on:click={() => {
|
||||
screenCaptureHandler();
|
||||
}}
|
||||
>
|
||||
<CameraSolid />
|
||||
<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
|
||||
</DropdownMenu.Item>
|
||||
{/if}
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl"
|
||||
on:click={() => {
|
||||
uploadFilesHandler();
|
||||
}}
|
||||
>
|
||||
<DocumentArrowUpSolid />
|
||||
<Clip />
|
||||
<div class="line-clamp-1">{$i18n.t('Upload Files')}</div>
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl"
|
||||
on:click={() => {
|
||||
screenCaptureHandler();
|
||||
}}
|
||||
>
|
||||
<Camera />
|
||||
<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</div>
|
||||
</Dropdown>
|
||||
|
||||
@@ -0,0 +1,205 @@
|
||||
<script lang="ts">
|
||||
import { getContext, onDestroy, onMount } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import { channels, models, user } from '$lib/stores';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Hashtag from '$lib/components/icons/Hashtag.svelte';
|
||||
import Lock from '$lib/components/icons/Lock.svelte';
|
||||
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
|
||||
import { searchUsers } from '$lib/apis/users';
|
||||
|
||||
export let query = '';
|
||||
|
||||
export let command: (payload: { id: string; label: string }) => void;
|
||||
export let selectedIndex = 0;
|
||||
|
||||
export let label = '';
|
||||
export let triggerChar = '@';
|
||||
|
||||
export let modelSuggestions = false;
|
||||
export let userSuggestions = false;
|
||||
export let channelSuggestions = false;
|
||||
|
||||
let _models = [];
|
||||
let _users = [];
|
||||
let _channels = [];
|
||||
|
||||
$: filteredItems = [..._users, ..._models, ..._channels].filter(
|
||||
(u) =>
|
||||
u.label.toLowerCase().includes(query.toLowerCase()) ||
|
||||
u.id.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
const getUserList = async () => {
|
||||
const res = await searchUsers(localStorage.token, query).catch((error) => {
|
||||
console.error('Error searching users:', error);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
_users = [...res.users.map((u) => ({ type: 'user', id: u.id, label: u.name }))].sort((a, b) =>
|
||||
a.label.localeCompare(b.label)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
$: if (query !== null && userSuggestions) {
|
||||
getUserList();
|
||||
}
|
||||
|
||||
const select = (index: number) => {
|
||||
const item = filteredItems[index];
|
||||
if (!item) return;
|
||||
|
||||
// Add the "U:", "M:" or "C:" prefix to the id
|
||||
// and also append the label after a pipe |
|
||||
// so that the mention renderer can show the label
|
||||
if (item)
|
||||
command({
|
||||
id: `${item.type === 'user' ? 'U' : item.type === 'model' ? 'M' : 'C'}:${item.id}|${item.label}`,
|
||||
label: item.label
|
||||
});
|
||||
};
|
||||
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (!['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'Escape'].includes(event.key)) return false;
|
||||
|
||||
if (event.key === 'ArrowUp') {
|
||||
selectedIndex = Math.max(0, selectedIndex - 1);
|
||||
const item = document.querySelector(`[data-selected="true"]`);
|
||||
item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
|
||||
return true;
|
||||
}
|
||||
if (event.key === 'ArrowDown') {
|
||||
selectedIndex = Math.min(selectedIndex + 1, filteredItems.length - 1);
|
||||
const item = document.querySelector(`[data-selected="true"]`);
|
||||
item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
|
||||
return true;
|
||||
}
|
||||
if (event.key === 'Enter' || event.key === 'Tab') {
|
||||
select(selectedIndex);
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
// tell tiptap we handled it (it will close)
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// This method will be called from the suggestion renderer
|
||||
// @ts-ignore
|
||||
export function _onKeyDown(event: KeyboardEvent) {
|
||||
return onKeyDown(event);
|
||||
}
|
||||
|
||||
const keydownListener = (e) => {
|
||||
// required to prevent the default enter behavior
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
select(selectedIndex);
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
window.addEventListener('keydown', keydownListener);
|
||||
if (channelSuggestions) {
|
||||
// Add a dummy channel item
|
||||
_channels = [
|
||||
...$channels.map((c) => ({ type: 'channel', id: c.id, label: c.name, data: c }))
|
||||
];
|
||||
} else {
|
||||
if (userSuggestions) {
|
||||
await getUserList();
|
||||
}
|
||||
|
||||
if (modelSuggestions) {
|
||||
_models = [...$models.map((m) => ({ type: 'model', id: m.id, label: m.name, data: m }))];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
window.removeEventListener('keydown', keydownListener);
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if filteredItems.length}
|
||||
<div
|
||||
class="mention-list text-black dark:text-white rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-72 p-1"
|
||||
id="suggestions-container"
|
||||
>
|
||||
<div class="overflow-y-auto scrollbar-thin max-h-60">
|
||||
{#each filteredItems as item, i}
|
||||
{#if i === 0 || item?.type !== filteredItems[i - 1]?.type}
|
||||
<div class="px-2 text-xs text-gray-500 py-1">
|
||||
{#if item?.type === 'user'}
|
||||
{$i18n.t('Users')}
|
||||
{:else if item?.type === 'model'}
|
||||
{$i18n.t('Models')}
|
||||
{:else if item?.type === 'channel'}
|
||||
{$i18n.t('Channels')}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Tooltip content={item?.id} placement="top-start">
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => select(i)}
|
||||
on:mousemove={() => {
|
||||
selectedIndex = i;
|
||||
}}
|
||||
class="flex items-center justify-between px-2.5 py-1.5 rounded-xl w-full text-left {i ===
|
||||
selectedIndex
|
||||
? 'bg-gray-50 dark:bg-gray-800 selected-command-option-button'
|
||||
: ''}"
|
||||
data-selected={i === selectedIndex}
|
||||
>
|
||||
{#if item.type === 'channel'}
|
||||
<div class=" size-4 justify-center flex items-center mr-0.5">
|
||||
{#if item?.data?.access_control === null}
|
||||
<Hashtag className="size-3" strokeWidth="2.5" />
|
||||
{:else}
|
||||
<Lock className="size-[15px]" strokeWidth="2" />
|
||||
{/if}
|
||||
</div>
|
||||
{:else if item.type === 'model'}
|
||||
<img
|
||||
src={item?.data?.info?.meta?.profile_image_url ??
|
||||
`${WEBUI_BASE_URL}/static/favicon.png`}
|
||||
alt={item?.data?.name ?? item.id}
|
||||
class="rounded-full size-5 items-center mr-2"
|
||||
/>
|
||||
{:else if item.type === 'user'}
|
||||
<img
|
||||
src={`${WEBUI_API_BASE_URL}/users/${item.id}/profile/image`}
|
||||
alt={item?.label ?? item.id}
|
||||
class="rounded-full size-5 items-center mr-2"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="truncate flex-1 pr-2">
|
||||
{item.label}
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 text-xs text-gray-500">
|
||||
{#if item.type === 'user'}
|
||||
{$i18n.t('User')}
|
||||
{:else if item.type === 'model'}
|
||||
{$i18n.t('Model')}
|
||||
{:else if item.type === 'channel'}
|
||||
{$i18n.t('Channel')}
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -63,11 +63,7 @@
|
||||
</div>
|
||||
</Loader>
|
||||
{:else if !thread}
|
||||
<div
|
||||
class="px-5
|
||||
|
||||
{($settings?.widescreenMode ?? null) ? 'max-w-full' : 'max-w-5xl'} mx-auto"
|
||||
>
|
||||
<div class="px-5 max-w-full mx-auto">
|
||||
{#if channel}
|
||||
<div class="flex flex-col gap-1.5 pb-5 pt-10">
|
||||
<div class="text-2xl font-medium capitalize">{channel.name}</div>
|
||||
@@ -99,7 +95,8 @@
|
||||
{message}
|
||||
{thread}
|
||||
showUserProfile={messageIdx === 0 ||
|
||||
messageList.at(messageIdx - 1)?.user_id !== message.user_id}
|
||||
messageList.at(messageIdx - 1)?.user_id !== message.user_id ||
|
||||
messageList.at(messageIdx - 1)?.meta?.model_id !== message?.meta?.model_id}
|
||||
onDelete={() => {
|
||||
messages = messages.filter((m) => m.id !== message.id);
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
import { settings, user, shortCodesToEmojis } from '$lib/stores';
|
||||
|
||||
import { WEBUI_BASE_URL } from '$lib/constants';
|
||||
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
|
||||
|
||||
import Markdown from '$lib/components/chat/Messages/Markdown.svelte';
|
||||
import ProfileImage from '$lib/components/chat/Messages/ProfileImage.svelte';
|
||||
@@ -34,6 +34,8 @@
|
||||
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
|
||||
import { formatDate } from '$lib/utils';
|
||||
import Emoji from '$lib/components/common/Emoji.svelte';
|
||||
import { t } from 'i18next';
|
||||
import Skeleton from '$lib/components/chat/Messages/Skeleton.svelte';
|
||||
|
||||
export let message;
|
||||
export let showUserProfile = true;
|
||||
@@ -64,9 +66,7 @@
|
||||
<div
|
||||
class="flex flex-col justify-between px-5 {showUserProfile
|
||||
? 'pt-1.5 pb-0.5'
|
||||
: ''} w-full {($settings?.widescreenMode ?? null)
|
||||
? 'max-w-full'
|
||||
: 'max-w-5xl'} mx-auto group hover:bg-gray-300/5 dark:hover:bg-gray-700/5 transition relative"
|
||||
: ''} w-full max-w-full mx-auto group hover:bg-gray-300/5 dark:hover:bg-gray-700/5 transition relative"
|
||||
>
|
||||
{#if !edit}
|
||||
<div
|
||||
@@ -138,19 +138,22 @@
|
||||
id="message-{message.id}"
|
||||
dir={$settings.chatDirection}
|
||||
>
|
||||
<div
|
||||
class={`shrink-0 ${($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'} w-9`}
|
||||
>
|
||||
<div class={`shrink-0 mr-3 w-9`}>
|
||||
{#if showUserProfile}
|
||||
<ProfilePreview user={message.user}>
|
||||
<ProfileImage
|
||||
src={message.user?.profile_image_url ??
|
||||
($i18n.language === 'dg-DG'
|
||||
? `${WEBUI_BASE_URL}/doge.png`
|
||||
: `${WEBUI_BASE_URL}/static/favicon.png`)}
|
||||
className={'size-8 translate-y-1 ml-0.5'}
|
||||
{#if message?.meta?.model_id}
|
||||
<img
|
||||
src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${message.meta.model_id}`}
|
||||
alt={message.meta.model_name ?? message.meta.model_id}
|
||||
class="size-8 translate-y-1 ml-0.5 object-cover rounded-full"
|
||||
/>
|
||||
</ProfilePreview>
|
||||
{:else}
|
||||
<ProfilePreview user={message.user}>
|
||||
<ProfileImage
|
||||
src={message.user?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
|
||||
className={'size-8 translate-y-1 ml-0.5'}
|
||||
/>
|
||||
</ProfilePreview>
|
||||
{/if}
|
||||
{:else}
|
||||
<!-- <div class="w-7 h-7 rounded-full bg-transparent" /> -->
|
||||
|
||||
@@ -170,7 +173,11 @@
|
||||
{#if showUserProfile}
|
||||
<Name>
|
||||
<div class=" self-end text-base shrink-0 font-medium truncate">
|
||||
{message?.user?.name}
|
||||
{#if message?.meta?.model_id}
|
||||
{message?.meta?.model_name ?? message?.meta?.model_id}
|
||||
{:else}
|
||||
{message?.user?.name}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if message.created_at}
|
||||
@@ -178,7 +185,12 @@
|
||||
class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 translate-y-[1px]"
|
||||
>
|
||||
<Tooltip content={dayjs(message.created_at / 1000000).format('LLLL')}>
|
||||
<span class="line-clamp-1">{formatDate(message.created_at / 1000000)}</span>
|
||||
<span class="line-clamp-1">
|
||||
{$i18n.t(formatDate(message.created_at / 1000000), {
|
||||
LOCALIZED_TIME: dayjs(message.created_at / 1000000).format('LT'),
|
||||
LOCALIZED_DATE: dayjs(message.created_at / 1000000).format('L')
|
||||
})}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -198,7 +210,7 @@
|
||||
name={file.name}
|
||||
type={file.type}
|
||||
size={file?.size}
|
||||
colorClassName="bg-white dark:bg-gray-850 "
|
||||
small={true}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -228,7 +240,7 @@
|
||||
<div class="flex space-x-1.5">
|
||||
<button
|
||||
id="close-edit-message-button"
|
||||
class="px-4 py-2 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
|
||||
class="px-3.5 py-1.5 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
|
||||
on:click={() => {
|
||||
edit = false;
|
||||
editedContent = null;
|
||||
@@ -239,7 +251,7 @@
|
||||
|
||||
<button
|
||||
id="confirm-edit-message-button"
|
||||
class=" px-4 py-2 bg-gray-900 dark:bg-white hover:bg-gray-850 text-gray-100 dark:text-gray-800 transition rounded-3xl"
|
||||
class="px-3.5 py-1.5 bg-gray-900 dark:bg-white hover:bg-gray-850 text-gray-100 dark:text-gray-800 transition rounded-3xl"
|
||||
on:click={async () => {
|
||||
onEdit(editedContent);
|
||||
edit = false;
|
||||
@@ -253,12 +265,16 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div class=" min-w-full markdown-prose">
|
||||
<Markdown
|
||||
id={message.id}
|
||||
content={message.content}
|
||||
/>{#if message.created_at !== message.updated_at}<span class="text-gray-500 text-[10px]"
|
||||
>(edited)</span
|
||||
>{/if}
|
||||
{#if (message?.content ?? '').trim() === '' && message?.meta?.model_id}
|
||||
<Skeleton />
|
||||
{:else}
|
||||
<Markdown
|
||||
id={message.id}
|
||||
content={message.content}
|
||||
/>{#if message.created_at !== message.updated_at && (message?.meta?.model_id ?? null) === null}<span
|
||||
class="text-gray-500 text-[10px]">({$i18n.t('edited')})</span
|
||||
>{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if (message?.reactions ?? []).length > 0}
|
||||
|
||||
@@ -1,101 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { DropdownMenu } from 'bits-ui';
|
||||
import { LinkPreview } from 'bits-ui';
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import { flyAndScale } from '$lib/utils/transitions';
|
||||
import { WEBUI_BASE_URL } from '$lib/constants';
|
||||
import { getUserActiveStatusById } from '$lib/apis/users';
|
||||
|
||||
export let side = 'right';
|
||||
export let align = 'top';
|
||||
import UserStatus from './UserStatus.svelte';
|
||||
import UserStatusLinkPreview from './UserStatusLinkPreview.svelte';
|
||||
|
||||
export let user = null;
|
||||
let show = false;
|
||||
|
||||
let active = false;
|
||||
|
||||
const getActiveStatus = async () => {
|
||||
const res = await getUserActiveStatusById(localStorage.token, user.id).catch((error) => {
|
||||
console.error('Error fetching user active status:', error);
|
||||
});
|
||||
|
||||
if (res) {
|
||||
active = res.active;
|
||||
} else {
|
||||
active = false;
|
||||
}
|
||||
};
|
||||
|
||||
$: if (show) {
|
||||
getActiveStatus();
|
||||
}
|
||||
</script>
|
||||
|
||||
<DropdownMenu.Root
|
||||
bind:open={show}
|
||||
closeFocus={false}
|
||||
onOpenChange={(state) => {}}
|
||||
typeahead={false}
|
||||
>
|
||||
<DropdownMenu.Trigger>
|
||||
<LinkPreview.Root openDelay={0} closeDelay={0}>
|
||||
<LinkPreview.Trigger class=" cursor-pointer no-underline! font-normal! ">
|
||||
<slot />
|
||||
</DropdownMenu.Trigger>
|
||||
</LinkPreview.Trigger>
|
||||
|
||||
<slot name="content">
|
||||
<DropdownMenu.Content
|
||||
class="max-w-full w-[240px] rounded-lg z-9999 bg-white dark:bg-black dark:text-white shadow-lg"
|
||||
sideOffset={8}
|
||||
{side}
|
||||
{align}
|
||||
transition={flyAndScale}
|
||||
>
|
||||
{#if user}
|
||||
<div class=" flex flex-col gap-2 w-full rounded-lg">
|
||||
<div class="py-8 relative bg-gray-900 rounded-t-lg">
|
||||
<img
|
||||
crossorigin="anonymous"
|
||||
src={user?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
|
||||
class=" absolute -bottom-5 left-3 size-12 ml-0.5 object-cover rounded-full -translate-y-[1px]"
|
||||
alt="profile"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class=" flex flex-col pt-4 pb-2.5 px-4">
|
||||
<div class=" -mb-1">
|
||||
<span class="font-medium text-sm line-clamp-1"> {user.name} </span>
|
||||
</div>
|
||||
|
||||
<div class=" flex items-center gap-2">
|
||||
{#if active}
|
||||
<div>
|
||||
<span class="relative flex size-2">
|
||||
<span
|
||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
|
||||
/>
|
||||
<span class="relative inline-flex rounded-full size-2 bg-green-500" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class=" -translate-y-[1px]">
|
||||
<span class="text-xs"> {$i18n.t('Active')} </span>
|
||||
</div>
|
||||
{:else}
|
||||
<div>
|
||||
<span class="relative flex size-2">
|
||||
<span class="relative inline-flex rounded-full size-2 bg-gray-500" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class=" -translate-y-[1px]">
|
||||
<span class="text-xs"> {$i18n.t('Away')} </span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</DropdownMenu.Content>
|
||||
</slot>
|
||||
</DropdownMenu.Root>
|
||||
<UserStatusLinkPreview id={user?.id} side="right" align="center" sideOffset={8} />
|
||||
</LinkPreview.Root>
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import { getContext, onMount } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
import { WEBUI_BASE_URL } from '$lib/constants';
|
||||
|
||||
export let user = null;
|
||||
</script>
|
||||
|
||||
{#if user}
|
||||
<div class=" flex gap-3.5 w-full py-3 px-3 items-center">
|
||||
<div class=" items-center flex shrink-0">
|
||||
<img
|
||||
crossorigin="anonymous"
|
||||
src={user?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
|
||||
class=" size-12 object-cover rounded-xl"
|
||||
alt="profile"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class=" flex flex-col w-full flex-1">
|
||||
<div class="mb-0.5 font-medium line-clamp-1 pr-2">
|
||||
{user.name}
|
||||
</div>
|
||||
|
||||
<div class=" flex items-center gap-2">
|
||||
{#if user?.active}
|
||||
<div>
|
||||
<span class="relative flex size-2">
|
||||
<span
|
||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
|
||||
/>
|
||||
<span class="relative inline-flex rounded-full size-2 bg-green-500" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="text-xs"> {$i18n.t('Active')} </span>
|
||||
{:else}
|
||||
<div>
|
||||
<span class="relative flex size-2">
|
||||
<span class="relative inline-flex rounded-full size-2 bg-gray-500" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="text-xs"> {$i18n.t('Away')} </span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import { getContext, onMount } from 'svelte';
|
||||
import { LinkPreview } from 'bits-ui';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
import { getUserById } from '$lib/apis/users';
|
||||
|
||||
import UserStatus from './UserStatus.svelte';
|
||||
|
||||
export let id = null;
|
||||
|
||||
export let side = 'top';
|
||||
export let align = 'start';
|
||||
export let sideOffset = 6;
|
||||
|
||||
let user = null;
|
||||
|
||||
onMount(async () => {
|
||||
if (id) {
|
||||
user = await getUserById(localStorage.token, id).catch((error) => {
|
||||
console.error('Error fetching user by ID:', error);
|
||||
return null;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if user}
|
||||
<LinkPreview.Content
|
||||
class="w-full max-w-[260px] rounded-2xl border border-gray-100 dark:border-gray-800 z-999 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
|
||||
{side}
|
||||
{align}
|
||||
{sideOffset}
|
||||
>
|
||||
<UserStatus {user} />
|
||||
</LinkPreview.Content>
|
||||
{/if}
|
||||
@@ -159,7 +159,7 @@
|
||||
|
||||
{#if channel}
|
||||
<div class="flex flex-col w-full h-full bg-gray-50 dark:bg-gray-850">
|
||||
<div class="flex items-center justify-between px-3.5 pt-3">
|
||||
<div class="sticky top-0 flex items-center justify-between px-3.5 py-3">
|
||||
<div class=" font-medium text-lg">{$i18n.t('Thread')}</div>
|
||||
|
||||
<div>
|
||||
@@ -174,7 +174,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" max-h-full w-full overflow-y-auto pt-3" bind:this={messagesContainerElement}>
|
||||
<div class=" max-h-full w-full overflow-y-auto" bind:this={messagesContainerElement}>
|
||||
<Messages
|
||||
id={threadId}
|
||||
{channel}
|
||||
@@ -198,8 +198,16 @@
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class=" pb-[1rem] px-2.5">
|
||||
<MessageInput id={threadId} {typingUsers} {onChange} onSubmit={submitHandler} />
|
||||
<div class=" pb-[1rem] px-2.5 w-full">
|
||||
<MessageInput
|
||||
id={threadId}
|
||||
typingUsersClassName="from-gray-50 dark:from-gray-850"
|
||||
{typingUsers}
|
||||
userSuggestions={true}
|
||||
channelSuggestions={true}
|
||||
{onChange}
|
||||
onSubmit={submitHandler}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
import Tooltip from '../common/Tooltip.svelte';
|
||||
import SvgPanZoom from '../common/SVGPanZoom.svelte';
|
||||
import ArrowLeft from '../icons/ArrowLeft.svelte';
|
||||
import ArrowDownTray from '../icons/ArrowDownTray.svelte';
|
||||
import Download from '../icons/Download.svelte';
|
||||
|
||||
export let overlay = false;
|
||||
export let history;
|
||||
@@ -205,7 +205,7 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
class=" w-full h-full relative flex flex-col bg-gray-50 dark:bg-gray-850"
|
||||
class=" w-full h-full relative flex flex-col bg-white dark:bg-gray-850"
|
||||
id="artifacts-container"
|
||||
>
|
||||
<div class="w-full h-full flex flex-col flex-1 relative">
|
||||
@@ -213,15 +213,6 @@
|
||||
<div
|
||||
class="pointer-events-auto z-20 flex justify-between items-center p-2.5 font-primar text-gray-900 dark:text-white"
|
||||
>
|
||||
<button
|
||||
class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
|
||||
on:click={() => {
|
||||
showArtifacts.set(false);
|
||||
}}
|
||||
>
|
||||
<ArrowLeft className="size-3.5 text-gray-900 dark:text-white" />
|
||||
</button>
|
||||
|
||||
<div class="flex-1 flex items-center justify-between pr-1">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr">
|
||||
@@ -294,7 +285,7 @@
|
||||
class=" bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md p-0.5"
|
||||
on:click={downloadArtifact}
|
||||
>
|
||||
<ArrowDownTray className="size-3.5" />
|
||||
<Download className="size-3.5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import mermaid from 'mermaid';
|
||||
import { PaneGroup, Pane, PaneResizer } from 'paneforge';
|
||||
|
||||
import { getContext, onDestroy, onMount, tick } from 'svelte';
|
||||
@@ -37,6 +36,7 @@
|
||||
showArtifacts,
|
||||
tools,
|
||||
toolServers,
|
||||
functions,
|
||||
selectedFolder,
|
||||
pinnedChats
|
||||
} from '$lib/stores';
|
||||
@@ -50,7 +50,6 @@
|
||||
removeAllDetails
|
||||
} from '$lib/utils';
|
||||
|
||||
import { generateChatCompletion } from '$lib/apis/ollama';
|
||||
import {
|
||||
createNewChat,
|
||||
getAllTags,
|
||||
@@ -63,8 +62,6 @@
|
||||
} from '$lib/apis/chats';
|
||||
import { generateOpenAIChatCompletion } from '$lib/apis/openai';
|
||||
import { processWeb, processWebSearch, processYoutubeVideo } from '$lib/apis/retrieval';
|
||||
import { createOpenAITextStream } from '$lib/apis/streaming';
|
||||
import { queryMemory } from '$lib/apis/memories';
|
||||
import { getAndUpdateUserLocation, getUserSettings } from '$lib/apis/users';
|
||||
import {
|
||||
chatCompleted,
|
||||
@@ -75,6 +72,10 @@
|
||||
getTaskIdsByChatId
|
||||
} from '$lib/apis';
|
||||
import { getTools } from '$lib/apis/tools';
|
||||
import { uploadFile } from '$lib/apis/files';
|
||||
import { createOpenAITextStream } from '$lib/apis/streaming';
|
||||
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import Banner from '../common/Banner.svelte';
|
||||
import MessageInput from '$lib/components/chat/MessageInput.svelte';
|
||||
@@ -85,10 +86,10 @@
|
||||
import Placeholder from './Placeholder.svelte';
|
||||
import NotificationToast from '../NotificationToast.svelte';
|
||||
import Spinner from '../common/Spinner.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import Tooltip from '../common/Tooltip.svelte';
|
||||
import Sidebar from '../icons/Sidebar.svelte';
|
||||
import { uploadFile } from '$lib/apis/files';
|
||||
import { getFunctions } from '$lib/apis/functions';
|
||||
import Image from '../common/Image.svelte';
|
||||
|
||||
export let chatIdProp = '';
|
||||
|
||||
@@ -203,7 +204,12 @@
|
||||
|
||||
if (type === 'prompt') {
|
||||
// Handle prompt selection
|
||||
messageInput?.setText(data);
|
||||
messageInput?.setText(data, async () => {
|
||||
if (!($settings?.insertSuggestionPrompt ?? false)) {
|
||||
await tick();
|
||||
submitPrompt(prompt);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -232,33 +238,58 @@
|
||||
};
|
||||
|
||||
const resetInput = () => {
|
||||
console.debug('resetInput');
|
||||
setToolIds();
|
||||
|
||||
selectedToolIds = [];
|
||||
selectedFilterIds = [];
|
||||
webSearchEnabled = false;
|
||||
imageGenerationEnabled = false;
|
||||
codeInterpreterEnabled = false;
|
||||
|
||||
setDefaults();
|
||||
};
|
||||
|
||||
const setToolIds = async () => {
|
||||
const setDefaults = async () => {
|
||||
if (!$tools) {
|
||||
tools.set(await getTools(localStorage.token));
|
||||
}
|
||||
|
||||
if (!$functions) {
|
||||
functions.set(await getFunctions(localStorage.token));
|
||||
}
|
||||
if (selectedModels.length !== 1 && !atSelectedModel) {
|
||||
return;
|
||||
}
|
||||
|
||||
const model = atSelectedModel ?? $models.find((m) => m.id === selectedModels[0]);
|
||||
if (model && model?.info?.meta?.toolIds) {
|
||||
selectedToolIds = [
|
||||
...new Set(
|
||||
[...(model?.info?.meta?.toolIds ?? [])].filter((id) => $tools.find((t) => t.id === id))
|
||||
)
|
||||
];
|
||||
} else {
|
||||
selectedToolIds = [];
|
||||
if (model) {
|
||||
// Set Default Tools
|
||||
if (model?.info?.meta?.toolIds) {
|
||||
selectedToolIds = [
|
||||
...new Set(
|
||||
[...(model?.info?.meta?.toolIds ?? [])].filter((id) => $tools.find((t) => t.id === id))
|
||||
)
|
||||
];
|
||||
}
|
||||
|
||||
// Set Default Filters (Toggleable only)
|
||||
if (model?.info?.meta?.defaultFilterIds) {
|
||||
selectedFilterIds = model.info.meta.defaultFilterIds.filter((id) =>
|
||||
model?.filters?.find((f) => f.id === id)
|
||||
);
|
||||
}
|
||||
|
||||
// Set Default Features
|
||||
if (model?.info?.meta?.defaultFeatureIds) {
|
||||
if (model.info?.meta?.capabilities?.['image_generation']) {
|
||||
imageGenerationEnabled = model.info.meta.defaultFeatureIds.includes('image_generation');
|
||||
}
|
||||
|
||||
if (model.info?.meta?.capabilities?.['web_search']) {
|
||||
webSearchEnabled = model.info.meta.defaultFeatureIds.includes('web_search');
|
||||
}
|
||||
|
||||
if (model.info?.meta?.capabilities?.['code_interpreter']) {
|
||||
codeInterpreterEnabled = model.info.meta.defaultFeatureIds.includes('code_interpreter');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -434,6 +465,15 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data.type === 'action:submit') {
|
||||
console.debug(event.data.text);
|
||||
|
||||
if (prompt !== '') {
|
||||
await tick();
|
||||
submitPrompt(prompt);
|
||||
}
|
||||
}
|
||||
|
||||
// Replace with your iframe's origin
|
||||
if (event.data.type === 'input:prompt') {
|
||||
console.debug(event.data.text);
|
||||
@@ -446,15 +486,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
if (event.data.type === 'action:submit') {
|
||||
console.debug(event.data.text);
|
||||
|
||||
if (prompt !== '') {
|
||||
await tick();
|
||||
submitPrompt(prompt);
|
||||
}
|
||||
}
|
||||
|
||||
if (event.data.type === 'input:prompt:submit') {
|
||||
console.debug(event.data.text);
|
||||
|
||||
@@ -1460,19 +1491,11 @@
|
||||
prompt = '';
|
||||
|
||||
const messages = createMessagesList(history, history.currentId);
|
||||
|
||||
// Reset chat input textarea
|
||||
if (!($settings?.richTextInput ?? true)) {
|
||||
const chatInputElement = document.getElementById('chat-input');
|
||||
|
||||
if (chatInputElement) {
|
||||
await tick();
|
||||
chatInputElement.style.height = '';
|
||||
}
|
||||
}
|
||||
|
||||
const _files = JSON.parse(JSON.stringify(files));
|
||||
chatFiles.push(..._files.filter((item) => ['doc', 'file', 'collection'].includes(item.type)));
|
||||
|
||||
chatFiles.push(
|
||||
..._files.filter((item) => ['doc', 'text', 'file', 'collection'].includes(item.type))
|
||||
);
|
||||
chatFiles = chatFiles.filter(
|
||||
// Remove duplicates
|
||||
(item, index, array) =>
|
||||
@@ -1635,6 +1658,46 @@
|
||||
chats.set(await getChatList(localStorage.token, $currentChatPage));
|
||||
};
|
||||
|
||||
const getFeatures = () => {
|
||||
let features = {};
|
||||
|
||||
if ($config?.features)
|
||||
features = {
|
||||
image_generation:
|
||||
$config?.features?.enable_image_generation &&
|
||||
($user?.role === 'admin' || $user?.permissions?.features?.image_generation)
|
||||
? imageGenerationEnabled
|
||||
: false,
|
||||
code_interpreter:
|
||||
$config?.features?.enable_code_interpreter &&
|
||||
($user?.role === 'admin' || $user?.permissions?.features?.code_interpreter)
|
||||
? codeInterpreterEnabled
|
||||
: false,
|
||||
web_search:
|
||||
$config?.features?.enable_web_search &&
|
||||
($user?.role === 'admin' || $user?.permissions?.features?.web_search)
|
||||
? webSearchEnabled
|
||||
: false
|
||||
};
|
||||
|
||||
const currentModels = atSelectedModel?.id ? [atSelectedModel.id] : selectedModels;
|
||||
if (
|
||||
currentModels.filter(
|
||||
(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.web_search ?? true
|
||||
).length === currentModels.length
|
||||
) {
|
||||
if ($config?.features?.enable_web_search && ($settings?.webSearch ?? false) === 'always') {
|
||||
features = { ...features, web_search: true };
|
||||
}
|
||||
}
|
||||
|
||||
if ($settings?.memory ?? false) {
|
||||
features = { ...features, memory: true };
|
||||
}
|
||||
|
||||
return features;
|
||||
};
|
||||
|
||||
const sendMessageSocket = async (model, _messages, _history, responseMessageId, _chatId) => {
|
||||
const responseMessage = _history.messages[responseMessageId];
|
||||
const userMessage = _history.messages[responseMessage.parentId];
|
||||
@@ -1652,7 +1715,7 @@
|
||||
let files = JSON.parse(JSON.stringify(chatFiles));
|
||||
files.push(
|
||||
...(userMessage?.files ?? []).filter((item) =>
|
||||
['doc', 'text', 'file', 'note', 'collection'].includes(item.type)
|
||||
['doc', 'text', 'file', 'note', 'chat', 'collection'].includes(item.type)
|
||||
)
|
||||
);
|
||||
// Remove duplicates
|
||||
@@ -1725,6 +1788,23 @@
|
||||
}))
|
||||
.filter((message) => message?.role === 'user' || message?.content?.trim());
|
||||
|
||||
const toolIds = [];
|
||||
const toolServerIds = [];
|
||||
|
||||
for (const toolId of selectedToolIds) {
|
||||
if (toolId.startsWith('direct_server:')) {
|
||||
let serverId = toolId.replace('direct_server:', '');
|
||||
// Check if serverId is a number
|
||||
if (!isNaN(parseInt(serverId))) {
|
||||
toolServerIds.push(parseInt(serverId));
|
||||
} else {
|
||||
toolServerIds.push(serverId);
|
||||
}
|
||||
} else {
|
||||
toolIds.push(toolId);
|
||||
}
|
||||
}
|
||||
|
||||
const res = await generateOpenAIChatCompletion(
|
||||
localStorage.token,
|
||||
{
|
||||
@@ -1745,27 +1825,11 @@
|
||||
files: (files?.length ?? 0) > 0 ? files : undefined,
|
||||
|
||||
filter_ids: selectedFilterIds.length > 0 ? selectedFilterIds : undefined,
|
||||
tool_ids: selectedToolIds.length > 0 ? selectedToolIds : undefined,
|
||||
tool_servers: $toolServers,
|
||||
|
||||
features: {
|
||||
image_generation:
|
||||
$config?.features?.enable_image_generation &&
|
||||
($user?.role === 'admin' || $user?.permissions?.features?.image_generation)
|
||||
? imageGenerationEnabled
|
||||
: false,
|
||||
code_interpreter:
|
||||
$config?.features?.enable_code_interpreter &&
|
||||
($user?.role === 'admin' || $user?.permissions?.features?.code_interpreter)
|
||||
? codeInterpreterEnabled
|
||||
: false,
|
||||
web_search:
|
||||
$config?.features?.enable_web_search &&
|
||||
($user?.role === 'admin' || $user?.permissions?.features?.web_search)
|
||||
? webSearchEnabled || ($settings?.webSearch ?? false) === 'always'
|
||||
: false,
|
||||
memory: $settings?.memory ?? false
|
||||
},
|
||||
tool_ids: toolIds.length > 0 ? toolIds : undefined,
|
||||
tool_servers: ($toolServers ?? []).filter(
|
||||
(server, idx) => toolServerIds.includes(idx) || toolServerIds.includes(server?.id)
|
||||
),
|
||||
features: getFeatures(),
|
||||
variables: {
|
||||
...getPromptVariables($user?.name, $settings?.userLocation ? userLocation : undefined)
|
||||
},
|
||||
@@ -2199,7 +2263,18 @@
|
||||
>
|
||||
{#if !loading}
|
||||
<div in:fade={{ duration: 50 }} class="w-full h-full flex flex-col">
|
||||
{#if $settings?.backgroundImageUrl ?? $config?.license_metadata?.background_image_url ?? null}
|
||||
{#if $selectedFolder && $selectedFolder?.meta?.background_image_url}
|
||||
<div
|
||||
class="absolute {$showSidebar
|
||||
? 'md:max-w-[calc(100%-260px)] md:translate-x-[260px]'
|
||||
: ''} top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
|
||||
style="background-image: url({$selectedFolder?.meta?.background_image_url}) "
|
||||
/>
|
||||
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full bg-linear-to-t from-white to-white/85 dark:from-gray-900 dark:to-gray-900/90 z-0"
|
||||
/>
|
||||
{:else if $settings?.backgroundImageUrl ?? $config?.license_metadata?.background_image_url ?? null}
|
||||
<div
|
||||
class="absolute {$showSidebar
|
||||
? 'md:max-w-[calc(100%-260px)] md:translate-x-[260px]'
|
||||
@@ -2214,7 +2289,7 @@
|
||||
{/if}
|
||||
|
||||
<PaneGroup direction="horizontal" class="w-full h-full">
|
||||
<Pane defaultSize={50} class="h-full flex relative max-w-full flex-col">
|
||||
<Pane defaultSize={50} minSize={30} class="h-full flex relative max-w-full flex-col">
|
||||
<Navbar
|
||||
bind:this={navbarElement}
|
||||
chat={{
|
||||
@@ -2233,7 +2308,6 @@
|
||||
bind:selectedModels
|
||||
shareEnabled={!!history.currentId}
|
||||
{initNewChat}
|
||||
showBanners={!showCommands}
|
||||
archiveChatHandler={() => {}}
|
||||
{moveChatHandler}
|
||||
onSaveTempChat={async () => {
|
||||
@@ -2353,11 +2427,7 @@
|
||||
if (e.detail || files.length > 0) {
|
||||
await tick();
|
||||
|
||||
submitPrompt(
|
||||
($settings?.richTextInput ?? true)
|
||||
? e.detail.replaceAll('\n\n', '\n')
|
||||
: e.detail
|
||||
);
|
||||
submitPrompt(e.detail.replaceAll('\n\n', '\n'));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -2406,11 +2476,7 @@
|
||||
clearDraft();
|
||||
if (e.detail || files.length > 0) {
|
||||
await tick();
|
||||
submitPrompt(
|
||||
($settings?.richTextInput ?? true)
|
||||
? e.detail.replaceAll('\n\n', '\n')
|
||||
: e.detail
|
||||
);
|
||||
submitPrompt(e.detail.replaceAll('\n\n', '\n'));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -39,7 +39,11 @@
|
||||
|
||||
export const openPane = () => {
|
||||
if (parseInt(localStorage?.chatControlsSize)) {
|
||||
pane.resize(parseInt(localStorage?.chatControlsSize));
|
||||
const container = document.getElementById('chat-container');
|
||||
let size = Math.floor(
|
||||
(parseInt(localStorage?.chatControlsSize) / container.clientWidth) * 100
|
||||
);
|
||||
pane.resize(size);
|
||||
} else {
|
||||
pane.resize(minSize);
|
||||
}
|
||||
@@ -91,7 +95,7 @@
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (let entry of entries) {
|
||||
const width = entry.contentRect.width;
|
||||
// calculate the percentage of 200px
|
||||
// calculate the percentage of 350px
|
||||
const percentage = (350 / width) * 100;
|
||||
// set the minSize to the percentage, must be an integer
|
||||
minSize = Math.floor(percentage);
|
||||
@@ -99,6 +103,13 @@
|
||||
if ($showControls) {
|
||||
if (pane && pane.isExpanded() && pane.getSize() < minSize) {
|
||||
pane.resize(minSize);
|
||||
} else {
|
||||
let size = Math.floor(
|
||||
(parseInt(localStorage?.chatControlsSize) / container.clientWidth) * 100
|
||||
);
|
||||
if (size < minSize) {
|
||||
pane.resize(minSize);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -194,12 +205,12 @@
|
||||
|
||||
{#if $showControls}
|
||||
<PaneResizer
|
||||
class="relative flex w-2 items-center justify-center bg-background group"
|
||||
class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850 hover:border-gray-200 dark:hover:border-gray-800 transition z-20"
|
||||
id="controls-resizer"
|
||||
>
|
||||
<div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs">
|
||||
<EllipsisVertical className="size-4 invisible group-hover:visible" />
|
||||
</div>
|
||||
<div
|
||||
class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
|
||||
/>
|
||||
</PaneResizer>
|
||||
{/if}
|
||||
|
||||
@@ -207,8 +218,6 @@
|
||||
bind:pane
|
||||
defaultSize={0}
|
||||
onResize={(size) => {
|
||||
console.log('size', size, minSize);
|
||||
|
||||
if ($showControls && pane.isExpanded()) {
|
||||
if (size < minSize) {
|
||||
pane.resize(minSize);
|
||||
@@ -217,7 +226,9 @@
|
||||
if (size < minSize) {
|
||||
localStorage.chatControlsSize = 0;
|
||||
} else {
|
||||
localStorage.chatControlsSize = size;
|
||||
// save the size in pixels to localStorage
|
||||
const container = document.getElementById('chat-container');
|
||||
localStorage.chatControlsSize = Math.floor((size / 100) * container.clientWidth);
|
||||
}
|
||||
}
|
||||
}}
|
||||
@@ -225,14 +236,14 @@
|
||||
showControls.set(false);
|
||||
}}
|
||||
collapsible={true}
|
||||
class=" z-10 "
|
||||
class=" z-10 bg-white dark:bg-gray-850"
|
||||
>
|
||||
{#if $showControls}
|
||||
<div class="flex max-h-full min-h-full">
|
||||
<div
|
||||
class="w-full {($showOverview || $showArtifacts) && !$showCallOverlay
|
||||
? ' '
|
||||
: 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-100 dark:border-gray-850'} z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
|
||||
: 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 '} z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
|
||||
id="controls-container"
|
||||
>
|
||||
{#if $showCallOverlay}
|
||||
|
||||
@@ -74,14 +74,14 @@
|
||||
className="w-full flex justify-start mb-0.5"
|
||||
placement="top"
|
||||
>
|
||||
<div class="flex items-center gap-2 text-gray-500 font-medium text-lg mt-2 w-fit">
|
||||
<div class="flex items-center gap-2 text-gray-500 text-lg mt-2 w-fit">
|
||||
<EyeSlash strokeWidth="2.5" className="size-5" />{$i18n.t('Temporary Chat')}
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class=" mt-2 mb-4 text-3xl text-gray-800 dark:text-gray-100 font-medium text-left flex items-center gap-4 font-primary"
|
||||
class=" mt-2 mb-4 text-3xl text-gray-800 dark:text-gray-100 text-left flex items-center gap-4 font-primary"
|
||||
>
|
||||
<div>
|
||||
<div class=" capitalize line-clamp-1" in:fade={{ duration: 200 }}>
|
||||
@@ -120,7 +120,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class=" font-medium text-gray-400 dark:text-gray-500 line-clamp-1 font-p">
|
||||
<div class=" text-gray-400 dark:text-gray-500 line-clamp-1 font-p">
|
||||
{$i18n.t('How can I help you today?')}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -45,6 +45,7 @@
|
||||
type={file.type}
|
||||
size={file?.size}
|
||||
dismissible={true}
|
||||
small={true}
|
||||
on:dismiss={() => {
|
||||
// Remove the file from the chatFiles array
|
||||
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
>{$i18n.t('Select a tool')}</option
|
||||
>
|
||||
|
||||
{#each $tools as tool, toolIdx}
|
||||
{#each $tools.filter((tool) => !tool?.id?.startsWith('server:')) as tool, toolIdx}
|
||||
<option value={tool.id} class="bg-gray-100 dark:bg-gray-800">{tool.name}</option>
|
||||
{/each}
|
||||
{:else if tab === 'functions'}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -26,7 +26,7 @@
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-[180px] rounded-lg px-1 py-1.5 border border-gray-300/30 dark:border-gray-700/50 z-9999 bg-white dark:bg-gray-900 dark:text-white shadow-xs"
|
||||
class="w-full max-w-[180px] rounded-lg p-1 border border-gray-100 dark:border-gray-800 z-9999 bg-white dark:bg-gray-900 dark:text-white shadow-xs"
|
||||
sideOffset={6}
|
||||
side="top"
|
||||
align="start"
|
||||
@@ -34,7 +34,7 @@
|
||||
>
|
||||
{#each devices as device}
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
on:click={() => {
|
||||
dispatch('change', device.deviceId);
|
||||
}}
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
<script lang="ts">
|
||||
import { knowledge, prompts } from '$lib/stores';
|
||||
|
||||
import { getPrompts } from '$lib/apis/prompts';
|
||||
import { getKnowledgeBases } from '$lib/apis/knowledge';
|
||||
|
||||
import Prompts from './Commands/Prompts.svelte';
|
||||
import Knowledge from './Commands/Knowledge.svelte';
|
||||
import Models from './Commands/Models.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let char = '';
|
||||
export let query = '';
|
||||
export let command: (payload: { id: string; label: string }) => void;
|
||||
|
||||
export let onSelect = (e) => {};
|
||||
export let onUpload = (e) => {};
|
||||
export let insertTextHandler = (text) => {};
|
||||
|
||||
let suggestionElement = null;
|
||||
let loading = false;
|
||||
let filteredItems = [];
|
||||
|
||||
const init = async () => {
|
||||
loading = true;
|
||||
await Promise.all([
|
||||
(async () => {
|
||||
prompts.set(await getPrompts(localStorage.token));
|
||||
})(),
|
||||
(async () => {
|
||||
knowledge.set(await getKnowledgeBases(localStorage.token));
|
||||
})()
|
||||
]);
|
||||
loading = false;
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (!['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'Escape'].includes(event.key)) return false;
|
||||
|
||||
if (event.key === 'ArrowUp') {
|
||||
suggestionElement?.selectUp();
|
||||
const item = document.querySelector(`[data-selected="true"]`);
|
||||
item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
|
||||
return true;
|
||||
}
|
||||
if (event.key === 'ArrowDown') {
|
||||
suggestionElement?.selectDown();
|
||||
const item = document.querySelector(`[data-selected="true"]`);
|
||||
item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
|
||||
return true;
|
||||
}
|
||||
if (event.key === 'Enter' || event.key === 'Tab') {
|
||||
suggestionElement?.select();
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// This method will be called from the suggestion renderer
|
||||
// @ts-ignore
|
||||
export function _onKeyDown(event: KeyboardEvent) {
|
||||
return onKeyDown(event);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="{(filteredItems ?? []).length > 0
|
||||
? ''
|
||||
: 'hidden'} rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-72 p-1"
|
||||
id="suggestions-container"
|
||||
>
|
||||
<div class="overflow-y-auto scrollbar-thin max-h-60">
|
||||
{#if !loading}
|
||||
{#if char === '/'}
|
||||
<Prompts
|
||||
bind:this={suggestionElement}
|
||||
{query}
|
||||
bind:filteredItems
|
||||
prompts={$prompts ?? []}
|
||||
onSelect={(e) => {
|
||||
const { type, data } = e;
|
||||
|
||||
if (type === 'prompt') {
|
||||
insertTextHandler(data.content);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{:else if char === '#'}
|
||||
<Knowledge
|
||||
bind:this={suggestionElement}
|
||||
{query}
|
||||
bind:filteredItems
|
||||
knowledge={$knowledge ?? []}
|
||||
onSelect={(e) => {
|
||||
const { type, data } = e;
|
||||
|
||||
if (type === 'knowledge') {
|
||||
insertTextHandler('');
|
||||
|
||||
onUpload({
|
||||
type: 'file',
|
||||
data: data
|
||||
});
|
||||
} else if (type === 'youtube') {
|
||||
insertTextHandler('');
|
||||
|
||||
onUpload({
|
||||
type: 'youtube',
|
||||
data: data
|
||||
});
|
||||
} else if (type === 'web') {
|
||||
insertTextHandler('');
|
||||
|
||||
onUpload({
|
||||
type: 'web',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{:else if char === '@'}
|
||||
<Models
|
||||
bind:this={suggestionElement}
|
||||
{query}
|
||||
bind:filteredItems
|
||||
onSelect={(e) => {
|
||||
const { type, data } = e;
|
||||
|
||||
if (type === 'model') {
|
||||
insertTextHandler('');
|
||||
|
||||
onSelect({
|
||||
type: 'model',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="py-4 flex flex-col w-full rounded-xl text-gray-700 dark:text-gray-300">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,129 +0,0 @@
|
||||
<script>
|
||||
import { knowledge, prompts } from '$lib/stores';
|
||||
|
||||
import { removeLastWordFromString } from '$lib/utils';
|
||||
import { getPrompts } from '$lib/apis/prompts';
|
||||
import { getKnowledgeBases } from '$lib/apis/knowledge';
|
||||
|
||||
import Prompts from './Commands/Prompts.svelte';
|
||||
import Knowledge from './Commands/Knowledge.svelte';
|
||||
import Models from './Commands/Models.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
|
||||
export let show = false;
|
||||
|
||||
export let files = [];
|
||||
export let command = '';
|
||||
|
||||
export let onSelect = (e) => {};
|
||||
export let onUpload = (e) => {};
|
||||
|
||||
export let insertTextHandler = (text) => {};
|
||||
|
||||
let loading = false;
|
||||
let commandElement = null;
|
||||
|
||||
export const selectUp = () => {
|
||||
commandElement?.selectUp();
|
||||
};
|
||||
|
||||
export const selectDown = () => {
|
||||
commandElement?.selectDown();
|
||||
};
|
||||
|
||||
$: if (show) {
|
||||
init();
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
loading = true;
|
||||
await Promise.all([
|
||||
(async () => {
|
||||
prompts.set(await getPrompts(localStorage.token));
|
||||
})(),
|
||||
(async () => {
|
||||
knowledge.set(await getKnowledgeBases(localStorage.token));
|
||||
})()
|
||||
]);
|
||||
loading = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
{#if !loading}
|
||||
{#if command?.charAt(0) === '/'}
|
||||
<Prompts
|
||||
bind:this={commandElement}
|
||||
{command}
|
||||
onSelect={(e) => {
|
||||
const { type, data } = e;
|
||||
|
||||
if (type === 'prompt') {
|
||||
insertTextHandler(data.content);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{:else if (command?.charAt(0) === '#' && command.startsWith('#') && !command.includes('# ')) || ('\\#' === command.slice(0, 2) && command.startsWith('#') && !command.includes('# '))}
|
||||
<Knowledge
|
||||
bind:this={commandElement}
|
||||
command={command.includes('\\#') ? command.slice(2) : command}
|
||||
onSelect={(e) => {
|
||||
const { type, data } = e;
|
||||
|
||||
if (type === 'knowledge') {
|
||||
insertTextHandler('');
|
||||
|
||||
onUpload({
|
||||
type: 'file',
|
||||
data: data
|
||||
});
|
||||
} else if (type === 'youtube') {
|
||||
insertTextHandler('');
|
||||
|
||||
onUpload({
|
||||
type: 'youtube',
|
||||
data: data
|
||||
});
|
||||
} else if (type === 'web') {
|
||||
insertTextHandler('');
|
||||
|
||||
onUpload({
|
||||
type: 'web',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{:else if command?.charAt(0) === '@'}
|
||||
<Models
|
||||
bind:this={commandElement}
|
||||
{command}
|
||||
onSelect={(e) => {
|
||||
const { type, data } = e;
|
||||
|
||||
if (type === 'model') {
|
||||
insertTextHandler('');
|
||||
|
||||
onSelect({
|
||||
type: 'model',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
<div
|
||||
id="commands-container"
|
||||
class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
|
||||
>
|
||||
<div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850">
|
||||
<div
|
||||
class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100"
|
||||
>
|
||||
<Spinner />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -8,29 +8,48 @@
|
||||
|
||||
import { tick, getContext, onMount, onDestroy } from 'svelte';
|
||||
import { removeLastWordFromString, isValidHttpUrl } from '$lib/utils';
|
||||
import { knowledge } from '$lib/stores';
|
||||
import { getNoteList, getNotes } from '$lib/apis/notes';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
|
||||
import Database from '$lib/components/icons/Database.svelte';
|
||||
import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
|
||||
import Youtube from '$lib/components/icons/Youtube.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let command = '';
|
||||
export let query = '';
|
||||
export let onSelect = (e) => {};
|
||||
|
||||
export let knowledge = [];
|
||||
|
||||
let selectedIdx = 0;
|
||||
|
||||
let items = [];
|
||||
let fuse = null;
|
||||
|
||||
let filteredItems = [];
|
||||
export let filteredItems = [];
|
||||
$: if (fuse) {
|
||||
filteredItems = command.slice(1)
|
||||
? fuse.search(command).map((e) => {
|
||||
return e.item;
|
||||
})
|
||||
: items;
|
||||
filteredItems = [
|
||||
...(query
|
||||
? fuse.search(query).map((e) => {
|
||||
return e.item;
|
||||
})
|
||||
: items),
|
||||
|
||||
...(query.startsWith('http')
|
||||
? query.startsWith('https://www.youtube.com') || query.startsWith('https://youtu.be')
|
||||
? [{ type: 'youtube', name: query, description: query }]
|
||||
: [
|
||||
{
|
||||
type: 'web',
|
||||
name: query,
|
||||
description: query
|
||||
}
|
||||
]
|
||||
: [])
|
||||
];
|
||||
}
|
||||
|
||||
$: if (command) {
|
||||
$: if (query) {
|
||||
selectedIdx = 0;
|
||||
}
|
||||
|
||||
@@ -42,32 +61,14 @@
|
||||
selectedIdx = Math.min(selectedIdx + 1, filteredItems.length - 1);
|
||||
};
|
||||
|
||||
let container;
|
||||
let adjustHeightDebounce;
|
||||
|
||||
const adjustHeight = () => {
|
||||
if (container) {
|
||||
if (adjustHeightDebounce) {
|
||||
clearTimeout(adjustHeightDebounce);
|
||||
}
|
||||
|
||||
adjustHeightDebounce = setTimeout(() => {
|
||||
if (!container) return;
|
||||
|
||||
// Ensure the container is visible before adjusting height
|
||||
const rect = container.getBoundingClientRect();
|
||||
container.style.maxHeight = Math.max(Math.min(240, rect.bottom - 100), 100) + 'px';
|
||||
}, 100);
|
||||
export const select = async () => {
|
||||
// find item with data-selected=true
|
||||
const item = document.querySelector(`[data-selected="true"]`);
|
||||
if (item) {
|
||||
// click the item
|
||||
item.click();
|
||||
}
|
||||
};
|
||||
|
||||
const confirmSelect = async (type, data) => {
|
||||
onSelect({
|
||||
type: type,
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
const decodeString = (str: string) => {
|
||||
try {
|
||||
return decodeURIComponent(str);
|
||||
@@ -77,22 +78,7 @@
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
window.addEventListener('resize', adjustHeight);
|
||||
|
||||
let notes = await getNoteList(localStorage.token).catch(() => {
|
||||
return [];
|
||||
});
|
||||
|
||||
notes = notes.map((note) => {
|
||||
return {
|
||||
...note,
|
||||
type: 'note',
|
||||
name: note.title,
|
||||
description: dayjs(note.updated_at / 1000000).fromNow()
|
||||
};
|
||||
});
|
||||
|
||||
let legacy_documents = $knowledge
|
||||
let legacy_documents = knowledge
|
||||
.filter((item) => item?.meta?.document)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
@@ -127,16 +113,16 @@
|
||||
]
|
||||
: [];
|
||||
|
||||
let collections = $knowledge
|
||||
let collections = knowledge
|
||||
.filter((item) => !item?.meta?.document)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
type: 'collection'
|
||||
}));
|
||||
let collection_files =
|
||||
$knowledge.length > 0
|
||||
knowledge.length > 0
|
||||
? [
|
||||
...$knowledge
|
||||
...knowledge
|
||||
.reduce((a, item) => {
|
||||
return [
|
||||
...new Set([
|
||||
@@ -158,196 +144,145 @@
|
||||
]
|
||||
: [];
|
||||
|
||||
items = [
|
||||
...notes,
|
||||
...collections,
|
||||
...collection_files,
|
||||
...legacy_collections,
|
||||
...legacy_documents
|
||||
].map((item) => {
|
||||
return {
|
||||
...item,
|
||||
...(item?.legacy || item?.meta?.legacy || item?.meta?.document ? { legacy: true } : {})
|
||||
};
|
||||
});
|
||||
items = [...collections, ...collection_files, ...legacy_collections, ...legacy_documents].map(
|
||||
(item) => {
|
||||
return {
|
||||
...item,
|
||||
...(item?.legacy || item?.meta?.legacy || item?.meta?.document ? { legacy: true } : {})
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
fuse = new Fuse(items, {
|
||||
keys: ['name', 'description']
|
||||
});
|
||||
|
||||
await tick();
|
||||
adjustHeight();
|
||||
});
|
||||
|
||||
const onKeyDown = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
select();
|
||||
}
|
||||
};
|
||||
onMount(() => {
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
window.removeEventListener('resize', adjustHeight);
|
||||
window.removeEventListener('keydown', onKeyDown);
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if filteredItems.length > 0 || command?.substring(1).startsWith('http')}
|
||||
<div
|
||||
id="commands-container"
|
||||
class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
|
||||
>
|
||||
<div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850">
|
||||
<div class="flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100">
|
||||
<div
|
||||
class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5 scrollbar-hidden max-h-60"
|
||||
id="command-options-container"
|
||||
bind:this={container}
|
||||
>
|
||||
{#each filteredItems as item, idx}
|
||||
<button
|
||||
class=" px-3 py-1.5 rounded-xl w-full text-left flex justify-between items-center {idx ===
|
||||
selectedIdx
|
||||
? ' bg-gray-50 dark:bg-gray-850 dark:text-gray-100 selected-command-option-button'
|
||||
: ''}"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
console.log(item);
|
||||
confirmSelect('knowledge', item);
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedIdx = idx;
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div class=" font-medium text-black dark:text-gray-100 flex items-center gap-1">
|
||||
{#if item.legacy}
|
||||
<div
|
||||
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-bold px-1 shrink-0"
|
||||
>
|
||||
Legacy
|
||||
</div>
|
||||
{:else if item?.meta?.document}
|
||||
<div
|
||||
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-bold px-1 shrink-0"
|
||||
>
|
||||
Document
|
||||
</div>
|
||||
{:else if item?.type === 'file'}
|
||||
<div
|
||||
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-bold px-1 shrink-0"
|
||||
>
|
||||
File
|
||||
</div>
|
||||
{:else if item?.type === 'note'}
|
||||
<div
|
||||
class="bg-blue-500/20 text-blue-700 dark:text-blue-200 rounded-sm uppercase text-xs font-bold px-1 shrink-0"
|
||||
>
|
||||
Note
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="bg-green-500/20 text-green-700 dark:text-green-200 rounded-sm uppercase text-xs font-bold px-1 shrink-0"
|
||||
>
|
||||
Collection
|
||||
</div>
|
||||
{/if}
|
||||
<div class="px-2 text-xs text-gray-500 py-1">
|
||||
{$i18n.t('Knowledge')}
|
||||
</div>
|
||||
|
||||
<div class="line-clamp-1">
|
||||
{decodeString(item?.name)}
|
||||
</div>
|
||||
</div>
|
||||
{#if filteredItems.length > 0 || query.startsWith('http')}
|
||||
{#each filteredItems as item, idx}
|
||||
{#if !['youtube', 'web'].includes(item.type)}
|
||||
<button
|
||||
class=" px-2 py-1 rounded-xl w-full text-left flex justify-between items-center {idx ===
|
||||
selectedIdx
|
||||
? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
|
||||
: ''}"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
console.log(item);
|
||||
onSelect({
|
||||
type: 'knowledge',
|
||||
data: item
|
||||
});
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedIdx = idx;
|
||||
}}
|
||||
data-selected={idx === selectedIdx}
|
||||
>
|
||||
<div class=" text-black dark:text-gray-100 flex items-center gap-1">
|
||||
<Tooltip
|
||||
content={item?.legacy
|
||||
? $i18n.t('Legacy')
|
||||
: item?.type === 'file'
|
||||
? $i18n.t('File')
|
||||
: item?.type === 'collection'
|
||||
? $i18n.t('Collection')
|
||||
: ''}
|
||||
placement="top"
|
||||
>
|
||||
{#if item?.type === 'collection'}
|
||||
<Database className="size-4" />
|
||||
{:else}
|
||||
<DocumentPage className="size-4" />
|
||||
{/if}
|
||||
</Tooltip>
|
||||
|
||||
<div class=" text-xs text-gray-600 dark:text-gray-100 line-clamp-1">
|
||||
{item?.description}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
|
||||
<div class="line-clamp-1 flex-1">
|
||||
{decodeString(item?.name)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<!-- <div slot="content" class=" pl-2 pt-1 flex flex-col gap-0.5">
|
||||
{#if !item.legacy && (item?.files ?? []).length > 0}
|
||||
{#each item?.files ?? [] as file, fileIdx}
|
||||
<button
|
||||
class=" px-3 py-1.5 rounded-xl w-full text-left flex justify-between items-center hover:bg-gray-50 dark:hover:bg-gray-850 dark:hover:text-gray-100 selected-command-option-button"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
console.log(file);
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedIdx = idx;
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class=" font-medium text-black dark:text-gray-100 flex items-center gap-1"
|
||||
>
|
||||
<div
|
||||
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-bold px-1 shrink-0"
|
||||
>
|
||||
File
|
||||
</div>
|
||||
{#if query.startsWith('https://www.youtube.com') || query.startsWith('https://youtu.be')}
|
||||
<button
|
||||
class="px-2 py-1 rounded-xl w-full text-left bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button"
|
||||
type="button"
|
||||
data-selected={true}
|
||||
on:click={() => {
|
||||
if (isValidHttpUrl(query)) {
|
||||
onSelect({
|
||||
type: 'youtube',
|
||||
data: query
|
||||
});
|
||||
} else {
|
||||
toast.error(
|
||||
$i18n.t('Oops! Looks like the URL is invalid. Please double-check and try again.')
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class=" text-black dark:text-gray-100 line-clamp-1 flex items-center gap-1">
|
||||
<Tooltip content={$i18n.t('YouTube')} placement="top">
|
||||
<Youtube className="size-4" />
|
||||
</Tooltip>
|
||||
|
||||
<div class="line-clamp-1">
|
||||
{file?.meta?.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" text-xs text-gray-600 dark:text-gray-100 line-clamp-1">
|
||||
{$i18n.t('Updated')}
|
||||
{dayjs(file.updated_at * 1000).fromNow()}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class=" text-gray-500 text-xs mt-1 mb-2">
|
||||
{$i18n.t('File not found.')}
|
||||
</div>
|
||||
{/if}
|
||||
</div> -->
|
||||
{/each}
|
||||
|
||||
{#if command.substring(1).startsWith('https://www.youtube.com') || command
|
||||
.substring(1)
|
||||
.startsWith('https://youtu.be')}
|
||||
<button
|
||||
class="px-3 py-1.5 rounded-xl w-full text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 selected-command-option-button"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if (isValidHttpUrl(command.substring(1))) {
|
||||
confirmSelect('youtube', command.substring(1));
|
||||
} else {
|
||||
toast.error(
|
||||
$i18n.t(
|
||||
'Oops! Looks like the URL is invalid. Please double-check and try again.'
|
||||
)
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class=" font-medium text-black dark:text-gray-100 line-clamp-1">
|
||||
{command.substring(1)}
|
||||
</div>
|
||||
|
||||
<div class=" text-xs text-gray-600 line-clamp-1">{$i18n.t('Youtube')}</div>
|
||||
</button>
|
||||
{:else if command.substring(1).startsWith('http')}
|
||||
<button
|
||||
class="px-3 py-1.5 rounded-xl w-full text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 selected-command-option-button"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if (isValidHttpUrl(command.substring(1))) {
|
||||
confirmSelect('web', command.substring(1));
|
||||
} else {
|
||||
toast.error(
|
||||
$i18n.t(
|
||||
'Oops! Looks like the URL is invalid. Please double-check and try again.'
|
||||
)
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class=" font-medium text-black dark:text-gray-100 line-clamp-1">
|
||||
{command}
|
||||
</div>
|
||||
|
||||
<div class=" text-xs text-gray-600 line-clamp-1">{$i18n.t('Web')}</div>
|
||||
</button>
|
||||
{/if}
|
||||
<div class="truncate flex-1">
|
||||
{query}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{:else if query.startsWith('http')}
|
||||
<button
|
||||
class="px-2 py-1 rounded-xl w-full text-left bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button"
|
||||
type="button"
|
||||
data-selected={true}
|
||||
on:click={() => {
|
||||
if (isValidHttpUrl(query)) {
|
||||
onSelect({
|
||||
type: 'web',
|
||||
data: query
|
||||
});
|
||||
} else {
|
||||
toast.error(
|
||||
$i18n.t('Oops! Looks like the URL is invalid. Please double-check and try again.')
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class=" text-black dark:text-gray-100 line-clamp-1 flex items-center gap-1">
|
||||
<Tooltip content={$i18n.t('Web')} placement="top">
|
||||
<GlobeAlt className="size-4" />
|
||||
</Tooltip>
|
||||
|
||||
<div class="truncate flex-1">
|
||||
{query}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -6,14 +6,15 @@
|
||||
|
||||
import { models } from '$lib/stores';
|
||||
import { WEBUI_BASE_URL } from '$lib/constants';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let command = '';
|
||||
export let query = '';
|
||||
export let onSelect = (e) => {};
|
||||
|
||||
let selectedIdx = 0;
|
||||
let filteredItems = [];
|
||||
export let filteredItems = [];
|
||||
|
||||
let fuse = new Fuse(
|
||||
$models
|
||||
@@ -29,17 +30,17 @@
|
||||
}),
|
||||
{
|
||||
keys: ['value', 'tags', 'modelName'],
|
||||
threshold: 0.3
|
||||
threshold: 0.5
|
||||
}
|
||||
);
|
||||
|
||||
$: filteredItems = command.slice(1)
|
||||
? fuse.search(command).map((e) => {
|
||||
$: filteredItems = query
|
||||
? fuse.search(query).map((e) => {
|
||||
return e.item;
|
||||
})
|
||||
: $models.filter((model) => !model?.info?.meta?.hidden);
|
||||
|
||||
$: if (command) {
|
||||
$: if (query) {
|
||||
selectedIdx = 0;
|
||||
}
|
||||
|
||||
@@ -51,85 +52,46 @@
|
||||
selectedIdx = Math.min(selectedIdx + 1, filteredItems.length - 1);
|
||||
};
|
||||
|
||||
let container;
|
||||
let adjustHeightDebounce;
|
||||
|
||||
const adjustHeight = () => {
|
||||
if (container) {
|
||||
if (adjustHeightDebounce) {
|
||||
clearTimeout(adjustHeightDebounce);
|
||||
}
|
||||
|
||||
adjustHeightDebounce = setTimeout(() => {
|
||||
if (!container) return;
|
||||
|
||||
// Ensure the container is visible before adjusting height
|
||||
const rect = container.getBoundingClientRect();
|
||||
container.style.maxHeight = Math.max(Math.min(240, rect.bottom - 100), 100) + 'px';
|
||||
}, 100);
|
||||
export const select = async () => {
|
||||
const model = filteredItems[selectedIdx];
|
||||
if (model) {
|
||||
onSelect({ type: 'model', data: model });
|
||||
}
|
||||
};
|
||||
|
||||
const confirmSelect = async (model) => {
|
||||
onSelect({ type: 'model', data: model });
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
window.addEventListener('resize', adjustHeight);
|
||||
|
||||
await tick();
|
||||
const chatInputElement = document.getElementById('chat-input');
|
||||
await tick();
|
||||
chatInputElement?.focus();
|
||||
await tick();
|
||||
|
||||
adjustHeight();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
window.removeEventListener('resize', adjustHeight);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="px-2 text-xs text-gray-500 py-1">
|
||||
{$i18n.t('Models')}
|
||||
</div>
|
||||
|
||||
{#if filteredItems.length > 0}
|
||||
<div
|
||||
id="commands-container"
|
||||
class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
|
||||
>
|
||||
<div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850">
|
||||
<div class="flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100">
|
||||
<div
|
||||
class="m-1 overflow-y-auto p-1 rounded-r-lg space-y-0.5 scrollbar-hidden max-h-60"
|
||||
id="command-options-container"
|
||||
bind:this={container}
|
||||
>
|
||||
{#each filteredItems as model, modelIdx}
|
||||
<button
|
||||
class="px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
|
||||
? 'bg-gray-50 dark:bg-gray-850 selected-command-option-button'
|
||||
: ''}"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
confirmSelect(model);
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedIdx = modelIdx;
|
||||
}}
|
||||
on:focus={() => {}}
|
||||
>
|
||||
<div class="flex font-medium text-black dark:text-gray-100 line-clamp-1">
|
||||
<img
|
||||
src={model?.info?.meta?.profile_image_url ??
|
||||
`${WEBUI_BASE_URL}/static/favicon.png`}
|
||||
alt={model?.name ?? model.id}
|
||||
class="rounded-full size-6 items-center mr-2"
|
||||
/>
|
||||
{model.name}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{#each filteredItems as model, modelIdx}
|
||||
<Tooltip content={model.id} placement="top-start">
|
||||
<button
|
||||
class="px-2.5 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
|
||||
? 'bg-gray-50 dark:bg-gray-800 selected-command-option-button'
|
||||
: ''}"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onSelect({ type: 'model', data: model });
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedIdx = modelIdx;
|
||||
}}
|
||||
on:focus={() => {}}
|
||||
data-selected={modelIdx === selectedIdx}
|
||||
>
|
||||
<div class="flex text-black dark:text-gray-100 line-clamp-1">
|
||||
<img
|
||||
src={model?.info?.meta?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
|
||||
alt={model?.name ?? model.id}
|
||||
class="rounded-full size-5 items-center mr-2"
|
||||
/>
|
||||
<div class="truncate">
|
||||
{model.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
@@ -1,140 +1,71 @@
|
||||
<script lang="ts">
|
||||
import { prompts, settings, user } from '$lib/stores';
|
||||
import {
|
||||
extractCurlyBraceWords,
|
||||
getUserPosition,
|
||||
getFormattedDate,
|
||||
getFormattedTime,
|
||||
getCurrentDateTime,
|
||||
getUserTimezone,
|
||||
getWeekday
|
||||
} from '$lib/utils';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import { tick, getContext, onMount, onDestroy } from 'svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let command = '';
|
||||
export let query = '';
|
||||
export let prompts = [];
|
||||
export let onSelect = (e) => {};
|
||||
|
||||
let selectedPromptIdx = 0;
|
||||
let filteredPrompts = [];
|
||||
export let filteredItems = [];
|
||||
|
||||
$: filteredPrompts = $prompts
|
||||
.filter((p) => p.command.toLowerCase().includes(command.toLowerCase()))
|
||||
$: filteredItems = prompts
|
||||
.filter((p) => p.command.toLowerCase().includes(query.toLowerCase()))
|
||||
.sort((a, b) => a.title.localeCompare(b.title));
|
||||
|
||||
$: if (command) {
|
||||
$: if (query) {
|
||||
selectedPromptIdx = 0;
|
||||
}
|
||||
|
||||
export const selectUp = () => {
|
||||
selectedPromptIdx = Math.max(0, selectedPromptIdx - 1);
|
||||
};
|
||||
|
||||
export const selectDown = () => {
|
||||
selectedPromptIdx = Math.min(selectedPromptIdx + 1, filteredPrompts.length - 1);
|
||||
selectedPromptIdx = Math.min(selectedPromptIdx + 1, filteredItems.length - 1);
|
||||
};
|
||||
|
||||
let container;
|
||||
let adjustHeightDebounce;
|
||||
|
||||
const adjustHeight = () => {
|
||||
if (container) {
|
||||
if (adjustHeightDebounce) {
|
||||
clearTimeout(adjustHeightDebounce);
|
||||
}
|
||||
|
||||
adjustHeightDebounce = setTimeout(() => {
|
||||
if (!container) return;
|
||||
|
||||
// Ensure the container is visible before adjusting height
|
||||
const rect = container.getBoundingClientRect();
|
||||
container.style.maxHeight = Math.max(Math.min(240, rect.bottom - 80), 100) + 'px';
|
||||
}, 100);
|
||||
export const select = async () => {
|
||||
const command = filteredItems[selectedPromptIdx];
|
||||
if (command) {
|
||||
onSelect({ type: 'prompt', data: command });
|
||||
}
|
||||
};
|
||||
|
||||
const confirmPrompt = async (command) => {
|
||||
onSelect({ type: 'prompt', data: command });
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
window.addEventListener('resize', adjustHeight);
|
||||
|
||||
await tick();
|
||||
adjustHeight();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
window.removeEventListener('resize', adjustHeight);
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if filteredPrompts.length > 0}
|
||||
<div
|
||||
id="commands-container"
|
||||
class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
|
||||
>
|
||||
<div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850">
|
||||
<div class="flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100">
|
||||
<div
|
||||
class="m-1 overflow-y-auto p-1 space-y-0.5 scrollbar-hidden max-h-60"
|
||||
id="command-options-container"
|
||||
bind:this={container}
|
||||
<div class="px-2 text-xs text-gray-500 py-1">
|
||||
{$i18n.t('Prompts')}
|
||||
</div>
|
||||
|
||||
{#if filteredItems.length > 0}
|
||||
<div class=" space-y-0.5 scrollbar-hidden">
|
||||
{#each filteredItems as promptItem, promptIdx}
|
||||
<Tooltip content={promptItem.title} placement="top-start">
|
||||
<button
|
||||
class=" px-3 py-1 rounded-xl w-full text-left {promptIdx === selectedPromptIdx
|
||||
? ' bg-gray-50 dark:bg-gray-800 selected-command-option-button'
|
||||
: ''} truncate"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onSelect({ type: 'prompt', data: promptItem });
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedPromptIdx = promptIdx;
|
||||
}}
|
||||
on:focus={() => {}}
|
||||
data-selected={promptIdx === selectedPromptIdx}
|
||||
>
|
||||
{#each filteredPrompts as promptItem, promptIdx}
|
||||
<button
|
||||
class=" px-3 py-1.5 rounded-xl w-full text-left {promptIdx === selectedPromptIdx
|
||||
? ' bg-gray-50 dark:bg-gray-850 selected-command-option-button'
|
||||
: ''}"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
confirmPrompt(promptItem);
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedPromptIdx = promptIdx;
|
||||
}}
|
||||
on:focus={() => {}}
|
||||
>
|
||||
<div class=" font-medium text-black dark:text-gray-100">
|
||||
{promptItem.command}
|
||||
</div>
|
||||
<span class=" font-medium text-black dark:text-gray-100">
|
||||
{promptItem.command}
|
||||
</span>
|
||||
|
||||
<div class=" text-xs text-gray-600 dark:text-gray-100">
|
||||
{promptItem.title}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" px-2 pt-0.5 pb-1 text-xs text-gray-600 dark:text-gray-100 bg-white dark:bg-gray-900 rounded-b-xl flex items-center space-x-1"
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-3 h-3"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="line-clamp-1">
|
||||
{$i18n.t(
|
||||
'Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.'
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class=" text-xs text-gray-600 dark:text-gray-100">
|
||||
{promptItem.title}
|
||||
</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -24,8 +24,10 @@
|
||||
role="region"
|
||||
aria-label="Drag and Drop Container"
|
||||
>
|
||||
<div class="absolute w-full h-full backdrop-blur-sm bg-gray-800/40 flex justify-center">
|
||||
<div class="m-auto pt-64 flex flex-col justify-center">
|
||||
<div
|
||||
class="absolute w-full h-full backdrop-blur-sm bg-gray-100/50 dark:bg-gray-900/80 flex justify-center"
|
||||
>
|
||||
<div class="m-auto flex flex-col justify-center">
|
||||
<div class="max-w-md">
|
||||
<AddFilesPlaceholder />
|
||||
</div>
|
||||
|
||||
@@ -1,27 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { DropdownMenu } from 'bits-ui';
|
||||
import { flyAndScale } from '$lib/utils/transitions';
|
||||
import { getContext, onMount, tick } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { flyAndScale } from '$lib/utils/transitions';
|
||||
|
||||
import { config, user, tools as _tools, mobile } from '$lib/stores';
|
||||
import { config, user, tools as _tools, mobile, knowledge, chats } from '$lib/stores';
|
||||
import { createPicker } from '$lib/utils/google-drive-picker';
|
||||
|
||||
import { getTools } from '$lib/apis/tools';
|
||||
|
||||
import Dropdown from '$lib/components/common/Dropdown.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import DocumentArrowUpSolid from '$lib/components/icons/DocumentArrowUpSolid.svelte';
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import GlobeAltSolid from '$lib/components/icons/GlobeAltSolid.svelte';
|
||||
import WrenchSolid from '$lib/components/icons/WrenchSolid.svelte';
|
||||
import CameraSolid from '$lib/components/icons/CameraSolid.svelte';
|
||||
import PhotoSolid from '$lib/components/icons/PhotoSolid.svelte';
|
||||
import CommandLineSolid from '$lib/components/icons/CommandLineSolid.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import DocumentArrowUp from '$lib/components/icons/DocumentArrowUp.svelte';
|
||||
import Camera from '$lib/components/icons/Camera.svelte';
|
||||
import Note from '$lib/components/icons/Note.svelte';
|
||||
import Clip from '$lib/components/icons/Clip.svelte';
|
||||
import ChatBubbleOval from '$lib/components/icons/ChatBubbleOval.svelte';
|
||||
import Refresh from '$lib/components/icons/Refresh.svelte';
|
||||
import Agile from '$lib/components/icons/Agile.svelte';
|
||||
import ClockRotateRight from '$lib/components/icons/ClockRotateRight.svelte';
|
||||
import Database from '$lib/components/icons/Database.svelte';
|
||||
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
|
||||
import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
|
||||
import PageEdit from '$lib/components/icons/PageEdit.svelte';
|
||||
import Chats from './InputMenu/Chats.svelte';
|
||||
import Notes from './InputMenu/Notes.svelte';
|
||||
import Knowledge from './InputMenu/Knowledge.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let selectedToolIds: string[] = [];
|
||||
export let files = [];
|
||||
|
||||
export let selectedModels: string[] = [];
|
||||
export let fileUploadCapableModels: string[] = [];
|
||||
@@ -35,46 +41,41 @@
|
||||
|
||||
export let onClose: Function;
|
||||
|
||||
let tools = null;
|
||||
let show = false;
|
||||
let showAllTools = false;
|
||||
|
||||
$: if (show) {
|
||||
init();
|
||||
}
|
||||
let tab = '';
|
||||
|
||||
let fileUploadEnabled = true;
|
||||
$: fileUploadEnabled =
|
||||
fileUploadCapableModels.length === selectedModels.length &&
|
||||
($user?.role === 'admin' || $user?.permissions?.chat?.file_upload);
|
||||
|
||||
const init = async () => {
|
||||
await _tools.set(await getTools(localStorage.token));
|
||||
if ($_tools) {
|
||||
tools = $_tools.reduce((a, tool, i, arr) => {
|
||||
a[tool.id] = {
|
||||
name: tool.name,
|
||||
description: tool.meta.description,
|
||||
enabled: selectedToolIds.includes(tool.id)
|
||||
};
|
||||
return a;
|
||||
}, {});
|
||||
selectedToolIds = selectedToolIds.filter((id) => $_tools?.some((tool) => tool.id === id));
|
||||
}
|
||||
};
|
||||
|
||||
const detectMobile = () => {
|
||||
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
||||
return /android|iphone|ipad|ipod|windows phone/i.test(userAgent);
|
||||
};
|
||||
|
||||
function handleFileChange(event) {
|
||||
const handleFileChange = (event) => {
|
||||
const inputFiles = Array.from(event.target?.files);
|
||||
if (inputFiles && inputFiles.length > 0) {
|
||||
console.log(inputFiles);
|
||||
inputFilesHandler(inputFiles);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onSelect = (item) => {
|
||||
if (files.find((f) => f.id === item.id)) {
|
||||
return;
|
||||
}
|
||||
files = [
|
||||
...files,
|
||||
{
|
||||
...item,
|
||||
status: 'processed'
|
||||
}
|
||||
];
|
||||
|
||||
show = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Hidden file input used to open the camera on mobile -->
|
||||
@@ -101,299 +102,390 @@
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-[240px] rounded-xl px-1 py-1 border border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
|
||||
sideOffset={10}
|
||||
alignOffset={-8}
|
||||
side="top"
|
||||
class="w-full max-w-70 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin transition"
|
||||
sideOffset={4}
|
||||
alignOffset={-6}
|
||||
side="bottom"
|
||||
align="start"
|
||||
transition={flyAndScale}
|
||||
>
|
||||
{#if tools}
|
||||
{#if Object.keys(tools).length > 0}
|
||||
<div class="{showAllTools ? ' max-h-96' : 'max-h-28'} overflow-y-auto scrollbar-thin">
|
||||
{#each Object.keys(tools) as toolId}
|
||||
{#if tab === ''}
|
||||
<div in:fly={{ x: -20, duration: 150 }}>
|
||||
<Tooltip
|
||||
content={fileUploadCapableModels.length !== selectedModels.length
|
||||
? $i18n.t('Model(s) do not support file upload')
|
||||
: !fileUploadEnabled
|
||||
? $i18n.t('You do not have permission to upload files.')
|
||||
: ''}
|
||||
className="w-full"
|
||||
>
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl {!fileUploadEnabled
|
||||
? 'opacity-50'
|
||||
: ''}"
|
||||
on:click={() => {
|
||||
if (fileUploadEnabled) {
|
||||
uploadFilesHandler();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Clip />
|
||||
|
||||
<div class="line-clamp-1">{$i18n.t('Upload Files')}</div>
|
||||
</DropdownMenu.Item>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip
|
||||
content={fileUploadCapableModels.length !== selectedModels.length
|
||||
? $i18n.t('Model(s) do not support file upload')
|
||||
: !fileUploadEnabled
|
||||
? $i18n.t('You do not have permission to upload files.')
|
||||
: ''}
|
||||
className="w-full"
|
||||
>
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl {!fileUploadEnabled
|
||||
? 'opacity-50'
|
||||
: ''}"
|
||||
on:click={() => {
|
||||
if (fileUploadEnabled) {
|
||||
if (!detectMobile()) {
|
||||
screenCaptureHandler();
|
||||
} else {
|
||||
const cameraInputElement = document.getElementById('camera-input');
|
||||
|
||||
if (cameraInputElement) {
|
||||
cameraInputElement.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Camera />
|
||||
<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
|
||||
</DropdownMenu.Item>
|
||||
</Tooltip>
|
||||
|
||||
{#if $config?.features?.enable_notes ?? false}
|
||||
<Tooltip
|
||||
content={fileUploadCapableModels.length !== selectedModels.length
|
||||
? $i18n.t('Model(s) do not support file upload')
|
||||
: !fileUploadEnabled
|
||||
? $i18n.t('You do not have permission to upload files.')
|
||||
: ''}
|
||||
className="w-full"
|
||||
>
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
|
||||
class="flex gap-2 w-full items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl {!fileUploadEnabled
|
||||
? 'opacity-50'
|
||||
: ''}"
|
||||
on:click={() => {
|
||||
tools[toolId].enabled = !tools[toolId].enabled;
|
||||
tab = 'notes';
|
||||
}}
|
||||
>
|
||||
<div class="flex-1 truncate">
|
||||
<Tooltip
|
||||
content={tools[toolId]?.description ?? ''}
|
||||
placement="top-start"
|
||||
className="flex flex-1 gap-2 items-center"
|
||||
>
|
||||
<div class="shrink-0">
|
||||
<WrenchSolid />
|
||||
</div>
|
||||
<PageEdit />
|
||||
|
||||
<div class=" truncate">{tools[toolId].name}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="flex items-center w-full justify-between">
|
||||
<div class=" line-clamp-1">
|
||||
{$i18n.t('Attach Notes')}
|
||||
</div>
|
||||
|
||||
<div class=" shrink-0">
|
||||
<Switch
|
||||
state={tools[toolId].enabled}
|
||||
on:change={async (e) => {
|
||||
const state = e.detail;
|
||||
await tick();
|
||||
if (state) {
|
||||
selectedToolIds = [...selectedToolIds, toolId];
|
||||
} else {
|
||||
selectedToolIds = selectedToolIds.filter((id) => id !== toolId);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div class="text-gray-500">
|
||||
<ChevronRight />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#if Object.keys(tools).length > 3}
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
<Tooltip
|
||||
content={fileUploadCapableModels.length !== selectedModels.length
|
||||
? $i18n.t('Model(s) do not support file upload')
|
||||
: !fileUploadEnabled
|
||||
? $i18n.t('You do not have permission to upload files.')
|
||||
: ''}
|
||||
className="w-full"
|
||||
>
|
||||
<button
|
||||
class="flex w-full justify-center items-center text-sm font-medium cursor-pointer rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
class="flex gap-2 w-full items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl {!fileUploadEnabled
|
||||
? 'opacity-50'
|
||||
: ''}"
|
||||
on:click={() => {
|
||||
showAllTools = !showAllTools;
|
||||
tab = 'knowledge';
|
||||
}}
|
||||
title={showAllTools ? $i18n.t('Show Less') : $i18n.t('Show All')}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2.5"
|
||||
stroke="currentColor"
|
||||
class="size-3 transition-transform duration-200 {showAllTools
|
||||
? 'rotate-180'
|
||||
: ''} text-gray-300 dark:text-gray-600"
|
||||
<Database />
|
||||
|
||||
<div class="flex items-center w-full justify-between">
|
||||
<div class=" line-clamp-1">
|
||||
{$i18n.t('Attach Knowledge')}
|
||||
</div>
|
||||
|
||||
<div class="text-gray-500">
|
||||
<ChevronRight />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
{#if ($chats ?? []).length > 0}
|
||||
<Tooltip
|
||||
content={fileUploadCapableModels.length !== selectedModels.length
|
||||
? $i18n.t('Model(s) do not support file upload')
|
||||
: !fileUploadEnabled
|
||||
? $i18n.t('You do not have permission to upload files.')
|
||||
: ''}
|
||||
className="w-full"
|
||||
>
|
||||
<button
|
||||
class="flex gap-2 w-full items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl {!fileUploadEnabled
|
||||
? 'opacity-50'
|
||||
: ''}"
|
||||
on:click={() => {
|
||||
tab = 'chats';
|
||||
}}
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<ClockRotateRight />
|
||||
|
||||
<div class="flex items-center w-full justify-between">
|
||||
<div class=" line-clamp-1">
|
||||
{$i18n.t('Reference Chats')}
|
||||
</div>
|
||||
|
||||
<div class="text-gray-500">
|
||||
<ChevronRight />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
{#if fileUploadEnabled}
|
||||
{#if $config?.features?.enable_google_drive_integration}
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl"
|
||||
on:click={() => {
|
||||
uploadGoogleDriveHandler();
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" class="w-5 h-5">
|
||||
<path
|
||||
d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
|
||||
fill="#0066da"
|
||||
/>
|
||||
<path
|
||||
d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
|
||||
fill="#00ac47"
|
||||
/>
|
||||
<path
|
||||
d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
|
||||
fill="#ea4335"
|
||||
/>
|
||||
<path
|
||||
d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
|
||||
fill="#00832d"
|
||||
/>
|
||||
<path
|
||||
d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
|
||||
fill="#2684fc"
|
||||
/>
|
||||
<path
|
||||
d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
|
||||
fill="#ffba00"
|
||||
/>
|
||||
</svg>
|
||||
<div class="line-clamp-1">{$i18n.t('Google Drive')}</div>
|
||||
</DropdownMenu.Item>
|
||||
{/if}
|
||||
|
||||
{#if $config?.features?.enable_onedrive_integration && ($config?.features?.enable_onedrive_personal || $config?.features?.enable_onedrive_business)}
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl w-full"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
>
|
||||
<mask
|
||||
id="mask0_87_7796"
|
||||
style="mask-type:alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="0"
|
||||
y="6"
|
||||
width="32"
|
||||
height="20"
|
||||
>
|
||||
<path
|
||||
d="M7.82979 26C3.50549 26 0 22.5675 0 18.3333C0 14.1921 3.35322 10.8179 7.54613 10.6716C9.27535 7.87166 12.4144 6 16 6C20.6308 6 24.5169 9.12183 25.5829 13.3335C29.1316 13.3603 32 16.1855 32 19.6667C32 23.0527 29 26 25.8723 25.9914L7.82979 26Z"
|
||||
fill="#C4C4C4"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_87_7796)">
|
||||
<path
|
||||
d="M7.83017 26.0001C5.37824 26.0001 3.18957 24.8966 1.75391 23.1691L18.0429 16.3335L30.7089 23.4647C29.5926 24.9211 27.9066 26.0001 26.0004 25.9915C23.1254 26.0001 12.0629 26.0001 7.83017 26.0001Z"
|
||||
fill="url(#paint0_linear_87_7796)"
|
||||
/>
|
||||
<path
|
||||
d="M25.5785 13.3149L18.043 16.3334L30.709 23.4647C31.5199 22.4065 32.0004 21.0916 32.0004 19.6669C32.0004 16.1857 29.1321 13.3605 25.5833 13.3337C25.5817 13.3274 25.5801 13.3212 25.5785 13.3149Z"
|
||||
fill="url(#paint1_linear_87_7796)"
|
||||
/>
|
||||
<path
|
||||
d="M7.06445 10.7028L18.0423 16.3333L25.5779 13.3148C24.5051 9.11261 20.6237 6 15.9997 6C12.4141 6 9.27508 7.87166 7.54586 10.6716C7.3841 10.6773 7.22358 10.6877 7.06445 10.7028Z"
|
||||
fill="url(#paint2_linear_87_7796)"
|
||||
/>
|
||||
<path
|
||||
d="M1.7535 23.1687L18.0425 16.3331L7.06471 10.7026C3.09947 11.0792 0 14.3517 0 18.3331C0 20.1665 0.657197 21.8495 1.7535 23.1687Z"
|
||||
fill="url(#paint3_linear_87_7796)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_87_7796"
|
||||
x1="4.42591"
|
||||
y1="24.6668"
|
||||
x2="27.2309"
|
||||
y2="23.2764"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#2086B8" />
|
||||
<stop offset="1" stop-color="#46D3F6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_87_7796"
|
||||
x1="23.8302"
|
||||
y1="19.6668"
|
||||
x2="30.2108"
|
||||
y2="15.2082"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#1694DB" />
|
||||
<stop offset="1" stop-color="#62C3FE" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_87_7796"
|
||||
x1="8.51037"
|
||||
y1="7.33333"
|
||||
x2="23.3335"
|
||||
y2="15.9348"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#0D3D78" />
|
||||
<stop offset="1" stop-color="#063B83" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear_87_7796"
|
||||
x1="-0.340429"
|
||||
y1="19.9998"
|
||||
x2="14.5634"
|
||||
y2="14.4649"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#16589B" />
|
||||
<stop offset="1" stop-color="#1464B7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive')}</div>
|
||||
</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.SubContent
|
||||
class="w-[calc(100vw-2rem)] max-w-[280px] rounded-xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
|
||||
side={$mobile ? 'bottom' : 'right'}
|
||||
sideOffset={$mobile ? 5 : 0}
|
||||
alignOffset={$mobile ? 0 : -8}
|
||||
>
|
||||
{#if $config?.features?.enable_onedrive_personal}
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl"
|
||||
on:click={() => {
|
||||
uploadOneDriveHandler('personal');
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (personal)')}</div>
|
||||
</div>
|
||||
</DropdownMenu.Item>
|
||||
{/if}
|
||||
|
||||
{#if $config?.features?.enable_onedrive_business}
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl"
|
||||
on:click={() => {
|
||||
uploadOneDriveHandler('organizations');
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div class="line-clamp-1">
|
||||
{$i18n.t('Microsoft OneDrive (work/school)')}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">{$i18n.t('Includes SharePoint')}</div>
|
||||
</div>
|
||||
</DropdownMenu.Item>
|
||||
{/if}
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Sub>
|
||||
{/if}
|
||||
{/if}
|
||||
<hr class="border-black/5 dark:border-white/5 my-1" />
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="py-4">
|
||||
<Spinner />
|
||||
</div>
|
||||
|
||||
<hr class="border-black/5 dark:border-white/5 my-1" />
|
||||
{/if}
|
||||
|
||||
<Tooltip
|
||||
content={fileUploadCapableModels.length !== selectedModels.length
|
||||
? $i18n.t('Model(s) do not support file upload')
|
||||
: !fileUploadEnabled
|
||||
? $i18n.t('You do not have permission to upload files.')
|
||||
: ''}
|
||||
className="w-full"
|
||||
>
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
|
||||
? 'opacity-50'
|
||||
: ''}"
|
||||
on:click={() => {
|
||||
if (fileUploadEnabled) {
|
||||
if (!detectMobile()) {
|
||||
screenCaptureHandler();
|
||||
} else {
|
||||
const cameraInputElement = document.getElementById('camera-input');
|
||||
|
||||
if (cameraInputElement) {
|
||||
cameraInputElement.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<CameraSolid />
|
||||
<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
|
||||
</DropdownMenu.Item>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip
|
||||
content={fileUploadCapableModels.length !== selectedModels.length
|
||||
? $i18n.t('Model(s) do not support file upload')
|
||||
: !fileUploadEnabled
|
||||
? $i18n.t('You do not have permission to upload files.')
|
||||
: ''}
|
||||
className="w-full"
|
||||
>
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
|
||||
? 'opacity-50'
|
||||
: ''}"
|
||||
on:click={() => {
|
||||
if (fileUploadEnabled) {
|
||||
uploadFilesHandler();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DocumentArrowUpSolid />
|
||||
<div class="line-clamp-1">{$i18n.t('Upload Files')}</div>
|
||||
</DropdownMenu.Item>
|
||||
</Tooltip>
|
||||
|
||||
{#if fileUploadEnabled}
|
||||
{#if $config?.features?.enable_google_drive_integration}
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
{:else if tab === 'knowledge'}
|
||||
<div in:fly={{ x: 20, duration: 150 }}>
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50"
|
||||
on:click={() => {
|
||||
uploadGoogleDriveHandler();
|
||||
tab = '';
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" class="w-5 h-5">
|
||||
<path
|
||||
d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
|
||||
fill="#0066da"
|
||||
/>
|
||||
<path
|
||||
d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
|
||||
fill="#00ac47"
|
||||
/>
|
||||
<path
|
||||
d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
|
||||
fill="#ea4335"
|
||||
/>
|
||||
<path
|
||||
d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
|
||||
fill="#00832d"
|
||||
/>
|
||||
<path
|
||||
d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
|
||||
fill="#2684fc"
|
||||
/>
|
||||
<path
|
||||
d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
|
||||
fill="#ffba00"
|
||||
/>
|
||||
</svg>
|
||||
<div class="line-clamp-1">{$i18n.t('Google Drive')}</div>
|
||||
</DropdownMenu.Item>
|
||||
{/if}
|
||||
<ChevronLeft />
|
||||
|
||||
{#if $config?.features?.enable_onedrive_integration}
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
>
|
||||
<mask
|
||||
id="mask0_87_7796"
|
||||
style="mask-type:alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="0"
|
||||
y="6"
|
||||
width="32"
|
||||
height="20"
|
||||
>
|
||||
<path
|
||||
d="M7.82979 26C3.50549 26 0 22.5675 0 18.3333C0 14.1921 3.35322 10.8179 7.54613 10.6716C9.27535 7.87166 12.4144 6 16 6C20.6308 6 24.5169 9.12183 25.5829 13.3335C29.1316 13.3603 32 16.1855 32 19.6667C32 23.0527 29 26 25.8723 25.9914L7.82979 26Z"
|
||||
fill="#C4C4C4"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_87_7796)">
|
||||
<path
|
||||
d="M7.83017 26.0001C5.37824 26.0001 3.18957 24.8966 1.75391 23.1691L18.0429 16.3335L30.7089 23.4647C29.5926 24.9211 27.9066 26.0001 26.0004 25.9915C23.1254 26.0001 12.0629 26.0001 7.83017 26.0001Z"
|
||||
fill="url(#paint0_linear_87_7796)"
|
||||
/>
|
||||
<path
|
||||
d="M25.5785 13.3149L18.043 16.3334L30.709 23.4647C31.5199 22.4065 32.0004 21.0916 32.0004 19.6669C32.0004 16.1857 29.1321 13.3605 25.5833 13.3337C25.5817 13.3274 25.5801 13.3212 25.5785 13.3149Z"
|
||||
fill="url(#paint1_linear_87_7796)"
|
||||
/>
|
||||
<path
|
||||
d="M7.06445 10.7028L18.0423 16.3333L25.5779 13.3148C24.5051 9.11261 20.6237 6 15.9997 6C12.4141 6 9.27508 7.87166 7.54586 10.6716C7.3841 10.6773 7.22358 10.6877 7.06445 10.7028Z"
|
||||
fill="url(#paint2_linear_87_7796)"
|
||||
/>
|
||||
<path
|
||||
d="M1.7535 23.1687L18.0425 16.3331L7.06471 10.7026C3.09947 11.0792 0 14.3517 0 18.3331C0 20.1665 0.657197 21.8495 1.7535 23.1687Z"
|
||||
fill="url(#paint3_linear_87_7796)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_87_7796"
|
||||
x1="4.42591"
|
||||
y1="24.6668"
|
||||
x2="27.2309"
|
||||
y2="23.2764"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#2086B8" />
|
||||
<stop offset="1" stop-color="#46D3F6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_87_7796"
|
||||
x1="23.8302"
|
||||
y1="19.6668"
|
||||
x2="30.2108"
|
||||
y2="15.2082"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#1694DB" />
|
||||
<stop offset="1" stop-color="#62C3FE" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_87_7796"
|
||||
x1="8.51037"
|
||||
y1="7.33333"
|
||||
x2="23.3335"
|
||||
y2="15.9348"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#0D3D78" />
|
||||
<stop offset="1" stop-color="#063B83" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear_87_7796"
|
||||
x1="-0.340429"
|
||||
y1="19.9998"
|
||||
x2="14.5634"
|
||||
y2="14.4649"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#16589B" />
|
||||
<stop offset="1" stop-color="#1464B7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive')}</div>
|
||||
</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.SubContent
|
||||
class="w-[calc(100vw-2rem)] max-w-[280px] rounded-xl px-1 py-1 border border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
|
||||
side={$mobile ? 'bottom' : 'right'}
|
||||
sideOffset={$mobile ? 5 : 0}
|
||||
alignOffset={$mobile ? 0 : -8}
|
||||
>
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
on:click={() => {
|
||||
uploadOneDriveHandler('personal');
|
||||
}}
|
||||
>
|
||||
<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (personal)')}</div>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
on:click={() => {
|
||||
uploadOneDriveHandler('organizations');
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (work/school)')}</div>
|
||||
<div class="text-xs text-gray-500">{$i18n.t('Includes SharePoint')}</div>
|
||||
</div>
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Sub>
|
||||
{/if}
|
||||
<div class="flex items-center w-full justify-between">
|
||||
<div>
|
||||
{$i18n.t('Knowledge')}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<Knowledge {onSelect} />
|
||||
</div>
|
||||
{:else if tab === 'notes'}
|
||||
<div in:fly={{ x: 20, duration: 150 }}>
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50"
|
||||
on:click={() => {
|
||||
tab = '';
|
||||
}}
|
||||
>
|
||||
<ChevronLeft />
|
||||
|
||||
<div class="flex items-center w-full justify-between">
|
||||
<div>
|
||||
{$i18n.t('Notes')}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<Notes {onSelect} />
|
||||
</div>
|
||||
{:else if tab === 'chats'}
|
||||
<div in:fly={{ x: 20, duration: 150 }}>
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50"
|
||||
on:click={() => {
|
||||
tab = '';
|
||||
}}
|
||||
>
|
||||
<ChevronLeft />
|
||||
|
||||
<div class="flex items-center w-full justify-between">
|
||||
<div>
|
||||
{$i18n.t('Chats')}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<Chats {onSelect} />
|
||||
</div>
|
||||
{/if}
|
||||
</DropdownMenu.Content>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
<script lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
import { onMount, tick, getContext } from 'svelte';
|
||||
|
||||
import { decodeString } from '$lib/utils';
|
||||
import { getChatList } from '$lib/apis/chats';
|
||||
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Loader from '$lib/components/common/Loader.svelte';
|
||||
import { chatId } from '$lib/stores';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let onSelect = (e) => {};
|
||||
|
||||
let loaded = false;
|
||||
|
||||
let items = [];
|
||||
let selectedIdx = 0;
|
||||
|
||||
let page = 1;
|
||||
let itemsLoading = false;
|
||||
let allItemsLoaded = false;
|
||||
|
||||
const loadMoreItems = async () => {
|
||||
if (allItemsLoaded) return;
|
||||
page += 1;
|
||||
await getItemsPage();
|
||||
};
|
||||
|
||||
const getItemsPage = async () => {
|
||||
itemsLoading = true;
|
||||
let res = await getChatList(localStorage.token, page).catch(() => {
|
||||
return [];
|
||||
});
|
||||
|
||||
if ((res ?? []).length === 0) {
|
||||
allItemsLoaded = true;
|
||||
} else {
|
||||
allItemsLoaded = false;
|
||||
}
|
||||
|
||||
items = [
|
||||
...items,
|
||||
...res
|
||||
.filter((item) => item?.id !== $chatId)
|
||||
.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
type: 'chat',
|
||||
name: item.title,
|
||||
description: dayjs(item.updated_at * 1000).fromNow()
|
||||
};
|
||||
})
|
||||
];
|
||||
|
||||
itemsLoading = false;
|
||||
return res;
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
await getItemsPage();
|
||||
await tick();
|
||||
|
||||
loaded = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if loaded}
|
||||
{#if items.length === 0}
|
||||
<div class="text-center text-xs text-gray-500 py-3">{$i18n.t('No chats found')}</div>
|
||||
{:else}
|
||||
<div class="flex flex-col gap-0.5">
|
||||
{#each items as item, idx}
|
||||
<button
|
||||
class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx ===
|
||||
selectedIdx
|
||||
? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
|
||||
: ''}"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onSelect(item);
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedIdx = idx;
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
if (idx === 0) {
|
||||
selectedIdx = -1;
|
||||
}
|
||||
}}
|
||||
data-selected={idx === selectedIdx}
|
||||
>
|
||||
<div class="text-black dark:text-gray-100 flex items-center gap-1.5">
|
||||
<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
|
||||
<div class="line-clamp-1 flex-1">
|
||||
{decodeString(item?.name)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
{#if !allItemsLoaded}
|
||||
<Loader
|
||||
on:visible={(e) => {
|
||||
if (!itemsLoading) {
|
||||
loadMoreItems();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="w-full flex justify-center py-4 text-xs animate-pulse items-center gap-2">
|
||||
<Spinner className=" size-4" />
|
||||
<div class=" ">{$i18n.t('Loading...')}</div>
|
||||
</div>
|
||||
</Loader>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="py-4.5">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,163 @@
|
||||
<script lang="ts">
|
||||
import { onMount, tick, getContext } from 'svelte';
|
||||
|
||||
import { decodeString } from '$lib/utils';
|
||||
import { knowledge } from '$lib/stores';
|
||||
|
||||
import { getKnowledgeBases } from '$lib/apis/knowledge';
|
||||
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Database from '$lib/components/icons/Database.svelte';
|
||||
import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let onSelect = (e) => {};
|
||||
|
||||
let loaded = false;
|
||||
let items = [];
|
||||
let selectedIdx = 0;
|
||||
|
||||
onMount(async () => {
|
||||
if ($knowledge === null) {
|
||||
await knowledge.set(await getKnowledgeBases(localStorage.token));
|
||||
}
|
||||
|
||||
let legacy_documents = $knowledge
|
||||
.filter((item) => item?.meta?.document)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
type: 'file'
|
||||
}));
|
||||
|
||||
let legacy_collections =
|
||||
legacy_documents.length > 0
|
||||
? [
|
||||
{
|
||||
name: 'All Documents',
|
||||
legacy: true,
|
||||
type: 'collection',
|
||||
description: 'Deprecated (legacy collection), please create a new knowledge base.',
|
||||
title: $i18n.t('All Documents'),
|
||||
collection_names: legacy_documents.map((item) => item.id)
|
||||
},
|
||||
|
||||
...legacy_documents
|
||||
.reduce((a, item) => {
|
||||
return [...new Set([...a, ...(item?.meta?.tags ?? []).map((tag) => tag.name)])];
|
||||
}, [])
|
||||
.map((tag) => ({
|
||||
name: tag,
|
||||
legacy: true,
|
||||
type: 'collection',
|
||||
description: 'Deprecated (legacy collection), please create a new knowledge base.',
|
||||
collection_names: legacy_documents
|
||||
.filter((item) => (item?.meta?.tags ?? []).map((tag) => tag.name).includes(tag))
|
||||
.map((item) => item.id)
|
||||
}))
|
||||
]
|
||||
: [];
|
||||
|
||||
let collections = $knowledge
|
||||
.filter((item) => !item?.meta?.document)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
type: 'collection'
|
||||
}));
|
||||
``;
|
||||
let collection_files =
|
||||
$knowledge.length > 0
|
||||
? [
|
||||
...$knowledge
|
||||
.reduce((a, item) => {
|
||||
return [
|
||||
...new Set([
|
||||
...a,
|
||||
...(item?.files ?? []).map((file) => ({
|
||||
...file,
|
||||
collection: { name: item.name, description: item.description } // DO NOT REMOVE, USED IN FILE DESCRIPTION/ATTACHMENT
|
||||
}))
|
||||
])
|
||||
];
|
||||
}, [])
|
||||
.map((file) => ({
|
||||
...file,
|
||||
name: file?.meta?.name,
|
||||
description: `${file?.collection?.name} - ${file?.collection?.description}`,
|
||||
knowledge: true, // DO NOT REMOVE, USED TO INDICATE KNOWLEDGE BASE FILE
|
||||
type: 'file'
|
||||
}))
|
||||
]
|
||||
: [];
|
||||
|
||||
items = [...collections, ...collection_files, ...legacy_collections, ...legacy_documents].map(
|
||||
(item) => {
|
||||
return {
|
||||
...item,
|
||||
...(item?.legacy || item?.meta?.legacy || item?.meta?.document ? { legacy: true } : {})
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
await tick();
|
||||
|
||||
loaded = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if loaded}
|
||||
<div class="flex flex-col gap-0.5">
|
||||
{#each items as item, idx}
|
||||
<button
|
||||
class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx ===
|
||||
selectedIdx
|
||||
? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
|
||||
: ''}"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
console.log(item);
|
||||
onSelect(item);
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedIdx = idx;
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
if (idx === 0) {
|
||||
selectedIdx = -1;
|
||||
}
|
||||
}}
|
||||
data-selected={idx === selectedIdx}
|
||||
>
|
||||
<div class=" text-black dark:text-gray-100 flex items-center gap-1">
|
||||
<Tooltip
|
||||
content={item?.legacy
|
||||
? $i18n.t('Legacy')
|
||||
: item?.type === 'file'
|
||||
? $i18n.t('File')
|
||||
: item?.type === 'collection'
|
||||
? $i18n.t('Collection')
|
||||
: ''}
|
||||
placement="top"
|
||||
>
|
||||
{#if item?.type === 'collection'}
|
||||
<Database className="size-4" />
|
||||
{:else}
|
||||
<DocumentPage className="size-4" />
|
||||
{/if}
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
|
||||
<div class="line-clamp-1 flex-1">
|
||||
{decodeString(item?.name)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="py-4.5">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,128 @@
|
||||
<script lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
import { onMount, tick, getContext } from 'svelte';
|
||||
|
||||
import { decodeString } from '$lib/utils';
|
||||
import { getNoteList } from '$lib/apis/notes';
|
||||
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import PageEdit from '$lib/components/icons/PageEdit.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Loader from '$lib/components/common/Loader.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let onSelect = (e) => {};
|
||||
|
||||
let loaded = false;
|
||||
|
||||
let items = [];
|
||||
let selectedIdx = 0;
|
||||
|
||||
let page = 1;
|
||||
let itemsLoading = false;
|
||||
let allItemsLoaded = false;
|
||||
|
||||
const loadMoreItems = async () => {
|
||||
if (allItemsLoaded) return;
|
||||
page += 1;
|
||||
await getItemsPage();
|
||||
};
|
||||
|
||||
const getItemsPage = async () => {
|
||||
itemsLoading = true;
|
||||
let res = await getNoteList(localStorage.token, page).catch(() => {
|
||||
return [];
|
||||
});
|
||||
|
||||
if ((res ?? []).length === 0) {
|
||||
allItemsLoaded = true;
|
||||
} else {
|
||||
allItemsLoaded = false;
|
||||
}
|
||||
|
||||
items = [
|
||||
...items,
|
||||
...res.map((note) => {
|
||||
return {
|
||||
...note,
|
||||
type: 'note',
|
||||
name: note.title,
|
||||
description: dayjs(note.updated_at / 1000000).fromNow()
|
||||
};
|
||||
})
|
||||
];
|
||||
|
||||
itemsLoading = false;
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
await getItemsPage();
|
||||
await tick();
|
||||
|
||||
loaded = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if loaded}
|
||||
{#if items.length === 0}
|
||||
<div class="text-center text-xs text-gray-500 py-3">{$i18n.t('No notes found')}</div>
|
||||
{:else}
|
||||
<div class="flex flex-col gap-0.5">
|
||||
{#each items as item, idx}
|
||||
<button
|
||||
class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx ===
|
||||
selectedIdx
|
||||
? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
|
||||
: ''}"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onSelect(item);
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedIdx = idx;
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
if (idx === 0) {
|
||||
selectedIdx = -1;
|
||||
}
|
||||
}}
|
||||
data-selected={idx === selectedIdx}
|
||||
>
|
||||
<div class="text-black dark:text-gray-100 flex items-center gap-1.5">
|
||||
<Tooltip content={$i18n.t('Note')} placement="top">
|
||||
<PageEdit className="size-4" />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
|
||||
<div class="line-clamp-1 flex-1">
|
||||
{decodeString(item?.name)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
{#if !allItemsLoaded}
|
||||
<Loader
|
||||
on:visible={(e) => {
|
||||
if (!itemsLoading) {
|
||||
loadMoreItems();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="w-full flex justify-center py-4 text-xs animate-pulse items-center gap-2">
|
||||
<Spinner className=" size-4" />
|
||||
<div class=" ">{$i18n.t('Loading...')}</div>
|
||||
</div>
|
||||
</Loader>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="py-4.5">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
@@ -84,8 +84,8 @@
|
||||
<div class=" self-center text-xs font-medium">
|
||||
{variable}
|
||||
|
||||
{#if variables[variable]?.required ?? true}
|
||||
<span class=" text-gray-500">*required</span>
|
||||
{#if variables[variable]?.required ?? false}
|
||||
<span class=" text-gray-500">*{$i18n.t('required')}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,7 +134,7 @@
|
||||
placeholder={$i18n.t('Enter value (true/false)')}
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
/>
|
||||
</div>
|
||||
{:else if variables[variable]?.type === 'color'}
|
||||
@@ -159,7 +159,7 @@
|
||||
placeholder={$i18n.t('Enter hex color (e.g. #FF0000)')}
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
/>
|
||||
</div>
|
||||
{:else if variables[variable]?.type === 'date'}
|
||||
@@ -170,7 +170,7 @@
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
id="input-variable-{idx}"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
{...variableAttributes}
|
||||
/>
|
||||
{:else if variables[variable]?.type === 'datetime-local'}
|
||||
@@ -181,7 +181,7 @@
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
id="input-variable-{idx}"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
{...variableAttributes}
|
||||
/>
|
||||
{:else if variables[variable]?.type === 'email'}
|
||||
@@ -192,7 +192,7 @@
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
id="input-variable-{idx}"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
{...variableAttributes}
|
||||
/>
|
||||
{:else if variables[variable]?.type === 'month'}
|
||||
@@ -203,7 +203,7 @@
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
id="input-variable-{idx}"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
{...variableAttributes}
|
||||
/>
|
||||
{:else if variables[variable]?.type === 'number'}
|
||||
@@ -214,7 +214,7 @@
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
id="input-variable-{idx}"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
{...variableAttributes}
|
||||
/>
|
||||
{:else if variables[variable]?.type === 'range'}
|
||||
@@ -235,7 +235,7 @@
|
||||
placeholder={$i18n.t('Enter value')}
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -256,7 +256,7 @@
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
id="input-variable-{idx}"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
{...variableAttributes}
|
||||
/>
|
||||
{:else if variables[variable]?.type === 'text'}
|
||||
@@ -267,7 +267,7 @@
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
id="input-variable-{idx}"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
{...variableAttributes}
|
||||
/>
|
||||
{:else if variables[variable]?.type === 'time'}
|
||||
@@ -278,7 +278,7 @@
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
id="input-variable-{idx}"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
{...variableAttributes}
|
||||
/>
|
||||
{:else if variables[variable]?.type === 'url'}
|
||||
@@ -289,7 +289,7 @@
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
id="input-variable-{idx}"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
{...variableAttributes}
|
||||
/>
|
||||
{:else if variables[variable]?.type === 'map'}
|
||||
@@ -311,7 +311,7 @@
|
||||
placeholder={$i18n.t('Enter coordinates (e.g. 51.505, -0.09)')}
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -321,7 +321,7 @@
|
||||
bind:value={variableValues[variable]}
|
||||
autocomplete="off"
|
||||
id="input-variable-{idx}"
|
||||
required
|
||||
required={variables[variable]?.required ?? false}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,345 @@
|
||||
<script lang="ts">
|
||||
import { DropdownMenu } from 'bits-ui';
|
||||
import { getContext, onMount, tick } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { flyAndScale } from '$lib/utils/transitions';
|
||||
|
||||
import { config, user, tools as _tools, mobile, settings, toolServers } from '$lib/stores';
|
||||
|
||||
import { getTools } from '$lib/apis/tools';
|
||||
|
||||
import Dropdown from '$lib/components/common/Dropdown.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Wrench from '$lib/components/icons/Wrench.svelte';
|
||||
import Sparkles from '$lib/components/icons/Sparkles.svelte';
|
||||
import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
|
||||
import Photo from '$lib/components/icons/Photo.svelte';
|
||||
import Terminal from '$lib/components/icons/Terminal.svelte';
|
||||
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
|
||||
import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let selectedToolIds: string[] = [];
|
||||
|
||||
export let selectedModels: string[] = [];
|
||||
export let fileUploadCapableModels: string[] = [];
|
||||
|
||||
export let toggleFilters: { id: string; name: string; description?: string; icon?: string }[] =
|
||||
[];
|
||||
export let selectedFilterIds: string[] = [];
|
||||
|
||||
export let showWebSearchButton = false;
|
||||
export let webSearchEnabled = false;
|
||||
export let showImageGenerationButton = false;
|
||||
export let imageGenerationEnabled = false;
|
||||
export let showCodeInterpreterButton = false;
|
||||
export let codeInterpreterEnabled = false;
|
||||
|
||||
export let onClose: Function;
|
||||
|
||||
let show = false;
|
||||
let tab = '';
|
||||
|
||||
let tools = null;
|
||||
|
||||
$: if (show) {
|
||||
init();
|
||||
}
|
||||
|
||||
let fileUploadEnabled = true;
|
||||
$: fileUploadEnabled =
|
||||
fileUploadCapableModels.length === selectedModels.length &&
|
||||
($user?.role === 'admin' || $user?.permissions?.chat?.file_upload);
|
||||
|
||||
const init = async () => {
|
||||
if ($_tools === null) {
|
||||
await _tools.set(await getTools(localStorage.token));
|
||||
}
|
||||
|
||||
if ($_tools) {
|
||||
tools = $_tools.reduce((a, tool, i, arr) => {
|
||||
a[tool.id] = {
|
||||
name: tool.name,
|
||||
description: tool.meta.description,
|
||||
enabled: selectedToolIds.includes(tool.id)
|
||||
};
|
||||
return a;
|
||||
}, {});
|
||||
}
|
||||
|
||||
if ($toolServers) {
|
||||
for (const serverIdx in $toolServers) {
|
||||
const server = $toolServers[serverIdx];
|
||||
if (server.info) {
|
||||
tools[`direct_server:${serverIdx}`] = {
|
||||
name: server?.info?.title ?? server.url,
|
||||
description: server.info.description ?? '',
|
||||
enabled: selectedToolIds.includes(`direct_server:${serverIdx}`)
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
selectedToolIds = selectedToolIds.filter((id) => Object.keys(tools).includes(id));
|
||||
};
|
||||
</script>
|
||||
|
||||
<Dropdown
|
||||
bind:show
|
||||
on:change={(e) => {
|
||||
if (e.detail === false) {
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tooltip content={$i18n.t('Integrations')} placement="top">
|
||||
<slot />
|
||||
</Tooltip>
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-70 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
|
||||
sideOffset={4}
|
||||
alignOffset={-6}
|
||||
side="bottom"
|
||||
align="start"
|
||||
transition={flyAndScale}
|
||||
>
|
||||
{#if tab === ''}
|
||||
<div in:fly={{ x: -20, duration: 150 }}>
|
||||
{#if tools}
|
||||
{#if Object.keys(tools).length > 0}
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50"
|
||||
on:click={() => {
|
||||
tab = 'tools';
|
||||
}}
|
||||
>
|
||||
<Wrench />
|
||||
|
||||
<div class="flex items-center w-full justify-between">
|
||||
<div class=" line-clamp-1">
|
||||
{$i18n.t('Tools')}
|
||||
<span class="ml-0.5 text-gray-500">{Object.keys(tools).length}</span>
|
||||
</div>
|
||||
|
||||
<div class="text-gray-500">
|
||||
<ChevronRight />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="py-4">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if toggleFilters && toggleFilters.length > 0}
|
||||
{#each toggleFilters.sort( (a, b) => a.name.localeCompare( b.name, undefined, { sensitivity: 'base' } ) ) as filter, filterIdx (filter.id)}
|
||||
<Tooltip content={filter?.description} placement="top-start">
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50"
|
||||
on:click={() => {
|
||||
if (selectedFilterIds.includes(filter.id)) {
|
||||
selectedFilterIds = selectedFilterIds.filter((id) => id !== filter.id);
|
||||
} else {
|
||||
selectedFilterIds = [...selectedFilterIds, filter.id];
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="flex-1 truncate">
|
||||
<div class="flex flex-1 gap-2 items-center">
|
||||
<div class="shrink-0">
|
||||
{#if filter?.icon}
|
||||
<div class="size-4 items-center flex justify-center">
|
||||
<img
|
||||
src={filter.icon}
|
||||
class="size-3.5 {filter.icon.includes('svg')
|
||||
? 'dark:invert-[80%]'
|
||||
: ''}"
|
||||
style="fill: currentColor;"
|
||||
alt={filter.name}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<Sparkles className="size-4" strokeWidth="1.75" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class=" truncate">{filter?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" shrink-0">
|
||||
<Switch
|
||||
state={selectedFilterIds.includes(filter.id)}
|
||||
on:change={async (e) => {
|
||||
const state = e.detail;
|
||||
await tick();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if showWebSearchButton}
|
||||
<Tooltip content={$i18n.t('Search the internet')} placement="top-start">
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50"
|
||||
on:click={() => {
|
||||
webSearchEnabled = !webSearchEnabled;
|
||||
}}
|
||||
>
|
||||
<div class="flex-1 truncate">
|
||||
<div class="flex flex-1 gap-2 items-center">
|
||||
<div class="shrink-0">
|
||||
<GlobeAlt />
|
||||
</div>
|
||||
|
||||
<div class=" truncate">{$i18n.t('Web Search')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" shrink-0">
|
||||
<Switch
|
||||
state={webSearchEnabled}
|
||||
on:change={async (e) => {
|
||||
const state = e.detail;
|
||||
await tick();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
{#if showImageGenerationButton}
|
||||
<Tooltip content={$i18n.t('Generate an image')} placement="top-start">
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50"
|
||||
on:click={() => {
|
||||
imageGenerationEnabled = !imageGenerationEnabled;
|
||||
}}
|
||||
>
|
||||
<div class="flex-1 truncate">
|
||||
<div class="flex flex-1 gap-2 items-center">
|
||||
<div class="shrink-0">
|
||||
<Photo className="size-4" strokeWidth="1.5" />
|
||||
</div>
|
||||
|
||||
<div class=" truncate">{$i18n.t('Image')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" shrink-0">
|
||||
<Switch
|
||||
state={imageGenerationEnabled}
|
||||
on:change={async (e) => {
|
||||
const state = e.detail;
|
||||
await tick();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
{#if showCodeInterpreterButton}
|
||||
<Tooltip content={$i18n.t('Execute code for analysis')} placement="top-start">
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50"
|
||||
aria-pressed={codeInterpreterEnabled}
|
||||
aria-label={codeInterpreterEnabled
|
||||
? $i18n.t('Disable Code Interpreter')
|
||||
: $i18n.t('Enable Code Interpreter')}
|
||||
on:click={() => {
|
||||
codeInterpreterEnabled = !codeInterpreterEnabled;
|
||||
}}
|
||||
>
|
||||
<div class="flex-1 truncate">
|
||||
<div class="flex flex-1 gap-2 items-center">
|
||||
<div class="shrink-0">
|
||||
<Terminal className="size-3.5" strokeWidth="1.75" />
|
||||
</div>
|
||||
|
||||
<div class=" truncate">{$i18n.t('Code Interpreter')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" shrink-0">
|
||||
<Switch
|
||||
state={codeInterpreterEnabled}
|
||||
on:change={async (e) => {
|
||||
const state = e.detail;
|
||||
await tick();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if tab === 'tools' && tools}
|
||||
<div in:fly={{ x: 20, duration: 150 }}>
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50"
|
||||
on:click={() => {
|
||||
tab = '';
|
||||
}}
|
||||
>
|
||||
<ChevronLeft />
|
||||
|
||||
<div class="flex items-center w-full justify-between">
|
||||
<div>
|
||||
{$i18n.t('Tools')}
|
||||
<span class="ml-0.5 text-gray-500">{Object.keys(tools).length}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{#each Object.keys(tools) as toolId}
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50"
|
||||
on:click={() => {
|
||||
tools[toolId].enabled = !tools[toolId].enabled;
|
||||
}}
|
||||
>
|
||||
<div class="flex-1 truncate">
|
||||
<div class="flex flex-1 gap-2 items-center">
|
||||
<Tooltip content={tools[toolId]?.name ?? ''} placement="top">
|
||||
<div class="shrink-0">
|
||||
<Wrench />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip content={tools[toolId]?.description ?? ''} placement="top-start">
|
||||
<div class=" truncate">{tools[toolId].name}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" shrink-0">
|
||||
<Switch
|
||||
state={tools[toolId].enabled}
|
||||
on:change={async (e) => {
|
||||
const state = e.detail;
|
||||
await tick();
|
||||
if (state) {
|
||||
selectedToolIds = [...selectedToolIds, toolId];
|
||||
} else {
|
||||
selectedToolIds = selectedToolIds.filter((id) => id !== toolId);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</DropdownMenu.Content>
|
||||
</div>
|
||||
</Dropdown>
|
||||
@@ -454,7 +454,7 @@
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
<div class="pb-12" />
|
||||
<div class="pb-18" />
|
||||
{#if bottomPadding}
|
||||
<div class=" pb-6" />
|
||||
{/if}
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from 'svelte';
|
||||
import CitationsModal from './CitationsModal.svelte';
|
||||
import Collapsible from '$lib/components/common/Collapsible.svelte';
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
|
||||
import { mobile } from '$lib/stores';
|
||||
import CitationModal from './Citations/CitationModal.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -15,12 +11,16 @@
|
||||
let showPercentage = false;
|
||||
let showRelevance = true;
|
||||
|
||||
let citationModal = null;
|
||||
|
||||
let showCitations = false;
|
||||
let showCitationModal = false;
|
||||
|
||||
let selectedCitation: any = null;
|
||||
let isCollapsibleOpen = false;
|
||||
|
||||
export const showSourceModal = (sourceIdx) => {
|
||||
if (citations[sourceIdx]) {
|
||||
console.log('Showing citation modal for:', citations[sourceIdx]);
|
||||
selectedCitation = citations[sourceIdx];
|
||||
showCitationModal = true;
|
||||
}
|
||||
@@ -106,7 +106,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<CitationsModal
|
||||
<CitationModal
|
||||
bind:show={showCitationModal}
|
||||
citation={selectedCitation}
|
||||
{showPercentage}
|
||||
@@ -114,109 +114,60 @@
|
||||
/>
|
||||
|
||||
{#if citations.length > 0}
|
||||
<div class=" py-0.5 -mx-0.5 w-full flex gap-1 items-center flex-wrap">
|
||||
{#if citations.length <= 3}
|
||||
<div class="flex text-xs font-medium flex-wrap">
|
||||
{#each citations as citation, idx}
|
||||
<button
|
||||
id={`source-${id}-${idx + 1}`}
|
||||
class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-white dark:bg-gray-900 rounded-xl max-w-96"
|
||||
on:click={() => {
|
||||
showCitationModal = true;
|
||||
selectedCitation = citation;
|
||||
}}
|
||||
>
|
||||
{#if citations.every((c) => c.distances !== undefined)}
|
||||
<div class="bg-gray-50 dark:bg-gray-800 rounded-full size-4">
|
||||
{idx + 1}
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="flex-1 mx-1 truncate text-black/60 hover:text-black dark:text-white/60 dark:hover:text-white transition"
|
||||
>
|
||||
{decodeString(citation.source.name)}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{@const urlCitations = citations.filter((c) => c?.source?.name?.startsWith('http'))}
|
||||
<div class=" py-1 -mx-0.5 w-full flex gap-1 items-center flex-wrap">
|
||||
<button
|
||||
class="text-xs font-medium text-gray-600 dark:text-gray-300 px-3.5 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition flex items-center gap-1 border border-gray-50 dark:border-gray-850"
|
||||
on:click={() => {
|
||||
showCitations = !showCitations;
|
||||
}}
|
||||
>
|
||||
{#if urlCitations.length > 0}
|
||||
<div class="flex -space-x-1 items-center">
|
||||
{#each urlCitations.slice(0, 3) as citation, idx}
|
||||
<img
|
||||
src="https://www.google.com/s2/favicons?sz=32&domain={citation.source.name}"
|
||||
alt="favicon"
|
||||
class="size-4 rounded-full shrink-0 border border-white dark:border-gray-850 bg-white dark:bg-gray-900"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
{#if citations.length === 1}
|
||||
{$i18n.t('1 Source')}
|
||||
{:else}
|
||||
{$i18n.t('{{COUNT}} Sources', {
|
||||
COUNT: citations.length
|
||||
})}
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<Collapsible
|
||||
id={`collapsible-${id}`}
|
||||
bind:open={isCollapsibleOpen}
|
||||
className="w-full max-w-full "
|
||||
buttonClassName="w-fit max-w-full"
|
||||
>
|
||||
<div
|
||||
class="flex w-full overflow-auto items-center gap-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer"
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showCitations}
|
||||
<div class="py-1.5">
|
||||
<div class="text-xs gap-2 flex flex-col">
|
||||
{#each citations as citation, idx}
|
||||
<button
|
||||
id={`source-${id}-${idx + 1}`}
|
||||
class="no-toggle outline-hidden flex dark:text-gray-300 bg-transparent text-gray-600 rounded-xl gap-1.5 items-center"
|
||||
on:click={() => {
|
||||
showCitationModal = true;
|
||||
selectedCitation = citation;
|
||||
}}
|
||||
>
|
||||
<div class=" font-medium bg-gray-50 dark:bg-gray-850 rounded-md px-1">
|
||||
{idx + 1}
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 flex items-center gap-1 overflow-auto scrollbar-none w-full max-w-full"
|
||||
class="flex-1 truncate hover:text-black dark:text-white/60 dark:hover:text-white transition text-left"
|
||||
>
|
||||
<span class="whitespace-nowrap hidden sm:inline shrink-0"
|
||||
>{$i18n.t('References from')}</span
|
||||
>
|
||||
<div class="flex items-center overflow-auto scrollbar-none w-full max-w-full flex-1">
|
||||
<div class="flex text-xs font-medium items-center">
|
||||
{#each citations.slice(0, $mobile ? 1 : 2) as citation, idx}
|
||||
<button
|
||||
class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
|
||||
on:click={() => {
|
||||
showCitationModal = true;
|
||||
selectedCitation = citation;
|
||||
}}
|
||||
on:pointerup={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{#if citations.every((c) => c.distances !== undefined)}
|
||||
<div class="bg-gray-50 dark:bg-gray-800 rounded-full size-4">
|
||||
{idx + 1}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex-1 mx-1 truncate">
|
||||
{decodeString(citation.source.name)}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 whitespace-nowrap shrink-0">
|
||||
<span class="hidden sm:inline">{$i18n.t('and')}</span>
|
||||
{citations.length - ($mobile ? 1 : 2)}
|
||||
<span>{$i18n.t('more')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
{#if isCollapsibleOpen}
|
||||
<ChevronUp strokeWidth="3.5" className="size-3.5" />
|
||||
{:else}
|
||||
<ChevronDown strokeWidth="3.5" className="size-3.5" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content">
|
||||
<div class="flex text-xs font-medium flex-wrap">
|
||||
{#each citations.slice($mobile ? 1 : 2) as citation, idx}
|
||||
<button
|
||||
class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
|
||||
on:click={() => {
|
||||
showCitationModal = true;
|
||||
selectedCitation = citation;
|
||||
}}
|
||||
>
|
||||
{#if citations.every((c) => c.distances !== undefined)}
|
||||
<div class="bg-gray-50 dark:bg-gray-800 rounded-full size-4">
|
||||
{idx + 3}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex-1 mx-1 truncate">
|
||||
{decodeString(citation.source.name)}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{decodeString(citation.source.name)}
|
||||
</div>
|
||||
</div>
|
||||
</Collapsible>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
+67
-80
@@ -60,9 +60,37 @@
|
||||
|
||||
<Modal size="lg" bind:show>
|
||||
<div>
|
||||
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
|
||||
<div class=" text-lg font-medium self-center capitalize">
|
||||
{$i18n.t('Citation')}
|
||||
<div class=" flex justify-between dark:text-gray-300 px-4.5 pt-3 pb-2">
|
||||
<div class=" text-lg font-medium self-center flex items-center">
|
||||
{#if citation?.source?.name}
|
||||
{@const document = mergedDocuments?.[0]}
|
||||
{#if document?.metadata?.file_id || document.source?.url?.includes('http')}
|
||||
<Tooltip
|
||||
className="w-fit"
|
||||
content={document.source?.url?.includes('http')
|
||||
? $i18n.t('Open link')
|
||||
: $i18n.t('Open file')}
|
||||
placement="top-start"
|
||||
tippyOptions={{ duration: [500, 0] }}
|
||||
>
|
||||
<a
|
||||
class="hover:text-gray-500 dark:hover:text-gray-100 underline grow line-clamp-1"
|
||||
href={document?.metadata?.file_id
|
||||
? `${WEBUI_API_BASE_URL}/files/${document?.metadata?.file_id}/content${document?.metadata?.page !== undefined ? `#page=${document.metadata.page + 1}` : ''}`
|
||||
: document.source?.url?.includes('http')
|
||||
? document.source.url
|
||||
: `#`}
|
||||
target="_blank"
|
||||
>
|
||||
{decodeString(citation?.source?.name)}
|
||||
</a>
|
||||
</Tooltip>
|
||||
{:else}
|
||||
{decodeString(citation?.source?.name)}
|
||||
{/if}
|
||||
{:else}
|
||||
{$i18n.t('Citation')}
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
class="self-center"
|
||||
@@ -74,59 +102,33 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row w-full px-6 pb-5 md:space-x-4">
|
||||
<div class="flex flex-col md:flex-row w-full px-5 pb-5 md:space-x-4">
|
||||
<div
|
||||
class="flex flex-col w-full dark:text-gray-200 overflow-y-scroll max-h-[22rem] scrollbar-hidden"
|
||||
class="flex flex-col w-full dark:text-gray-200 overflow-y-scroll max-h-[22rem] scrollbar-thin gap-1"
|
||||
>
|
||||
{#each mergedDocuments as document, documentIdx}
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="text-sm font-medium dark:text-gray-300">
|
||||
{$i18n.t('Source')}
|
||||
</div>
|
||||
|
||||
{#if document.source?.name}
|
||||
<Tooltip
|
||||
className="w-fit"
|
||||
content={$i18n.t('Open file')}
|
||||
placement="top-start"
|
||||
tippyOptions={{ duration: [500, 0] }}
|
||||
>
|
||||
<div class="text-sm dark:text-gray-400 flex items-center gap-2 w-fit">
|
||||
<a
|
||||
class="hover:text-gray-500 dark:hover:text-gray-100 underline grow"
|
||||
href={document?.metadata?.file_id
|
||||
? `${WEBUI_API_BASE_URL}/files/${document?.metadata?.file_id}/content${document?.metadata?.page !== undefined ? `#page=${document.metadata.page + 1}` : ''}`
|
||||
: document.source?.url?.includes('http')
|
||||
? document.source.url
|
||||
: `#`}
|
||||
target="_blank"
|
||||
>
|
||||
{decodeString(document?.metadata?.name ?? document.source.name)}
|
||||
</a>
|
||||
{#if Number.isInteger(document?.metadata?.page)}
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">
|
||||
({$i18n.t('page')}
|
||||
{document.metadata.page + 1})
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</Tooltip>
|
||||
{#if document.metadata?.parameters}
|
||||
<div class="text-sm font-medium dark:text-gray-300 mt-2 mb-0.5">
|
||||
<div class="flex flex-col w-full gap-2">
|
||||
{#if document.metadata?.parameters}
|
||||
<div>
|
||||
<div class="text-sm font-medium dark:text-gray-300 mb-1">
|
||||
{$i18n.t('Parameters')}
|
||||
</div>
|
||||
|
||||
<Textarea readonly value={JSON.stringify(document.metadata.parameters, null, 2)}
|
||||
></Textarea>
|
||||
{/if}
|
||||
{#if showRelevance}
|
||||
<div class="text-sm font-medium dark:text-gray-300 mt-2">
|
||||
{$i18n.t('Relevance')}
|
||||
</div>
|
||||
{#if document.distance !== undefined}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
<div
|
||||
class=" text-sm font-medium dark:text-gray-300 flex items-center gap-2 w-fit mb-1"
|
||||
>
|
||||
{$i18n.t('Content')}
|
||||
|
||||
{#if showRelevance && document.distance !== undefined}
|
||||
<Tooltip
|
||||
className="w-fit"
|
||||
content={$i18n.t('Semantic distance to query')}
|
||||
content={$i18n.t('Relevance')}
|
||||
placement="top-start"
|
||||
tippyOptions={{ duration: [500, 0] }}
|
||||
>
|
||||
@@ -141,12 +143,6 @@
|
||||
{percentage.toFixed(2)}%
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{#if typeof document?.distance === 'number'}
|
||||
<span class="text-gray-500 dark:text-gray-500">
|
||||
({(document?.distance ?? 0).toFixed(4)})
|
||||
</span>
|
||||
{/if}
|
||||
{:else if typeof document?.distance === 'number'}
|
||||
<span class="text-gray-500 dark:text-gray-500">
|
||||
({(document?.distance ?? 0).toFixed(4)})
|
||||
@@ -154,39 +150,30 @@
|
||||
{/if}
|
||||
</div>
|
||||
</Tooltip>
|
||||
{:else}
|
||||
<div class="text-sm dark:text-gray-400">
|
||||
{$i18n.t('No distance available')}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="text-sm dark:text-gray-400">
|
||||
{$i18n.t('No source available')}
|
||||
|
||||
{#if Number.isInteger(document?.metadata?.page)}
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">
|
||||
({$i18n.t('page')}
|
||||
{document.metadata.page + 1})
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<div class=" text-sm font-medium dark:text-gray-300 mt-2">
|
||||
{$i18n.t('Content')}
|
||||
</div>
|
||||
{#if document.metadata?.html}
|
||||
<iframe
|
||||
class="w-full border-0 h-auto rounded-none"
|
||||
sandbox="allow-scripts allow-forms allow-same-origin"
|
||||
srcdoc={document.document}
|
||||
title={$i18n.t('Content')}
|
||||
></iframe>
|
||||
{:else}
|
||||
<pre class="text-sm dark:text-gray-400 whitespace-pre-line">
|
||||
|
||||
{#if document.metadata?.html}
|
||||
<iframe
|
||||
class="w-full border-0 h-auto rounded-none"
|
||||
sandbox="allow-scripts allow-forms allow-same-origin"
|
||||
srcdoc={document.document}
|
||||
title={$i18n.t('Content')}
|
||||
></iframe>
|
||||
{:else}
|
||||
<pre class="text-sm dark:text-gray-400 whitespace-pre-line">
|
||||
{document.document}
|
||||
</pre>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if documentIdx !== mergedDocuments.length - 1}
|
||||
<hr class="border-gray-100 dark:border-gray-850 my-3" />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script lang="ts">
|
||||
import { getContext, onMount, tick } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import Modal from '$lib/components/common/Modal.svelte';
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import CitationModal from './CitationModal.svelte';
|
||||
|
||||
export let id = '';
|
||||
export let show = false;
|
||||
export let citations = [];
|
||||
export let showPercentage = false;
|
||||
export let showRelevance = true;
|
||||
|
||||
let showCitationModal = false;
|
||||
let selectedCitation: any = null;
|
||||
|
||||
export const showCitation = (citation) => {
|
||||
selectedCitation = citation;
|
||||
showCitationModal = true;
|
||||
};
|
||||
|
||||
const decodeString = (str: string) => {
|
||||
try {
|
||||
return decodeURIComponent(str);
|
||||
} catch (e) {
|
||||
return str;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<CitationModal
|
||||
bind:show={showCitationModal}
|
||||
citation={selectedCitation}
|
||||
{showPercentage}
|
||||
{showRelevance}
|
||||
/>
|
||||
|
||||
<Modal size="lg" bind:show>
|
||||
<div>
|
||||
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
|
||||
<div class=" text-lg font-medium self-center capitalize">
|
||||
{$i18n.t('Citations')}
|
||||
</div>
|
||||
<button
|
||||
class="self-center"
|
||||
on:click={() => {
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<XMark className={'size-5'} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row w-full px-6 pb-5 md:space-x-4">
|
||||
<div
|
||||
class="flex flex-col w-full dark:text-gray-200 overflow-y-scroll max-h-[22rem] scrollbar-hidden text-left text-sm gap-2"
|
||||
>
|
||||
{#each citations as citation, idx}
|
||||
<button
|
||||
id={`source-${id}-${idx + 1}`}
|
||||
class="no-toggle outline-hidden flex dark:text-gray-300 bg-white dark:bg-gray-900 rounded-xl gap-1.5 items-center"
|
||||
on:click={() => {
|
||||
showCitationModal = true;
|
||||
selectedCitation = citation;
|
||||
}}
|
||||
>
|
||||
<div class=" font-medium">
|
||||
{idx + 1}.
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 truncate text-black/60 hover:text-black dark:text-white/60 dark:hover:text-white transition text-left"
|
||||
>
|
||||
{decodeString(citation.source.name)}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
@@ -1,17 +1,12 @@
|
||||
<script lang="ts">
|
||||
import hljs from 'highlight.js';
|
||||
|
||||
import mermaid from 'mermaid';
|
||||
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
import { getContext, onMount, tick, onDestroy } from 'svelte';
|
||||
import { copyToClipboard } from '$lib/utils';
|
||||
import { copyToClipboard, renderMermaidDiagram } from '$lib/utils';
|
||||
|
||||
import 'highlight.js/styles/github-dark.min.css';
|
||||
|
||||
import PyodideWorker from '$lib/workers/pyodide.worker?worker';
|
||||
import CodeEditor from '$lib/components/common/CodeEditor.svelte';
|
||||
import SvgPanZoom from '$lib/components/common/SVGPanZoom.svelte';
|
||||
import { config } from '$lib/stores';
|
||||
import { executeCode } from '$lib/apis/utils';
|
||||
@@ -40,7 +35,7 @@
|
||||
export let code = '';
|
||||
export let attributes = {};
|
||||
|
||||
export let className = 'my-2';
|
||||
export let className = 'mb-2';
|
||||
export let editorClassName = '';
|
||||
export let stickyButtonsClassName = 'top-0';
|
||||
|
||||
@@ -167,9 +162,9 @@
|
||||
];
|
||||
}
|
||||
|
||||
if (stdout.startsWith(`${line}\n`)) {
|
||||
if (stdout.includes(`${line}\n`)) {
|
||||
stdout = stdout.replace(`${line}\n`, ``);
|
||||
} else if (stdout.startsWith(`${line}`)) {
|
||||
} else if (stdout.includes(`${line}`)) {
|
||||
stdout = stdout.replace(`${line}`, ``);
|
||||
}
|
||||
}
|
||||
@@ -196,9 +191,9 @@
|
||||
];
|
||||
}
|
||||
|
||||
if (result.startsWith(`${line}\n`)) {
|
||||
if (result.includes(`${line}\n`)) {
|
||||
result = result.replace(`${line}\n`, ``);
|
||||
} else if (result.startsWith(`${line}`)) {
|
||||
} else if (result.includes(`${line}`)) {
|
||||
result = result.replace(`${line}`, ``);
|
||||
}
|
||||
}
|
||||
@@ -275,9 +270,9 @@
|
||||
];
|
||||
}
|
||||
|
||||
if (stdout.startsWith(`${line}\n`)) {
|
||||
if (stdout.includes(`${line}\n`)) {
|
||||
stdout = stdout.replace(`${line}\n`, ``);
|
||||
} else if (stdout.startsWith(`${line}`)) {
|
||||
} else if (stdout.includes(`${line}`)) {
|
||||
stdout = stdout.replace(`${line}`, ``);
|
||||
}
|
||||
}
|
||||
@@ -325,27 +320,11 @@
|
||||
};
|
||||
};
|
||||
|
||||
let debounceTimeout;
|
||||
|
||||
const drawMermaidDiagram = async () => {
|
||||
try {
|
||||
if (await mermaid.parse(code)) {
|
||||
const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code);
|
||||
mermaidHtml = svg;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const render = async () => {
|
||||
if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
|
||||
(async () => {
|
||||
await drawMermaidDiagram();
|
||||
})();
|
||||
}
|
||||
|
||||
onUpdate(token);
|
||||
if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
|
||||
mermaidHtml = await renderMermaidDiagram(code);
|
||||
}
|
||||
};
|
||||
|
||||
$: if (token) {
|
||||
@@ -392,20 +371,6 @@
|
||||
if (token) {
|
||||
onUpdate(token);
|
||||
}
|
||||
|
||||
if (document.documentElement.classList.contains('dark')) {
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
theme: 'dark',
|
||||
securityLevel: 'loose'
|
||||
});
|
||||
} else {
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
theme: 'default',
|
||||
securityLevel: 'loose'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
@@ -416,11 +381,14 @@
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="relative {className} flex flex-col rounded-xl pt-2" dir="ltr">
|
||||
<div
|
||||
class="relative {className} flex flex-col rounded-3xl border border-gray-100 dark:border-gray-850 my-0.5"
|
||||
dir="ltr"
|
||||
>
|
||||
{#if lang === 'mermaid'}
|
||||
{#if mermaidHtml}
|
||||
<SvgPanZoom
|
||||
className=" border border-gray-100 dark:border-gray-850 rounded-xl max-h-fit overflow-hidden"
|
||||
className=" rounded-3xl max-h-fit overflow-hidden"
|
||||
svg={mermaidHtml}
|
||||
content={_token.text}
|
||||
/>
|
||||
@@ -428,16 +396,18 @@
|
||||
<pre class="mermaid">{code}</pre>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="text-text-300 absolute pl-4 text-xs font-medium dark:text-white">
|
||||
<div
|
||||
class="absolute left-0 right-0 py-2.5 pr-3 text-text-300 pl-4.5 text-xs font-medium dark:text-white"
|
||||
>
|
||||
{lang}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="sticky {stickyButtonsClassName} mb-1 pr-2.5 flex items-center justify-end z-10 text-xs text-black dark:text-white"
|
||||
class="sticky {stickyButtonsClassName} left-0 right-0 py-2 pr-3 flex items-center justify-end w-full z-10 text-xs text-black dark:text-white"
|
||||
>
|
||||
<div class="flex items-center gap-0.5">
|
||||
<button
|
||||
class="flex gap-1 items-center bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5"
|
||||
class="flex gap-1 items-center bg-none border-none transition rounded-md px-1.5 py-0.5 bg-white dark:bg-black"
|
||||
on:click={collapseCodeBlock}
|
||||
>
|
||||
<div class=" -translate-y-[0.5px]">
|
||||
@@ -449,39 +419,22 @@
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{#if preview && ['html', 'svg'].includes(lang)}
|
||||
<button
|
||||
class="flex gap-1 items-center run-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5"
|
||||
on:click={previewCode}
|
||||
>
|
||||
<div class=" -translate-y-[0.5px]">
|
||||
<Cube className="size-3" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{$i18n.t('Preview')}
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if ($config?.features?.enable_code_execution ?? true) && (lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code)))}
|
||||
{#if executing}
|
||||
<div class="run-code-button bg-none border-none p-1 cursor-not-allowed">
|
||||
<div
|
||||
class="run-code-button bg-none border-none p-0.5 cursor-not-allowed bg-white dark:bg-black"
|
||||
>
|
||||
{$i18n.t('Running')}
|
||||
</div>
|
||||
{:else if run}
|
||||
<button
|
||||
class="flex gap-1 items-center run-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5"
|
||||
class="flex gap-1 items-center run-code-button bg-none border-none transition rounded-md px-1.5 py-0.5 bg-white dark:bg-black"
|
||||
on:click={async () => {
|
||||
code = _code;
|
||||
await tick();
|
||||
executePython(code);
|
||||
}}
|
||||
>
|
||||
<div class=" -translate-y-[0.5px]">
|
||||
<CommandLine className="size-3" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{$i18n.t('Run')}
|
||||
</div>
|
||||
@@ -491,7 +444,7 @@
|
||||
|
||||
{#if save}
|
||||
<button
|
||||
class="save-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5"
|
||||
class="save-code-button bg-none border-none transition rounded-md px-1.5 py-0.5 bg-white dark:bg-black"
|
||||
on:click={saveCode}
|
||||
>
|
||||
{saved ? $i18n.t('Saved') : $i18n.t('Save')}
|
||||
@@ -499,34 +452,47 @@
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="copy-code-button bg-none border-none bg-gray-50 dark:bg-black transition rounded-md px-1.5 py-0.5"
|
||||
class="copy-code-button bg-none border-none transition rounded-md px-1.5 py-0.5 bg-white dark:bg-black"
|
||||
on:click={copyCode}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button
|
||||
>
|
||||
|
||||
{#if preview && ['html', 'svg'].includes(lang)}
|
||||
<button
|
||||
class="flex gap-1 items-center run-code-button bg-none border-none transition rounded-md px-1.5 py-0.5 bg-white dark:bg-black"
|
||||
on:click={previewCode}
|
||||
>
|
||||
<div>
|
||||
{$i18n.t('Preview')}
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="language-{lang} rounded-t-xl -mt-8 {editorClassName
|
||||
class="language-{lang} rounded-t-3xl -mt-9 {editorClassName
|
||||
? editorClassName
|
||||
: executing || stdout || stderr || result
|
||||
? ''
|
||||
: 'rounded-b-xl'} overflow-hidden"
|
||||
: 'rounded-b-3xl'} overflow-hidden"
|
||||
>
|
||||
<div class=" pt-8 bg-gray-50 dark:bg-black"></div>
|
||||
<div class=" pt-8 bg-white dark:bg-black"></div>
|
||||
|
||||
{#if !collapsed}
|
||||
{#if edit}
|
||||
<CodeEditor
|
||||
value={code}
|
||||
{id}
|
||||
{lang}
|
||||
onSave={() => {
|
||||
saveCode();
|
||||
}}
|
||||
onChange={(value) => {
|
||||
_code = value;
|
||||
}}
|
||||
/>
|
||||
{#await import('$lib/components/common/CodeEditor.svelte') then { default: CodeEditor }}
|
||||
<CodeEditor
|
||||
value={code}
|
||||
{id}
|
||||
{lang}
|
||||
onSave={() => {
|
||||
saveCode();
|
||||
}}
|
||||
onChange={(value) => {
|
||||
_code = value;
|
||||
}}
|
||||
/>
|
||||
{/await}
|
||||
{:else}
|
||||
<pre
|
||||
class=" hljs p-4 px-5 overflow-x-auto"
|
||||
@@ -542,7 +508,7 @@
|
||||
{/if}
|
||||
{:else}
|
||||
<div
|
||||
class="bg-gray-50 dark:bg-black dark:text-white rounded-b-xl! pt-2 pb-2 px-4 flex flex-col gap-2 text-xs"
|
||||
class="bg-white dark:bg-black dark:text-white rounded-b-3xl! pt-0.5 pb-3 px-4 flex flex-col gap-2 text-xs"
|
||||
>
|
||||
<span class="text-gray-500 italic">
|
||||
{$i18n.t('{{COUNT}} hidden lines', {
|
||||
@@ -561,7 +527,7 @@
|
||||
|
||||
{#if executing || stdout || stderr || result || files}
|
||||
<div
|
||||
class="bg-gray-50 dark:bg-black dark:text-white rounded-b-xl! py-4 px-4 flex flex-col gap-2"
|
||||
class="bg-gray-50 dark:bg-black dark:text-white rounded-b-3xl! py-4 px-4 flex flex-col gap-2"
|
||||
>
|
||||
{#if executing}
|
||||
<div class=" ">
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
import markedExtension from '$lib/utils/marked/extension';
|
||||
import markedKatexExtension from '$lib/utils/marked/katex-extension';
|
||||
import { mentionExtension } from '$lib/utils/marked/mention-extension';
|
||||
|
||||
import MarkdownTokens from './Markdown/MarkdownTokens.svelte';
|
||||
|
||||
@@ -37,6 +38,9 @@
|
||||
|
||||
marked.use(markedKatexExtension(options));
|
||||
marked.use(markedExtension(options));
|
||||
marked.use({
|
||||
extensions: [mentionExtension({ triggerChar: '@' }), mentionExtension({ triggerChar: '#' })]
|
||||
});
|
||||
|
||||
$: (async () => {
|
||||
if (content) {
|
||||
|
||||
@@ -1,10 +1,22 @@
|
||||
<script lang="ts">
|
||||
import katex from 'katex';
|
||||
import 'katex/contrib/mhchem';
|
||||
import 'katex/dist/katex.min.css';
|
||||
import type { renderToString as katexRenderToString } from 'katex';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let content: string;
|
||||
export let displayMode: boolean = false;
|
||||
|
||||
let renderToString: typeof katexRenderToString | null = null;
|
||||
|
||||
onMount(async () => {
|
||||
const [katex] = await Promise.all([
|
||||
import('katex'),
|
||||
import('katex/contrib/mhchem'),
|
||||
import('katex/dist/katex.min.css')
|
||||
]);
|
||||
renderToString = katex.renderToString;
|
||||
});
|
||||
</script>
|
||||
|
||||
{@html katex.renderToString(content, { displayMode, throwOnError: false })}
|
||||
{#if renderToString}
|
||||
{@html renderToString(content, { displayMode, throwOnError: false })}
|
||||
{/if}
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
import HtmlToken from './HTMLToken.svelte';
|
||||
import TextToken from './MarkdownInlineTokens/TextToken.svelte';
|
||||
import CodespanToken from './MarkdownInlineTokens/CodespanToken.svelte';
|
||||
import MentionToken from './MarkdownInlineTokens/MentionToken.svelte';
|
||||
|
||||
export let id: string;
|
||||
export let done = true;
|
||||
@@ -60,6 +61,8 @@
|
||||
frameborder="0"
|
||||
onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"
|
||||
></iframe>
|
||||
{:else if token.type === 'mention'}
|
||||
<MentionToken {token} />
|
||||
{:else if token.type === 'text'}
|
||||
<TextToken {token} {done} />
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
<script lang="ts">
|
||||
import type { Token } from 'marked';
|
||||
import { LinkPreview } from 'bits-ui';
|
||||
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
import { goto } from '$app/navigation';
|
||||
import { channels, models } from '$lib/stores';
|
||||
import UserStatus from '$lib/components/channel/Messages/Message/UserStatus.svelte';
|
||||
import UserStatusLinkPreview from '$lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let token: Token;
|
||||
|
||||
let triggerChar = '';
|
||||
let label = '';
|
||||
|
||||
let idType = null;
|
||||
let id = '';
|
||||
|
||||
$: if (token) {
|
||||
init();
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
const _id = token?.id;
|
||||
// split by : and take first part as idType and second part as id
|
||||
|
||||
const parts = _id?.split(':');
|
||||
if (parts) {
|
||||
idType = parts[0];
|
||||
id = parts.slice(1).join(':'); // in case id contains ':'
|
||||
} else {
|
||||
idType = null;
|
||||
id = _id;
|
||||
}
|
||||
|
||||
label = token?.label ?? id;
|
||||
triggerChar = token?.triggerChar ?? '@';
|
||||
|
||||
if (triggerChar === '#') {
|
||||
if (idType === 'C') {
|
||||
// Channel
|
||||
const channel = $channels.find((c) => c.id === id);
|
||||
if (channel) {
|
||||
label = channel.name;
|
||||
} else {
|
||||
label = $i18n.t('Unknown');
|
||||
}
|
||||
} else if (idType === 'T') {
|
||||
// Thread
|
||||
}
|
||||
} else if (triggerChar === '@') {
|
||||
if (idType === 'U') {
|
||||
// User
|
||||
} else if (idType === 'M') {
|
||||
// Model
|
||||
const model = $models.find((m) => m.id === id);
|
||||
if (model) {
|
||||
label = model.name;
|
||||
} else {
|
||||
label = $i18n.t('Unknown');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<LinkPreview.Root openDelay={0} closeDelay={0}>
|
||||
<LinkPreview.Trigger class=" cursor-pointer no-underline! font-normal! ">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
|
||||
<span
|
||||
class="mention"
|
||||
on:click={async () => {
|
||||
if (triggerChar === '@') {
|
||||
if (idType === 'U') {
|
||||
// Open user profile
|
||||
console.log('Clicked user mention', id);
|
||||
} else if (idType === 'M') {
|
||||
console.log('Clicked model mention', id);
|
||||
await goto(`/?model=${id}`);
|
||||
}
|
||||
} else if (triggerChar === '#') {
|
||||
if (idType === 'C') {
|
||||
// Open channel
|
||||
if ($channels.find((c) => c.id === id)) {
|
||||
await goto(`/channels/${id}`);
|
||||
}
|
||||
} else if (idType === 'T') {
|
||||
// Open thread
|
||||
}
|
||||
} else {
|
||||
// Unknown trigger char, just log
|
||||
console.log('Clicked mention', id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{triggerChar}{label}
|
||||
</span>
|
||||
</LinkPreview.Trigger>
|
||||
|
||||
{#if triggerChar === '@' && idType === 'U'}
|
||||
<UserStatusLinkPreview {id} />
|
||||
{/if}
|
||||
</LinkPreview.Root>
|
||||
@@ -17,7 +17,7 @@
|
||||
import AlertRenderer, { alertComponent } from './AlertRenderer.svelte';
|
||||
import Collapsible from '$lib/components/common/Collapsible.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
|
||||
import Download from '$lib/components/icons/Download.svelte';
|
||||
|
||||
import Source from './Source.svelte';
|
||||
import { settings } from '$lib/stores';
|
||||
@@ -109,7 +109,7 @@
|
||||
{save}
|
||||
{preview}
|
||||
edit={editCodeBlock}
|
||||
stickyButtonsClassName={topPadding ? 'top-8' : 'top-0'}
|
||||
stickyButtonsClassName={topPadding ? 'top-7' : 'top-0'}
|
||||
onSave={(value) => {
|
||||
onSave({
|
||||
raw: token.raw,
|
||||
@@ -124,19 +124,19 @@
|
||||
{token.text}
|
||||
{/if}
|
||||
{:else if token.type === 'table'}
|
||||
<div class="relative w-full group">
|
||||
<div class="scrollbar-hidden relative overflow-x-auto max-w-full rounded-lg">
|
||||
<div class="relative w-full group mb-2">
|
||||
<div class="scrollbar-hidden relative overflow-x-auto max-w-full">
|
||||
<table
|
||||
class=" w-full text-sm text-left text-gray-500 dark:text-gray-400 max-w-full rounded-xl"
|
||||
>
|
||||
<thead
|
||||
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 border-none"
|
||||
class="text-xs text-gray-700 uppercase bg-white dark:bg-gray-900 dark:text-gray-400 border-none"
|
||||
>
|
||||
<tr class="">
|
||||
{#each token.header as header, headerIdx}
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3! py-1.5! cursor-pointer border border-gray-100 dark:border-gray-850"
|
||||
class="px-2.5! py-2! cursor-pointer border-b border-gray-100! dark:border-gray-800!"
|
||||
style={token.align[headerIdx] ? '' : `text-align: ${token.align[headerIdx]}`}
|
||||
>
|
||||
<div class="gap-1.5 text-left">
|
||||
@@ -155,10 +155,14 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each token.rows as row, rowIdx}
|
||||
<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
|
||||
<tr class="bg-white dark:bg-gray-900 text-xs">
|
||||
{#each row ?? [] as cell, cellIdx}
|
||||
<td
|
||||
class="px-3! py-1.5! text-gray-900 dark:text-white w-max border border-gray-100 dark:border-gray-850"
|
||||
class="px-3! py-2! text-gray-900 dark:text-white w-max {token.rows.length -
|
||||
1 ===
|
||||
rowIdx
|
||||
? ''
|
||||
: 'border-b border-gray-50! dark:border-gray-850!'}"
|
||||
style={token.align[cellIdx] ? `text-align: ${token.align[cellIdx]}` : ''}
|
||||
>
|
||||
<div class="break-normal">
|
||||
@@ -186,7 +190,7 @@
|
||||
exportTableToCSVHandler(token, tokenIdx);
|
||||
}}
|
||||
>
|
||||
<ArrowDownTray className=" size-3.5" strokeWidth="1.5" />
|
||||
<Download className=" size-3.5" strokeWidth="1.5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
@@ -21,6 +21,10 @@
|
||||
// Helper function to return only the domain from a URL
|
||||
function getDomain(url: string): string {
|
||||
const domain = url.replace('http://', '').replace('https://', '').split(/[/?#]/)[0];
|
||||
|
||||
if (domain.startsWith('www.')) {
|
||||
return domain.slice(4);
|
||||
}
|
||||
return domain;
|
||||
}
|
||||
|
||||
@@ -33,6 +37,14 @@
|
||||
return title;
|
||||
}
|
||||
|
||||
const getDisplayTitle = (title: string) => {
|
||||
if (!title) return 'N/A';
|
||||
if (title.length > 30) {
|
||||
return title.slice(0, 15) + '...' + title.slice(-10);
|
||||
}
|
||||
return title;
|
||||
};
|
||||
|
||||
$: attributes = extractAttributes(token.text);
|
||||
</script>
|
||||
|
||||
@@ -44,7 +56,11 @@
|
||||
}}
|
||||
>
|
||||
<span class="line-clamp-1">
|
||||
{attributes.title ? formattedTitle(attributes.title) : ''}
|
||||
{getDisplayTitle(
|
||||
decodeURIComponent(attributes.title)
|
||||
? formattedTitle(decodeURIComponent(attributes.title))
|
||||
: ''
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@@ -52,6 +52,7 @@
|
||||
import { fade } from 'svelte/transition';
|
||||
import { flyAndScale } from '$lib/utils/transitions';
|
||||
import RegenerateMenu from './ResponseMessage/RegenerateMenu.svelte';
|
||||
import StatusHistory from './ResponseMessage/StatusHistory.svelte';
|
||||
|
||||
interface MessageType {
|
||||
id: string;
|
||||
@@ -633,7 +634,12 @@
|
||||
: 'invisible group-hover:visible transition text-gray-400'}"
|
||||
>
|
||||
<Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
|
||||
<span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span>
|
||||
<span class="line-clamp-1"
|
||||
>{$i18n.t(formatDate(message.timestamp * 1000), {
|
||||
LOCALIZED_TIME: dayjs(message.timestamp * 1000).format('LT'),
|
||||
LOCALIZED_DATE: dayjs(message.timestamp * 1000).format('L')
|
||||
})}</span
|
||||
>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -642,76 +648,11 @@
|
||||
<div>
|
||||
<div class="chat-{message.role} w-full min-w-full markdown-prose">
|
||||
<div>
|
||||
{#if (message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]).length > 0}
|
||||
{@const status = (
|
||||
message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]
|
||||
).at(-1)}
|
||||
{#if !status?.hidden}
|
||||
<div class="status-description flex items-center gap-2 py-0.5">
|
||||
{#if status?.action === 'web_search' && status?.urls}
|
||||
<WebSearchResults {status}>
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div
|
||||
class="{status?.done === false
|
||||
? 'shimmer'
|
||||
: ''} text-base line-clamp-1 text-wrap"
|
||||
>
|
||||
<!-- $i18n.t("Generating search query") -->
|
||||
<!-- $i18n.t("No search query generated") -->
|
||||
|
||||
<!-- $i18n.t('Searched {{count}} sites') -->
|
||||
{#if status?.description.includes('{{count}}')}
|
||||
{$i18n.t(status?.description, {
|
||||
count: status?.urls.length
|
||||
})}
|
||||
{:else if status?.description === 'No search query generated'}
|
||||
{$i18n.t('No search query generated')}
|
||||
{:else if status?.description === 'Generating search query'}
|
||||
{$i18n.t('Generating search query')}
|
||||
{:else}
|
||||
{status?.description}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</WebSearchResults>
|
||||
{:else if status?.action === 'knowledge_search'}
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div
|
||||
class="{status?.done === false
|
||||
? 'shimmer'
|
||||
: ''} text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap"
|
||||
>
|
||||
{$i18n.t(`Searching Knowledge for "{{searchQuery}}"`, {
|
||||
searchQuery: status.query
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div
|
||||
class="{status?.done === false
|
||||
? 'shimmer'
|
||||
: ''} text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap"
|
||||
>
|
||||
<!-- $i18n.t(`Searching "{{searchQuery}}"`) -->
|
||||
{#if status?.description.includes('{{searchQuery}}')}
|
||||
{$i18n.t(status?.description, {
|
||||
searchQuery: status?.query
|
||||
})}
|
||||
{:else if status?.description === 'No search query generated'}
|
||||
{$i18n.t('No search query generated')}
|
||||
{:else if status?.description === 'Generating search query'}
|
||||
{$i18n.t('Generating search query')}
|
||||
{:else if status?.description === 'Searching the web'}
|
||||
{$i18n.t('Searching the web...')}
|
||||
{:else}
|
||||
{status?.description}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if model?.info?.meta?.capabilities?.status_updates ?? true}
|
||||
<StatusHistory
|
||||
statusHistory={message?.statusHistory}
|
||||
expand={message?.content === ''}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if message?.files && message.files?.filter((f) => f.type === 'image').length > 0}
|
||||
@@ -727,7 +668,7 @@
|
||||
name={file.name}
|
||||
type={file.type}
|
||||
size={file?.size}
|
||||
colorClassName="bg-white dark:bg-gray-850 "
|
||||
small={true}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -764,7 +705,7 @@
|
||||
<div>
|
||||
<button
|
||||
id="save-new-message-button"
|
||||
class=" px-4 py-2 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-100 dark:border-gray-700 text-gray-700 dark:text-gray-200 transition rounded-3xl"
|
||||
class="px-3.5 py-1.5 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-100 dark:border-gray-700 text-gray-700 dark:text-gray-200 transition rounded-3xl"
|
||||
on:click={() => {
|
||||
saveAsCopyHandler();
|
||||
}}
|
||||
@@ -776,7 +717,7 @@
|
||||
<div class="flex space-x-1.5">
|
||||
<button
|
||||
id="close-edit-message-button"
|
||||
class="px-4 py-2 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
|
||||
class="px-3.5 py-1.5 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
|
||||
on:click={() => {
|
||||
cancelEditMessage();
|
||||
}}
|
||||
@@ -786,7 +727,7 @@
|
||||
|
||||
<button
|
||||
id="confirm-edit-message-button"
|
||||
class=" px-4 py-2 bg-gray-900 dark:bg-white hover:bg-gray-850 text-gray-100 dark:text-gray-800 transition rounded-3xl"
|
||||
class="px-3.5 py-1.5 bg-gray-900 dark:bg-white hover:bg-gray-850 text-gray-100 dark:text-gray-800 transition rounded-3xl"
|
||||
on:click={() => {
|
||||
editMessageConfirmHandler();
|
||||
}}
|
||||
@@ -798,7 +739,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div class="w-full flex flex-col relative" id="response-content-container">
|
||||
{#if message.content === '' && !message.error && (message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]).length === 0}
|
||||
{#if message.content === '' && !message.error && ((model?.info?.meta?.capabilities?.status_updates ?? true) ? (message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]).length === 0 || (message?.statusHistory?.at(-1)?.hidden ?? false) : true)}
|
||||
<Skeleton />
|
||||
{:else if message.content && message.error !== true}
|
||||
<!-- always show message contents even if there's an error -->
|
||||
@@ -1339,7 +1280,7 @@
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
{#if $user?.role === 'admin' || ($user?.permissions?.chat?.regenerate_response ?? false)}
|
||||
{#if $user?.role === 'admin' || ($user?.permissions?.chat?.regenerate_response ?? true)}
|
||||
{#if $settings?.regenerateMenu ?? true}
|
||||
<button
|
||||
type="button"
|
||||
@@ -1450,7 +1391,7 @@
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if $user?.role === 'admin' || ($user?.permissions?.chat?.delete_message ?? false)}
|
||||
{#if $user?.role === 'admin' || ($user?.permissions?.chat?.delete_message ?? true)}
|
||||
{#if siblings.length > 1}
|
||||
<Tooltip content={$i18n.t('Delete')} placement="bottom">
|
||||
<button
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import ArrowTurnDownRight from '$lib/components/icons/ArrowTurnDownRight.svelte';
|
||||
import { onMount, tick, getContext } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
@@ -20,12 +19,10 @@
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<Tooltip content={followUp} placement="top-start" className="line-clamp-1">
|
||||
<div
|
||||
class=" mr-2 py-1.5 bg-transparent text-left text-sm flex items-center gap-2 px-1.5 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition cursor-pointer"
|
||||
class=" py-1.5 bg-transparent text-left text-sm flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition cursor-pointer"
|
||||
on:click={() => onClick(followUp)}
|
||||
aria-label={followUp}
|
||||
>
|
||||
<ArrowTurnDownRight className="size-3.5" />
|
||||
|
||||
<div class="line-clamp-1">
|
||||
{followUp}
|
||||
</div>
|
||||
@@ -33,7 +30,7 @@
|
||||
</Tooltip>
|
||||
|
||||
{#if idx < followUps.length - 1}
|
||||
<hr class="border-gray-100 dark:border-gray-850" />
|
||||
<hr class="border-gray-50 dark:border-gray-850" />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-[190px] rounded-xl px-1 py-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
|
||||
class="w-full max-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-850 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
|
||||
sideOffset={-2}
|
||||
side="bottom"
|
||||
align="start"
|
||||
@@ -78,7 +78,7 @@
|
||||
</div>
|
||||
<hr class="border-gray-50 dark:border-gray-800 my-1 mx-2" />
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
on:click={() => {
|
||||
onRegenerate();
|
||||
show = false;
|
||||
@@ -103,7 +103,7 @@
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
on:click={() => {
|
||||
onRegenerate($i18n.t('Add Details'));
|
||||
}}
|
||||
@@ -113,7 +113,7 @@
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg"
|
||||
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
on:click={() => {
|
||||
onRegenerate($i18n.t('More Concise'));
|
||||
}}
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import StatusItem from './StatusHistory/StatusItem.svelte';
|
||||
export let statusHistory = [];
|
||||
export let expand = false;
|
||||
|
||||
let showHistory = true;
|
||||
|
||||
$: if (expand) {
|
||||
showHistory = true;
|
||||
} else {
|
||||
showHistory = false;
|
||||
}
|
||||
|
||||
let history = [];
|
||||
let status = null;
|
||||
|
||||
$: if (history && history.length > 0) {
|
||||
status = history.at(-1);
|
||||
}
|
||||
|
||||
$: if (JSON.stringify(statusHistory) !== JSON.stringify(history)) {
|
||||
history = statusHistory;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if history && history.length > 0}
|
||||
{#if status?.hidden !== true}
|
||||
<div class="text-sm flex flex-col w-full">
|
||||
{#if showHistory}
|
||||
<div class="flex flex-row">
|
||||
{#if history.length > 1}
|
||||
<div class="w-full">
|
||||
{#each history as status, idx}
|
||||
{#if idx !== history.length - 1}
|
||||
<div class="flex items-stretch gap-2 mb-1">
|
||||
<div class=" ">
|
||||
<div class="pt-3 px-1 mb-1.5">
|
||||
<span
|
||||
class="relative flex size-1.5 rounded-full justify-center items-center"
|
||||
>
|
||||
<span
|
||||
class="relative inline-flex size-1.5 rounded-full bg-gray-500 dark:bg-gray-300"
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-[0.5px] ml-[6.5px] h-[calc(100%-14px)] bg-gray-300 dark:bg-gray-700"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<StatusItem {status} done={true} />
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="w-full"
|
||||
on:click={() => {
|
||||
showHistory = !showHistory;
|
||||
}}
|
||||
>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="pt-3 px-1">
|
||||
<span class="relative flex size-1.5 rounded-full justify-center items-center">
|
||||
{#if status?.done === false}
|
||||
<span
|
||||
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-gray-500 dark:bg-gray-300 opacity-75"
|
||||
></span>
|
||||
{/if}
|
||||
<span class="relative inline-flex size-1.5 rounded-full bg-gray-500 dark:bg-gray-300"
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
<StatusItem {status} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -0,0 +1,150 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
import WebSearchResults from '../WebSearchResults.svelte';
|
||||
import Search from '$lib/components/icons/Search.svelte';
|
||||
import { t } from 'i18next';
|
||||
|
||||
export let status = null;
|
||||
export let done = false;
|
||||
</script>
|
||||
|
||||
{#if !status?.hidden}
|
||||
<div class="status-description flex items-center gap-2 py-0.5 w-full text-left">
|
||||
{#if status?.action === 'web_search' && (status?.urls || status?.items)}
|
||||
<WebSearchResults {status}>
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div
|
||||
class="{(done || status?.done) === false
|
||||
? 'shimmer'
|
||||
: ''} text-base line-clamp-1 text-wrap"
|
||||
>
|
||||
<!-- $i18n.t("Generating search query") -->
|
||||
<!-- $i18n.t("No search query generated") -->
|
||||
<!-- $i18n.t('Searched {{count}} sites') -->
|
||||
{#if status?.description?.includes('{{count}}')}
|
||||
{$i18n.t(status?.description, {
|
||||
count: (status?.urls || status?.items).length
|
||||
})}
|
||||
{:else if status?.description === 'No search query generated'}
|
||||
{$i18n.t('No search query generated')}
|
||||
{:else if status?.description === 'Generating search query'}
|
||||
{$i18n.t('Generating search query')}
|
||||
{:else}
|
||||
{status?.description}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</WebSearchResults>
|
||||
{:else if status?.action === 'knowledge_search'}
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div
|
||||
class="{(done || status?.done) === false
|
||||
? 'shimmer'
|
||||
: ''} text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap"
|
||||
>
|
||||
{$i18n.t(`Searching Knowledge for "{{searchQuery}}"`, {
|
||||
searchQuery: status.query
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{:else if status?.action === 'web_search_queries_generated' && status?.queries}
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div
|
||||
class="{(done || status?.done) === false
|
||||
? 'shimmer'
|
||||
: ''} text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap"
|
||||
>
|
||||
{$i18n.t(`Searching`)}
|
||||
</div>
|
||||
|
||||
<div class=" flex gap-1 flex-wrap mt-2">
|
||||
{#each status.queries as query, idx (query)}
|
||||
<div
|
||||
class="bg-gray-50 dark:bg-gray-850 flex rounded-lg py-1 px-2 items-center gap-1 text-xs"
|
||||
>
|
||||
<div>
|
||||
<Search className="size-3" />
|
||||
</div>
|
||||
|
||||
<span class="line-clamp-1">
|
||||
{query}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else if status?.action === 'queries_generated' && status?.queries}
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div
|
||||
class="{(done || status?.done) === false
|
||||
? 'shimmer'
|
||||
: ''} text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap"
|
||||
>
|
||||
{$i18n.t(`Querying`)}
|
||||
</div>
|
||||
|
||||
<div class=" flex gap-1 flex-wrap mt-2">
|
||||
{#each status.queries as query, idx (query)}
|
||||
<div
|
||||
class="bg-gray-50 dark:bg-gray-850 flex rounded-lg py-1 px-2 items-center gap-1 text-xs"
|
||||
>
|
||||
<div>
|
||||
<Search className="size-3" />
|
||||
</div>
|
||||
|
||||
<span class="line-clamp-1">
|
||||
{query}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else if status?.action === 'sources_retrieved' && status?.count !== undefined}
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div
|
||||
class="{(done || status?.done) === false
|
||||
? 'shimmer'
|
||||
: ''} text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap"
|
||||
>
|
||||
{#if status.count === 0}
|
||||
{$i18n.t('No sources found')}
|
||||
{:else if status.count === 1}
|
||||
{$i18n.t('Retrieved 1 source')}
|
||||
{:else}
|
||||
<!-- {$i18n.t('Source')} -->
|
||||
<!-- {$i18n.t('No source available')} -->
|
||||
<!-- {$i18n.t('No distance available')} -->
|
||||
<!-- {$i18n.t('Retrieved {{count}} sources')} -->
|
||||
{$i18n.t('Retrieved {{count}} sources', {
|
||||
count: status.count
|
||||
})}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div
|
||||
class="{(done || status?.done) === false
|
||||
? 'shimmer'
|
||||
: ''} text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap"
|
||||
>
|
||||
<!-- $i18n.t(`Searching "{{searchQuery}}"`) -->
|
||||
{#if status?.description?.includes('{{searchQuery}}')}
|
||||
{$i18n.t(status?.description, {
|
||||
searchQuery: status?.query
|
||||
})}
|
||||
{:else if status?.description === 'No search query generated'}
|
||||
{$i18n.t('No search query generated')}
|
||||
{:else if status?.description === 'Generating search query'}
|
||||
{$i18n.t('Generating search query')}
|
||||
{:else if status?.description === 'Searching the web'}
|
||||
{$i18n.t('Searching the web')}
|
||||
{:else}
|
||||
{status?.description}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -8,27 +8,25 @@
|
||||
let state = false;
|
||||
</script>
|
||||
|
||||
<Collapsible bind:open={state} className="w-full space-y-1">
|
||||
<div
|
||||
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
|
||||
>
|
||||
<Collapsible grow={true} className="w-full" buttonClassName="w-full" bind:open={state}>
|
||||
<div class="flex items-center gap-2 text-gray-500 transition">
|
||||
<slot />
|
||||
|
||||
{#if state}
|
||||
<ChevronUp strokeWidth="3.5" className="size-3.5 " />
|
||||
<ChevronUp strokeWidth="2.5" className="size-3.5 " />
|
||||
{:else}
|
||||
<ChevronDown strokeWidth="3.5" className="size-3.5 " />
|
||||
<ChevronDown strokeWidth="2.5" className="size-3.5 " />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl mb-1.5"
|
||||
class="text-sm border border-gray-50 dark:border-gray-850 rounded-xl my-1.5 p-2 w-full"
|
||||
slot="content"
|
||||
>
|
||||
{#if status?.query}
|
||||
<a
|
||||
href="https://www.google.com/search?q={status.query}"
|
||||
target="_blank"
|
||||
class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
|
||||
class="flex w-full items-center p-1 px-3 group/item justify-between text-gray-800 dark:text-gray-300 font-normal! no-underline!"
|
||||
>
|
||||
<div class="flex gap-2 items-center">
|
||||
<Search />
|
||||
@@ -58,36 +56,86 @@
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#each status.urls as url, urlIdx}
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
|
||||
? ''
|
||||
: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
|
||||
>
|
||||
<div class=" line-clamp-1">
|
||||
{url}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
|
||||
{#if status?.items}
|
||||
{#each status.items as item, itemIdx}
|
||||
<a
|
||||
href={item.link}
|
||||
target="_blank"
|
||||
class="flex w-full items-center p-1 px-3 group/item justify-between text-gray-800 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 rounded-lg font-normal! no-underline! mb-1"
|
||||
>
|
||||
<!-- -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="size-4"
|
||||
<div class=" flex justify-center items-center gap-3">
|
||||
<div class="w-fit">
|
||||
<img
|
||||
src="https://www.google.com/s2/favicons?sz=32&domain={item.link}"
|
||||
alt="favicon"
|
||||
class="size-3.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-full text-sm line-clamp-1">
|
||||
{item?.title ?? item.link}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
<!-- -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="size-4"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
{:else if status?.urls}
|
||||
{#each status.urls as url, urlIdx}
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
class="flex w-full items-center p-1 px-3 group/item justify-between text-gray-800 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 rounded-lg no-underline mb-1"
|
||||
>
|
||||
<div class=" flex justify-center items-center gap-3">
|
||||
<div class="w-fit">
|
||||
<img
|
||||
src="https://www.google.com/s2/favicons?sz=32&domain={url}"
|
||||
alt="favicon"
|
||||
class="size-3.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-full text-sm line-clamp-1">
|
||||
{url}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
|
||||
>
|
||||
<!-- -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="size-4"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</Collapsible>
|
||||
|
||||
@@ -2,14 +2,22 @@
|
||||
export let size = 'md';
|
||||
</script>
|
||||
|
||||
<span class="relative flex {size === 'md' ? 'size-3 my-2' : 'size-2 my-1'} mx-1">
|
||||
<span
|
||||
class="relative flex {size === 'md'
|
||||
? 'size-3 my-2'
|
||||
: size === 'xs'
|
||||
? 'size-1.5 my-1'
|
||||
: 'size-2 my-1'} mx-1"
|
||||
>
|
||||
<span
|
||||
class="absolute inline-flex h-full w-full animate-pulse rounded-full bg-gray-700 dark:bg-gray-200 opacity-75"
|
||||
></span>
|
||||
<span
|
||||
class="relative inline-flex {size === 'md'
|
||||
? 'size-3'
|
||||
: 'size-2'} rounded-full bg-black dark:bg-white animate-size"
|
||||
: size === 'xs'
|
||||
? 'size-1.5'
|
||||
: 'size-2'} rounded-full bg-black dark:bg-white animate-size"
|
||||
></span>
|
||||
</span>
|
||||
|
||||
|
||||
@@ -153,7 +153,16 @@
|
||||
: 'invisible group-hover:visible transition'}"
|
||||
>
|
||||
<Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
|
||||
<span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span>
|
||||
<!-- $i18n.t('Today at {{LOCALIZED_TIME}}') -->
|
||||
<!-- $i18n.t('Yesterday at {{LOCALIZED_TIME}}') -->
|
||||
<!-- $i18n.t('{{LOCALIZED_DATE}} at {{LOCALIZED_TIME}}') -->
|
||||
|
||||
<span class="line-clamp-1"
|
||||
>{$i18n.t(formatDate(message.timestamp * 1000), {
|
||||
LOCALIZED_TIME: dayjs(message.timestamp * 1000).format('LT'),
|
||||
LOCALIZED_DATE: dayjs(message.timestamp * 1000).format('L')
|
||||
})}</span
|
||||
>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -168,7 +177,12 @@
|
||||
: 'invisible group-hover:visible transition text-gray-400'}"
|
||||
>
|
||||
<Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
|
||||
<span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span>
|
||||
<span class="line-clamp-1"
|
||||
>{$i18n.t(formatDate(message.timestamp * 1000), {
|
||||
LOCALIZED_TIME: dayjs(message.timestamp * 1000).format('LT'),
|
||||
LOCALIZED_DATE: dayjs(message.timestamp * 1000).format('L')
|
||||
})}</span
|
||||
>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@@ -189,7 +203,7 @@
|
||||
name={file.name}
|
||||
type={file.type}
|
||||
size={file?.size}
|
||||
colorClassName="bg-white dark:bg-gray-850 "
|
||||
small={true}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -290,7 +304,7 @@
|
||||
<div>
|
||||
<button
|
||||
id="save-edit-message-button"
|
||||
class=" px-4 py-2 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-100 dark:border-gray-700 text-gray-700 dark:text-gray-200 transition rounded-3xl"
|
||||
class="px-3.5 py-1.5 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-100 dark:border-gray-700 text-gray-700 dark:text-gray-200 transition rounded-3xl"
|
||||
on:click={() => {
|
||||
editMessageConfirmHandler(false);
|
||||
}}
|
||||
@@ -302,7 +316,7 @@
|
||||
<div class="flex space-x-1.5">
|
||||
<button
|
||||
id="close-edit-message-button"
|
||||
class="px-4 py-2 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
|
||||
class="px-3.5 py-1.5 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
|
||||
on:click={() => {
|
||||
cancelEditMessage();
|
||||
}}
|
||||
@@ -312,7 +326,7 @@
|
||||
|
||||
<button
|
||||
id="confirm-edit-message-button"
|
||||
class=" px-4 py-2 bg-gray-900 dark:bg-white hover:bg-gray-850 text-gray-100 dark:text-gray-800 transition rounded-3xl"
|
||||
class="px-3.5 py-1.5 bg-gray-900 dark:bg-white hover:bg-gray-850 text-gray-100 dark:text-gray-800 transition rounded-3xl"
|
||||
on:click={() => {
|
||||
editMessageConfirmHandler();
|
||||
}}
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
<button
|
||||
aria-roledescription="model-item"
|
||||
aria-label={item.label}
|
||||
class="flex group/item w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted {index ===
|
||||
class="flex group/item w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl cursor-pointer data-highlighted:bg-muted {index ===
|
||||
selectedModelIdx
|
||||
? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent'
|
||||
: ''}"
|
||||
@@ -64,7 +64,7 @@
|
||||
{#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag}
|
||||
<Tooltip content={tag.name} className="flex-shrink-0">
|
||||
<div
|
||||
class=" text-xs font-bold px-1 rounded-sm uppercase bg-gray-500/20 text-gray-700 dark:text-gray-200"
|
||||
class=" text-xs font-semibold px-1 rounded-sm uppercase bg-gray-500/20 text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
{tag.name}
|
||||
</div>
|
||||
@@ -144,7 +144,7 @@
|
||||
<div slot="tooltip" id="tags-{item.model.id}">
|
||||
{#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag}
|
||||
<Tooltip content={tag.name} className="flex-shrink-0">
|
||||
<div class=" text-xs font-semibold rounded-sm uppercase text-white">
|
||||
<div class=" text-xs font-medium rounded-sm uppercase text-white">
|
||||
{tag.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
|
||||
<DropdownMenu.Content
|
||||
strategy="fixed"
|
||||
class="w-full max-w-[180px] text-sm rounded-xl px-1 py-1.5 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg"
|
||||
class="w-full max-w-[180px] text-sm rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
|
||||
sideOffset={-2}
|
||||
side="bottom"
|
||||
align="end"
|
||||
@@ -53,7 +53,7 @@
|
||||
<DropdownMenu.Item
|
||||
type="button"
|
||||
aria-pressed={($settings?.pinnedModels ?? []).includes(model?.id)}
|
||||
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
|
||||
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
@@ -79,7 +79,7 @@
|
||||
|
||||
<DropdownMenu.Item
|
||||
type="button"
|
||||
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
|
||||
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
@@ -286,9 +286,11 @@
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
const setOllamaVersion = async () => {
|
||||
ollamaVersion = await getOllamaVersion(localStorage.token).catch((error) => false);
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
if (items) {
|
||||
tags = items
|
||||
.filter((item) => !(item.model?.info?.meta?.hidden ?? false))
|
||||
@@ -300,6 +302,10 @@
|
||||
}
|
||||
});
|
||||
|
||||
$: if (show) {
|
||||
setOllamaVersion();
|
||||
}
|
||||
|
||||
const cancelModelPullHandler = async (model: string) => {
|
||||
const { reader, abortController } = $MODEL_DOWNLOAD_POOL[model];
|
||||
if (abortController) {
|
||||
@@ -344,7 +350,7 @@
|
||||
closeFocus={false}
|
||||
>
|
||||
<DropdownMenu.Trigger
|
||||
class="relative w-full font-primary {($settings?.highContrastMode ?? false)
|
||||
class="relative w-full {($settings?.highContrastMode ?? false)
|
||||
? ''
|
||||
: 'outline-hidden focus:outline-hidden'}"
|
||||
aria-label={placeholder}
|
||||
@@ -376,14 +382,15 @@
|
||||
<DropdownMenu.Content
|
||||
class=" z-40 {$mobile
|
||||
? `w-full`
|
||||
: `${className}`} max-w-[calc(100vw-1rem)] justify-start rounded-xl bg-white dark:bg-gray-850 dark:text-white shadow-lg outline-hidden"
|
||||
: `${className}`} max-w-[calc(100vw-1rem)] justify-start rounded-2xl bg-white dark:bg-gray-850 dark:text-white shadow-lg outline-hidden"
|
||||
transition={flyAndScale}
|
||||
side={$mobile ? 'bottom' : 'bottom-start'}
|
||||
sideOffset={3}
|
||||
sideOffset={2}
|
||||
alignOffset={-1}
|
||||
>
|
||||
<slot>
|
||||
{#if searchEnabled}
|
||||
<div class="flex items-center gap-2.5 px-5 mt-3.5 mb-1.5">
|
||||
<div class="flex items-center gap-2.5 px-4.5 mt-3.5 mb-1.5">
|
||||
<Search className="size-4" strokeWidth="2.5" />
|
||||
|
||||
<input
|
||||
@@ -416,10 +423,10 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="px-3">
|
||||
<div class="px-2">
|
||||
{#if tags && items.filter((item) => !(item.model?.info?.meta?.hidden ?? false)).length > 0}
|
||||
<div
|
||||
class=" flex w-full bg-white dark:bg-gray-850 overflow-x-auto scrollbar-none mb-0.5"
|
||||
class=" flex w-full bg-white dark:bg-gray-850 overflow-x-auto scrollbar-none font-[450] mb-0.5"
|
||||
on:wheel={(e) => {
|
||||
if (e.deltaY !== 0) {
|
||||
e.preventDefault();
|
||||
@@ -428,12 +435,12 @@
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="flex gap-1 w-fit text-center text-sm font-medium rounded-full bg-transparent px-1.5 pb-0.5"
|
||||
class="flex gap-1 w-fit text-center text-sm rounded-full bg-transparent px-1.5"
|
||||
bind:this={tagsContainerElement}
|
||||
>
|
||||
{#if items.find((item) => item.model?.connection_type === 'local') || items.find((item) => item.model?.connection_type === 'external') || items.find((item) => item.model?.direct) || tags.length > 0}
|
||||
<button
|
||||
class="min-w-fit outline-none px-1.5 {selectedTag === '' &&
|
||||
class="min-w-fit outline-none px-1.5 py-0.5 {selectedTag === '' &&
|
||||
selectedConnectionType === ''
|
||||
? ''
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
|
||||
@@ -511,7 +518,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="px-3 max-h-64 overflow-y-auto group relative">
|
||||
<div class="px-2.5 max-h-64 overflow-y-auto group relative">
|
||||
{#each filteredItems as item, index}
|
||||
<ModelItem
|
||||
{selectedModelIdx}
|
||||
@@ -543,7 +550,7 @@
|
||||
placement="top-start"
|
||||
>
|
||||
<button
|
||||
class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted"
|
||||
class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl cursor-pointer data-highlighted:bg-muted"
|
||||
on:click={() => {
|
||||
pullModelHandler();
|
||||
}}
|
||||
@@ -557,10 +564,10 @@
|
||||
|
||||
{#each Object.keys($MODEL_DOWNLOAD_POOL) as model}
|
||||
<div
|
||||
class="flex w-full justify-between font-medium select-none rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 rounded-lg cursor-pointer data-highlighted:bg-muted"
|
||||
class="flex w-full justify-between font-medium select-none rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 rounded-xl cursor-pointer data-highlighted:bg-muted"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="-ml-2 mr-2.5 translate-y-0.5">
|
||||
<div class="mr-2.5 translate-y-0.5">
|
||||
<Spinner />
|
||||
</div>
|
||||
|
||||
@@ -617,7 +624,7 @@
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="mb-3"></div>
|
||||
<div class="mb-2.5"></div>
|
||||
|
||||
<div class="hidden w-[42rem]" />
|
||||
<div class="hidden w-[32rem]" />
|
||||
|
||||
@@ -36,18 +36,17 @@
|
||||
|
||||
import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
|
||||
import ChatPlus from '../icons/ChatPlus.svelte';
|
||||
import ChatCheck from '../icons/ChatCheck.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let initNewChat: Function;
|
||||
export let title: string = $WEBUI_NAME;
|
||||
export let shareEnabled: boolean = false;
|
||||
|
||||
export let chat;
|
||||
export let history;
|
||||
export let selectedModels;
|
||||
export let showModelSelector = true;
|
||||
export let showBanners = true;
|
||||
|
||||
export let onSaveTempChat: () => {};
|
||||
export let archiveChatHandler: (id: string) => void;
|
||||
@@ -73,7 +72,7 @@
|
||||
<nav class="sticky top-0 z-30 w-full py-1 -mb-8 flex flex-col items-center drag-region">
|
||||
<div class="flex items-center w-full pl-1.5 pr-1">
|
||||
<div
|
||||
class=" bg-linear-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1]"
|
||||
class=" bg-linear-to-b via-40% to-97% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1]"
|
||||
></div>
|
||||
|
||||
<div class=" flex max-w-full w-full mx-auto px-1.5 md:px-2 pt-0.5 bg-transparent">
|
||||
@@ -153,13 +152,31 @@
|
||||
}}
|
||||
>
|
||||
<div class=" m-auto self-center">
|
||||
<ChatPlus className=" size-4.5" strokeWidth="1.5" />
|
||||
<ChatCheck className=" size-4.5" strokeWidth="1.5" />
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if $mobile && !$temporaryChatEnabled && chat && chat.id}
|
||||
<Tooltip content={$i18n.t('New Chat')}>
|
||||
<button
|
||||
class=" flex {$showSidebar
|
||||
? 'md:hidden'
|
||||
: ''} cursor-pointer px-2 py-2 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
||||
on:click={() => {
|
||||
initNewChat();
|
||||
}}
|
||||
aria-label="New Chat"
|
||||
>
|
||||
<div class=" m-auto self-center">
|
||||
<ChatPlus className=" size-4.5" strokeWidth="1.5" />
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
{#if shareEnabled && chat && (chat.id || $temporaryChatEnabled)}
|
||||
<Menu
|
||||
{chat}
|
||||
@@ -199,24 +216,6 @@
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
{#if $mobile}
|
||||
<Tooltip content={$i18n.t('New Chat')}>
|
||||
<button
|
||||
class=" flex {$showSidebar
|
||||
? 'md:hidden'
|
||||
: ''} cursor-pointer px-2 py-2 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
||||
on:click={() => {
|
||||
initNewChat();
|
||||
}}
|
||||
aria-label="New Chat"
|
||||
>
|
||||
<div class=" m-auto self-center">
|
||||
<PencilSquare className=" size-5" strokeWidth="2" />
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
{#if $user !== undefined && $user !== null}
|
||||
<UserMenu
|
||||
className="max-w-[240px]"
|
||||
@@ -256,7 +255,7 @@
|
||||
|
||||
<div class="absolute top-[100%] left-0 right-0 h-fit">
|
||||
{#if !history.currentId && !$chatId && ($banners.length > 0 || ($config?.license_metadata?.type ?? null) === 'trial' || (($config?.license_metadata?.seats ?? null) !== null && $config?.user_count > $config?.license_metadata?.seats))}
|
||||
<div class=" w-full z-30 mt-5">
|
||||
<div class=" w-full z-30 mt-4">
|
||||
<div class=" flex flex-col gap-1 w-full">
|
||||
{#if ($config?.license_metadata?.type ?? null) === 'trial'}
|
||||
<Banner
|
||||
@@ -282,30 +281,28 @@
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showBanners}
|
||||
{#each $banners.filter((b) => ![...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]'), ...closedBannerIds].includes(b.id)) as banner (banner.id)}
|
||||
<Banner
|
||||
{banner}
|
||||
on:dismiss={(e) => {
|
||||
const bannerId = e.detail;
|
||||
{#each $banners.filter((b) => ![...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]'), ...closedBannerIds].includes(b.id)) as banner (banner.id)}
|
||||
<Banner
|
||||
{banner}
|
||||
on:dismiss={(e) => {
|
||||
const bannerId = e.detail;
|
||||
|
||||
if (banner.dismissible) {
|
||||
localStorage.setItem(
|
||||
'dismissedBannerIds',
|
||||
JSON.stringify(
|
||||
[
|
||||
bannerId,
|
||||
...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
|
||||
].filter((id) => $banners.find((b) => b.id === id))
|
||||
)
|
||||
);
|
||||
} else {
|
||||
closedBannerIds = [...closedBannerIds, bannerId];
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
if (banner.dismissible) {
|
||||
localStorage.setItem(
|
||||
'dismissedBannerIds',
|
||||
JSON.stringify(
|
||||
[
|
||||
bannerId,
|
||||
...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
|
||||
].filter((id) => $banners.find((b) => b.id === id))
|
||||
)
|
||||
);
|
||||
} else {
|
||||
closedBannerIds = [...closedBannerIds, bannerId];
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
className="w-full flex justify-center mb-0.5"
|
||||
placement="top"
|
||||
>
|
||||
<div class="flex items-center gap-2 text-gray-500 font-medium text-base my-2 w-fit">
|
||||
<div class="flex items-center gap-2 text-gray-500 text-base my-2 w-fit">
|
||||
<EyeSlash strokeWidth="2.5" className="size-4" />{$i18n.t('Temporary Chat')}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
let showFolderModal = false;
|
||||
let showDeleteConfirm = false;
|
||||
|
||||
const updateHandler = async ({ name, data }) => {
|
||||
const updateHandler = async ({ name, meta, data }) => {
|
||||
if (name === '') {
|
||||
toast.error($i18n.t('Folder name cannot be empty.'));
|
||||
return;
|
||||
@@ -45,6 +45,7 @@
|
||||
|
||||
const res = await updateFolderById(localStorage.token, folder.id, {
|
||||
name,
|
||||
...(meta ? { meta } : {}),
|
||||
...(data ? { data } : {})
|
||||
}).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
</script>
|
||||
|
||||
<div id="tab-about" class="flex flex-col h-full justify-between space-y-3 text-sm mb-6">
|
||||
<div class=" space-y-3 overflow-y-scroll max-h-[28rem] lg:max-h-full">
|
||||
<div class=" space-y-3 overflow-y-scroll max-h-[28rem] md:max-h-full">
|
||||
<div>
|
||||
<div class=" mb-2.5 text-sm font-medium flex space-x-2 items-center">
|
||||
<div>
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
</script>
|
||||
|
||||
<div id="tab-account" class="flex flex-col h-full justify-between text-sm">
|
||||
<div class=" overflow-y-scroll max-h-[28rem] lg:max-h-full">
|
||||
<div class=" overflow-y-scroll max-h-[28rem] md:max-h-full">
|
||||
<input
|
||||
id="profile-image-input"
|
||||
bind:this={profileImageInputElement}
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
import { getVoices as _getVoices } from '$lib/apis/audio';
|
||||
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import { round } from '@huggingface/transformers';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
const dispatch = createEventDispatcher();
|
||||
@@ -176,7 +175,7 @@
|
||||
dispatch('save');
|
||||
}}
|
||||
>
|
||||
<div class=" space-y-3 overflow-y-scroll max-h-[28rem] lg:max-h-full">
|
||||
<div class=" space-y-3 overflow-y-scroll max-h-[28rem] md:max-h-full">
|
||||
<div>
|
||||
<div class=" mb-1 text-sm font-medium">{$i18n.t('STT Settings')}</div>
|
||||
|
||||
|
||||
@@ -72,12 +72,6 @@
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SensitiveInput
|
||||
inputClassName="bg-transparent w-full"
|
||||
placeholder={$i18n.t('API Key')}
|
||||
bind:value={key}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
+1
-1
@@ -117,7 +117,7 @@
|
||||
<ArchivedChatsModal bind:show={showArchivedChatsModal} onUpdate={handleArchivedChatsChange} />
|
||||
|
||||
<div id="tab-chats" class="flex flex-col h-full justify-between space-y-3 text-sm">
|
||||
<div class=" space-y-2 overflow-y-scroll max-h-[28rem] lg:max-h-full">
|
||||
<div class=" space-y-2 overflow-y-scroll max-h-[28rem] md:max-h-full">
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="chat-import-input"
|
||||
@@ -191,7 +191,7 @@
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col h-full justify-between text-sm" id="tab-general">
|
||||
<div class=" overflow-y-scroll max-h-[28rem] lg:max-h-full">
|
||||
<div class=" overflow-y-scroll max-h-[28rem] md:max-h-full">
|
||||
<div class="">
|
||||
<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Settings')}</div>
|
||||
|
||||
@@ -277,7 +277,7 @@
|
||||
</div>
|
||||
|
||||
{#if $user?.role === 'admin' || ($user?.permissions.chat?.system_prompt ?? true)}
|
||||
<hr class="border-gray-50 dark:border-gray-850 my-3" />
|
||||
<hr class="border-gray-100/50 dark:border-gray-850 my-3" />
|
||||
|
||||
<div>
|
||||
<div class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div>
|
||||
@@ -285,8 +285,8 @@
|
||||
bind:value={system}
|
||||
className={'w-full text-sm outline-hidden resize-vertical' +
|
||||
($settings.highContrastMode
|
||||
? ' p-2.5 border-2 border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-850 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 overflow-y-hidden'
|
||||
: ' bg-white dark:text-gray-300 dark:bg-gray-900')}
|
||||
? ' p-2.5 border-2 border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 overflow-y-hidden'
|
||||
: ' dark:text-gray-300 ')}
|
||||
rows="4"
|
||||
placeholder={$i18n.t('Enter system prompt here')}
|
||||
/>
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import ManageFloatingActionButtonsModal from './Interface/ManageFloatingActionButtonsModal.svelte';
|
||||
import ManageImageCompressionModal from './Interface/ManageImageCompressionModal.svelte';
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
@@ -49,6 +50,7 @@
|
||||
|
||||
let largeTextAsFile = false;
|
||||
|
||||
let insertSuggestionPrompt = false;
|
||||
let keepFollowUpPrompts = false;
|
||||
let insertFollowUpPrompt = false;
|
||||
|
||||
@@ -92,6 +94,7 @@
|
||||
let iframeSandboxAllowForms = false;
|
||||
|
||||
let showManageFloatingActionButtonsModal = false;
|
||||
let showManageImageCompressionModal = false;
|
||||
|
||||
const toggleLandingPageMode = async () => {
|
||||
landingPageMode = landingPageMode === '' ? 'chat' : '';
|
||||
@@ -200,6 +203,7 @@
|
||||
insertPromptAsRichText = $settings?.insertPromptAsRichText ?? false;
|
||||
promptAutocomplete = $settings?.promptAutocomplete ?? false;
|
||||
|
||||
insertSuggestionPrompt = $settings?.insertSuggestionPrompt ?? false;
|
||||
keepFollowUpPrompts = $settings?.keepFollowUpPrompts ?? false;
|
||||
insertFollowUpPrompt = $settings?.insertFollowUpPrompt ?? false;
|
||||
|
||||
@@ -258,6 +262,14 @@
|
||||
}}
|
||||
/>
|
||||
|
||||
<ManageImageCompressionModal
|
||||
bind:show={showManageImageCompressionModal}
|
||||
size={imageCompressionSize}
|
||||
onSave={(size) => {
|
||||
saveSettings({ imageCompressionSize: size });
|
||||
}}
|
||||
/>
|
||||
|
||||
<form
|
||||
id="tab-interface"
|
||||
class="flex flex-col h-full justify-between space-y-3 text-sm"
|
||||
@@ -294,7 +306,7 @@
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class=" space-y-3 overflow-y-scroll max-h-[28rem] lg:max-h-full">
|
||||
<div class=" space-y-3 overflow-y-scroll max-h-[28rem] md:max-h-full">
|
||||
<div>
|
||||
<h1 class=" mb-2 text-sm font-medium">{$i18n.t('UI')}</h1>
|
||||
|
||||
@@ -697,6 +709,25 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class=" py-0.5 flex w-full justify-between">
|
||||
<div id="insert-suggestion-prompt-label" class=" self-center text-xs">
|
||||
{$i18n.t('Insert Suggestion Prompt to Input')}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 p-1">
|
||||
<Switch
|
||||
ariaLabelledbyId="insert-suggestion-prompt-label"
|
||||
tooltip={true}
|
||||
bind:state={insertSuggestionPrompt}
|
||||
on:change={() => {
|
||||
saveSettings({ insertSuggestionPrompt });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class=" py-0.5 flex w-full justify-between">
|
||||
<div id="keep-follow-up-prompts-label" class=" self-center text-xs">
|
||||
@@ -1133,7 +1164,20 @@
|
||||
{$i18n.t('Image Compression')}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 p-1">
|
||||
<div class="flex items-center gap-3 p-1">
|
||||
{#if imageCompression}
|
||||
<button
|
||||
class="text-xs text-gray-700 dark:text-gray-400 underline"
|
||||
type="button"
|
||||
aria-label={$i18n.t('Open Modal To Manage Image Compression')}
|
||||
on:click={() => {
|
||||
showManageImageCompressionModal = true;
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Manage')}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<Switch
|
||||
ariaLabelledbyId="image-compression-label"
|
||||
tooltip={true}
|
||||
@@ -1147,39 +1191,6 @@
|
||||
</div>
|
||||
|
||||
{#if imageCompression}
|
||||
<div>
|
||||
<div class=" py-0.5 flex w-full justify-between text-xs">
|
||||
<div id="image-compression-size-label" class=" self-center text-xs">
|
||||
{$i18n.t('Image Max Compression Size')}
|
||||
</div>
|
||||
|
||||
<div class="p-1">
|
||||
<label class="sr-only" for="image-comp-width"
|
||||
>{$i18n.t('Image Max Compression Size width')}</label
|
||||
>
|
||||
<input
|
||||
bind:value={imageCompressionSize.width}
|
||||
type="number"
|
||||
aria-labelledby="image-comp-width"
|
||||
class="w-20 bg-transparent outline-hidden text-center"
|
||||
min="0"
|
||||
placeholder={$i18n.t('Width')}
|
||||
/>x
|
||||
<label class="sr-only" for="image-comp-height"
|
||||
>{$i18n.t('Image Max Compression Size height')}</label
|
||||
>
|
||||
<input
|
||||
bind:value={imageCompressionSize.height}
|
||||
type="number"
|
||||
aria-labelledby="image-comp-height"
|
||||
class="w-20 bg-transparent outline-hidden text-center"
|
||||
min="0"
|
||||
placeholder={$i18n.t('Height')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class=" py-0.5 flex w-full justify-between">
|
||||
<div id="image-compression-in-channels-label" class=" self-center text-xs">
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { getContext, onMount } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import Modal from '$lib/components/common/Modal.svelte';
|
||||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
import Minus from '$lib/components/icons/Minus.svelte';
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import Textarea from '$lib/components/common/Textarea.svelte';
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
|
||||
export let show = false;
|
||||
export let size = null;
|
||||
export let onSave = () => {};
|
||||
|
||||
const submitHandler = async () => {
|
||||
onSave(size);
|
||||
show = false;
|
||||
};
|
||||
|
||||
onMount(() => {});
|
||||
</script>
|
||||
|
||||
<Modal size="sm" bind:show>
|
||||
<div>
|
||||
<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-1.5">
|
||||
<h1 class="text-lg font-medium self-center font-primary">
|
||||
{$i18n.t('Manage')}
|
||||
</h1>
|
||||
<button
|
||||
class="self-center"
|
||||
aria-label={$i18n.t('Close modal')}
|
||||
on:click={() => {
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<XMark className={'size-5'} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 dark:text-gray-200">
|
||||
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
|
||||
<form
|
||||
class="flex flex-col w-full px-1"
|
||||
on:submit={(e) => {
|
||||
e.preventDefault();
|
||||
submitHandler();
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div class=" py-0.5 flex flex-col w-full text-sm">
|
||||
<div id="image-compression-size-label" class=" text-xs mb-2">
|
||||
{$i18n.t('Image Max Compression Size')}
|
||||
</div>
|
||||
|
||||
<div class="p-1 flex-1 flex gap-2">
|
||||
<div class=" flex-1">
|
||||
<label class="sr-only" for="image-comp-width"
|
||||
>{$i18n.t('Image Max Compression Size width')}</label
|
||||
>
|
||||
<input
|
||||
bind:value={size.width}
|
||||
type="number"
|
||||
aria-labelledby="image-comp-width"
|
||||
class="w-full bg-transparent outline-hidden text-center"
|
||||
min="0"
|
||||
placeholder={$i18n.t('Width')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="self-center text-gray-500 dark:text-gray-400">
|
||||
<XMark />
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<label class="sr-only" for="image-comp-height"
|
||||
>{$i18n.t('Image Max Compression Size height')}</label
|
||||
>
|
||||
<input
|
||||
bind:value={size.height}
|
||||
type="number"
|
||||
aria-labelledby="image-comp-height"
|
||||
class="w-full bg-transparent outline-hidden text-center"
|
||||
min="0"
|
||||
placeholder={$i18n.t('Height')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end text-sm font-medium">
|
||||
<button
|
||||
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
|
||||
type="submit"
|
||||
>
|
||||
{$i18n.t('Save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
@@ -30,7 +30,7 @@
|
||||
dispatch('save');
|
||||
}}
|
||||
>
|
||||
<div class="py-1 overflow-y-scroll max-h-[28rem] lg:max-h-full">
|
||||
<div class="py-1 overflow-y-scroll max-h-[28rem] md:max-h-full">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<Tooltip
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
|
||||
<div class="flex justify-end pt-1 text-sm font-medium">
|
||||
<button
|
||||
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-3xl flex flex-row space-x-1 items-center {loading
|
||||
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full {loading
|
||||
? ' cursor-not-allowed'
|
||||
: ''}"
|
||||
type="submit"
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
|
||||
<div class="flex justify-end pt-1 text-sm font-medium">
|
||||
<button
|
||||
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-3xl flex flex-row space-x-1 items-center {loading
|
||||
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full {loading
|
||||
? ' cursor-not-allowed'
|
||||
: ''}"
|
||||
type="submit"
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
import Connection from './Tools/Connection.svelte';
|
||||
|
||||
import AddServerModal from '$lib/components/AddServerModal.svelte';
|
||||
import AddToolServerModal from '$lib/components/AddToolServerModal.svelte';
|
||||
|
||||
export let saveSettings: Function;
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<AddServerModal bind:show={showConnectionModal} onSubmit={addConnectionHandler} direct />
|
||||
<AddToolServerModal bind:show={showConnectionModal} onSubmit={addConnectionHandler} direct />
|
||||
|
||||
<form
|
||||
id="tab-tools"
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user