Merge pull request #17 from itsmartashub/feat/toggle-msg-bubble

Add toggle to disable AI chat bubbles to match the default Deepseek style

Author: itsmartashub

components/Custom/Layouts/Toggles.vue

@@ -7,16 +7,32 @@
 			:iconComponent="IconThinkingProcess"
 			tooltip="<strong>NOTE</strong>: Clicking on the thought process element won't reveal it again. Only toggling this setting can restore it."
 		/>
+
+		<CardToggle
+			v-model="toggleBubbleAI"
+			title="Turn off AI Bubble"
+			subtitle="Turn off the AI bubble style to match the default Deepseek look and feel."
+			:iconComponent="IconBubbleOFF"
+		/>
 	</div>
 </template>
 
 <script setup>
-import { hideThinkingItem } from '@/utils/storage'
+import { hideThinkingItem, toggleBubbleAIItem } from '@/utils/storage'
 import { useToggleStorage } from '@/composables/useToggleStorage.js'
 
 import CardToggle from '@/components/Cards/Toggle.vue'
 import IconThinkingProcess from '@/components/Icons/ThinkingProcess.vue'
+import IconBubbleOFF from '@/components/Icons/BubbleOFF.vue'
 
 // One toggle controls everything
 const hideThinkingState = useToggleStorage(hideThinkingItem, 'dsx-toggle-thinking-process')
+const toggleBubbleAI = useToggleStorage(toggleBubbleAIItem, 'dsx-toggle-ai-bubble')
 </script>
+
+<style lang="scss">
+.layouts-toggles {
+	display: grid;
+	gap: 0.5rem;
+}
+</style>

components/Icons/BubbleOFF.vue

@@ -0,0 +1,21 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="icon icon-tabler icons-tabler-outline icon-tabler-bubble-x"
+	>
+		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+		<path
+			d="M13.5 18.75c-.345 .09 -.727 .25 -1.1 .25a4.3 4.3 0 0 1 -1.57 -.298l-3.83 2.298v-3.134a2.668 2.668 0 0 1 -1.795 -3.773a4.8 4.8 0 0 1 2.908 -8.933a5.335 5.335 0 0 1 9.194 1.078a5.333 5.333 0 0 1 4.484 6.778"
+		/>
+		<path d="M22 22l-5 -5" />
+		<path d="M17 22l5 -5" />
+	</svg>
+</template>

styles/customs/_custom-toggles.scss

@@ -12,4 +12,10 @@ html[dsx-toggle-accent-user-bubble] {
             @include bg-accent-inverse;
         }
     }
+}
+
+html[dsx-toggle-ai-bubble] {
+    ._4f9bf79 {
+        background: transparent !important;
+    }
 }

utils/storage.js

@@ -48,6 +48,7 @@ const STORAGE_CONFIG = Object.freeze({
 		maxWidthChatsItem: { key: 'local:maxWidthChats', fallback: { value: DEFAULT_MAX_WIDTH, unit: 'px' } },
 		maxWidthTextareaItem: { key: 'local:maxWidthTextarea', fallback: { value: DEFAULT_MAX_WIDTH, unit: 'px' } },
 		hideThinkingItem: { key: 'local:hideThinking', fallback: false },
+		toggleBubbleAIItem: { key: 'local:toggleGptBubble', fallback: false },
 	},
 })
 
@@ -80,4 +81,5 @@ export const {
 	maxWidthTextareaItem,
 	hideThinkingItem,
 	accentUserBubbleItem,
+	toggleBubbleAIItem,
 } = storageItems