Skip to content

Commit 8eceb88

Browse files
danbevngxson
danbev
and
ngxson
authored
server : add tooltips to settings and themes btn (#11154)
* server : add tooltips to settings and themes btn This commit adds tooltips to the settings and themes buttons in the webui. The tooltip will be displayed below the actual buttons when hovered over. The motivation for this change is to clarify the purpose of the themes button. * squash! server : add tooltips to settings and themes btn This commit adds a tooltip to the '...' button when a chat has been started. The tooltip is "Chat options" which think could be a good description as the dropdown contains options to delete or download the current chat. * rm tooltip for 3 dots button --------- Co-authored-by: Xuan Son Nguyen <[email protected]>
1 parent f8feb4b commit 8eceb88

File tree

2 files changed

+38
-34
lines changed

2 files changed

+38
-34
lines changed

‎examples/server/public/index.html.gz‎

600 Bytes
Binary file not shown.

‎examples/server/webui/index.html‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -62,53 +62,57 @@ <h2 class="font-bold ml-4">Conversations</h2>
6262
<!-- action buttons (top right) -->
6363
<div class="flex items-center">
6464
<div v-if="messages.length > 0" class="dropdown dropdown-end">
65-
<!-- "more" button -->
65+
<!-- "..." button -->
6666
<button tabindex="0" role="button" class="btn m-1" :disabled="isGenerating">
6767
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
6868
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
6969
</svg>
7070
</button>
71-
<!-- "more" dropdown menu -->
71+
<!-- "delete" dropdown menu -->
7272
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
7373
<li @click="downloadConv(viewingConvId)"><a>Download</a></li>
7474
<li class="text-error" @click="deleteConv(viewingConvId)"><a>Delete</a></li>
7575
</ul>
7676
</div>
77-
<button class="btn" @click="showConfigDialog = true" :disabled="isGenerating">
78-
<!-- settings button -->
79-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
80-
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
81-
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/>
82-
</svg>
83-
</button>
77+
<div class="tooltip tooltip-bottom" data-tip="Settings">
78+
<button class="btn" @click="showConfigDialog = true" :disabled="isGenerating">
79+
<!-- settings button -->
80+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
81+
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
82+
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/>
83+
</svg>
84+
</button>
85+
</div>
8486

8587
<!-- theme controller is copied from https://daisyui.com/components/theme-controller/ -->
86-
<div class="dropdown dropdown-end dropdown-bottom">
87-
<div tabindex="0" role="button" class="btn m-1">
88-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-palette2" viewBox="0 0 16 16">
89-
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a3 3 0 0 1-2.121-.879A3 3 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M15 15v-4H9.258l-4.015 4zM0 .5v12.495zm0 12.495V13z"/>
90-
</svg>
88+
<div class="tooltip tooltip-bottom" data-tip="Themes">
89+
<div class="dropdown dropdown-end dropdown-bottom">
90+
<div tabindex="0" role="button" class="btn m-1">
91+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-palette2" viewBox="0 0 16 16">
92+
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a3 3 0 0 1-2.121-.879A3 3 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M15 15v-4H9.258l-4.015 4zM0 .5v12.495zm0 12.495V13z"/>
93+
</svg>
94+
</div>
95+
<ul tabindex="0" class="dropdown-content bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl h-80 overflow-y-auto">
96+
<li>
97+
<button
98+
class="btn btn-sm btn-block btn-ghost justify-start"
99+
:class="{ 'btn-active': selectedTheme === 'auto' }"
100+
@click="setSelectedTheme('auto')">
101+
auto
102+
</button>
103+
</li>
104+
<li v-for="theme in themes">
105+
<input
106+
type="radio"
107+
name="theme-dropdown"
108+
class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
109+
:aria-label="theme"
110+
:value="theme"
111+
:checked="selectedTheme === theme"
112+
@click="setSelectedTheme(theme)" />
113+
</li>
114+
</ul>
91115
</div>
92-
<ul tabindex="0" class="dropdown-content bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl h-80 overflow-y-auto">
93-
<li>
94-
<button
95-
class="btn btn-sm btn-block btn-ghost justify-start"
96-
:class="{ 'btn-active': selectedTheme === 'auto' }"
97-
@click="setSelectedTheme('auto')">
98-
auto
99-
</button>
100-
</li>
101-
<li v-for="theme in themes">
102-
<input
103-
type="radio"
104-
name="theme-dropdown"
105-
class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
106-
:aria-label="theme"
107-
:value="theme"
108-
:checked="selectedTheme === theme"
109-
@click="setSelectedTheme(theme)" />
110-
</li>
111-
</ul>
112116
</div>
113117
</div>
114118
</div>

0 commit comments

Comments
 (0)