навалил фокуса

client/app/components.d.ts

@@ -16,7 +16,6 @@ declare module 'vue' {
     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']
@@ -25,7 +24,6 @@ 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-app.ts

@@ -1,5 +1,5 @@
 import { getVersion } from '@tauri-apps/api/app'
-
+import { openUrl as tauriOpenUrl } from '@tauri-apps/plugin-opener'
 import { computedAsync, createGlobalState } from '@vueuse/core'
 import { useClients } from '~/composables/use-clients'
 
@@ -134,6 +134,15 @@ export const useApp = createGlobalState(() => {
     }
   }
 
+  async function openUrl(href: string) {
+    if (isTauri.value) {
+      await tauriOpenUrl(href)
+    }
+    else {
+      window.open(href, '_blank', 'noopener noreferrer')
+    }
+  }
+
   return {
     ready,
     clients,
@@ -153,5 +162,6 @@ export const useApp = createGlobalState(() => {
     videoEnabled,
     sharingEnabled,
     somebodyStreamingVideo,
+    openUrl,
   }
 })

client/app/composables/use-chat.ts

@@ -39,12 +39,17 @@ export const useChat = createGlobalState(() => {
     socket.on('disconnect', () => {
       messages.value = []
     })
-  }, { immediate: true })
+  }, { immediate: true, flush: 'sync' })
 
   function sendMessage(message: ChatClientMessage) {
     if (!signaling.connected.value)
       return
 
+    message.text = message.text.trim()
+
+    if (!message.text.length)
+      return
+
     signaling.socket.value!.emit('chat:message', message)
   }
 

client/app/pages/index.vue

@@ -1,10 +1,14 @@
 <template>
-  <PrimeScrollPanel class="flex-1 min-h-0">
-    <div v-auto-animate class="flex flex-col gap-3">
+  <p v-if="!messages.length" class="text-muted-color text-center m-auto">
+    Chat is empty
+  </p>
+
+  <PrimeScrollPanel v-else ref="scroll" class="flex-1 min-h-0 overflow-x-hidden">
+    <div 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="w-fit max-w-[60%]"
         :class="{
           'ml-auto': message.sender === me?.username,
         }"
@@ -17,14 +21,15 @@
         </p>
 
         <div
-          class="px-2 py-1 rounded-lg"
+          class="px-3 py-2 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">
+          <p class="[&>a]:break-all" @click="handleMessageClick" v-html="parseMessageText(message.text)" />
+
+          <p class="mt-1 text-right text-sm text-muted-color" :title="formatDate(message.createdAt, 'dd.MM.yyyy, HH:mm')">
             {{ formatDate(message.createdAt) }}
           </p>
         </div>
@@ -32,7 +37,7 @@
     </div>
   </PrimeScrollPanel>
 
-  <div class="pt-3 mt-auto">
+  <div class="mt-3 shrink-0">
     <PrimeInputGroup>
       <!--      <PrimeInputGroupAddon> -->
       <!--        <PrimeButton severity="secondary" class="shrink-0" disabled> -->
@@ -42,14 +47,24 @@
       <!--        </PrimeButton> -->
       <!--      </PrimeInputGroupAddon> -->
 
-      <PrimeInputText v-model="text" placeholder="Write a message..." fluid @keydown.enter="sendMessage" />
+      <PrimeInputText
+        ref="input"
+        v-model="text"
+        placeholder="Write a message..."
+        fluid
+        autocomplete="off"
+        @keydown.enter.exact="sendMessage"
+        @vue:mounted="onInputMounted"
+      />
 
-      <PrimeButton class="shrink-0" label="Send" severity="contrast" @click="sendMessage" />
+      <PrimeButton class="shrink-0" label="Send" severity="contrast" :disabled="!text" @click="sendMessage" />
     </PrimeInputGroup>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useEventBus } from '#imports'
+import { onStartTyping, unrefElement, useEventListener } from '@vueuse/core'
 import { format } from 'date-fns'
 import linkifyStr from 'linkify-string'
 import { useChat } from '~/composables/use-chat'
