From 877d9ae7945582f9c66372f9ec65435c31aa4c84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E0=AE=AE=E0=AE=A9=E0=AF=8B=E0=AE=9C=E0=AF=8D=E0=AE=95?= =?UTF-8?q?=E0=AF=81=E0=AE=AE=E0=AE=BE=E0=AE=B0=E0=AF=8D=20=E0=AE=AA?= =?UTF-8?q?=E0=AE=B4=E0=AE=A9=E0=AE=BF=E0=AE=9A=E0=AF=8D=E0=AE=9A=E0=AE=BE?= =?UTF-8?q?=E0=AE=AE=E0=AE=BF?= Date: Thu, 27 Jun 2024 06:57:48 +0530 Subject: [PATCH] =?UTF-8?q?Added=20Sound=20Notification=20=F0=9F=8E=B5=20(?= =?UTF-8?q?#2203)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Added Sound Notification * prettify * linted * disabled by default * Add dev config for frontend * add volume icon * fix typo * lint * lint * Apply suggestions from code review Co-authored-by: Graham Neubig * Move volume icon to bottom --------- Co-authored-by: Graham Neubig --- frontend/public/beep.wav | Bin 0 -> 3047 bytes frontend/src/App.tsx | 17 ++++++++---- frontend/src/components/AgentStatusBar.tsx | 13 ++++++++- frontend/src/components/VolumeIcon.tsx | 29 +++++++++++++++++++++ frontend/src/utils/beep.tsx | 9 +++++++ 5 files changed, 62 insertions(+), 6 deletions(-) create mode 100644 frontend/public/beep.wav create mode 100644 frontend/src/components/VolumeIcon.tsx create mode 100644 frontend/src/utils/beep.tsx diff --git a/frontend/public/beep.wav b/frontend/public/beep.wav new file mode 100644 index 0000000000000000000000000000000000000000..c2364f1145b32180525b95d7e9b0fb96ca164e0c GIT binary patch literal 3047 zcmeH}dpOhY8^=GJ4LQurX=XIcNDg5{QX3nlDT*>WI3LTo9KOk%g&3_wB}TiDQ_;6b z&6%Vuq?F32knh)_a%lSY`K{mY&)?NQzrTO?ANO3DC)%OWIMp;OnMRbq;pkxdpEV5FT#n@AJ^-HGFHtX81)K6-NTpGVBDAyB58% z=JhACc9<7H7M-znu5#dc=Fw*+)AVA=`#*Bnv3TB>ezHBjRj+jkuK;eAr>r@L5_cXx z`7`i6C=9vhd5S;#s8LkRW)ctlnT(tR0N_QcqR0c_Cd(fVNVsS7*TR{iSPIzz04V2K z>f2gT1n8wPe=Pt^KV2TSPfBJR%uk14Yxc#o0<*DkvHGihVrkPzc4Bq{Grv=({H~ab z9ufUGrJZ@x?LN+m!8EsGkW7%}PfNX}w_1eo8D?XL6t4ILj2(gvW;uqgLm}jD&pS*U z0uvSrWv2Fse`YZM=tw6W4XU0aVGk~q?~HcTTwn)PSx%j((S>s!18u+3`>SfHOt6jDD%2Zae7#&s065`@zN1?CF`}8}C&| zvLE8^T3tc+0uzN@?zHzmE4_CRdaKjal7)Rlq@-3Al_xBcTlShq>D~bA+SFJr9R1J& z(6Ndz^_o_71LXJ`ruO)r<_W1&FZ|u{ynj&s<~~IRyq~OLnbz9fke zIlUL)0%2eBJe(;prKZ&jp`-r;2;QG?Q2T&;qzDj6RHy=#L8`OS#EAfjBETJL%1qHY zeA^#xd_L1S9lG#{U5@u5OWyGTP-z+n?{xZ;_l~iBtmCd8=RORtpw#_3ZhgmYL5GTu zs&nk#nmw26b+EIbg z=m!_`ER>HO0>}K1Lo~f{`eUH-DB8Mc|JQ zt^`cdZHX>I%&YOf8N-}WTMFY(&-P0nd}^z|;T`ssQKQ&1dbFLyTBr|g#Lj8F?@up9 z?x2=Jj!p61$fD)|0;?{MZ4fz8a@=VKThv5!^7y_%Fp z9;V`}r-1a>m;0c}v<>Fn3&S-FRoPcNt5(i(_4PV+o| z6`{u9h1|}n{RIdEz@_5{dZWBWFKG+18~`-dwi%bS0U`y`=@tQ!yWtn^HeE0Au&wZ9 z$>n*|+33I8S5LUSYF5ang`U_`d1NBAs-<4cbThN-@Y8~Pg-g@Jc7nPjUZ#~_4k2|r zbtQ){rZx5(2g%}3s?!H!Cx-wPCx=_vN4V(;=`MV&xjH0fT0A69hFb%?$py2mVOatrH|GFV6uM09rvj;`S+2 zYpY3&&XwgYWDn)L4HNyrdYePE=Z>inUH$4W|Mt>)tU!?jawWgpzkJZ})_>p=(!wB~mGj+e^2>h{glm4pG=~pN{ZGdkiQcPr30Aic6wZ;E{%BJ6A`YiAb_2 z2OEAqXf$@zd6X<$x{Y($xSsgdyngMIFTp}~l)jpDD>2ZI9&F8BdiRj{WLgZPo4m>` z4KT@T+Z)JTqI31lPbV&Xh>~|^b8DQ1Vv!A3&5~C!YP{8zY0x*HQs_9sPlq>@)SjL2 zKL~d!c6yQQ)AQ)q!C9K|WrJOF)l$8zP6LQ>nP=$Ov*wm^TKWtnz@+S)r72!ai>XRi zeHY+V(#MS~8S)CxqiiU4SN}9}jK&7o`x4nMl_B>pAC3ABz^kiuw^SQ{BClO=m7-|dd8hakT?aqXdfBdlo<*$cre$JiOvj8X$5eSc+TCHay# zshr#`vT#PVhuir=pQsZlR4Tl1;{i$#v7n?Zno$04|4Rql$PT|i{N4^loDTQ*jYu%^ f5BU9|-|U#~*g*`Ajg8!8Y#bLCXB6|_sdWAYAe_Y4 literal 0 HcmV?d00001 diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7e35572a4c..08491c805e 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -11,6 +11,7 @@ import SettingsModal from "#/components/modals/settings/SettingsModal"; import "./App.css"; import AgentControlBar from "./components/AgentControlBar"; import AgentStatusBar from "./components/AgentStatusBar"; +import VolumeIcon from "./components/VolumeIcon"; import Terminal from "./components/terminal/Terminal"; import Session from "#/services/session"; import { getToken } from "#/services/auth"; @@ -27,11 +28,17 @@ function Controls({ setSettingOpen }: Props): JSX.Element { -
setSettingOpen(true)} - > - + +
+
+ +
+
setSettingOpen(true)} + > + +
); diff --git a/frontend/src/components/AgentStatusBar.tsx b/frontend/src/components/AgentStatusBar.tsx index aa46474bae..bdcb3e6773 100644 --- a/frontend/src/components/AgentStatusBar.tsx +++ b/frontend/src/components/AgentStatusBar.tsx @@ -1,9 +1,10 @@ -import React from "react"; +import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { useSelector } from "react-redux"; import { I18nKey } from "#/i18n/declaration"; import { RootState } from "#/store"; import AgentState from "#/types/AgentState"; +import beep from "#/utils/beep"; enum IndicatorColor { BLUE = "bg-blue-500", @@ -65,6 +66,16 @@ function AgentStatusBar() { // - Agent is thinking // - Agent is ready // - Agent is not available + useEffect(() => { + if ( + curAgentState === AgentState.AWAITING_USER_INPUT || + curAgentState === AgentState.ERROR || + curAgentState === AgentState.INIT + ) { + if (document.cookie.indexOf("audio") !== -1) beep(); + } + }, [curAgentState]); + return (
{ + const cookieName = "audio"; + setIsMuted(!isMuted); + if (!isMuted) { + document.cookie = `${cookieName}=;`; + } else { + document.cookie = `${cookieName}=on;`; + beep(); + } + }; + + return ( +
+ {isMuted ? : } +
+ ); +} + +export default VolumeIcon; diff --git a/frontend/src/utils/beep.tsx b/frontend/src/utils/beep.tsx new file mode 100644 index 0000000000..0323db8a6e --- /dev/null +++ b/frontend/src/utils/beep.tsx @@ -0,0 +1,9 @@ +const beep = () => { + const snd = new Audio("/beep.wav"); + snd.addEventListener("canplaythrough", () => snd.play()); + snd.addEventListener("error", (e) => + console.error("Audio file could not be loaded", e), + ); +}; + +export default beep;