chore: chat stub (#83)

Author: gallayl

frontend/src/components/body.tsx

@@ -2,6 +2,7 @@ import { createComponent, Router, Shade } from '@furystack/shades'
 import { cssVariableTheme } from '@furystack/shades-common-components'
 import { Init, Login, Offline } from '../pages/index.js'
 import { SessionService } from '../services/session.js'
+import { chatRoutes } from './routes/chat-routes.js'
 import { dashboardRoutes } from './routes/dashboard-routes.js'
 import { entityRoutes } from './routes/entity-routes.js'
 import { fileBrowserRoutes } from './routes/file-browser-routes.js'
@@ -28,6 +29,7 @@ export const Body = Shade<{ style?: Partial<CSSStyleDeclaration> }>({
               ...movieRoutes,
               ...(hasAdminRole ? [...entityRoutes, ...fileBrowserRoutes, ...iotRoutes] : []),
               ...dashboardRoutes,
+              ...chatRoutes,
             ]}
           />
         )

frontend/src/components/chat/chat-icon.tsx

@@ -0,0 +1,21 @@
+import { createComponent, Shade } from '@furystack/shades'
+import { AppBarLink } from '@furystack/shades-common-components'
+import { SessionService } from '../../services/session.js'
+
+export const ChatIcon = Shade({
+  shadowDomName: 'shade-app-chat-icon',
+  render: ({ injector, useObservable }) => {
+    const session = injector.getInstance(SessionService)
+    const [sessionState] = useObservable('sessionState', session.state)
+
+    if (sessionState !== 'authenticated') {
+      return null
+    }
+
+    return (
+      <AppBarLink title="Chat" href="/chat">
+        {sessionState === 'authenticated' ? '💬' : '🔒 Login to chat'}
+      </AppBarLink>
+    )
+  },
+})

frontend/src/components/header.tsx

@@ -2,6 +2,7 @@ import { createComponent, Shade } from '@furystack/shades'
 import { AppBar, AppBarLink, Button } from '@furystack/shades-common-components'
 import { environmentOptions } from '../environment-options.js'
 import { SessionService } from '../services/session.js'
+import { ChatIcon } from './chat/chat-icon.js'
 import { PiRatCommandPalette } from './command-palette/index.js'
 import { GithubLogo } from './github-logo/index.js'
 import { ThemeSwitch } from './theme-switch/index.js'
