начало чата

client/app/components.d.ts

@@ -15,6 +15,8 @@ declare module 'vue' {
     PrimeCard: typeof import('primevue/card')['default']
     PrimeDivider: typeof import('primevue/divider')['default']
     PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
+    PrimeInputGroup: typeof import('primevue/inputgroup')['default']
+    PrimeInputGroupAddon: typeof import('primevue/inputgroupaddon')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimePassword: typeof import('primevue/password')['default']
     PrimeProgressBar: typeof import('primevue/progressbar')['default']
@@ -23,6 +25,7 @@ declare module 'vue' {
     PrimeSelectButton: typeof import('primevue/selectbutton')['default']
     PrimeSlider: typeof import('primevue/slider')['default']
     PrimeTag: typeof import('primevue/tag')['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']

client/app/composables/use-chat.ts

@@ -0,0 +1,55 @@
+import { createGlobalState } from '@vueuse/core'
+
+export interface ChatClientMessage {
+  text: string
+  replyTo?: {
+    messageId: string
+  }
+}
+
+export interface ChatMessage {
+  id: string
+  sender: string
+  text: string
+  createdAt: string
+  replyTo?: {
+    messageId: string
+    sender: string
+    text: string
+  }
+}
+
+export const useChat = createGlobalState(() => {
+  const signaling = useSignaling()
+  const { emit } = useEventBus()
+
+  const messages = shallowRef<ChatMessage[]>([])
+
+  watch(signaling.socket, (socket) => {
+    if (!socket)
+      return
+
+    socket.on('chat:new-message', (message: ChatMessage) => {
+      messages.value.push(message)
+      triggerRef(messages)
+
+      emit('chat:new-message')
+    })
+
+    socket.on('disconnect', () => {
+      messages.value = []
+    })
+  }, { immediate: true })
+
+  function sendMessage(message: ChatClientMessage) {
+    if (!signaling.connected.value)
+      return
+
+    signaling.socket.value!.emit('chat:message', message)
+  }
+
+  return {
+    messages,
+    sendMessage,
+  }
+})

client/app/composables/use-event-bus.ts

@@ -29,6 +29,8 @@ export interface AppEvents extends Record<EventType, unknown> {
   'video:disabled': void
   'share:enabled': void
   'share:disabled': void
+
+  'chat:new-message': void
 }
 
 const emitter = mitt<AppEvents>()

client/app/composables/use-sfx.ts

@@ -15,7 +15,7 @@ function hashStringToNumber(str: string, cap: number): number {
 
 const oneShots: Howl[] = []
 
-type SfxEvent = 'mic-on' | 'mic-off' | 'stream-on' | 'stream-off' | 'connection'
+type SfxEvent = 'mic-on' | 'mic-off' | 'stream-on' | 'stream-off' | 'connection' | 'message'
 
 const EVENT_VOLUME: Record<SfxEvent, number> = {
   'mic-on': 0.2,

client/app/composables/use-signaling.ts

@@ -66,7 +66,7 @@ export const useSignaling = createSharedComposable(() => {
 
     const uri = host ? `${protocol}//${host}` : ``
 
-    socket.value = io(`${uri}/webrtc`, {
+    socket.value = io(uri, {
       path: `${pathname}/ws`,
       transports: ['websocket'],
       withCredentials: true,

client/app/layouts/default.vue

@@ -56,11 +56,9 @@
       </div>
     </PrimeScrollPanel>
 
-    <PrimeScrollPanel class="bg-surface-900 rounded-xl overflow-hidden" style="min-height: 0">
-      <div class="p-3">
-        <slot />
-      </div>
-    </PrimeScrollPanel>
+    <div class="bg-surface-900 rounded-xl overflow-hidden p-3 flex flex-col min-h-full">
+      <slot />
+    </div>
   </div>
 
   <FullscreenGallery />

client/app/pages/gallery.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-[1fr_1fr] gap-2">
+  <PrimeScrollPanel class="grid grid-cols-[1fr_1fr] gap-2 min-h-0">
     <GalleryCard
       v-for="producer in producers"
       :key="`producer-${producer.id}`"
@@ -13,7 +13,7 @@
       :client="consumer.client"
       :consumer="consumer.consumer"
     />
-  </div>
+  </PrimeScrollPanel>
 </template>
 
 <script setup lang="ts">

client/app/pages/index.vue

@@ -1,17 +1,85 @@
 <template>
-  <div>
-    <div class="flex items-center justify-center">
-      <PrimeCard>
-        <template #content>
-          The chat is under development.
-        </template>
-      </PrimeCard>
+  <PrimeScrollPanel class="flex-1 min-h-0">
+    <div v-auto-animate class="flex flex-col gap-3">
+      <div
+        v-for="message in messages"
+        :key="message.id"
+        class="min-w-64 w-fit max-w-[60%]"
+        :class="{
+          'ml-auto': message.sender === me?.username,
+        }"
+      >
+        <p
+          v-if="message.sender !== me?.username"
+          class="text-sm text-muted-color mb-1"
+        >
+          {{ message.sender }}
+        </p>
+
+        <div
+          class="px-2 py-1 rounded-lg"
+          :class="{
+            'bg-surface-800': message.sender !== me?.username,
+            'bg-surface-700': message.sender === me?.username,
+          }"
+        >
+          <p v-html="parseMessageText(message.text)" />
+          <p class="text-right text-sm text-muted-color">
+            {{ formatDate(message.createdAt) }}
+          </p>
+        </div>
+      </div>
     </div>
+  </PrimeScrollPanel>
+
+  <div class="pt-3 mt-auto">
+    <PrimeInputGroup>
+      <!--      <PrimeInputGroupAddon> -->
+      <!--        <PrimeButton severity="secondary" class="shrink-0" disabled> -->
+      <!--          <template #icon> -->
+      <!--            <Paperclip /> -->
+      <!--          </template> -->
+      <!--        </PrimeButton> -->
+      <!--      </PrimeInputGroupAddon> -->
+
+      <PrimeInputText v-model="text" placeholder="Write a message..." fluid @keydown.enter="sendMessage" />
+
+      <PrimeButton class="shrink-0" label="Send" severity="contrast" @click="sendMessage" />
+    </PrimeInputGroup>
   </div>
 </template>
 
 <script setup lang="ts">
+import { format } from 'date-fns'
+import linkifyStr from 'linkify-string'
+import { useChat } from '~/composables/use-chat'
+
 definePageMeta({
   name: 'Index',
 })
+
+const { me } = useClients()
+const chat = useChat()
+const { messages } = chat
+
+const text = ref('')
+
+function parseMessageText(text: string) {
+  return linkifyStr(text, { className: 'underline', rel: 'noopener noreferrer', target: '_blank' })
+}
+
+function formatDate(date: string) {
+  return format(date, 'HH:mm')
+}
+
+function sendMessage() {
+  if (!text.value)
+    return
+
+  chat.sendMessage({
+    text: text.value,
+  })
+
+  text.value = ''
+}
 </script>

client/app/pages/preferences.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <PrimeScrollPanel class="min-h-0">
     <PrimeDivider align="left">
       Audio
     </PrimeDivider>
@@ -132,7 +132,7 @@
         @click="checkForUpdates"
       />
     </template>
-  </div>
+  </PrimeScrollPanel>
 </template>
 
 <script setup lang="ts">

client/app/plugins/sfx-listener.ts

@@ -54,4 +54,8 @@ export default defineNuxtPlugin(() => {
       sfx.playEvent('stream-off')
     }
   })
+
+  on('chat:new-message', () => {
+    sfx.playEvent('message')
+  })
 })

client/package.json

@@ -14,12 +14,15 @@
     "@nuxt/fonts": "^0.11.4",
     "@primeuix/themes": "^1.2.5",
     "@tailwindcss/vite": "^4.1.14",
-    "@tauri-apps/plugin-global-shortcut": "~2",
-    "@tauri-apps/plugin-process": "~2",
-    "@tauri-apps/plugin-updater": "~2",
+    "@tauri-apps/plugin-global-shortcut": "^2.3.1",
+    "@tauri-apps/plugin-process": "^2.3.1",
+    "@tauri-apps/plugin-updater": "^2.10.1",
     "@vueuse/core": "^13.9.0",
+    "date-fns": "^4.1.0",
     "hotkeys-js": "^4.0.0",
     "howler": "^2.2.4",
+    "linkify-string": "^4.3.2",
+    "linkifyjs": "^4.3.2",
     "lucide-vue-next": "^0.562.0",
     "mediasoup-client": "^3.18.6",
     "mitt": "^3.0.1",

client/src-tauri/Cargo.toml

@@ -24,6 +24,7 @@ log = "0.4"
 tauri = { version = "2.8.5", features = [] }
 tauri-plugin-log = "2"
 tauri-plugin-process = "2"
+windows = { version = "0.52", features = ["Win32_UI_Shell"] }
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-global-shortcut = "2"

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/src/main.rs

@@ -1,6 +1,21 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+#[cfg(target_os = "windows")]
+fn set_app_user_model_id() {
+    use windows::core::HSTRING;
+    use windows::Win32::UI::Shell::SetCurrentProcessExplicitAppUserModelID;
+
+    unsafe {
+        SetCurrentProcessExplicitAppUserModelID(
+            &HSTRING::from("xyz.koptilnya.chad")
+        ).ok().expect("Failed to set AppUserModelID");
+    }
+}
+
 fn main() {
+    #[cfg(target_os = "windows")]
+    set_app_user_model_id();
+
     app_lib::run();
 }

client/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Chad",
-  "version": "0.2.35",
+  "version": "0.3.0-rc.1",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",
@@ -23,12 +23,8 @@
         "fullscreen": false,
         "center": true,
         "theme": "Dark",
-        "additionalBrowserArgs": "--disable-features=msWebOOUI,msPdfOOUI,msSmartScreenProtection --autoplay-policy=no-user-gesture-required",
-        "incognito": false,
-        "minimizable": false,
-        "contentProtected": true,
-        "skipTaskbar": true,
-        "alwaysOnBottom": true
+        "additionalBrowserArgs": "--disable-features=msWebOOUI,msPdfOOUI,msSmartScreenProtection --autoplay-policy=no-user-gesture-required --lang=en",
+        "incognito": false
       }
     ],
     "security": {

client/yarn.lock

@@ -2824,10 +2824,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tauri-apps/api@npm:^2.6.0":
-  version: 2.8.0
-  resolution: "@tauri-apps/api@npm:2.8.0"
-  checksum: 10c0/fb111e4d7572372997b440ebe6879543fa8c4765151878e3fddfbfe809b18da29eed142ce83061d14a9ca6d896b3266dc8a4927c642d71cdc0b4277dc7e3aabf
+"@tauri-apps/api@npm:^2.10.1":
+  version: 2.10.1
+  resolution: "@tauri-apps/api@npm:2.10.1"
+  checksum: 10c0/f3c0b2ba67a0b887440a7faa1e0589e847760ee30ec29b964f22573a46b817cb3af2199d6f5f7dfdda54d65b465ebaaa280454c610a5c53d808a0911fa15e45d
   languageName: node
   linkType: hard
 
@@ -2959,7 +2959,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tauri-apps/plugin-global-shortcut@npm:~2":
+"@tauri-apps/plugin-global-shortcut@npm:^2.3.1":
   version: 2.3.1
   resolution: "@tauri-apps/plugin-global-shortcut@npm:2.3.1"
   dependencies:
@@ -2968,21 +2968,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tauri-apps/plugin-process@npm:~2":
-  version: 2.3.0
-  resolution: "@tauri-apps/plugin-process@npm:2.3.0"
+"@tauri-apps/plugin-process@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "@tauri-apps/plugin-process@npm:2.3.1"
   dependencies:
-    "@tauri-apps/api": "npm:^2.6.0"
-  checksum: 10c0/ef50344a7436d92278c2ef4526f72daaf3171c4d65743bbc1f7a00fa581644a8583bb8680f637a34af5c7e6a0e8722c22189290e903584fef70ed83b64b6e9c0
+    "@tauri-apps/api": "npm:^2.8.0"
+  checksum: 10c0/2e5086898f1c9f25f6426a752404c788727237142bbb7c8f418b97c76c5360874d06203150d136e51114df9e720022e4fa3681fd1d4cb6f777dc83c3553f8670
   languageName: node
   linkType: hard
 
-"@tauri-apps/plugin-updater@npm:~2":
-  version: 2.9.0
-  resolution: "@tauri-apps/plugin-updater@npm:2.9.0"
+"@tauri-apps/plugin-updater@npm:^2.10.1":
+  version: 2.10.1
+  resolution: "@tauri-apps/plugin-updater@npm:2.10.1"
   dependencies:
-    "@tauri-apps/api": "npm:^2.6.0"
-  checksum: 10c0/72ce83d1c241308a13b9929f0900e4d33453875877009166e3998e3e75a1003ac48c3641086b4d3230f0f18c64f475ad6c3556d1603fc641ca50dc9c18d61866
+    "@tauri-apps/api": "npm:^2.10.1"
+  checksum: 10c0/5d3813851ccbbf90253ad4647dbd97501c2bb75db864175693322fa6eb062b6e1bae03890810ad0bbe7f6da4e020af35e8c787e6999f8c7c645121164587dc29
   languageName: node
   linkType: hard
 
@@ -4059,15 +4059,18 @@ __metadata:
     "@primevue/nuxt-module": "npm:^4.4.0"
     "@tailwindcss/vite": "npm:^4.1.14"
     "@tauri-apps/cli": "npm:^2.8.4"
-    "@tauri-apps/plugin-global-shortcut": "npm:~2"
-    "@tauri-apps/plugin-process": "npm:~2"
-    "@tauri-apps/plugin-updater": "npm:~2"
+    "@tauri-apps/plugin-global-shortcut": "npm:^2.3.1"
+    "@tauri-apps/plugin-process": "npm:^2.3.1"
+    "@tauri-apps/plugin-updater": "npm:^2.10.1"
     "@types/howler": "npm:^2"
     "@vueuse/core": "npm:^13.9.0"
+    date-fns: "npm:^4.1.0"
     eslint: "npm:^9.36.0"
     eslint-plugin-format: "npm:^1.0.2"
     hotkeys-js: "npm:^4.0.0"
     howler: "npm:^2.2.4"
+    linkify-string: "npm:^4.3.2"
+    linkifyjs: "npm:^4.3.2"
     lucide-vue-next: "npm:^0.562.0"
     mediasoup-client: "npm:^3.18.6"
     mitt: "npm:^3.0.1"
@@ -4566,6 +4569,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "date-fns@npm:4.1.0"
+  checksum: 10c0/b79ff32830e6b7faa009590af6ae0fb8c3fd9ffad46d930548fbb5acf473773b4712ae887e156ba91a7b3dc30591ce0f517d69fd83bd9c38650fdc03b4e0bac8
+  languageName: node
+  linkType: hard
+
 "db0@npm:^0.3.4":
   version: 0.3.4
   resolution: "db0@npm:0.3.4"
@@ -6953,6 +6963,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"linkify-string@npm:^4.3.2":
+  version: 4.3.2
+  resolution: "linkify-string@npm:4.3.2"
+  peerDependencies:
+    linkifyjs: ^4.0.0
+  checksum: 10c0/674e908b46aa6da3ee7e5c0749464d8de55f4d44933d7e9dea4d2f9bb5af0137d45142494288cd120335e21d8298c76ec4524ab6e67edede4613adb5f17f7dc6
+  languageName: node
+  linkType: hard
+
+"linkifyjs@npm:^4.3.2":
+  version: 4.3.2
+  resolution: "linkifyjs@npm:4.3.2"
+  checksum: 10c0/1a85e6b368304a4417567fe5e38651681e3e82465590836942d1b4f3c834cc35532898eb1e2479f6337d9144b297d418eb708b6be8ed0b3dc3954a3588e07971
+  languageName: node
+  linkType: hard
+
 "listhen@npm:^1.9.0":
   version: 1.9.0
   resolution: "listhen@npm:1.9.0"