@@ -58,18 +73,37 @@ definePageMeta({
   name: 'Index',
 })
 
+const { openUrl } = useApp()
 const { me } = useClients()
 const chat = useChat()
+const eventBus = useEventBus()
 const { messages } = chat
 
+const scrollRef = useTemplateRef('scroll')
+const inputRef = useTemplateRef('input')
+const contentRef = computed(() => scrollRef.value?.$refs.content)
+
 const text = ref('')
 
+eventBus.on('chat:new-message', onNewMessage)
+
+onScopeDispose(() => {
+  eventBus.off('chat:new-message', onNewMessage)
+})
+
 function parseMessageText(text: string) {
-  return linkifyStr(text, { className: 'underline', rel: 'noopener noreferrer', target: '_blank' })
+  return linkifyStr(
+    text,
+    {
+      className: 'underline',
+      rel: 'noopener noreferrer',
+      target: '_blank',
+    },
+  ).replaceAll('\n', '<br>')
 }
 
-function formatDate(date: string) {
-  return format(date, 'HH:mm')
+function formatDate(date: string, formatStr = 'HH:mm') {
+  return format(date, formatStr)
 }
 
 function sendMessage() {
@@ -82,4 +116,57 @@ function sendMessage() {
 
   text.value = ''
 }
+
+function onInputMounted(ref: VNode) {
+  ref.el?.focus()
+}
+
+useEventListener(window, 'focus', async (evt) => {
+  unrefElement(inputRef.value)?.focus()
+})
+
+onStartTyping(() => {
+  unrefElement(inputRef.value)?.focus()
+})
+
+const ARRIVED_STATE_THRESHOLD_PIXELS = 1
+async function onNewMessage() {
+  if (!contentRef.value)
+    return
+
+  const arrivedBottom = contentRef.value.scrollTop + contentRef.value.clientHeight
+    >= contentRef.value.scrollHeight - ARRIVED_STATE_THRESHOLD_PIXELS
+
+  const scrollable = contentRef.value.scrollHeight > contentRef.value.clientHeight
+
+  await nextTick()
+
+  if (scrollable && !arrivedBottom)
+    return
+
+  contentRef.value.scrollTo({
+    behavior: 'smooth',
+    top: contentRef.value.scrollHeight,
+  })
+}
+
+function handleMessageClick({ target }: MouseEvent) {
+  if (!target)
+    return
+
+  if (target instanceof HTMLElement) {
+    if (target.tagName === 'A') {
+      target.addEventListener('click', onAnchorClick)
+    }
+  }
+}
+
+function onAnchorClick(event: MouseEvent) {
+  event.preventDefault()
+
+  const target = event.target as HTMLAnchorElement
+
+  console.log('yo')
+  openUrl(target.href)
+}
 </script>

client/package.json

@@ -15,6 +15,7 @@
     "@primeuix/themes": "^1.2.5",
     "@tailwindcss/vite": "^4.1.14",
     "@tauri-apps/plugin-global-shortcut": "^2.3.1",
+    "@tauri-apps/plugin-opener": "~2",
     "@tauri-apps/plugin-process": "^2.3.1",
     "@tauri-apps/plugin-updater": "^2.10.1",
     "@vueuse/core": "^13.9.0",

client/src-tauri/Cargo.lock

@@ -86,6 +86,7 @@ dependencies = [
  "tauri-build",
  "tauri-plugin-global-shortcut",
  "tauri-plugin-log",
+ "tauri-plugin-opener",
  "tauri-plugin-process",
  "tauri-plugin-single-instance",
  "tauri-plugin-updater",
@@ -2002,6 +2003,25 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "is-docker"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "928bae27f42bc99b60d9ac7334e3a21d10ad8f1835a4e12ec3ec0464765ed1b3"
+dependencies = [
+ "once_cell",
+]
+
+[[package]]
+name = "is-wsl"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "173609498df190136aa7dea1a91db051746d339e18476eed5ca40521f02d7aa5"
+dependencies = [
+ "is-docker",
+ "once_cell",
+]
+
 [[package]]
 name = "itoa"
 version = "1.0.18"
@@ -2567,6 +2587,18 @@ version = "1.21.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9f7c3e4beb33f85d45ae3e3a1792185706c8e16d043238c593331cc7cd313b50"
 
+[[package]]
+name = "open"
+version = "5.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "43bb73a7fa3799b198970490a51174027ba0d4ec504b03cd08caf513d40024bc"
+dependencies = [
+ "dunce",
+ "is-wsl",
+ "libc",
+ "pathdiff",
+]
+
 [[package]]
 name = "openssl-probe"
 version = "0.2.1"
@@ -2657,6 +2689,12 @@ dependencies = [
  "windows-link 0.2.1",
 ]
 
+[[package]]
+name = "pathdiff"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df94ce210e5bc13cb6651479fa48d14f601d9858cfe0467f43ae157023b938d3"
+
 [[package]]
 name = "percent-encoding"
 version = "2.3.2"
@@ -4275,6 +4313,28 @@ dependencies = [
  "time",
 ]
 
+[[package]]
+name = "tauri-plugin-opener"
+version = "2.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc624469b06f59f5a29f874bbc61a2ed737c0f9c23ef09855a292c389c42e83f"
+dependencies = [
+ "dunce",
+ "glob",
+ "objc2-app-kit",
+ "objc2-foundation",
+ "open",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.18",
+ "url",
+ "windows 0.61.3",
+ "zbus",
+]
+
 [[package]]
 name = "tauri-plugin-process"
 version = "2.3.1"

client/src-tauri/Cargo.toml

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

client/src-tauri/capabilities/desktop.json

@@ -13,6 +13,8 @@
     "global-shortcut:allow-is-registered",
     "global-shortcut:allow-register",
     "global-shortcut:allow-unregister",
-    "global-shortcut:allow-unregister-all"
+    "global-shortcut:allow-unregister-all",
+    "opener:allow-default-urls",
+    "opener:allow-open-url"
   ]
 }

client/src-tauri/src/lib.rs

@@ -1,6 +1,7 @@
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_opener::init())
         .plugin(tauri_plugin_global_shortcut::Builder::new().build())
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_updater::Builder::new().build())

