chat WIP

client/Dockerfile.web

@@ -2,9 +2,6 @@ FROM node:lts-alpine AS builder
 
 WORKDIR /app
 
-RUN corepack enable
-RUN yarn set version stable
-
 COPY package.json yarn.lock .yarnrc.yml ./
 COPY .yarn ./.yarn
 

client/Dockerfile.windows

@@ -3,8 +3,6 @@ FROM node:lts AS builder
 
 WORKDIR /app
 
-# RUN corepack enable yarn && yarn set version stable
-
 COPY package.json yarn.lock .yarnrc.yml ./
 COPY .yarn ./.yarn
 

client/app/assets/styles/main.scss

@@ -28,3 +28,20 @@ body {
 .p-scrollpanel-bar-y {
   translate: -0.25rem;
 }
+
+.p-select-overlay {
+  /* Force dropdown width to match computed min-width from PrimeVue internals. */
+  width: 0;
+}
+
+.p-select-label {
+  width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.p-select-option-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

client/app/components.d.ts

@@ -13,19 +13,23 @@ declare module 'vue' {
     PrimeButton: typeof import('primevue/button')['default']
     PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
     PrimeCard: typeof import('primevue/card')['default']
-    PrimeDivider: typeof import('primevue/divider')['default']
     PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
-    PrimeMenu: typeof import('primevue/menu')['default']
     PrimePassword: typeof import('primevue/password')['default']
-    PrimeProgressBar: typeof import('primevue/progressbar')['default']
     PrimeScrollPanel: typeof import('primevue/scrollpanel')['default']
-    PrimeSelect: typeof import('primevue/select')['default']
     PrimeSelectButton: typeof import('primevue/selectbutton')['default']
     PrimeSlider: typeof import('primevue/slider')['default']
+    PrimeTab: typeof import('primevue/tab')['default']
+    PrimeTabList: typeof import('primevue/tablist')['default']
+    PrimeTabPanel: typeof import('primevue/tabpanel')['default']
+    PrimeTabPanels: typeof import('primevue/tabpanels')['default']
+    PrimeTabs: typeof import('primevue/tabs')['default']
+    PrimeTextarea: typeof import('primevue/textarea')['default']
     PrimeToast: typeof import('primevue/toast')['default']
-    PrimeToggleSwitch: typeof import('primevue/toggleswitch')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
+  export interface ComponentCustomProperties {
+    Tooltip: typeof import('primevue/tooltip')['default']
+  }
 }

client/app/components/ClientRow.vue

@@ -1,107 +1,129 @@
 <template>
-  <div class="py-3">
+  <div
-    <div class="flex items-center gap-3">
+    class="overflow-hidden rounded-xl transition-[background-color]"
+    :class="{
+      'hover:bg-surface-800 cursor-pointer': !isMe,
+      'bg-surface-800': expanded,
+    }"
+  >
+    <div class="p-3 flex items-center gap-3" @click="toggleExpand">
       <PrimeAvatar size="small">
         <template #icon>
           <User :size="20" />
         </template>
       </PrimeAvatar>
 
-      <div class="flex-1 overflow-hidden">
+      <div class="flex-1 overflow-hidden text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
-        <div class="overflow-hidden text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
+        {{ client.displayName || client.username }}
-          {{ client.displayName }}
-        </div>
-        <div v-if="client.username !== client.displayName" class="overflow-hidden mt-1 text-xs leading-5 text-muted-color">
-          {{ client.username }}
-        </div>
       </div>
 
-      <PrimeBadge v-if="client.outputMuted" severity="info" value="No sound" />
+      <div class="flex align-center gap-1">
-      <PrimeBadge v-else-if="inputMuted" severity="info" value="Muted" />
+        <PrimeBadge v-if="!!shareConsumer" v-tooltip.top="'Watch'" severity="success" value="Streaming" size="small" @click.stop="watchStream" />
-      <PrimeBadge v-if="isMe" severity="secondary" value="You" />
 
-      <template v-if="!isMe">
+        <PrimeBadge v-if="premuted" severity="danger" value="Muted" size="small" />
-        <PrimeButton icon="pi pi-ellipsis-h" text size="small" severity="contrast" @click="menuRef?.toggle" />
+        <PrimeBadge v-else-if="client.outputMuted" severity="info" value="No sound" size="small" />
+        <PrimeBadge v-else-if="inputMuted" severity="info" value="Muted" size="small" />
 
-        <PrimeMenu ref="menu" popup :model="menuItems" style="translate: calc(-100% + 2rem) 0.5rem">
+        <PrimeBadge v-if="isMe" severity="secondary" value="You" size="small" class="shrink-0" />
-          <template #start>
+      </div>
-            <div class="px-4 py-3">
+
-              <div class="flex justify-between">
+      <Component :is="expanded ? ChevronUp : ChevronDown" v-if="!isMe" :size="20" />
-                <span>Volume</span>
-                <span>{{ volume }}</span>
-              </div>
-              <PrimeSlider v-model="volume" class="mt-4" :min="0" :max="1000" :step="volume < 200 ? 5 : 25" />
-            </div>
-          </template>
-        </PrimeMenu>
-      </template>
     </div>
+
+    <CollapseTransition v-if="!isMe">
+      <div v-if="expanded">
+        <div class="px-3 pb-3">
+          <div class="flex justify-between text-sm mb-3">
+            <span>Volume</span>
+            <span>{{ volume }}</span>
+          </div>
+          <PrimeSlider v-model="volume" :min="0" :max="1000" :step="volume < 200 ? 5 : 25" />
+
+          <div class="mt-3 flex gap-1 justify-end">
+            <PrimeButton size="small" variant="text" @click="premuted = !premuted">
+              {{ premuted ? 'Unmute' : 'Mute' }}
+            </PrimeButton>
+          </div>
+        </div>
+      </div>
+    </CollapseTransition>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { ChadClient } from '#shared/types'
-import type { MenuItem } from 'primevue/menuitem'
 import { useLocalStorage } from '@vueuse/core'
-import { User } from 'lucide-vue-next'
+import { ChevronDown, ChevronUp, User } from 'lucide-vue-next'
+import CollapseTransition from '~/components/CollapseTransition.vue'
 
 const props = defineProps<{
   client: ChadClient
 }>()
 
 const { outputMuted } = useApp()
-const { getClientConsumers, micProducer } = useMediasoup()
+const { consumers: allConsumers, micProducer } = useMediasoup()
 const { me } = useClients()
+const { show } = useFullscreenVideo()
+
+const expanded = ref(false)
 
 const volume = useLocalStorage<number>(computed(() => `CLIENT_VOLUME_${props.client.userId}`), 100, { writeDefaults: false })
-
+const premuted = useLocalStorage<boolean>(computed(() => `CLIENT_PREMUTED_${props.client.userId}`), false, { writeDefaults: false })
-const menuRef = useTemplateRef<HTMLAudioElement>('menu')
-
-const menuItems: MenuItem[] = [
-  // {
-  //   label: 'Mute',
-  //   icon: 'pi pi-headphones',
-  // },
-  // {
-  //   label: 'DM',
-  //   icon: 'pi pi-comment',
-  //   disabled: true,
-  // },
-]
 
 const isMe = computed(() => {
   return me.value && props.client.userId === me.value.userId
 })
 
-const audioConsumer = computed(() => {
+const consumers = computed(() => {
-  if (isMe.value)
+  return allConsumers.value.values().filter(consumer => consumer.appData.socketId === props.client.socketId).toArray()
-    return undefined
-
-  const consumers = getClientConsumers(props.client.socketId)
-
-  return consumers.find(consumer => consumer.track.kind === 'audio')
 })
 
-const inputMuted = computed(() => {
+const audioConsumer = computed(() => {
-  if (isMe.value)
+  return consumers.value.find(consumer => consumer.track.kind === 'audio')
-    return micProducer.value?.paused ?? false
+})
 
-  const consumers = getClientConsumers(props.client.socketId)
+const videoConsumers = computed(() => {
+  return consumers.value.filter(consumer => consumer.track.kind === 'video')
+})
 
-  return consumers.find(consumer => consumer.track.kind === 'audio')?.paused
+const shareConsumer = computed(() => {
+  return videoConsumers.value.find(consumer => consumer.appData.source === 'share')
 })
 
 const audioTrack = computed(() => {
   return audioConsumer.value?.track
 })
 
+const audioConsumerPaused = ref(false)
+
+const inputMuted = computed(() => {
+  if (isMe.value)
+    return micProducer.value?.paused ?? false
+
+  return premuted.value || audioConsumerPaused.value
+})
+
+watch(allConsumers, () => {
+  audioConsumerPaused.value = audioConsumer.value?.paused ?? false
+})
+
 const { setGain } = useAudioContext(audioTrack)
 
-watch(volume, (volume) => {
+watchEffect(() => {
-  setGain(outputMuted.value ? 0 : (volume * 0.01))
+  setGain((outputMuted.value || premuted.value) ? 0 : (volume.value * 0.01))
-}, { immediate: true })
-
-watch(outputMuted, (outputMuted) => {
-  setGain(outputMuted ? 0 : (volume.value * 0.01))
 })
+
+function toggleExpand() {
+  if (isMe.value)
+    return
+
+  expanded.value = !expanded.value
+}
+
+function watchStream() {
+  if (!shareConsumer.value)
+    return
+
+  show(new MediaStream([shareConsumer.value.track]))
+}
 </script>

client/app/components/CollapseTransition.vue

@@ -0,0 +1,118 @@
+<template>
+  <Transition name="collapse-transition" v-on="bindings">
+    <slot />
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+import type { RendererElement } from 'vue'
+
+defineOptions({
+  name: 'CollapseTransition',
+})
+
+const emit = defineEmits<{
+  expanded: []
+  collapsed: []
+}>()
+
+const bindings = {
+  beforeEnter(el: RendererElement) {
+    if (!el.dataset)
+      el.dataset = {}
+
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
+    el.dataset.elExistsHeight = el.style.height ?? undefined
+    el.style.maxHeight = 0
+    el.style.paddingTop = 0
+    el.style.paddingBottom = 0
+  },
+
+  enter(el: RendererElement) {
+    requestAnimationFrame(() => {
+      el.dataset.oldOverflow = el.style.overflow
+      if (el.dataset.elExistsHeight) {
+        el.style.maxHeight = el.dataset.elExistsHeight
+      }
+      else if (el.scrollHeight !== 0) {
+        el.style.maxHeight = `${el.scrollHeight}px`
+      }
+      else {
+        el.style.maxHeight = 0
+      }
+
+      el.style.paddingTop = el.dataset.oldPaddingTop
+      el.style.paddingBottom = el.dataset.oldPaddingBottom
+      el.style.overflow = 'hidden'
+    })
+  },
+
+  afterEnter(el: RendererElement) {
+    el.style.maxHeight = ''
+    el.style.overflow = el.dataset.oldOverflow
+
+    emit('expanded')
+  },
+
+  enterCancelled(el: RendererElement) {
+    reset(el)
+  },
+
+  beforeLeave(el: RendererElement) {
+    if (!el.dataset)
+      el.dataset = {}
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
+    el.dataset.oldOverflow = el.style.overflow
+
+    el.style.maxHeight = `${el.scrollHeight}px`
+    el.style.overflow = 'hidden'
+  },
+
+  leave(el: RendererElement) {
+    if (el.scrollHeight !== 0) {
+      el.style.maxHeight = 0
+      el.style.paddingTop = 0
+      el.style.paddingBottom = 0
+    }
+  },
+
+  afterLeave(el: RendererElement) {
+    reset(el)
+
+    emit('collapsed')
+  },
+
+  leaveCancelled(el: RendererElement) {
+    reset(el)
+  },
+}
+
+function reset(el: RendererElement) {
+  el.style.maxHeight = ''
+  el.style.overflow = el.dataset.oldOverflow
+  el.style.paddingTop = el.dataset.oldPaddingTop
+  el.style.paddingBottom = el.dataset.oldPaddingBottom
+}
+</script>
+
+<style lang="scss">
+.collapse-transition {
+  transition-property: height, padding-top, padding-bottom;
+  transition-timing-function: var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-duration: var(--default-transition-duration, 150ms);
+}
+
+.collapse-transition-leave-active,
+.collapse-transition-enter-active {
+  transition-property: opacity, max-height, padding-top, padding-bottom;
+  transition-timing-function: var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-duration: var(--default-transition-duration, 150ms);
+}
+
+.collapse-transition-leave-to,
+.collapse-transition-enter-from {
+  opacity: 0;
+}
+</style>

client/app/components/chat/ChatEditor.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="chat-editor">
+    <PrimeTextarea v-model="msg" />
+    <PrimeButton :disabled="!msg" @click="handleSend()">
+      Send
+    </PrimeButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Emits {
+  (e: 'send', msg: string): void
+}
+
+const emit = defineEmits<Emits>()
+
+const msg = ref<string | undefined>()
+
+function handleSend() {
+  emit('send', msg.value!)
+
+  msg.value = ''
+}
+</script>
+
+<style lang="scss">
+
+</style>

client/app/components/chat/ChatMessage.vue

@@ -0,0 +1,27 @@
+<template>
+  <PrimeCard>
+    <template #header>
+      <span class="font-bold">
+        {{ username }}
+      </span>
+    </template>
+    <template #content>
+      {{ message }}
+    </template>
+    <template #footer>
+      {{ createdAt }}
+    </template>
+  </PrimeCard>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  username: string
+  message: string
+  createdAt: Date
+}
+
+defineProps<Props>()
+</script>
+
+<style lang="scss"></style>

client/app/components/chat/ChatWidget.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="chat-tabs">
+    <div class="chat-tabs__messages">
+      <ChatMessage v-for="msg in messages" :key="msg.id" :created-at="msg.createdAt" :username="msg.username" :message="msg.message" />
+    </div>
+
+    <PrimeTabs :value="channels[0]">
+      <PrimeTabList>
+        <PrimeTab v-for="channel in channels" :key="channel" :value="channel">
+          Channel: {{ channel }}
+        </PrimeTab>
+      </PrimeTabList>
+      <PrimeTabPanels>
+        <PrimeTabPanel :value="channel">
+          <ChatEditor />
+        </PrimeTabPanel>
+      </PrimeTabPanels>
+    </PrimeTabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const {
+  channel,
+
+  messages,
+  channels,
+} = useChat()
+</script>
+
+<style lang="scss" scoped>
+
+</style>

client/app/composables/use-app.ts

@@ -65,7 +65,7 @@ export const useApp = createGlobalState(() => {
     await muteInput()
 
     await signaling.socket.value?.emitWithAck('updateClient', {
-      outputMuted: false,
+      outputMuted: true,
     })
 
     toast.add({ severity: 'info', summary: 'Sound muted', closable: false, life: 1000 })

client/app/composables/use-chat.ts

@@ -0,0 +1,44 @@
+import { createGlobalState } from '@vueuse/core'
+
+interface ChatMessage {
+  id: string
+  username: string
+  message: string
+}
+
+interface ChatChannel {
+  id: number
+  name: string
+}
+
+export const useChat = createGlobalState(() => {
+  const messages = ref([
+    {
+      id: '1337',
+      username: 'Yes',
+      message: 'Fisting is 300 bucks',
+      createdAt: Date.now(),
+    },
+  ])
+
+  const channel = ref<number>(0)
+
+  async function sendMsg(channelId: ChatChannel['id'], msg: ChatMessage['message']) {
+    console.log('Trying to send message', channelId, msg)
+  }
+
+  watch(channel, async (id) => {
+    await console.log('Yes', id)
+  }, {
+    immediate: true,
+  })
+
+  return {
+    channel,
+
+    channels,
+    messages,
+
+    sendMsg,
+  }
+})

client/app/composables/use-fullscreen-video.ts

@@ -0,0 +1,51 @@
+import { createGlobalState, useEventListener } from '@vueuse/core'
+
+export const useFullscreenVideo = createGlobalState(() => {
+  const videoEl = shallowRef<HTMLVideoElement>()
+
+  const visible = computed(() => !!videoEl.value)
+
+  async function show(stream: MediaStream) {
+    if (videoEl.value) {
+      videoEl.value.srcObject = stream
+    }
+    else {
+      const el = document.createElement('video')
+      el.srcObject = stream
+      el.autoplay = true
+      el.playsInline = true
+      el.controls = false
+      el.muted = true
+      // el.style.position = 'fixed'
+      // el.style.top = '0'
+      // el.style.left = '0'
+      // el.style.width = '1px'
+      // el.style.height = '1px'
+      // el.style.opacity = '0'
+      // el.style.pointerEvents = 'none'
+
+      document.body.appendChild(el)
+
+      videoEl.value = el
+    }
+
+    await videoEl.value.requestFullscreen()
+  }
+
+  function hide() {
+    videoEl.value?.remove()
+  }
+
+  useEventListener(document, 'fullscreenchange', () => {
+    if (!document.fullscreenElement && videoEl.value) {
+      videoEl.value?.remove()
+      videoEl.value = undefined
+    }
+  })
+
+  return {
+    visible,
+    show,
+    hide,
+  }
+})

client/app/composables/use-mediasoup.ts

@@ -1,7 +1,7 @@
-import type { ChadClient } from '#shared/types'
 import type { MediaKind, ProducerOptions } from 'mediasoup-client/types'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
+import { useDevices } from '~/composables/use-devices'
 import { usePreferences } from '~/composables/use-preferences'
 import { useSignaling } from '~/composables/use-signaling'
 
@@ -26,6 +26,7 @@ export const useMediasoup = createSharedComposable(() => {
   const signaling = useSignaling()
   const { addClient, removeClient } = useClients()
   const preferences = usePreferences()
+  const { getShareStream } = useDevices()
 
   const device = shallowRef<mediasoupClient.Device>()
   const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
@@ -213,8 +214,6 @@ export const useMediasoup = createSharedComposable(() => {
 
       consumer.pause()
 
-      console.log(consumerId)
-
       triggerRef(consumers)
     })
 
@@ -230,10 +229,6 @@ export const useMediasoup = createSharedComposable(() => {
     })
   }, { immediate: true, flush: 'sync' })
 
-  function getClientConsumers(socketId: ChadClient['socketId']) {
-    return consumers.value.values().filter(consumer => consumer.appData.socketId === socketId)
-  }
-
   async function enableProducer(type: ProducerType, options: ProducerOptions) {
     const producer = getProducerByType(type)
 
@@ -322,13 +317,7 @@ export const useMediasoup = createSharedComposable(() => {
     if (!device.value)
       return
 
-    const stream = await navigator.mediaDevices.getDisplayMedia({
+    const stream = await getShareStream()
-      audio: false,
-      video: {
-        displaySurface: 'monitor',
-        frameRate: { max: 30 },
-      },
-    })
 
     const track = stream.getVideoTracks()[0]
 
@@ -442,7 +431,6 @@ export const useMediasoup = createSharedComposable(() => {
     micProducer,
     cameraProducer,
     shareProducer,
-    getClientConsumers,
     pauseProducer,
     resumeProducer,
     enableShare,

client/app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-2 gap-2 p-2 h-screen grid-rows-[auto_1fr]">
+  <div class="grid grid-cols-[1fr_1.25fr] gap-2 p-2 h-screen grid-rows-[auto_1fr]">
     <div
       class="flex items-center justify-between gap-2 rounded-xl p-3 bg-surface-950"
     >
@@ -9,19 +9,19 @@
       </div>
 
       <PrimeButtonGroup class="ml-auto">
-        <PrimeButton outlined @click="toggleInput">
+        <PrimeButton :severity="inputMuted ? 'info' : undefined" outlined @click="toggleInput">
           <template #icon>
             <Component :is="inputMuted ? MicOff : Mic" />
           </template>
         </PrimeButton>
-        <PrimeButton outlined @click="toggleOutput">
+        <PrimeButton :severity="outputMuted ? 'info' : undefined" outlined @click="toggleOutput">
           <template #icon>
             <Component :is="outputMuted ? VolumeOff : Volume2" />
           </template>
         </PrimeButton>
       </PrimeButtonGroup>
 
-      <PrimeButton outlined @click="toggleShare">
+      <PrimeButton :severity="sharingEnabled ? 'success' : undefined" outlined @click="toggleShare">
         <template #icon>
           <Component :is="sharingEnabled ? ScreenShareOff : ScreenShare" />
         </template>
@@ -45,8 +45,8 @@
     </div>
 
     <PrimeScrollPanel class="bg-surface-900 rounded-xl" style="min-height: 0">
-      <div v-auto-animate class="p-3 divide-y divide-surface-800">
+      <div v-auto-animate class="p-3 space-y-1">
-        <ClientRow v-for="client of clients" :key="client.id" :client="client" />
+        <ClientRow v-for="client of clients" :key="client.userId" :client="client" />
       </div>
     </PrimeScrollPanel>
 
@@ -71,7 +71,17 @@ import {
   VolumeOff,
 } from 'lucide-vue-next'
 
-const { clients, inputMuted, toggleInput, outputMuted, toggleOutput, version, isTauri, sharingEnabled, toggleShare } = useApp()
+const {
+  isTauri,
+  version,
+  clients,
+  inputMuted,
+  outputMuted,
+  sharingEnabled,
+  toggleInput,
+  toggleOutput,
+  toggleShare,
+} = useApp()
 const { connect, connected } = useSignaling()
 
 interface Tab {

client/app/middleware/01.auth.global.ts

@@ -18,6 +18,6 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   }
 
   if (me.value && to.meta.auth === 'guest') {
-    return navigateTo('/')
+    return navigateTo({ name: 'Index' })
   }
 })

client/app/pages/index.vue

@@ -3,47 +3,15 @@
     <div class="flex items-center justify-center">
       <PrimeCard>
         <template #content>
-          The chat is under development.
+          <ChatWidget />
         </template>
       </PrimeCard>
     </div>
-
-    <video
-      v-if="!!shareConsumer"
-      ref="shareVideo"
-      class="w-full aspect-video border border-surface-700 rounded mt-6 cursor-pointer"
-      autoplay
-      playsinline
-      @click="toFullscreen"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { unrefElement } from '@vueuse/core'
-
 definePageMeta({
   name: 'Index',
 })
-
-const shareVideoRef = useTemplateRef('shareVideo')
-
-const { consumers } = useMediasoup()
-
-const shareConsumer = computed(() => {
-  return consumers.value.values().find(consumer => consumer.kind === 'video' && consumer.appData?.source === 'share')
-})
-
-watchEffect(() => {
-  if (!shareVideoRef.value || !shareConsumer.value)
-    return
-
-  const stream = new MediaStream([shareConsumer.value.track])
-
-  unrefElement(shareVideoRef)!.srcObject = stream
-})
-
-function toFullscreen() {
-  unrefElement(shareVideoRef)?.requestFullscreen()
-}
 </script>

client/src-tauri/src/lib.rs

@@ -4,7 +4,7 @@ pub fn run() {
         .plugin(tauri_plugin_global_shortcut::Builder::new().build())
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_updater::Builder::new().build())
-        .plugin(tauri_plugin_single_instance::init(|_, _, _| {}))
+//         .plugin(tauri_plugin_single_instance::init(|_, _, _| {}))
         .setup(|app| {
             if cfg!(debug_assertions) {
                 app.handle().plugin(

client/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "chad",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",

node_modules/.yarn-integrity

@@ -0,0 +1,12 @@
+{
+  "systemParams": "win32-x64-137",
+  "modulesFolders": [
+    "node_modules"
+  ],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}

server/modules/chat/index.ts

@@ -0,0 +1,22 @@
+import client from '../../prisma/client.ts'
+
+export async function chatInit() {
+  const existing = client.chatChannel.findFirst({
+    where: {
+      id: 0,
+    },
+  })
+
+  if (!existing) {
+    await client.chatChannel.create({
+      create: {
+        id: 0,
+        name: 'Main channel',
+      },
+      update: null,
+      where: {
+        id: 0,
+      },
+    })
+  }
+}

server/prisma/migrations/20251226183651_minus_nahuy/migration.sql

@@ -0,0 +1,20 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `volumes` on the `UserPreferences` table. All the data in the column will be lost.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_UserPreferences" (
+    "userId" TEXT NOT NULL PRIMARY KEY,
+    "toggleInputHotkey" TEXT DEFAULT '',
+    "toggleOutputHotkey" TEXT DEFAULT '',
+    CONSTRAINT "UserPreferences_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+INSERT INTO "new_UserPreferences" ("toggleInputHotkey", "toggleOutputHotkey", "userId") SELECT "toggleInputHotkey", "toggleOutputHotkey", "userId" FROM "UserPreferences";
+DROP TABLE "UserPreferences";
+ALTER TABLE "new_UserPreferences" RENAME TO "UserPreferences";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

server/prisma/migrations/20251226190516_chat/migration.sql

@@ -0,0 +1,18 @@
+-- CreateTable
+CREATE TABLE "ChatMessage" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "channelId" TEXT NOT NULL,
+    "content" TEXT NOT NULL DEFAULT '',
+    CONSTRAINT "ChatMessage_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE,
+    CONSTRAINT "ChatMessage_channelId_fkey" FOREIGN KEY ("channelId") REFERENCES "ChatChannel" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "ChatChannel" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ChatChannel_name_key" ON "ChatChannel"("name");

server/prisma/migrations/20251226194252_more_chat_wip/migration.sql

@@ -0,0 +1,34 @@
+/*
+  Warnings:
+
+  - The primary key for the `ChatChannel` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - You are about to alter the column `id` on the `ChatChannel` table. The data in that column could be lost. The data in that column will be cast from `String` to `Int`.
+  - You are about to alter the column `channelId` on the `ChatMessage` table. The data in that column could be lost. The data in that column will be cast from `String` to `Int`.
+  - Added the required column `createdAt` to the `ChatMessage` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_ChatChannel" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "name" TEXT NOT NULL
+);
+INSERT INTO "new_ChatChannel" ("id", "name") SELECT "id", "name" FROM "ChatChannel";
+DROP TABLE "ChatChannel";
+ALTER TABLE "new_ChatChannel" RENAME TO "ChatChannel";
+CREATE UNIQUE INDEX "ChatChannel_name_key" ON "ChatChannel"("name");
+CREATE TABLE "new_ChatMessage" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "channelId" INTEGER NOT NULL,
+    "content" TEXT NOT NULL DEFAULT '',
+    "createdAt" DATETIME NOT NULL,
+    CONSTRAINT "ChatMessage_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE,
+    CONSTRAINT "ChatMessage_channelId_fkey" FOREIGN KEY ("channelId") REFERENCES "ChatChannel" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+INSERT INTO "new_ChatMessage" ("channelId", "content", "id", "userId") SELECT "channelId", "content", "id", "userId" FROM "ChatMessage";
+DROP TABLE "ChatMessage";
+ALTER TABLE "new_ChatMessage" RENAME TO "ChatMessage";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

server/prisma/migrations/20251226194927_more_chat_wip/migration.sql

@@ -0,0 +1,17 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_ChatMessage" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "channelId" INTEGER NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "ChatMessage_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE,
+    CONSTRAINT "ChatMessage_channelId_fkey" FOREIGN KEY ("channelId") REFERENCES "ChatChannel" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+INSERT INTO "new_ChatMessage" ("channelId", "content", "createdAt", "id", "userId") SELECT "channelId", "content", "createdAt", "id", "userId" FROM "ChatMessage";
+DROP TABLE "ChatMessage";
+ALTER TABLE "new_ChatMessage" RENAME TO "ChatMessage";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

server/prisma/schema.prisma

@@ -18,6 +18,8 @@ model User {
 
   Session           Session[]
   UserPreferences   UserPreferences?
+
+  ChatMessage ChatMessage[]
 }
 
 model Session {
@@ -34,7 +36,26 @@ model UserPreferences {
   userId              String  @id
   toggleInputHotkey   String? @default("")
   toggleOutputHotkey  String? @default("")
-  volumes             Json?   @default("{}")
 
   user                User    @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
+
+model ChatMessage {
+  id String @id
+
+  userId String
+  channelId Int
+  content String
+
+  createdAt DateTime @default(now())
+
+  user User @relation(fields: [userId], references: [id], onDelete: Restrict)
+  channel ChatChannel @relation(fields: [channelId], references: [id], onDelete: Cascade)
+}
+
+model ChatChannel {
+  id Int @id
+  name String @unique
+
+  messages ChatMessage[]
+}

server/routes/chat.ts

@@ -0,0 +1,23 @@
+import type { FastifyInstance } from 'fastify'
+import prisma from '../prisma/client.ts'
+
+export default function (fastify: FastifyInstance) {
+  fastify.get('/chats', async (req, reply) => {
+    if (req.user) {
+      return prisma.chatChannel.findMany()
+    }
+
+    reply.code(401).send(false)
+  })
+
+  fastify.get('/chats/:id', async (req, reply) => {
+    if (req.user) {
+      console.log('Trying to fetch chat with id', req.body.id)
+
+      // return prisma.userPreferences.findFirst({ where: { userId: req.user.id } })
+      return true
+    }
+
+    reply.code(401).send(false)
+  })
+}

server/server.ts

@@ -4,6 +4,7 @@ import FastifyAutoLoad from '@fastify/autoload'
 import FastifyCookie from '@fastify/cookie'
 import FastifyCors from '@fastify/cors'
 import Fastify from 'fastify'
+import { chatInit } from './modules/chat/index.ts'
 import prisma from './prisma/client.ts'
 
 const __filename = fileURLToPath(import.meta.url)
@@ -43,6 +44,8 @@ fastify.register(FastifyAutoLoad, {
 
     await prisma.$connect()
     fastify.log.info('Testing DB Connection. OK')
+
+    await chatInit()
   }
   catch (err) {
     fastify.log.error(err)

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+