feat: message tooltips

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -22,6 +22,7 @@
 	import CodeBlock from './CodeBlock.svelte';
 	import Image from '$lib/components/common/Image.svelte';
 	import { WEBUI_BASE_URL } from '$lib/constants';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	export let modelfiles = [];
 	export let message;
@@ -463,6 +464,7 @@
 											</div>
 										{/if}
 
+										<Tooltip content="Edit" placement="bottom">
 											<button
 												class="{isLastMessage
 													? 'visible'
@@ -486,7 +488,9 @@
 													/>
 												</svg>
 											</button>
+										</Tooltip>
 
+										<Tooltip content="Copy" placement="bottom">
 											<button
 												class="{isLastMessage
 													? 'visible'
@@ -510,7 +514,9 @@
 													/>
 												</svg>
 											</button>
+										</Tooltip>
 
+										<Tooltip content="Good Response" placement="bottom">
 											<button
 												class="{isLastMessage
 													? 'visible'
@@ -535,6 +541,9 @@
 													/></svg
 												>
 											</button>
+										</Tooltip>
+
+										<Tooltip content="Bad Response" placement="bottom">
 											<button
 												class="{isLastMessage
 													? 'visible'
@@ -559,7 +568,9 @@
 													/></svg
 												>
 											</button>
+										</Tooltip>
 
+										<Tooltip content="Read Aloud" placement="bottom">
 											<button
 												id="speak-button-{message.id}"
 												class="{isLastMessage
@@ -599,7 +610,12 @@
 															cx="12"
 															cy="12"
 															r="3"
-													/><circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" /></svg
+														/><circle
+															class="spinner_S1WN spinner_JApP"
+															cx="20"
+															cy="12"
+															r="3"
+														/></svg
 													>
 												{:else if speaking}
 													<svg
@@ -633,8 +649,10 @@
 													</svg>
 												{/if}
 											</button>
+										</Tooltip>
 
 										{#if $config.images}
+											<Tooltip content="Generate Image" placement="bottom">
 												<button
 													class="{isLastMessage
 														? 'visible'
@@ -697,9 +715,11 @@
 														</svg>
 													{/if}
 												</button>
+											</Tooltip>
 										{/if}
 
 										{#if message.info}
+											<Tooltip content="Generation Info" placement="bottom">
 												<button
 													class=" {isLastMessage
 														? 'visible'
@@ -724,9 +744,11 @@
 														/>
 													</svg>
 												</button>
+											</Tooltip>
 										{/if}
 
 										{#if isLastMessage}
+											<Tooltip content="Continue Response" placement="bottom">
 												<button
 													type="button"
 													class="{isLastMessage
@@ -756,7 +778,9 @@
 														/>
 													</svg>
 												</button>
+											</Tooltip>
 
+											<Tooltip content="Regenerate" placement="bottom">
 												<button
 													type="button"
 													class="{isLastMessage
@@ -779,6 +803,7 @@
 														/>
 													</svg>
 												</button>
+											</Tooltip>
 										{/if}
 									</div>
 								{/if}

src/lib/components/chat/Messages/UserMessage.svelte

@@ -5,6 +5,7 @@
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
 	import { modelfiles, settings } from '$lib/stores';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -246,6 +247,7 @@
 							</div>
 						{/if}
 
+						<Tooltip content="Edit" placement="bottom">
 							<button
 								class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition edit-user-message-button"
 								on:click={() => {
@@ -267,7 +269,9 @@
 									/>
 								</svg>
 							</button>
+						</Tooltip>
 
+						<Tooltip content="Copy" placement="bottom">
 							<button
 								class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition"
 								on:click={() => {
@@ -289,8 +293,10 @@
 									/>
 								</svg>
 							</button>
+						</Tooltip>
 
 						{#if !isFirstMessage}
+							<Tooltip content="Delete" placement="bottom">
 								<button
 									class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition"
 									on:click={() => {
@@ -312,6 +318,7 @@
 										/>
 									</svg>
 								</button>
+							</Tooltip>
 						{/if}
 					</div>
 				</div>