UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-04-10 15:45:45 +00:00
Code Issues Actions4 Packages Projects Releases Wiki Activity

enh: responsive styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-02-05 01:03:40 -08:00
parent cce1762cb8
commit b33b49789e
6 changed files with 77 additions and 62 deletions

11
package-lock.json generated
View File

@ -69,6 +69,7 @@
"@sveltejs/adapter-static": "^3.0.2", "@sveltejs/adapter-static": "^3.0.2",
"@sveltejs/kit": "^2.5.20", "@sveltejs/kit": "^2.5.20",
"@sveltejs/vite-plugin-svelte": "^3.1.1", "@sveltejs/vite-plugin-svelte": "^3.1.1",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/typography": "^0.5.13", "@tailwindcss/typography": "^0.5.13",
"@typescript-eslint/eslint-plugin": "^6.17.0", "@typescript-eslint/eslint-plugin": "^6.17.0",
"@typescript-eslint/parser": "^6.17.0", "@typescript-eslint/parser": "^6.17.0",
@ -2343,6 +2344,16 @@
"tslib": "^2.4.0" "tslib": "^2.4.0"
} }
}, },
"node_modules/@tailwindcss/container-queries": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
"integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"tailwindcss": ">=3.2.0"
}
},
"node_modules/@tailwindcss/typography": { "node_modules/@tailwindcss/typography": {
"version": "0.5.13", "version": "0.5.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz", "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz",

1
package.json
View File

@ -25,6 +25,7 @@
"@sveltejs/adapter-static": "^3.0.2", "@sveltejs/adapter-static": "^3.0.2",
"@sveltejs/kit": "^2.5.20", "@sveltejs/kit": "^2.5.20",
"@sveltejs/vite-plugin-svelte": "^3.1.1", "@sveltejs/vite-plugin-svelte": "^3.1.1",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/typography": "^0.5.13", "@tailwindcss/typography": "^0.5.13",
"@typescript-eslint/eslint-plugin": "^6.17.0", "@typescript-eslint/eslint-plugin": "^6.17.0",
"@typescript-eslint/parser": "^6.17.0", "@typescript-eslint/parser": "^6.17.0",

2
src/lib/components/chat/Chat.svelte
View File

@ -1940,7 +1940,7 @@
</div> </div>
{/if} {/if}
<div class="flex flex-col flex-auto z-10 w-full"> <div class="flex flex-col flex-auto z-10 w-full @container">
{#if $settings?.landingPageMode === 'chat' || createMessagesList(history, history.currentId).length > 0} {#if $settings?.landingPageMode === 'chat' || createMessagesList(history, history.currentId).length > 0}
<div <div
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full z-10 scrollbar-hidden" class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full z-10 scrollbar-hidden"

112
src/lib/components/chat/MessageInput.svelte
View File

@ -1075,8 +1075,8 @@
{/if} {/if}
</div> </div>
<div class=" flex justify-between mt-1.5 mb-2.5 mx-0.5"> <div class=" flex justify-between mt-1.5 mb-2.5 mx-0.5 max-w-full">
<div class="ml-1 self-end gap-0.5 flex items-center"> <div class="ml-1 self-end gap-0.5 flex items-center flex-1 max-w-[80%]">
<InputMenu <InputMenu
bind:selectedToolIds bind:selectedToolIds
{screenCaptureHandler} {screenCaptureHandler}
@ -1129,67 +1129,69 @@
</button> </button>
</InputMenu> </InputMenu>
{#if $_user} <div class="flex gap-0.5 items-center overflow-x-auto scrollbar-none flex-1">
{#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)} {#if $_user}
<Tooltip content={$i18n.t('Search the internet')} placement="top"> {#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)}
<button <Tooltip content={$i18n.t('Search the internet')} placement="top">
on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)} <button
type="button" on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {webSearchEnabled || type="button"
($settings?.webSearch ?? false) === 'always' class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {webSearchEnabled ||
? 'bg-blue-100 dark:bg-blue-500/20 text-blue-500 dark:text-blue-400' ($settings?.webSearch ?? false) === 'always'
: 'bg-transparent text-gray-600 dark:text-gray-400 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}" ? 'bg-blue-100 dark:bg-blue-500/20 text-blue-500 dark:text-blue-400'
> : 'bg-transparent text-gray-600 dark:text-gray-400 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}"
<GlobeAlt className="size-5" strokeWidth="1.75" />
<span
class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
>{$i18n.t('Web Search')}</span
> >
</button> <GlobeAlt className="size-5" strokeWidth="1.75" />
</Tooltip> <span
{/if} class="hidden @sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
>{$i18n.t('Web Search')}</span
>
</button>
</Tooltip>
{/if}
{#if $config?.features?.enable_image_generation && ($_user.role === 'admin' || $_user?.permissions?.features?.image_generation)} {#if $config?.features?.enable_image_generation && ($_user.role === 'admin' || $_user?.permissions?.features?.image_generation)}
<Tooltip content={$i18n.t('Generate an image')} placement="top"> <Tooltip content={$i18n.t('Generate an image')} placement="top">
<button <button
on:click|preventDefault={() => on:click|preventDefault={() =>
(imageGenerationEnabled = !imageGenerationEnabled)} (imageGenerationEnabled = !imageGenerationEnabled)}
type="button" type="button"
class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {imageGenerationEnabled class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {imageGenerationEnabled
? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400' ? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}" : 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
>
<Photo className="size-5" strokeWidth="1.75" />
<span
class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
>{$i18n.t('Image')}</span
> >
</button> <Photo className="size-5" strokeWidth="1.75" />
</Tooltip> <span
{/if} class="hidden @sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
>{$i18n.t('Image')}</span
>
</button>
</Tooltip>
{/if}
{#if $_user.role === 'admin' || $_user?.permissions?.features?.code_interpreter} {#if $_user.role === 'admin' || $_user?.permissions?.features?.code_interpreter}
<Tooltip content={$i18n.t('Execute code for analysis')} placement="top"> <Tooltip content={$i18n.t('Execute code for analysis')} placement="top">
<button <button
on:click|preventDefault={() => on:click|preventDefault={() =>
(codeInterpreterEnabled = !codeInterpreterEnabled)} (codeInterpreterEnabled = !codeInterpreterEnabled)}
type="button" type="button"
class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {codeInterpreterEnabled class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {codeInterpreterEnabled
? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400' ? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}" : 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
>
<CommandLine className="size-5" strokeWidth="1.75" />
<span
class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
>{$i18n.t('Code Interpreter')}</span
> >
</button> <CommandLine className="size-5" strokeWidth="1.75" />
</Tooltip> <span
class="hidden @sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
>{$i18n.t('Code Interpreter')}</span
>
</button>
</Tooltip>
{/if}
{/if} {/if}
{/if} </div>
</div> </div>
<div class="self-end flex space-x-1 mr-1"> <div class="self-end flex space-x-1 mr-1 flex-shrink-0">
{#if !history?.currentId || history.messages[history.currentId]?.done == true} {#if !history?.currentId || history.messages[history.currentId]?.done == true}
<Tooltip content={$i18n.t('Record voice')}> <Tooltip content={$i18n.t('Record voice')}>
<button <button

10
src/lib/components/chat/Placeholder.svelte
View File

@ -88,7 +88,7 @@
onMount(() => {}); onMount(() => {});
</script> </script>
<div class="m-auto w-full max-w-6xl px-2 xl:px-20 translate-y-6 py-24 text-center"> <div class="m-auto w-full max-w-6xl px-2 @xl:px-20 translate-y-6 py-24 text-center">
{#if $temporaryChatEnabled} {#if $temporaryChatEnabled}
<Tooltip <Tooltip
content="This chat won't appear in history and your messages will not be saved." content="This chat won't appear in history and your messages will not be saved."
@ -105,7 +105,7 @@
class="w-full text-3xl text-gray-800 dark:text-gray-100 font-medium text-center flex items-center gap-4 font-primary" class="w-full text-3xl text-gray-800 dark:text-gray-100 font-medium text-center flex items-center gap-4 font-primary"
> >
<div class="w-full flex flex-col justify-center items-center"> <div class="w-full flex flex-col justify-center items-center">
<div class="flex flex-row justify-center gap-3 sm:gap-3.5 w-fit px-5"> <div class="flex flex-row justify-center gap-3 @sm:gap-3.5 w-fit px-5">
<div class="flex flex-shrink-0 justify-center"> <div class="flex flex-shrink-0 justify-center">
<div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 100 }}> <div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 100 }}>
{#each models as model, modelIdx} {#each models as model, modelIdx}
@ -126,7 +126,7 @@
($i18n.language === 'dg-DG' ($i18n.language === 'dg-DG'
? `/doge.png` ? `/doge.png`
: `${WEBUI_BASE_URL}/static/favicon.png`)} : `${WEBUI_BASE_URL}/static/favicon.png`)}
class=" size-9 sm:size-10 rounded-full border-[1px] border-gray-200 dark:border-none" class=" size-9 @sm:size-10 rounded-full border-[1px] border-gray-200 dark:border-none"
alt="logo" alt="logo"
draggable="false" draggable="false"
/> />
@ -136,7 +136,7 @@
</div> </div>
</div> </div>
<div class=" text-3xl sm:text-4xl line-clamp-1" in:fade={{ duration: 100 }}> <div class=" text-3xl @sm:text-4xl line-clamp-1" in:fade={{ duration: 100 }}>
{#if models[selectedModelIdx]?.name} {#if models[selectedModelIdx]?.name}
{models[selectedModelIdx]?.name} {models[selectedModelIdx]?.name}
{:else} {:else}
@ -185,7 +185,7 @@
</div> </div>
<div <div
class="text-base font-normal xl:translate-x-6 md:max-w-3xl w-full py-3 {atSelectedModel class="text-base font-normal @xl:translate-x-6 @md:max-w-3xl w-full py-3 {atSelectedModel
? 'mt-2' ? 'mt-2'
: ''}" : ''}"
> >

3
tailwind.config.js
View File

@ -1,4 +1,5 @@
import typography from '@tailwindcss/typography'; import typography from '@tailwindcss/typography';
import containerQuries from '@tailwindcss/container-queries';
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
@ -38,5 +39,5 @@ export default {
} }
} }
}, },
plugins: [typography] plugins: [typography, containerQuries]
}; };