ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-11 20:05:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-09-15 14:28:16 -05:00
parent 5434172e88
commit 596be451ec
27 changed files with 170 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/admin/Evaluations/FeedbackMenu.svelte
View file

@ -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>

4
src/lib/components/admin/Evaluations/Feedbacks.svelte
View file

@ -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';
@ -187,7 +187,7 @@
exportHandler();
}}
>
<ArrowDownTray className="size-3" />
<Download className="size-3" />
</button>
</Tooltip>
</div>

2
src/lib/components/admin/Functions.svelte
View file

@ -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';

2
src/lib/components/admin/Functions/AddFunctionMenu.svelte
View file

@ -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';

8
src/lib/components/admin/Functions/FunctionMenu.svelte
View file

@ -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';
@ -63,7 +63,7 @@
</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
@ -117,12 +117,12 @@
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-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"

4
src/lib/components/admin/Settings/Connections/OllamaConnection.svelte
View file

@ -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 = () => {};
@ -84,7 +84,7 @@
}}
type="button"
>
<ArrowDownTray />
<Download />
</button>
</Tooltip>

2
src/lib/components/admin/Settings/Database.svelte
View file

@ -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">

4
src/lib/components/admin/Settings/Models.svelte
View file

@ -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>

4
src/lib/components/admin/Settings/Models/ModelMenu.svelte
View file

@ -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';
@ -120,7 +120,7 @@
exportHandler();
}}
>
<ArrowDownTray />
<Download />
<div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item>

4
src/lib/components/chat/Artifacts.svelte
View file

@ -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;
@ -285,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>

4
src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
View file

@ -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';
@ -186,7 +186,7 @@
exportTableToCSVHandler(token, tokenIdx);
}}
>
<ArrowDownTray className=" size-3.5" strokeWidth="1.5" />
<Download className=" size-3.5" strokeWidth="1.5" />
</button>
</Tooltip>
</div>

4
src/lib/components/common/SVGPanZoom.svelte
View file

@ -16,7 +16,7 @@
import Tooltip from './Tooltip.svelte';
import Clipboard from '../icons/Clipboard.svelte';
import Reset from '../icons/Reset.svelte';
import ArrowDownTray from '../icons/ArrowDownTray.svelte';
import Download from '../icons/Download.svelte';
export let className = '';
export let svg = '';
@ -62,7 +62,7 @@
downloadAsSVG();
}}
>
<ArrowDownTray className=" size-4" />
<Download className=" size-4" />
</button>
</Tooltip>

2
src/lib/components/icons/ArchiveBox.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
export let className = 'size-3.5';
export let className = 'size-4';
export let strokeWidth = '2.5';
</script>

9
src/lib/components/icons/ArrowDownTray.svelte → src/lib/components/icons/Download.svelte
View file

@ -10,10 +10,9 @@
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
>
<path
><path d="M6 20L18 20" stroke-linecap="round" stroke-linejoin="round"></path><path
d="M12 4V16M12 16L15.5 12.5M12 16L8.5 12.5"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
/>
</svg>
></path></svg
>

33
src/lib/components/icons/Link.svelte
View file

@ -1,17 +1,22 @@
<script lang="ts">
export let className = 'w-4 h-4';
export let className = 'size-4';
export let strokeWidth = '1.5';
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class={className}>
<path
fill-rule="evenodd"
d="M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
aria-hidden="true"
/>
<path
fill-rule="evenodd"
d="M7.086 9.975a.75.75 0 0 1-1.06 0 3.5 3.5 0 0 1 0-4.95l2-2a3.5 3.5 0 0 1 5.396 4.402.75.75 0 0 1-1.251-.827 2 2 0 0 0-3.085-2.514l-2 2a2 2 0 0 0 0 2.828.75.75 0 0 1 0 1.06Z"
clip-rule="evenodd"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
><path
d="M14 11.9976C14 9.5059 11.683 7 8.85714 7C8.52241 7 7.41904 7.00001 7.14286 7.00001C4.30254 7.00001 2 9.23752 2 11.9976C2 14.376 3.70973 16.3664 6 16.8714C6.36756 16.9525 6.75006 16.9952 7.14286 16.9952"
stroke-linecap="round"
stroke-linejoin="round"
></path><path
d="M10 11.9976C10 14.4893 12.317 16.9952 15.1429 16.9952C15.4776 16.9952 16.581 16.9952 16.8571 16.9952C19.6975 16.9952 22 14.7577 22 11.9976C22 9.6192 20.2903 7.62884 18 7.12383C17.6324 7.04278 17.2499 6.99999 16.8571 6.99999"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>

28
src/lib/components/icons/Share.svelte
View file