client/src-tauri/src/main.rs

@@ -7,9 +7,9 @@ fn set_app_user_model_id() {
     use windows::Win32::UI::Shell::SetCurrentProcessExplicitAppUserModelID;
 
     unsafe {
-        SetCurrentProcessExplicitAppUserModelID(
-            &HSTRING::from("xyz.koptilnya.chad")
-        ).ok().expect("Failed to set AppUserModelID");
+        SetCurrentProcessExplicitAppUserModelID(&HSTRING::from("xyz.koptilnya.chad"))
+            .ok()
+            .expect("Failed to set AppUserModelID");
     }
 }
 

client/src-tauri/tauri.conf.json

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

client/yarn.lock

@@ -2968,6 +2968,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tauri-apps/plugin-opener@npm:~2":
+  version: 2.5.3
+  resolution: "@tauri-apps/plugin-opener@npm:2.5.3"
+  dependencies:
+    "@tauri-apps/api": "npm:^2.8.0"
+  checksum: 10c0/9ef2fae01e03f3bb16d8e55bfd921cf7c1d284e6459bd5b45777806304eb70ab0b50cbf03be76fc05e64ef70a37493e0cd90b0acc16eaee4a4fc2cfff7e43b71
+  languageName: node
+  linkType: hard
+
 "@tauri-apps/plugin-process@npm:^2.3.1":
   version: 2.3.1
   resolution: "@tauri-apps/plugin-process@npm:2.3.1"
@@ -4060,6 +4069,7 @@ __metadata:
     "@tailwindcss/vite": "npm:^4.1.14"
     "@tauri-apps/cli": "npm:^2.8.4"
     "@tauri-apps/plugin-global-shortcut": "npm:^2.3.1"
+    "@tauri-apps/plugin-opener": "npm:~2"
     "@tauri-apps/plugin-process": "npm:^2.3.1"
     "@tauri-apps/plugin-updater": "npm:^2.10.1"
     "@types/howler": "npm:^2"