From c87c2b27a9c0d34c1310a2566757242cd601782d Mon Sep 17 00:00:00 2001 From: ItzCrazyKns Date: Fri, 3 May 2024 18:25:22 +0530 Subject: [PATCH] feat(message-actions): add speak message, bump version --- docs/architecture/README.md | 3 ++- package.json | 3 ++- ui/components/MessageBox.tsx | 38 +++++++++++++++++++++++------------- ui/package.json | 3 ++- ui/yarn.lock | 6 ++++++ yarn.lock | 5 +++++ 6 files changed, 41 insertions(+), 17 deletions(-) diff --git a/docs/architecture/README.md b/docs/architecture/README.md index 0c5cf98..b1fcfcb 100644 --- a/docs/architecture/README.md +++ b/docs/architecture/README.md @@ -1,4 +1,5 @@ ## Perplexica's Architecture + Perplexica's architecture consists of the following key components: 1. **User Interface**: A web-based interface that allows users to interact with Perplexica for searching images, videos, and much more. @@ -7,4 +8,4 @@ Perplexica's architecture consists of the following key components: 4. **LLMs (Large Language Models)**: Utilized by agents and chains for tasks like understanding content, writing responses, and citing sources. Examples include Claude, GPTs, etc. 5. **Embedding Models**: To improve the accuracy of search results, embedding models re-rank the results using similarity search algorithms such as cosine similarity and dot product distance. -For a more detailed explanation of how these components work together, see [WORKING.md](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/architecture/WORKING.md). \ No newline at end of file +For a more detailed explanation of how these components work together, see [WORKING.md](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/architecture/WORKING.md). diff --git a/package.json b/package.json index efb336a..ee75225 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "perplexica-backend", - "version": "1.1.0", + "version": "1.2.0", "license": "MIT", "author": "ItzCrazyKns", "scripts": { @@ -29,6 +29,7 @@ "dotenv": "^16.4.5", "express": "^4.19.2", "langchain": "^0.1.30", + "react-text-to-speech": "^0.14.5", "winston": "^3.13.0", "ws": "^8.16.0", "zod": "^3.22.4" diff --git a/ui/components/MessageBox.tsx b/ui/components/MessageBox.tsx index 3ccda13..9ee7245 100644 --- a/ui/components/MessageBox.tsx +++ b/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 (
{message.role === 'user' && ( @@ -105,11 +105,21 @@ const MessageBox = ({
- -
diff --git a/ui/package.json b/ui/package.json index 700768c..4ac9fc5 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/yarn.lock b/ui/yarn.lock index 37480fd..6f8dd11 100644 --- a/ui/yarn.lock +++ b/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== diff --git a/yarn.lock b/yarn.lock index 205b0ed..64863b9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1291,6 +1291,11 @@ raw-body@2.5.2: iconv-lite "0.4.24" unpipe "1.0.0" +react-text-to-speech@^0.14.5: + version "0.14.5" + resolved "https://registry.yarnpkg.com/react-text-to-speech/-/react-text-to-speech-0.14.5.tgz#f918786ab283311535682011045bd49777193300" + integrity sha512-3brr/IrK/5YTtOZSTo+Y8b+dnWelzfZiDZvkXnOct1e7O7fgA/h9bYAVrtwSRo/VxKfdw+wh6glkj6M0mlQuQQ== + readable-stream@^3.4.0, readable-stream@^3.6.0: version "3.6.2" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"