feat(message-actions): add speak message, bump version

ui/components/MessageBox.tsx

@@ -1,22 +1,17 @@
+'use client';
+
 /* eslint-disable @next/next/no-img-element */
 import React, { MutableRefObject, useEffect, useState } from 'react';
 import { Message } from './ChatWindow';
 import { cn } from '@/lib/utils';
-import {
-  BookCopy,
-  Disc3,
-  FilePen,
-  PlusIcon,
-  Share,
-  ThumbsDown,
-  VideoIcon,
-} from 'lucide-react';
+import { BookCopy, Disc3, Share, Volume2, StopCircle } from 'lucide-react';
 import Markdown from 'markdown-to-jsx';
 import Copy from './MessageActions/Copy';
 import Rewrite from './MessageActions/Rewrite';
 import MessageSources from './MessageSources';
 import SearchImages from './SearchImages';
 import SearchVideos from './SearchVideos';
+import { useSpeech } from 'react-text-to-speech';
 
 const MessageBox = ({
   message,
@@ -36,6 +31,7 @@ const MessageBox = ({
   rewrite: (messageId: string) => void;
 }) => {
   const [parsedMessage, setParsedMessage] = useState(message.content);
+  const [speechMessage, setSpeechMessage] = useState(message.content);
 
   useEffect(() => {
     if (
@@ -45,6 +41,8 @@ const MessageBox = ({
     ) {
       const regex = /\[(\d+)\]/g;
 
+      setSpeechMessage(message.content.replace(regex, ''));
+
       return setParsedMessage(
         message.content.replace(
           regex,
@@ -56,6 +54,8 @@ const MessageBox = ({
     setParsedMessage(message.content);
   }, [message.content, message.sources, message.role]);
 
+  const { speechStatus, start, stop } = useSpeech({ text: speechMessage });
+
   return (
     <div>
       {message.role === 'user' && (
@@ -105,11 +105,21 @@ const MessageBox = ({
                   </div>
                   <div className="flex flex-row items-center space-x-1">
                     <Copy initialMessage={message.content} message={message} />
-                    <button className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
-                      <FilePen size={18} />
-                    </button>
-                    <button className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
-                      <ThumbsDown size={18} />
+                    <button
+                      onClick={() => {
+                        if (speechStatus === 'started') {
+                          stop();
+                        } else {
+                          start();
+                        }
+                      }}
+                      className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+                    >
+                      {speechStatus === 'started' ? (
+                        <StopCircle size={18} />
+                      ) : (
+                        <Volume2 size={18} />
+                      )}
                     </button>
                   </div>
                 </div>

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexica-frontend",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
   "author": "ItzCrazyKns",
   "scripts": {
@@ -22,6 +22,7 @@
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
+    "react-speech-kit": "^3.0.1",
     "react-textarea-autosize": "^8.5.3",
     "tailwind-merge": "^2.2.2",
     "yet-another-react-lightbox": "^3.17.2",

ui/yarn.lock

@@ -2632,6 +2632,11 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-speech-kit@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-speech-kit/-/react-speech-kit-3.0.1.tgz#8bd936adfe064be1c5a07e2992dfdfd772e80d14"
+  integrity sha512-MXNOciISanhmnxpHJkBOev3M3NPDpW1T7nTc/eGw5pO9cXpoUccRxZkmr/IlpTPbPEneDNeTmbwri/YweyctZg==
+
 react-textarea-autosize@^8.5.3:
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz#d1e9fe760178413891484847d3378706052dd409"
@@ -2845,6 +2850,7 @@ streamsearch@^1.1.0:
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==