From 7f3e602bb301e30128ed5dc6302b140dc59ea5b2 Mon Sep 17 00:00:00 2001
From: ayangweb <75017711+ayangweb@users.noreply.github.com>
Date: Fri, 16 May 2025 16:21:57 +0800
Subject: [PATCH] feat: add a component for text reading aloud (#522)

* feat: add a component for text reading aloud

* docs: update changelog
---
 docs/content.en/docs/release-notes/_index.md  |   1 +
 src/components/Assistant/Chat.tsx             |   3 +
 .../Assistant/ReadAloud/imgs/back-dark.png    | Bin 0 -> 1294 bytes
 .../Assistant/ReadAloud/imgs/back-light.png   | Bin 0 -> 1312 bytes
 .../Assistant/ReadAloud/imgs/close-dark.png   | Bin 0 -> 346 bytes
 .../Assistant/ReadAloud/imgs/close-light.png  | Bin 0 -> 347 bytes
 .../Assistant/ReadAloud/imgs/forward-dark.png | Bin 0 -> 1273 bytes
 .../ReadAloud/imgs/forward-light.png          | Bin 0 -> 1275 bytes
 .../Assistant/ReadAloud/imgs/loading-dark.png | Bin 0 -> 485 bytes
 .../ReadAloud/imgs/loading-light.png          | Bin 0 -> 491 bytes
 .../Assistant/ReadAloud/imgs/pause-dark.png   | Bin 0 -> 504 bytes
 .../Assistant/ReadAloud/imgs/pause-light.png  | Bin 0 -> 500 bytes
 .../Assistant/ReadAloud/imgs/play-dark.png    | Bin 0 -> 203 bytes
 .../Assistant/ReadAloud/imgs/play-light.png   | Bin 0 -> 196 bytes
 src/components/Assistant/ReadAloud/index.tsx  | 134 ++++++++++++++++++
 15 files changed, 138 insertions(+)
 create mode 100755 src/components/Assistant/ReadAloud/imgs/back-dark.png
 create mode 100755 src/components/Assistant/ReadAloud/imgs/back-light.png
 create mode 100755 src/components/Assistant/ReadAloud/imgs/close-dark.png
 create mode 100755 src/components/Assistant/ReadAloud/imgs/close-light.png
 create mode 100755 src/components/Assistant/ReadAloud/imgs/forward-dark.png
 create mode 100755 src/components/Assistant/ReadAloud/imgs/forward-light.png
 create mode 100755 src/components/Assistant/ReadAloud/imgs/loading-dark.png
 create mode 100755 src/components/Assistant/ReadAloud/imgs/loading-light.png
 create mode 100755 src/components/Assistant/ReadAloud/imgs/pause-dark.png
 create mode 100755 src/components/Assistant/ReadAloud/imgs/pause-light.png
 create mode 100755 src/components/Assistant/ReadAloud/imgs/play-dark.png
 create mode 100755 src/components/Assistant/ReadAloud/imgs/play-light.png
 create mode 100644 src/components/Assistant/ReadAloud/index.tsx

diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
index 1ce3d2db..24b20e9f 100644
--- a/docs/content.en/docs/release-notes/_index.md
+++ b/docs/content.en/docs/release-notes/_index.md
@@ -49,6 +49,7 @@ Information about release notes of Coco Server is provided here.
 - style: chat input icons show #515
 - refactor: refactoring icon component #514
 - refactor: optimizing list styles in markdown content #520
+- feat: add a component for text reading aloud #522
 
 ## 0.4.0 (2025-04-27)
 
diff --git a/src/components/Assistant/Chat.tsx b/src/components/Assistant/Chat.tsx
index bd5aeb13..c0c5022d 100644
--- a/src/components/Assistant/Chat.tsx
+++ b/src/components/Assistant/Chat.tsx
@@ -22,6 +22,7 @@ import ConnectPrompt from "./ConnectPrompt";
 import type { Chat } from "./types";
 import PrevSuggestion from "@/components/ChatMessage/PrevSuggestion";
 import { useAppStore } from "@/stores/appStore";
+// import ReadAloud from "./ReadAloud";
 
 interface ChatAIProps {
   isSearchActive?: boolean;
@@ -378,6 +379,8 @@ const ChatAI = memo(
           {!activeChat?._id && !visibleStartPage && (
             <PrevSuggestion sendMessage={init} />
           )}
+
+          {/* <ReadAloud /> */}
         </div>
       );
     }
diff --git a/src/components/Assistant/ReadAloud/imgs/back-dark.png b/src/components/Assistant/ReadAloud/imgs/back-dark.png
new file mode 100755
index 0000000000000000000000000000000000000000..c1530df0a9888806791e4890941973acbb2ed5af
GIT binary patch
literal 1294
zcmV+p1@ZccP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px($Vo&&R9HvFS80eGRS^Darn8F~H6H7+>IN6L_f_`}D69&iNHiu<12J9+CMud>
zK#VB<HHt@~{_ux_1`;)iK|Ft`!~+v>MNse{=sLUIZ)R4};DMrOJfd!QmtD)uGEC;!
zNieB@)9<~i?|t=E)f>WLHag7lanJz5FkDSU8{#;=#P|I|rx!Y40HsptggB0$0&s-}
zO_F4x@B6zB2>@&DWdOE{$Vt_JMD#=)$D2B3p<@O{Mn;_8-rk=89MkBwA~H@y4;y1%
zAfmV(BW(ec%jLc(itZ+&EykFS)nOwB0K5&r18{mJ=!XEVXXdY3foKV!R4Vy#9KQqL
zGywN7^ZKeYYi&=GB%6uo%32LrYnO`1BLED5Ux{c@6?h{cO#y^qs1EcN#{t;U-QB&c
zzrX+QdM7~;+(bm{lO#Fc_x-PRePUu_&gA6es{k$n@Ed>&nR#@^04jOb;OB_Qc4l5R
zlYG_&C=?1^vu4fOCL-4X2y(gHa9>~FzIqT183@C09e@XkXe^V-47;xTPdhO+TCcr`
z`eWvM+X7JJj^lg_php>C=1;4KM1;!aa*yk}S_RXlfvP{|&6_8+Y*}m16p_y~71?Zd
zuIsvcYtQb-Kp2M0QZ>H>-~(p9pt^Z%Y-}iXuth;-v)R1sy5qVQhT&TPv@cBKB%-U0
zF{*(n3&T)_yb!=DX5QKkz>8_lmJ`t$V~ln>jE|2mNK>%`z#jmP2QZ(R-xZOpwRSRX
zgi7rfx>rP!IF3j1`MmC(vLFc75YZ+8FEjJ<b^tyBaCVX;!@lqDuH4{aBATBneHRgp
zQ~^}l@sC7wmNDk@W;&^q^B904Gi!BCTcZ?cetSfu$Md|OYd2eK&lQo6ssM_`qL(Cz
zcD~Ibat#12(~Zo$q4wP9=;*OsU0uHb*vrgw+5z|z!0cQuH@m)U>H$=GMW~>N=ur_l
zkBIIPk(Hk3Jzt}Nqck{xznD4K5`eX~Bq9TuOy-Qi!ND(EF`#ROLgD10p&?B}A|e@U
z?H&<%-}5}J|EdNCiO3RB*%;%t1F%y>7HEq##=O=FK&8aiMp1NIKA-=$0$_rO-ZRGB
zT*H8-=M?}unR!vW6x@+cy2prUTdfm4RG)$%2!@GBMXR8<6Vat<C%%D*E;q*LaGJ6(
z44(tAGMx=~GV|jt0Tc>_xsK!L1lyM+iR=6R_tgXCa{0t4ir#b_=c<8$fjyNHTR}t*
z0O$vx=Qh;Vy0!MyR1+lt-BA?v=kxh*S^}sb)`p`LZeixt&C09xyV9>ZsNWj|!Lvkk
zV>4e3XF&yZ2;fKntC?8=b!^t!TSR0tfZqWyGk;g_q}4cH0zliTzG`k|=4U!VPznBI
zI)t+6ELiG!o_5mxtmT6w2!gdlq@q!Jw*gpZjL|{W)Res>Ngk@uo)FRP#+Z%G4zzue
z6^q5iNs?$&Ia-A&B3e$b1K902&Xho-DC$igEyL-zCFuyi7QhiY{fKCVF-C_~Q)>%A
zPinJq9OpjO1Ayt#+r(>>KH;8@qUip7KL10zw9N=W)rr!p{{uv1F@OO8r&QKdT;+6#
zy`k(h659c%pxq4)cD*A84mMcFRq%fVoN*sG6u~vde+B6?Ke->*761SM07*qoM6N<$
Ef?v8^KL7v#

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/imgs/back-light.png b/src/components/Assistant/ReadAloud/imgs/back-light.png
new file mode 100755
index 0000000000000000000000000000000000000000..403f1ebf0f812a1d44f46c4e82620944f4092672
GIT binary patch
literal 1312
zcmV+*1>gFKP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px(+DSw~R9HvFS8HrkRS^E>c5_W}eYd_PN<pMr>fUp=iK#It0-_0`Qi%A7&`4s$
zX#6V@6;OZpLlY$dwW2Y;`a=l{5fW)kgmm|ud#%d)sx?Y{1f#JJ?W)}~?lgCsb?NSQ
zA;SFId(O;!GxN>NS;BD^I?n!a)Bt?n?_}mpM0Bmz`m<UCI${8cM557goaX`DC{BrJ
zq1JlOF#+KF{$gf+3BXwehs^w}<2YMt%|gu?m^W`;Y<PJ17XYW0i8jN`Pc$_(z24p3
zovW6SssNJ7<OR80?jgr<y0q3QF<2%8yNGBGfD7dgGw+MVVz;MKsc$QRs0bjDNHjZ+
z^FDy{0X%Gs*;p{9lxhI56~Il!98gLv1@I(**#LegqD2MZlL09U!1w*x5(R+MiD*YW
z9$((m(~~VV;(6X(M6}Ub+a8ADcXF<jIt9Sn0Imiw$jny-LGa0x0Z5&PhKBYLQ4+u_
zGiJ<KJ(YSEJ7{ihcI)fww*j~nz~`>(s{Q--kCuX%Gy_VhbpSR1I50RksQUZ+|Efl&
z$<9jx*<g%WUll-v{09IH*4ktkhPp_J5{X1Z7>3dX6C#cZKN=ewxj0*iM55JkoR6gx
zu~=++Z*T8VvF>3R@H}sMp3QFp_{bP@W#Mu%nY`3m+XWzLt-UM^!;GAHp0|^T78e<1
zX1*l|0^z{8D5ZqR3z>O!5Ck$mCgd;xzVE-m%qy6AO%Mb!>7?xzF!K%oBLL1|=J`Po
ze9+O+Q8zF!@DG6XMD(fLwbt5fHoG^I$;jPt@jP!05p4nRmN8~UH2`U5_64{xCWs7N
z<2cTI0DG8uZvj9wjt^ODFAu}8uN+UJc0K^$D`SkbXZZ{$rKG+Mb#-+OsZ{FM;>*78
zw=r{X0f6UubBHKIL|d788GtMiZPr?ED%NXhX*tbx-QNHV8DpeHD+2ffz%<u&r<Jx%
zDS&8Jd;y@Bh@N8REAmbr1aO-%=Cy*C_V)IZve~SV?@wdQiPZpn4PYh_HEFE}DrG><
zlF8)R>2&&#lplbjlsd@F9|l1n{XZ^kZEY9la=9-7^c!PlRRgd)-vJ9`#2RDXsRSTu
zv9+V4qxWVqnZF|d-vH<_#;hvn`o6!6nY#h(HpVQf2H^hurh7WSRJIix5v55upol0f
zhGk+h^L0dY2N7Mbwcb^5q?CG9%97s=4;W*fsRm#=0NG$NHfI@Qekv%;ojdnT*LB|`
zqMOs{^g;Qqlv<gO{4oF*iJrWUihI4awe`GMEGA_=LGBo1zOM)%inNQFS21%}5Com&
z+N<Qd6Y=0bpOsQC1GuxCtx0!5gj(1gC!$WRwM@X8#q+$or9}Y@TWc=~!|=yaBbC<i
z5@wchnj@lnwAL@yf*^AKTz;w5G4s+O2xO8TCKVqfzVEMPW+9EFciY(5*t)*HK3P;{
zCCc98lJ=-1_Zee0ms6<vBvVS=06>Py$q_NTnR&alHW(Qh87F8w9zQ1*iz#Mal3(E+
z0P1D?5z$Jm_0CFws{#;Z88*3G?h)YwfQi*x#_(AF3HO5IIFF{&>7T2WZAt(NMxyk}
z{{YF#%>0}1+~`cm)t?^~?^<iOPe!&QE<v>jj`qB!3>>Yqn!Dita5&{Ta4ejQkADH}
W2}M7ITAsB40000<MNUMnLSTXhxMH#Z

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/imgs/close-dark.png b/src/components/Assistant/ReadAloud/imgs/close-dark.png
new file mode 100755
index 0000000000000000000000000000000000000000..e97c53ce1d145b431959067cb73339a8e1204f85
GIT binary patch
literal 346
zcmV-g0j2(lP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$6iGxuR9HvtR>2K}Fbs_0-z|_}gKp3XIzhV!bdPp|PS6dy0Z44oKcq^fNC+A5
zxf139&&a;J*gj%%#vd8;yIsI`E6}#>q3gPHp68E$=A>zwOPZ$7EXzI|4qJgh-uL~>
zdw=xa--@EBG$QJ{u8624qIZ%cCr$(_AgFfE-6N?+L?j;wzjD=_oPjX_A_B>s9YO>s
z-W1JQbO8d0#74o30z#k!SP~<40T(z&pd}AHq6*CQ_Xk2$Y8?X!;My^)7UC3W2F5L6
zJnl5)a0{kd5zbc=z};Tkf4BnNw68XVrZ$xLToR-D5h1`xtjLBMKs0BY&$0PJV!o1v
s0Wn=lH4CUV2YwB;L{oXY0P_lb0kax1FpyENe*gdg07*qoM6N<$g1W?uF#rGn

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/imgs/close-light.png b/src/components/Assistant/ReadAloud/imgs/close-light.png
new file mode 100755
index 0000000000000000000000000000000000000000..487c1e9012d6941f8e0343a521670aa715d9159b
GIT binary patch
literal 347
zcmV-h0i^zkP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$6-h)vR9HvtR?!WDKn!gI-%fK0Zr}t?pnHgW=mbvS23~U0_<iKe5g<qkw#9gu
z;4kfK`}&?egv38gTp!j3mdij<6q~B5_RhKM9Gw_r4q2AnthG-Hhh!iY_uk(DV2g-n
z=Ul02!WdJA5KaK_$n$(hH9<BIyAB~-+M=2!dc|uPL_AV#j%t7aU^5}fofM%2sAWr<
z^U(zoKuK)3UXHjpz?>Mi3#h=U0@~uWI5`YV?KggFtk$ZXEmm;@F=04ue*leLMGTBF
z(fC|6xk!Y=HBl^RrvJYcP-_2~2$R~7<8w}o>W@eQEQw{gKm#bvS>`!T{vb*IB#Qz`
t`Y4rL$honqV>Gwu+Xek5m<DTQ;01(kGBA2J5!wI%002ovPDHLkV1h?ZjoAPI

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/imgs/forward-dark.png b/src/components/Assistant/ReadAloud/imgs/forward-dark.png
new file mode 100755
index 0000000000000000000000000000000000000000..496163ad584e418adadd0248e37b100f0a3929f0
GIT binary patch
literal 1273
zcmV<V1P1$wP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px(vq?ljR9HvtmR*QdRTRhn>zpH#W>(llCKSWWb+6MLDl7wi(!@R_5i2DPE3GUr
zDthWeD=Oc5sGuUl4<ZUH@*^zNXhQHo8iQy&XP>z@CYtK@Az|fI)0}fxcga1&?Rr1v
z+Ji6cm&1Xz*8c6a|7)#HIKzw1@cuY0fG`XL*L6P@ktdjW%YQk<=>jZr9A|%J<K3?7
z-kZziem)(LwgL3?M07t9t<N?jq8|aQF~)q<F2sZYM8u8bc%_IuMnso2*yMPzSnOP|
zU_sIjL`wi`Z5Mzy0nDoe{u)38;KoK7h~xMg5n1bb-lm?Op5bOdO#v!__5nB#KukoB
z8e?{aVK}Y<5!vZD&N^evv1}u2?M4940QlB*-RpC?T-XSrA%L~^asUSboC~0D(xget
zy1To7)j(kwUg|i`AraZ&`~LRY;6p=0XN``Iz5`$hfL}ypuJ8MU^&sj33=a=a9vK-q
z0>CGtx5viD?h1n7?{@B1bz`mFN<?=6_^eng&a0=7x&YSNX8~+bM`O%fB1+rYJhRQ`
z^Btv9>4=E*0@%pR&(+2`1t6c#PfOGE8%;eCU1^N@B6AWEDijJA)Yg1oU!RxR%%4AB
zs)4PwSL;Cl97~d9W^E=<0kGDt1)$w+A2Z*O1wMN8Xs_$KTLH{*T{p;tWv%_Nx*`B5
zz%9m@omHYdRH>pB%=~V37U}`)DC=y6h}`G<{^pA4RP`SKI00ZffQ8KbNu@uG0eBL?
zmuf2_r8G_Zf*?@alPij%bwu=9SyMZh`L<R7s@9zAy1iAWyq1U-mP(}qMAVl7<n#H?
zG);f1y{g)K4#RM^<2WknerBH23P4M3T1Q96`CVOI$E%Giec^BhFgQ5qmrA9Oh&GGJ
ztpNT4@Cq|;s`iVbXgU#TpE$<Movi>y08CK`X8yeyfVI{Dup)Aph@RJaC!$A0<aXcp
z-^zUZ`}?O%ojO(H{=v*=HwB2}I4>eSB4TQrM{Nc)(7?dJMZLYfdJQEJapE{07LkL#
z@2{*X$L=&u3q({f#^hQ7>=%(m0G2cJd(AQs$MF>+@<5U#>$SWp0ACT&r^c8ynQt7&
z%S7aTB06A<xvtd}JXG%eFX#Yb=GDyrqA0qGh_uEP`VAt|vRzF?i>pU-9LL*5<W2w&
zGxLj00R{#JF7Z5X2*4;2<%}`kWe$Zx;ld<I_IjRob2jCoC|X5CI(T$ys^2DN-j?}<
zVK~EaoIHTZNs@F0L7+`;d^Kvt+KATbseIp8@|H`}uR5qTwAP-C1z;O9>-S%)5x~W&
zZUE;Hk&fEeTN2bUsOqXGh={ARnVB~n$59k5DL0s1<sp*l^Q&D5Ywg_tUIpL+SjNnI
z>K&rhgJivkyi|T%IC>q9<2+vP6g5JfsXC~Lu0%u+8e?8=l);uyvN(<xi-<NAeVF`N
z9<4e|b_4j_^Sq)4PLgB>fY|_+647!M9Dv^($5}ON)~vnFuCFCP)@(e_d#e1zx(C4c
z=xq>KAEjH8BzZarf*)FGXF>p35NoZ9b7^^~+*IxpJplAy*Y^Ol)9n?JUCgZi6IyKn
jOekWTM*jnx@eKR}%!)QYQ=@G!00000NkvXXu0mjf5lK`E

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/imgs/forward-light.png b/src/components/Assistant/ReadAloud/imgs/forward-light.png
new file mode 100755
index 0000000000000000000000000000000000000000..d5b93de38eba4fd8817e2b706425733c34a8d7d2
GIT binary patch
literal 1275
zcmV<X1O)quP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px(wMj%lR9HvtmTibsRT#(r&%KMS=I$1@kqU+EikY(8eVLK<(~?*wNm#9<VWpJ?
zMn#``(Td7%eW;)!!;Fx^Hp+@EtjI;!4?5>L;}T4-YmvR0gw@n++nw_?C+?N&I6Jdr
zAN<mR`7qq)Jm>ekod0tOXL!*WJ|CwA5QgDm5&4ja9#l&0_%A`6F2HgTc|Sh*Eo01W
z`F#H8(*bE3z(x<?4iVX$I`AhV+MtwruUUvG0SpWbxMO2uYl-N70GCX1$nmzew$9<<
z;iwsih5*@Yc3u=kyNGCM?D%UD`GknBoGb%j7-o$z8(r7kmdoXi)B~yuU>%9bUI6C+
z_zb{(%)BQI!*mb431Aa5A4?7jf?z9vM*)0mjJYD8&le_xm=wVG{T?FP51<3UJ^-tk
z`B&@6^Sp~3#~BfkEn4fBs-5@u_qP^{#n(h+6@Xt{*X=ua@ZjgQAZh~i_4Q4kn3!My
z3jw@ZDwS?76bci~)YkUR;lqbt1aPB><l5WYm)7c!ngBr%JO*Hk-PqOD)i*deSZ?O<
z#J0P;`>c+R4jafK09%>)@oGP(04!Ouq&<qFZ*1y~F_-4^`O(xS@;vXn>O0@x-`|qh
zbar-18rbu^&~cm`fMcanX>N5UPXP$SaHEJ=b=%9#D-y?<OlFZW#-=o5j9HvCmhb!T
zR^12@k!!WqwmJV@zVDC3w`dJB52mwl3P2D9y8)~bk=wP_+pTfj_3r>E0+=Nt%e2-X
z#dZE0z(Yjzv9&eEnDO!PeT727+9m*-i0FAD+O3qjz7c@!*7?SmMX4w+a~x+GfDc4u
zUjpEHUZ>+YM{AVoq*4b#-~(VHQc9^zBLI8V+RNqgxrYuNI-WL;b>Tn);QRhUA}SEk
zb`iO*q7&mp^sG{9TY6tMo1IlIm#t15W9H6A0Dl0O(c0SDJ~A@$dp&?K3>S#VrvMHR
z(GwNX>H}~ufE$?km6R~e0AT(8$;@Xr0{8+zx9hqKs>P!^1J+R{ler+5%N@1luc)6B
z1i=vz*{`);n*!(p@TL7R^ZZ5tcFZm(q5-AU>-93=d0wyMICqvxrOom6vH)WMhM9Ro
zstH#U(HpjhnECQX0C!ik|4Aa+rIcFVpa%jXvUl7<zbqmvh-f_#txS*RAPB5n-vr<u
zW`3#>z=aj#uK@fNMbZ4x(b4ac4Lv<Q=TDn9ZHS1jNv2#71nc6#Gtcf5k!@P*ovHNC
zuJnX0>vRC~nAwWliB(gIec#_fL>p~X%xuZ0vYfaNPO?pW5z$Vil=XSistMqE-W<nq
zY<IVb$R@4z3sWJewn?dKF^Zy#)7eaH>y6`8M6{<eM9TL0)ht99hPQ~wa{yc-TCJ3N
zyH*f&A0)o-ZziIr?e((dh@$9$T2Z7O_xASAZE0z-LS##4MC2~5^)r)Yu;G&|48xTo
zVnxM1OiGo}Iw&IcC9I3Z;t$sG%$YN1JC5TM(bWJ3;)eSTz&d6gs#m^-0EyTbV;-(N
zv2F!$V)RbpII`2!b=^mDx!jM9dS^-iiIccFZIoA8wFEFH{`P&WbVHTFv?rg>+y7Hq
lO#w{FW0OYz1Dx>;`~z-?S3hhvuiO9t002ovPDHLkV1kS2ab5rb

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/imgs/loading-dark.png b/src/components/Assistant/ReadAloud/imgs/loading-dark.png
new file mode 100755
index 0000000000000000000000000000000000000000..c09b85ac29e2acd7044229f451bd1d22872a9c69
GIT binary patch
literal 485
zcmV<B0UG{^P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$pGibPR9HvdS3OGvK@3f%uolEdMYPy+X7MM8f{m5cf#6>htgLJV#h)NI<6WVM
z+K6CnF_FNntjBz0SC;{=-Q?xv>rD=!@DB^ehu#F7b87(bJWpUlYyH|Mncf7fwOfez
zz(I*<+ZglszX(`skBI1{uIsx{X3`2wCX-!6TsOvChH!!{;NXaO0RSJ~`@;|k2>}kS
zl)3_dWg<Ebkq8oKIj#c0TZlxCfCPgp5*@-EK#D-lx7~{57Nme;1iA!IR-j=S10*6f
zo6YvvuBxhAMD$&QiwLk$3wQ+pPPNu&k<Az*B7b|24ez3#ScvB9v}24pPYI5-c1%R~
zvGwguppVK)e7-Bd+D=4EF(<9{6ZcsH%Jboz+l<*F;%D=Av<WbHv?WTZgVAVoBOx%I
zPWQd{*9lwFTB{#J=$tD~plk~yr5(bi(;6zJ>X-&J<OW&8wh$4~NlXhk_@4_=Q7JC^
z808+8L7(GXa2~ip50c_1**wE?N2x?`axIWxh!2wAoaH$pVkKMzD*o3jmznf??+Qo*
b<m|oxctgc7HhHj?00000NkvXXu0mjfa%s|O

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/imgs/loading-light.png b/src/components/Assistant/ReadAloud/imgs/loading-light.png
new file mode 100755
index 0000000000000000000000000000000000000000..42e6d6947b8ba4907ab0d703f2b96b370f456802
GIT binary patch
literal 491
zcmV<H0Tlj;P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$rAb6VR9Hvdmpe<uKoG}g_P|;Y8x_$?5Q}V*QWR{gtOUWYcwl8^BPf=+YziAI
zMbt(FYau%_#U1h3$6Pclcx~qKo5%il4<Ydn6X%EC09xxcrPK=-V6ELS#=P|@rZ+&A
zWm}`s=#i7QZM)qx&C~w^$n*SIDfL=a)xE1SX$Q)(+_ToM*L8j6isKvsCr89f0Qf}2
zBNv1OfRhu^H2^FV(TNMf3D9v|1%P)KL<~R@gFE6~!dQS1K+Ly0ir^^-1@Zwbl04Xf
zDP<s_(pvAcoiXN)<zUg|A^<k(1YRMc^SZ9bu8l6s@|1}9+lOy?=l#S&#1H_mQ&rVP
zNN^Ye03LkDw>Ll^m6Q0)I>6daL`y!WrfHse&XS-2pt3C6^w}cf*Yxg~0Te~S!M!7~
z)*c#TZY2O(>jS0KO~95WlZpDVgvkMtk3iDeA#4^phSu6$p9XY<>+g?YSBMbt%%=r|
z2vJfgPI?)|E|x*B<5+TDxIrHz$)99gVbVvbL~vpwki-x_NPhDykAaAla6VA-zh<$@
hq~CjYK$;+C_YHP2!Z5#)BcA{O002ovPDHLkV1j}Z*@gfB

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/imgs/pause-dark.png b/src/components/Assistant/ReadAloud/imgs/pause-dark.png
new file mode 100755
index 0000000000000000000000000000000000000000..bbaa1adcfb39d499714631f5f5a5518c428067bb
GIT binary patch
literal 504
zcmV<U0SEqxP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$vPnciR9Hvt*F8(aP!tB>^O91e{)P^vP3}#G_IEfrI`|_jRB6$nAShCb4i35q
zf{213=;Y$yAc#0v5ZVqBR762U#Lo!!*p>!Fv`v#VUCf%xeV?3j@&)Sifj;NcKcHg;
zOw$~Q#bWQhYE@f6wOSov<~3$s42Q$h@p$~vZ%A7}xm?ZwD7HfH08D9`wgRB$7o;12
zoq5X4X<gS3{6M$?*tuJ^T5ZBGj0-OiFMvjFV>pYJWzD5hsTVg8uK+vqx{k>SA=UwK
zHxR!7%}fACL^LLZIChHg70?Rh)~%Z}4CAH~q!$1?^O>1vL!r>Ts;bsskX{1pOp}?%
zbzR^74G{#u&fS$#4*x_13D}cT4)p_Y2_P$k*bKS_uK)^>NTd*rM&AM*LI4|zqGS_^
z#8uF@;Rz9?rId%Ag6;Eu4dE>jO$s4agMJi$5YYk=%}6PqoL=?!bzUm4qbN#7Rn>Dh
z!CqQ$1|Thj*!L3b25?{RZ(h^1WdNUkgg4)y?KY}ZDx*Zy7_24BvhvAf^1-iQM-^x+
uDwRruZohV%U_1U7IN8L@ntwpwEAR!Otg#`~8+yh70000<MNUMnLSTZU_t;4Q

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/imgs/pause-light.png b/src/components/Assistant/ReadAloud/imgs/pause-light.png
new file mode 100755
index 0000000000000000000000000000000000000000..3b6d52f90216ef6489118a5b04bcf6f6ee4ff794
GIT binary patch
literal 500
zcmV<Q0So?#P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$u1Q2eR9Hvt*S|}{Kor37_p&tLpV7TT`ww(=a&+*Iuu!E%hk~F;5gi<K5d;y1
zfS{9$P=`=4cNb|LE21I_A`<+aVxF8B5YZ-0uIbXQIr9DV-KC@meg0sd`!E0mP9UGp
z>$O_#tyf#s5s=MhM-g!Y0G0t@hI8(yhI9nva=9V^EPO}rh-g{}u?7I1Do8f~zj>l*
zTEVicLluZ90KaQ^o;PXR_C*{>9DwY~!@1CIx91y;#&Z-%T!7!aCZe(sViN$U8;B}^
z-#kLZamLtjScGbT?8*tqN4Ly5zX^i$0^m2F0AS8>oW)kF_5L5EmjJ(cPDB$zh@HO>
zNdUgOM6@S_82ODz41kFHjIrT<04@=+#2DL7dJA5NsG3Tps`YyPHR(gRrD<BpvaG8_
zA45cB08n6znL%Oyx~fBXOGHybi1nm@id_I$(sg~-G|k7b-}>jeI1|_ffFkGoEJ`@e
z7MyyXSFmmSAWk?6;GT#o>2!M4FpLisae0rRm(nprlm~0Yb=^v{*?dqH4mAO}D3i$y
qMSa@|gAM#&5auRv)(ilBpTH;TAh#iKKw5_Y0000<MNUMnLSTaK)!E4a

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/imgs/play-dark.png b/src/components/Assistant/ReadAloud/imgs/play-dark.png
new file mode 100755
index 0000000000000000000000000000000000000000..746718c770425c28b3d0b84bbeaf2ce37434ac71
GIT binary patch
literal 203
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}t)4E9ArbCx
zuW#gSP!MQM^fbAZah^?N%A4~{ItS#!x{^#b8n$zap7r<CJAS(S?805g+)eBDD>rC7
z*!zC#wb=&qu1ajKd0%`^>sW=yV;@c5Yf&q&2mcdK&}W&!&3MkKVIl*ELIVR6lnBr*
vSbtry#W8C0+~P~S;$r`QdzO7I<^j`Z*$#us-&JBj2QhfM`njxgN@xNA`}|9#

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/imgs/play-light.png b/src/components/Assistant/ReadAloud/imgs/play-light.png
new file mode 100755
index 0000000000000000000000000000000000000000..a5378e9f0748219be4728d2fb0d3fac4714150ad
GIT binary patch
literal 196
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}b)GJcArbCx
zuN!hT81S%OU=xY`VzkrY9e-r?L@riWLDuc^3xlWM-`Miy^QI+}tmI$*sY_zeNJw+m
zOl5z3^G+@6_eHDJrP9}yp0ivWm;W=qL78I%3*$P414kG{7BH}CI52VrG%$%QaM*lc
tbKL4z9oKTo-CtJ~|Ghpte)Bsf^FOOQ46cdqkN~=b!PC{xWt~$(69E73M|l7M

literal 0
HcmV?d00001

diff --git a/src/components/Assistant/ReadAloud/index.tsx b/src/components/Assistant/ReadAloud/index.tsx
new file mode 100644
index 00000000..8d2ef94e
--- /dev/null
+++ b/src/components/Assistant/ReadAloud/index.tsx
@@ -0,0 +1,134 @@
+import { useThemeStore } from "@/stores/themeStore";
+import loadingLight from "./imgs/loading-light.png";
+import loadingDark from "./imgs/loading-dark.png";
+import playLight from "./imgs/play-light.png";
+import playDark from "./imgs/play-dark.png";
+import pauseLight from "./imgs/pause-light.png";
+import pauseDark from "./imgs/pause-dark.png";
+import backLight from "./imgs/back-light.png";
+import backDark from "./imgs/back-dark.png";
+import forwardLight from "./imgs/forward-light.png";
+import forwardDark from "./imgs/forward-dark.png";
+import closeLight from "./imgs/close-light.png";
+import closeDark from "./imgs/close-dark.png";
+import { useEffect, useMemo, useRef } from "react";
+import { useReactive } from "ahooks";
+import dayjs from "dayjs";
+import durationPlugin from "dayjs/plugin/duration";
+
+dayjs.extend(durationPlugin);
+
+interface State {
+  loading: boolean;
+  playing: boolean;
+  totalDuration: number;
+  currentDuration: number;
+}
+
+const ReadAloud = () => {
+  const isDark = useThemeStore((state) => state.isDark);
+  const state = useReactive<State>({
+    loading: false,
+    playing: true,
+    totalDuration: 300,
+    currentDuration: 0,
+  });
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const formatTime = useMemo(() => {
+    return dayjs.duration(state.currentDuration * 1000).format("mm:ss");
+  }, [state.currentDuration]);
+
+  useEffect(() => {
+    if (state.playing && state.currentDuration >= state.totalDuration) {
+      state.currentDuration = 0;
+    }
+
+    changeCurrentDuration();
+  }, [state.playing]);
+
+  const changeCurrentDuration = (duration = state.currentDuration) => {
+    clearTimeout(timerRef.current);
+
+    let nextDuration = duration;
+
+    if (duration < 0) {
+      nextDuration = 0;
+    }
+
+    if (duration >= state.totalDuration) {
+      state.currentDuration = state.totalDuration;
+
+      state.playing = false;
+    }
+
+    if (!state.playing) return;
+
+    state.currentDuration = nextDuration;
+
+    timerRef.current = setTimeout(() => {
+      changeCurrentDuration(duration + 1);
+    }, 1000);
+  };
+
+  return (
+    <div className="fixed top-[60px] left-1/2 z-1000 w-[200px] h-12 px-4 flex items-center justify-between -translate-x-1/2 border rounded-lg text-[#333] dark:text-[#D8D8D8] bg-white dark:bg-black dark:border-[#272828] shadow-[0_4px_8px_rgba(0,0,0,0.2)] dark:shadow-[0_4px_8px_rgba(255,255,255,0.15)]">
+      <div className="flex items-center gap-2">
+        {state.loading ? (
+          <img
+            src={isDark ? loadingDark : loadingLight}
+            className="size-4 animate-spin"
+          />
+        ) : (
+          <div
+            onClick={() => {
+              state.playing = !state.playing;
+            }}
+          >
+            {state.playing ? (
+              <img
+                src={isDark ? playDark : playLight}
+                className="size-4 cursor-pointer"
+              />
+            ) : (
+              <img
+                src={isDark ? pauseDark : pauseLight}
+                className="size-4 cursor-pointer"
+              />
+            )}
+          </div>
+        )}
+
+        <span className="text-sm">{formatTime}</span>
+      </div>
+      <div className="flex gap-3">
+        {!state.loading && (
+          <>
+            <img
+              src={isDark ? backDark : backLight}
+              className="size-4 cursor-pointer"
+              onClick={() => {
+                changeCurrentDuration(state.currentDuration - 15);
+              }}
+            />
+
+            <img
+              src={isDark ? forwardDark : forwardLight}
+              className="size-4 cursor-pointer"
+              onClick={() => {
+                changeCurrentDuration(state.currentDuration + 15);
+              }}
+            />
+          </>
+        )}
+
+        <img
+          src={isDark ? closeDark : closeLight}
+          className="size-4 cursor-pointer"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ReadAloud;