feat: change favicon when conversation icon is set

src/components/header/ConversationHeaderInfo.tsx

@@ -1,4 +1,4 @@
-import { Show, createEffect } from 'solid-js'
+import { Show } from 'solid-js'
 import { useStore } from '@nanostores/solid'
 import { conversationMap, currentConversationId } from '@/stores/conversation'
 import { useI18n } from '@/hooks'
@@ -11,8 +11,6 @@ export default () => {
     return $conversationMap()[$currentConversationId()]
   }
 
-  createEffect(() => { document.title = currentConversation() ? `Anse • ${(currentConversation().name || t('conversations.untitled'))}` : 'Anse' })
-
   return (
     <div class="fi gap-1 max-w-40vw px-2 overflow-hidden text-sm">
       <Show when={currentConversation()}>

src/components/main/Conversation.tsx

@@ -1,16 +1,18 @@
-import { Match, Switch } from 'solid-js'
+import { Match, Switch, createEffect } from 'solid-js'
 import { useStore } from '@nanostores/solid'
 import { conversationMap, currentConversationId } from '@/stores/conversation'
 import { conversationMessagesMap } from '@/stores/messages'
 import { loadingStateMap, streamsMap } from '@/stores/streams'
 import { getBotMetaById } from '@/stores/provider'
+import { useI18n } from '@/hooks'
 import ConversationEmpty from './ConversationEmpty'
 import Welcome from './Welcome'
 import Continuous from './Continuous'
 import Single from './Single'
 import Image from './Image'
 
 export default () => {
+  const { t } = useI18n()
   const $conversationMap = useStore(conversationMap)
   const $conversationMessagesMap = useStore(conversationMessagesMap)
   const $currentConversationId = useStore(currentConversationId)
@@ -26,8 +28,18 @@ export default () => {
   const currentConversationMessages = () => {
     return $conversationMessagesMap()[$currentConversationId()] || []
   }
-  const isStreaming = () => !!$streamsMap()[$currentConversationId()]
-  const isLoading = () => !!$loadingStateMap()[$currentConversationId()]
+  // const isStreaming = () => !!$streamsMap()[$currentConversationId()]
+  // const isLoading = () => !!$loadingStateMap()[$currentConversationId()]
+
+  createEffect(() => {
+    const conversation = currentConversation()
+    document.title = conversation ? `${(conversation.name || t('conversations.untitled'))} • Anse` : 'Anse'
+    const link = document.querySelector("link[rel~='icon']") as HTMLLinkElement
+    if (link) {
+      const conversationIcon = conversation?.icon ? `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${conversation.icon}</text></svg>` : null
+      link.setAttribute('href', conversationIcon || '/logo.svg')
+    }
+  })
 
   return (
     <Switch