Skip to content

Commit d0ce0db

Browse files
BobDuBobDu
authored
feat: refine mobile context toggles (#686)
* feat: refine mobile context toggles Signed-off-by: Bob Du <i@bobdu.cc> * style: refine sidebar user area Signed-off-by: Bob Du <i@bobdu.cc> * fix: keep upload button visible Signed-off-by: Bob Du <i@bobdu.cc> * chore: update components typings Signed-off-by: Bob Du <i@bobdu.cc> --------- Signed-off-by: Bob Du <i@bobdu.cc>
1 parent 1c1b9a1 commit d0ce0db

7 files changed

Lines changed: 73 additions & 80 deletions

File tree

‎components.d.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ declare module 'vue' {
1919
IconMdiLightbulbOutline: typeof import('~icons/mdi/lightbulb-outline')['default']
2020
IconMdiReorderHorizontal: typeof import('~icons/mdi/reorder-horizontal')['default']
2121
IconMdiWeb: typeof import('~icons/mdi/web')['default']
22-
IconRiAddFill: typeof import('~icons/ri/add-fill')['default']
2322
IconRiAlignJustify: typeof import('~icons/ri/align-justify')['default']
2423
IconRiAlignRight: typeof import('~icons/ri/align-right')['default']
2524
IconRiArrowDownSLine: typeof import('~icons/ri/arrow-down-s-line')['default']
@@ -42,7 +41,6 @@ declare module 'vue' {
4241
IconRiImageEditLine: typeof import('~icons/ri/image-edit-line')['default']
4342
IconRiInboxLine: typeof import('~icons/ri/inbox-line')['default']
4443
IconRiKey2Line: typeof import('~icons/ri/key2-line')['default']
45-
IconRiLink: typeof import('~icons/ri/link')['default']
4644
IconRiListSettingsLine: typeof import('~icons/ri/list-settings-line')['default']
4745
IconRiMailLine: typeof import('~icons/ri/mail-line')['default']
4846
IconRiMessage3Line: typeof import('~icons/ri/message3-line')['default']
@@ -62,7 +60,6 @@ declare module 'vue' {
6260
NAvatar: typeof import('naive-ui')['NAvatar']
6361
NButton: typeof import('naive-ui')['NButton']
6462
NButtonGroup: typeof import('naive-ui')['NButtonGroup']
65-
NCard: typeof import('naive-ui')['NCard']
6663
NCol: typeof import('naive-ui')['NCol']
6764
NDataTable: typeof import('naive-ui')['NDataTable']
6865
NDatePicker: typeof import('naive-ui')['NDatePicker']

‎src/components/common/UserAvatar/index.vue‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,27 +26,29 @@ onMounted(async () => {
2626

2727
<template>
2828
<div class="flex items-center overflow-hidden">
29-
<div class="w-10 h-10 overflow-hidden rounded-full shrink-0">
29+
<div class="w-8 h-8 overflow-hidden rounded-full shrink-0">
3030
<template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
3131
<NAvatar
32-
size="large"
32+
size="medium"
3333
round
3434
:src="userInfo.avatar"
3535
:fallback-src="defaultAvatar"
3636
/>
3737
</template>
3838
<template v-else>
39-
<NAvatar size="large" round :src="defaultAvatar" />
39+
<NAvatar size="medium" round :src="defaultAvatar" />
4040
</template>
4141
</div>
42-
<div class="flex-1 min-w-0 ml-2">
43-
<h2 v-if="userInfo.name" class="">
44-
{{ userInfo.name }}
45-
<NTag v-if="userInfo.roles.length > 0" size="small" :bordered="false" type="success">
46-
{{ UserRole[userInfo.roles[0]] }}
47-
</NTag>
42+
<div class="flex-1 min-w-0 ml-1.5">
43+
<h2 v-if="userInfo.name" class="text-sm leading-tight">
44+
<span class="block">{{ userInfo.name }}</span>
45+
<span v-if="userInfo.roles.length > 0" class="mt-1 inline-flex origin-left scale-90">
46+
<NTag size="tiny" class="text-[4px] leading-none" :bordered="false" type="success">
47+
{{ UserRole[userInfo.roles[0]] }}
48+
</NTag>
49+
</span>
4850
</h2>
49-
<p v-if="userInfo.name" class="overflow-hidden text-xs text-gray-500 text-ellipsis whitespace-nowrap">
51+
<p v-if="userInfo.name" class="overflow-hidden text-[9px] text-gray-500 text-ellipsis whitespace-nowrap">
5052
<span
5153
v-if="isString(userInfo.description) && userInfo.description !== ''"
5254
v-html="userInfo.description"

‎src/locales/en-US.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
"clickTurnOffThink": "Click to disable deep thinking for this chat.",
6969
"thinkHelp": "After enabling deep thinking, the model will use more computational resources and take longer time to simulate more complex thinking chains for logical reasoning.\nSuitable for complex tasks or high-requirement scenarios, such as mathematical derivations and project planning.\nDaily simple queries do not need to be enabled.",
7070
"showOnContext": "Include context",
71-
"showOffContext": "Not include context",
71+
"showOffContext": "Exclude context",
7272
"maxContextCount": "Maximum number of messages included in the context window",
7373
"searchEnabled": "Search enabled",
7474
"searchDisabled": "Search disabled",

‎src/locales/ja-JP.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@
6767
"clickTurnOnThink": "クリックしてこのチャットで深い思考を有効にします。",
6868
"clickTurnOffThink": "クリックしてこのチャットで深い思考を無効にします。",
6969
"thinkHelp": "深い思考を有効にすると、モデルはより多くの計算資源を使い、複雑な思考連鎖をより長い時間かけてシミュレートします。\n数式導出やプロジェクト計画など、複雑なタスクや高い要件のシナリオに適しています。\n日常的な簡単な問い合わせには不要です。",
70-
"showOnContext": "コンテキストを含める",
71-
"showOffContext": "コンテキストを含めない",
70+
"showOnContext": "コンテキスト含む",
71+
"showOffContext": "コンテキスト除外",
7272
"maxContextCount": "コンテキストウィンドウに含める最大メッセージ数",
7373
"searchEnabled": "検索有効",
7474
"searchDisabled": "検索無効",

‎src/views/chat/components/Header/index.vue‎

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,14 @@ defineProps<Props>()
77
88
const emit = defineEmits<Emit>()
99
10-
const { t } = useI18n()
11-
1210
interface Props {
1311
usingContext?: boolean
1412
showPrompt: boolean
15-
searchEnabled?: boolean
16-
thinkEnabled?: boolean
1713
}
1814
1915
interface Emit {
2016
(ev: 'export'): void
21-
(ev: 'toggleUsingContext'): void
2217
(ev: 'toggleShowPrompt'): void
23-
(ev: 'toggleSearchEnabled'): void
24-
(ev: 'toggleThinkEnabled'): void
2518
}
2619
2720
const appStore = useAppStore()
@@ -44,18 +37,6 @@ function handleExport() {
4437
emit('export')
4538
}
4639
47-
function toggleUsingContext() {
48-
emit('toggleUsingContext')
49-
}
50-
51-
function toggleSearchEnabled() {
52-
emit('toggleSearchEnabled')
53-
}
54-
55-
function toggleThinkEnabled() {
56-
emit('toggleThinkEnabled')
57-
}
58-
5940
function handleShowPrompt() {
6041
emit('toggleShowPrompt')
6142
}
@@ -83,28 +64,10 @@ function handleShowPrompt() {
8364
</h1>
8465
<div class="flex items-center space-x-2">
8566
<HoverButton @click="handleShowPrompt">
86-
<span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
67+
<span class="text-xl" :class="{ 'text-[#2f9e44]': usingContext, 'text-[#c92a2a]': !usingContext }">
8768
<IconPrompt class="w-[20px] m-auto" />
8869
</span>
8970
</HoverButton>
90-
<HoverButton :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }" @click="toggleUsingContext">
91-
<span class="text-xl">
92-
<IconRiChatHistoryLine />
93-
</span>
94-
<span style="margin-left:.25em">{{ usingContext ? t('chat.showOnContext') : t('chat.showOffContext') }}</span>
95-
</HoverButton>
96-
<HoverButton :class="{ 'text-[#4b9e5f]': searchEnabled, 'text-[#a8071a]': !searchEnabled }" @click="toggleSearchEnabled">
97-
<span class="text-xl">
98-
<IconMdiWeb />
99-
</span>
100-
<span style="margin-left:.25em">{{ searchEnabled ? t('chat.searchEnabled') : t('chat.searchDisabled') }}</span>
101-
</HoverButton>
102-
<HoverButton :class="{ 'text-[#4b9e5f]': thinkEnabled, 'text-[#a8071a]': !thinkEnabled }" @click="toggleThinkEnabled">
103-
<span class="text-xl">
104-
<IconMdiLightbulbOutline />
105-
</span>
106-
<span style="margin-left:.25em">{{ thinkEnabled ? t('chat.thinkEnabled') : t('chat.thinkDisabled') }}</span>
107-
</HoverButton>
10871
<HoverButton @click="handleExport">
10972
<span class="text-xl text-[#4f555e] dark:text-white">
11073
<IconRiDownload2Line />

‎src/views/chat/index.vue‎

Lines changed: 53 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1192,7 +1192,7 @@ const VALID_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/webp']
11921192
// Paste image.
11931193
async function handlePasteImage(event: ClipboardEvent) {
11941194
// Check if image upload is enabled.
1195-
if (!currentChatRoom.value?.imageUploadEnabled) {
1195+
if (currentChatRoom.value?.imageUploadEnabled === false) {
11961196
ms.warning(t('chat.imageUploadDisabled') || '图片上传功能已关闭', {
11971197
duration: 2000,
11981198
})
@@ -1300,14 +1300,9 @@ onUnmounted(() => {
13001300
<div class="flex flex-col w-full h-full">
13011301
<HeaderComponent
13021302
v-if="isMobile"
1303-
:using-context="currentChatRoom?.usingContext"
13041303
:show-prompt="showPrompt"
1305-
:search-enabled="currentChatRoom?.searchEnabled"
1306-
:think-enabled="currentChatRoom?.thinkEnabled"
1304+
:using-context="currentChatRoom?.usingContext"
13071305
@export="handleExport"
1308-
@toggle-using-context="handleToggleUsingContext"
1309-
@toggle-search-enabled="handleToggleSearchEnabled"
1310-
@toggle-think-enabled="handleToggleThinkEnabled"
13111306
@toggle-show-prompt="showPrompt = true"
13121307
/>
13131308
<main class="flex-1 overflow-hidden">
@@ -1386,13 +1381,49 @@ onUnmounted(() => {
13861381
</NSpace>
13871382
</div>
13881383

1389-
<div class="flex items-center space-x-2">
1390-
<div v-if="currentChatRoom?.imageUploadEnabled">
1384+
<div
1385+
v-if="isMobile"
1386+
class="grid grid-cols-3 justify-items-center gap-[clamp(0.125rem,1vw,0.5rem)]"
1387+
>
1388+
<HoverButton
1389+
class="w-full flex justify-center"
1390+
:class="{ 'text-[#2f9e44]': currentChatRoom?.searchEnabled, 'text-[#c92a2a]': !currentChatRoom?.searchEnabled }"
1391+
@click="handleToggleSearchEnabled"
1392+
>
1393+
<span class="w-full text-[11px] flex items-center justify-center gap-[clamp(0.125rem,0.6vw,0.375rem)] text-center leading-tight">
1394+
<IconMdiWeb class="text-[12px]" />
1395+
<span class="text-[11px] font-semibold tracking-tight">{{ currentChatRoom?.searchEnabled ? t('chat.searchEnabled') : t('chat.searchDisabled') }}</span>
1396+
</span>
1397+
</HoverButton>
1398+
<HoverButton
1399+
class="w-full flex justify-center"
1400+
:class="{ 'text-[#2f9e44]': currentChatRoom?.thinkEnabled, 'text-[#c92a2a]': !currentChatRoom?.thinkEnabled }"
1401+
@click="handleToggleThinkEnabled"
1402+
>
1403+
<span class="w-full text-[11px] flex items-center justify-center gap-[clamp(0.125rem,0.6vw,0.375rem)] text-center leading-tight">
1404+
<IconMdiLightbulbOutline class="text-[12px]" />
1405+
<span class="text-[11px] font-semibold tracking-tight">{{ currentChatRoom?.thinkEnabled ? t('chat.thinkEnabled') : t('chat.thinkDisabled') }}</span>
1406+
</span>
1407+
</HoverButton>
1408+
<HoverButton
1409+
class="w-full flex justify-center"
1410+
:class="{ 'text-[#2f9e44]': currentChatRoom?.usingContext, 'text-[#c92a2a]': !currentChatRoom?.usingContext }"
1411+
@click="handleToggleUsingContext"
1412+
>
1413+
<span class="w-full text-[11px] flex items-center justify-center gap-[clamp(0.125rem,0.6vw,0.375rem)] text-center leading-tight">
1414+
<IconRiChatHistoryLine class="text-[12px]" />
1415+
<span class="text-[11px] font-semibold tracking-tight">{{ currentChatRoom?.usingContext ? t('chat.showOnContext') : t('chat.showOffContext') }}</span>
1416+
</span>
1417+
</HoverButton>
1418+
</div>
1419+
<div class="flex items-center" :class="[isMobile ? 'flex-wrap gap-2' : 'space-x-2']">
1420+
<div v-if="currentChatRoom">
13911421
<NUpload
13921422
action="/api/upload-image"
13931423
list-type="image"
13941424
class="flex items-center justify-center h-10 transition hover:bg-neutral-100 dark:hover:bg-[#414755]"
13951425
style="flex-flow:row nowrap;min-width:2.5em;padding:.5em;border-radius:.5em;"
1426+
:disabled="currentChatRoom?.imageUploadEnabled === false"
13961427
:headers="uploadHeaders"
13971428
:show-file-list="false"
13981429
:multiple="true"
@@ -1421,7 +1452,7 @@ onUnmounted(() => {
14211452
</span>
14221453
</HoverButton>
14231454
<NSelect
1424-
style="width: 250px"
1455+
:style="{ width: isMobile ? '100%' : '250px' }"
14251456
:value="currentChatRoom?.chatModel"
14261457
:options="chatModelOptions"
14271458
:disabled="!!authStore.session?.auth && !authStore.token && !authStore.session?.authProxyEnabled"
@@ -1432,36 +1463,36 @@ onUnmounted(() => {
14321463
v-if="!isMobile"
14331464
:tooltip="currentChatRoom?.searchEnabled ? t('chat.clickTurnOffSearch') : t('chat.clickTurnOnSearch')"
14341465
:tooltip-help="t('chat.searchHelp')"
1435-
:class="{ 'text-[#4b9e5f]': currentChatRoom?.searchEnabled, 'text-[#a8071a]': !currentChatRoom?.searchEnabled }"
1466+
:class="{ 'text-[#2f9e44]': currentChatRoom?.searchEnabled, 'text-[#c92a2a]': !currentChatRoom?.searchEnabled }"
14361467
@click="handleToggleSearchEnabled"
14371468
>
1438-
<span class="text-xl flex items-center">
1439-
<IconMdiWeb />
1440-
<span class="ml-1 text-sm">{{ currentChatRoom?.searchEnabled ? t('chat.searchEnabled') : t('chat.searchDisabled') }}</span>
1469+
<span class="text-sm flex items-center gap-1">
1470+
<IconMdiWeb class="text-base" />
1471+
<span class="text-xs font-bold tracking-wide">{{ currentChatRoom?.searchEnabled ? t('chat.searchEnabled') : t('chat.searchDisabled') }}</span>
14411472
</span>
14421473
</HoverButton>
14431474
<HoverButton
14441475
v-if="!isMobile"
14451476
:tooltip="currentChatRoom?.thinkEnabled ? t('chat.clickTurnOffThink') : t('chat.clickTurnOnThink')"
14461477
:tooltip-help="t('chat.thinkHelp')"
1447-
:class="{ 'text-[#4b9e5f]': currentChatRoom?.thinkEnabled, 'text-[#a8071a]': !currentChatRoom?.thinkEnabled }"
1478+
:class="{ 'text-[#2f9e44]': currentChatRoom?.thinkEnabled, 'text-[#c92a2a]': !currentChatRoom?.thinkEnabled }"
14481479
@click="handleToggleThinkEnabled"
14491480
>
1450-
<span class="text-xl flex items-center">
1451-
<IconMdiLightbulbOutline />
1452-
<span class="ml-1 text-sm">{{ currentChatRoom?.thinkEnabled ? t('chat.thinkEnabled') : t('chat.thinkDisabled') }}</span>
1481+
<span class="text-sm flex items-center gap-1">
1482+
<IconMdiLightbulbOutline class="text-base" />
1483+
<span class="text-xs font-bold tracking-wide">{{ currentChatRoom?.thinkEnabled ? t('chat.thinkEnabled') : t('chat.thinkDisabled') }}</span>
14531484
</span>
14541485
</HoverButton>
14551486
<HoverButton
14561487
v-if="!isMobile"
14571488
:tooltip="currentChatRoom?.usingContext ? t('chat.clickTurnOffContext') : t('chat.clickTurnOnContext')"
14581489
:tooltip-help="t('chat.contextHelp')"
1459-
:class="{ 'text-[#4b9e5f]': currentChatRoom?.usingContext, 'text-[#a8071a]': !currentChatRoom?.usingContext }"
1490+
:class="{ 'text-[#2f9e44]': currentChatRoom?.usingContext, 'text-[#c92a2a]': !currentChatRoom?.usingContext }"
14601491
@click="handleToggleUsingContext"
14611492
>
1462-
<span class="text-xl flex items-center">
1463-
<IconRiChatHistoryLine />
1464-
<span class="ml-1 text-sm">{{ currentChatRoom?.usingContext ? t('chat.showOnContext') : t('chat.showOffContext') }}</span>
1493+
<span class="text-sm flex items-center gap-1">
1494+
<IconRiChatHistoryLine class="text-base" />
1495+
<span class="text-xs font-bold tracking-wide">{{ currentChatRoom?.usingContext ? t('chat.showOnContext') : t('chat.showOffContext') }}</span>
14651496
</span>
14661497
</HoverButton>
14671498
<NSlider

‎src/views/chat/layout/sider/Footer.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ async function handleLogout() {
2020
<div class="flex-1 shrink-0 overflow-hidden">
2121
<UserAvatar />
2222
</div>
23-
<HoverButton v-if="!!authStore.token || !!authStore.session?.authProxyEnabled" :tooltip="t('common.logOut')" @click="handleLogout">
24-
<span class="text-xl text-[#4f555e] dark:text-white">
23+
<HoverButton v-if="!!authStore.token || !!authStore.session?.authProxyEnabled" class="-mr-1" :tooltip="t('common.logOut')" @click="handleLogout">
24+
<span class="text-lg font-semibold text-[#4f555e] dark:text-white">
2525
<IconUilExit />
2626
</span>
2727
</HoverButton>
2828

29-
<HoverButton v-if="!!authStore.token || !!authStore.session?.authProxyEnabled" :tooltip="t('setting.setting')" @click="show = true">
30-
<span class="text-xl text-[#4f555e] dark:text-white">
29+
<HoverButton v-if="!!authStore.token || !!authStore.session?.authProxyEnabled" class="ml-0.5" :tooltip="t('setting.setting')" @click="show = true">
30+
<span class="text-lg font-semibold text-[#4f555e] dark:text-white">
3131
<IconRiSettings4Line />
3232
</span>
3333
</HoverButton>

0 commit comments

Comments
 (0)