@@ -65,6 +66,7 @@ export const Header = Shade<HeaderProps>({
           >
             <GithubLogo style={{ height: '1rem' }} />
           </Button>
+          <ChatIcon />
           {sessionState === 'authenticated' ? (
             <Button variant="outlined" onclick={() => injector.getInstance(SessionService).logout()}>
               Log Out

frontend/src/components/routes/chat-routes.tsx

@@ -0,0 +1,21 @@
+import { createComponent } from '@furystack/shades'
+import { PiRatLazyLoad } from '../pirat-lazy-load.js'
+import { onLeave, onVisit } from './route-animations.js'
+
+export const chatPageRoute = {
+  url: '/chat',
+  onVisit,
+  onLeave,
+  component: () => {
+    return (
+      <PiRatLazyLoad
+        component={async () => {
+          const { ChatPage } = await import('../../pages/chat/index.js')
+          return <ChatPage />
+        }}
+      />
+    )
+  },
+}
+
+export const chatRoutes = [chatPageRoute] as const

frontend/src/pages/chat/index.tsx

@@ -0,0 +1,46 @@
+import { createComponent, Shade } from '@furystack/shades'
+import { Button } from '@furystack/shades-common-components'
+import { SpeechRecognitionService } from './speech-recognition-service.js'
+import { SpeechSynthesisService } from './speech-synthesis-service.js'
+
+export const ChatPage = Shade({
+  shadowDomName: 'shade-app-chat-page',
+  style: {
+    marginTop: '64px',
+    display: 'flex',
+    width: '100%',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  render: ({ injector }) => {
+    const speechSynthesis = injector.getInstance(SpeechSynthesisService)
+
+    const speechRecognizer = injector.getInstance(SpeechRecognitionService)
+
+    return (
+      <div>
+        <h1>Chat Page</h1>
+        <p>This is the chat page where users can interact with each other.</p>
+        <Button
+          onclick={() =>
+            speechSynthesis.speak(
+              'Továbbra is gondoskodunk gépjárműve biztosítási védelméről. Amennyiben elégedett a szolgáltatásunkkal, Önnek nincs teendője.',
+            )
+          }
+        >
+          💬 Speak
+        </Button>
+
+        <Button
+          onclick={async () => {
+            const result = await speechRecognizer.recognizeSpeech()
+            speechSynthesis.speak(`Azt mondtad: ${result}`)
+            console.log('Recognized speech:', result)
+          }}
+        >
+          🎤 Speak
+        </Button>
+      </div>
+    )
+  },
+})

frontend/src/pages/chat/speech-recognition-service.ts

@@ -0,0 +1,69 @@
+import { Injectable } from '@furystack/inject'
+import { Lock } from 'semaphore-async-await'
+
+type SpeechRecognitionEvent = {
+  results: SpeechRecognitionResultList
+}
+
+type SpeechRecognitionResultList = {
+  [index: number]: SpeechRecognitionResult
+  length: number
+}
+
+type SpeechRecognitionError = {
+  error: string
+  message: string
+}
+
+declare class webkitSpeechRecognition {
+  continuous: boolean
+  interimResults: boolean
+  lang: string
+  public start(): void
+  public stop(): void
+  public onresult: (event: SpeechRecognitionEvent) => void
+  public onerror: (event: SpeechRecognitionError) => void
+  public onend: () => void
+}
+
+@Injectable({ lifetime: 'singleton' })
+export class SpeechRecognitionService {
+  public lock = new Lock()
+
+  public async recognizeSpeech(): Promise<string> {
+    try {
+      await this.lock.acquire()
+
+      const speechRecognition = new webkitSpeechRecognition()
+
+      return new Promise((resolve, reject) => {
+        if (!speechRecognition) {
+          reject(new Error('Speech recognition is not supported in this browser.'))
+          return
+        }
+
+        speechRecognition.lang = 'hu-HU'
+
+        speechRecognition.onresult = (event) => {
+          if (event.results.length > 0) {
+            resolve(event.results[0][0].transcript)
+          } else {
+            reject(new Error('No speech recognized.'))
+          }
+        }
+
+        speechRecognition.onerror = (event: SpeechRecognitionError) => {
+          reject(new Error(`Speech recognition error: ${event.error}`))
+        }
+
+        speechRecognition.onend = () => {
+          console.log('Speech recognition ended.')
+        }
+
+        speechRecognition.start()
+      })
+    } finally {
+      this.lock.release()
+    }
+  }
+}

frontend/src/pages/chat/speech-synthesis-service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@furystack/inject'
+
+@Injectable({ lifetime: 'singleton' })
+export class SpeechSynthesisService {
+  public speak(text: string) {
+    if (window.speechSynthesis) {
+      const utterance = new SpeechSynthesisUtterance(text)
+      utterance.lang = 'hu-HU'
+      utterance.voice = window.speechSynthesis.getVoices().find((voice) => voice.lang === 'hu-HU') || null
+      window.speechSynthesis.speak(utterance)
+    } else {
+      console.warn('Speech synthesis is not supported in this browser.')
+    }
+  }
+}

frontend/vite.config.ts

@@ -12,6 +12,9 @@ export default defineConfig(async () => {
         uploadToken: process.env.CODECOV_TOKEN,
       }),
     ],
+    server: {
+      host: true,
+    },
     build: {
       rollupOptions: {
         external: ['vitest'],