@ -1,11 +1,23 @@
<script lang="ts">
export let className = 'w-4 h-4';
export let className = 'size-4';
export let strokeWidth = '1.5';
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class={className}>
<path
fill-rule="evenodd"
d="M15.75 4.5a3 3 0 1 1 .825 2.066l-8.421 4.679a3.002 3.002 0 0 1 0 1.51l8.421 4.679a3 3 0 1 1-.729 1.31l-8.421-4.678a3 3 0 1 1 0-4.132l8.421-4.679a3 3 0 0 1-.096-.755Z"
clip-rule="evenodd"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
aria-hidden="true"
class={className}
><path
d="M20 13V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V13"
stroke-linecap="round"
stroke-linejoin="round"
></path><path
d="M12 15V3M12 3L8.5 6.5M12 3L15.5 6.5"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>

98
src/lib/components/layout/Navbar/Menu.svelte
View file

@ -36,6 +36,7 @@
import Share from '$lib/components/icons/Share.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import Messages from '$lib/components/chat/Messages.svelte';
import Download from '$lib/components/icons/Download.svelte';
const i18n = getContext('i18n');
@ -364,64 +365,11 @@
</DropdownMenu.Item>
{/if}
{#if chat?.id}
<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 rounded-lg select-none w-full"
>
<Folder strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Move')}</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="w-full rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
transition={flyAndScale}
sideOffset={8}
>
{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
<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 rounded-lg"
on:click={() => {
moveChatHandler(chat?.id, folder?.id);
}}
>
<Folder strokeWidth="1.5" />
<div class="flex items-center">{folder?.name ?? 'Folder'}</div>
</DropdownMenu.Item>
{/each}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
{/if}
<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 rounded-lg"
on:click={() => {
archiveChatHandler();
}}
>
<ArchiveBox className="size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Archive')}</div>
</DropdownMenu.Item>
<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 rounded-lg select-none w-full"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
/>
</svg>
<Download strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger>
@ -477,6 +425,48 @@
<div class="flex items-center">{$i18n.t('Copy')}</div>
</DropdownMenu.Item>
<hr class="border-gray-50 dark:border-gray-800 my-1" />
{#if chat?.id}
<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 rounded-lg select-none w-full"
>
<Folder strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Move')}</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="w-full rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
transition={flyAndScale}
sideOffset={8}
>
{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
<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 rounded-lg"
on:click={() => {
moveChatHandler(chat?.id, folder?.id);
}}
>
<Folder strokeWidth="1.5" />
<div class="flex items-center">{folder?.name ?? 'Folder'}</div>
</DropdownMenu.Item>
{/each}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
{/if}
<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 rounded-lg"
on:click={() => {
archiveChatHandler();
}}
>
<ArchiveBox className="size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Archive')}</div>
</DropdownMenu.Item>
{#if !$temporaryChatEnabled}
<hr class="border-gray-50 dark:border-gray-800 my-1" />

2
src/lib/components/layout/SearchModal.svelte
View file

@ -251,7 +251,7 @@
/>
</div>
<!-- <hr class="border-gray-100 dark:border-gray-850 my-1" /> -->
<!-- <hr class="border-gray-50 dark:border-gray-850 my-1" /> -->
<div class="flex px-3 pb-1">
<div

22
src/lib/components/layout/Sidebar/ChatMenu.svelte
View file

@ -29,7 +29,7 @@
import { chats, folders, settings, theme, user } from '$lib/stores';
import { createMessagesList } from '$lib/utils';
import { downloadChatAsPDF } from '$lib/apis/utils';
import Download from '$lib/components/icons/ArrowDownTray.svelte';
import Download from '$lib/components/icons/Download.svelte';
import Folder from '$lib/components/icons/Folder.svelte';
const i18n = getContext('i18n');
@ -191,6 +191,16 @@
{/if}
</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 rounded-xl"
on:click={() => {
cloneChatHandler();
}}
>
<DocumentDuplicate strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Clone')}</div>
</DropdownMenu.Item>
{#if chatId}
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger
@ -221,16 +231,6 @@
</DropdownMenu.Sub>
{/if}
<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 rounded-xl"
on:click={() => {
cloneChatHandler();
}}
>
<DocumentDuplicate strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Clone')}</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 rounded-xl"
on:click={() => {

16
src/lib/components/layout/Sidebar/Folders/FolderMenu.svelte
View file

@ -10,7 +10,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';
export let align: 'start' | 'end' = 'start';
export let onEdit = () => {};
@ -34,40 +34,40 @@
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[170px] rounded-lg px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
class="w-full max-w-[170px] 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"
sideOffset={-2}
side="bottom"
{align}
transition={flyAndScale}
>
<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 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-xl"
on:click={() => {
onEdit();
}}
>
<Pencil strokeWidth="2" />
<Pencil />
<div class="flex items-center">{$i18n.t('Edit')}</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 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-xl"
on:click={() => {
onExport();
}}
>
<Download strokeWidth="2" />
<Download />
<div class="flex items-center">{$i18n.t('Export')}</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 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-xl"
on:click={() => {
onDelete();
}}
>
<GarbageBin strokeWidth="2" />
<GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>

22
src/lib/components/notes/Notes/NoteMenu.svelte
View file

@ -9,7 +9,7 @@
import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import Download from '$lib/components/icons/ArrowDownTray.svelte';
import Download from '$lib/components/icons/Download.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import Share from '$lib/components/icons/Share.svelte';
@ -41,7 +41,7 @@
<slot name="content">
<DropdownMenu.Content
class="w-full {className} 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 {className} text-sm 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"
sideOffset={6}
side="bottom"
align="end"
@ -49,7 +49,7 @@
>
<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 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-xl"
>
<Download strokeWidth="2" />
@ -62,7 +62,7 @@
align="end"
>
<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 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-xl"
on:click={() => {
onDownload('txt');
}}
@ -71,7 +71,7 @@
</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 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-xl"
on:click={() => {
onDownload('md');
}}
@ -80,7 +80,7 @@
</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 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-xl"
on:click={() => {
onDownload('pdf');
}}
@ -93,7 +93,7 @@
{#if onCopyLink || onCopyToClipboard}
<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 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-xl"
>
<Share strokeWidth="2" />
@ -107,7 +107,7 @@
>
{#if onCopyLink}
<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 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-xl"
on:click={() => {
onCopyLink();
}}
@ -119,7 +119,7 @@
{#if onCopyToClipboard}
<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 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-xl"
on:click={() => {
onCopyToClipboard();
}}
@ -133,12 +133,12 @@
{/if}
<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 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-xl"
on:click={() => {
onDelete();
}}
>
<GarbageBin strokeWidth="2" />
<GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>

9
src/lib/components/workspace/Knowledge/ItemMenu.svelte
View file

@ -12,7 +12,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 EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
@ -49,19 +49,18 @@
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[170px] rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-md"
sideOffset={-2}
class="w-full max-w-[170px] 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"
side="bottom"
align="end"
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 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => {
dispatch('delete');
}}
>
<GarbageBin strokeWidth="2" />
<GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>

6
src/lib/components/workspace/Models/ModelMenu.svelte
View file

@ -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';
@ -146,7 +146,7 @@
exportHandler();
}}
>
<ArrowDownTray />
<Download />
<div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item>
@ -159,7 +159,7 @@
deleteHandler();
}}
>
<GarbageBin strokeWidth="2" />
<GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>

18
src/lib/components/workspace/Prompts/PromptMenu.svelte
View file

@ -12,7 +12,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';
const i18n = getContext('i18n');
@ -39,7 +39,7 @@
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[170px] rounded-xl px-1 py-1.5 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
class="w-full max-w-[170px] rounded-2xl px-1 py-1.5 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
sideOffset={-2}
side="bottom"
align="start"
@ -47,7 +47,7 @@
>
{#if $config.features.enable_community_sharing}
<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-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-xl"
on:click={() => {
shareHandler();
}}
@ -58,7 +58,7 @@
{/if}
<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-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-xl"
on:click={() => {
cloneHandler();
}}
@ -69,25 +69,25 @@
</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-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-xl"
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-1.5 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 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => {
deleteHandler();
}}
>
<GarbageBin strokeWidth="2" />
<GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>

2
src/lib/components/workspace/Tools.svelte
View file

@ -17,7 +17,7 @@
getToolList,
getTools
} from '$lib/apis/tools';
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 ToolMenu from './Tools/ToolMenu.svelte';

4
src/lib/components/workspace/Tools/AddToolMenu.svelte
View file

@ -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 px-1 py-1 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850"
sideOffset={-2}
side="bottom"
align="start"

20
src/lib/components/workspace/Tools/ToolMenu.svelte
View file

@ -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 { config } from '$lib/stores';
const i18n = getContext('i18n');
@ -40,14 +40,14 @@
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[170px] rounded-xl px-1 py-1.5 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
class="w-full max-w-[170px] 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"
sideOffset={-2}
side="bottom"
align="start"
transition={flyAndScale}
>
<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-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-xl"
on:click={() => {
editHandler();
}}
@ -72,7 +72,7 @@
{#if $config.features.enable_community_sharing}
<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-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-xl"
on:click={() => {
shareHandler();
}}
@ -83,7 +83,7 @@
{/if}
<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-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-xl"
on:click={() => {
cloneHandler();
}}
@ -94,25 +94,25 @@
</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-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-xl"
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-1.5 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 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => {
deleteHandler();
}}
>
<GarbageBin strokeWidth="2" />
<GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>