From 87863660482c698aebc6a97e48df438d61d06477 Mon Sep 17 00:00:00 2001 From: Bran18 Date: Fri, 20 Dec 2024 10:47:05 -0600 Subject: [PATCH 01/13] refactor: replicate tooltip effect in desktop bot chatbot details --- .../chat/onboarding-chatbot-details.tsx | 101 ++++++++---------- .../routes/thread/user-thread-panel.tsx | 8 +- 2 files changed, 49 insertions(+), 60 deletions(-) diff --git a/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx b/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx index 95c79744..4f19b25a 100644 --- a/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx +++ b/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx @@ -1,24 +1,30 @@ import { Button } from '@/components/ui/button' import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card' -import { cn, numberShortener } from '@/lib/utils' +import { cn } from '@/lib/utils' import type { ChatbotDetailsProps } from '@/types/types' -import { Bot, MessageSquarePlus, Users } from 'lucide-react' +import { PanelLeft, MessageSquarePlus } from 'lucide-react' import Image from 'next/image' export function OnboardingChatbotDetails({ - botName = 'BuildBot', + botName, avatar = '', description, - threadCount = 0, - followersCount = 3200, isWelcomeView = true, - categoryName, - onNewChat, - onFollow + onNewChat }: ChatbotDetailsProps) { return ( -
- +
+ {/* Background tooltip effect */} + +
+ +

{isWelcomeView ? 'Welcome to Masterbots!' : botName} @@ -53,60 +59,41 @@ export function OnboardingChatbotDetails({

{isWelcomeView && ( -
+

- Your Journey Begins Here! + Pick a Bot and Start Chatting

-

- Try and start with: {botName} -

+
+ +

+ Find Your Favorite Bot in the Sidebar +

+
)} - -
-
- - - Threads: {numberShortener(threadCount)} - -
-
- - - Followers:{' '} - {numberShortener(followersCount)} - + {!isWelcomeView && ( + +
+
- -
- -
- -
- + + )}
) diff --git a/apps/masterbots.ai/components/routes/thread/user-thread-panel.tsx b/apps/masterbots.ai/components/routes/thread/user-thread-panel.tsx index b62a1432..de5de32e 100755 --- a/apps/masterbots.ai/components/routes/thread/user-thread-panel.tsx +++ b/apps/masterbots.ai/components/routes/thread/user-thread-panel.tsx @@ -214,9 +214,11 @@ export default function UserThreadPanel({ return ( <> -
- -
+ {threads.length > 0 && ( +
+ +
+ )} {loading ? ( From e5daf70b9c579e2dd09fb9ed0033ae376a7d49d5 Mon Sep 17 00:00:00 2001 From: Bran18 Date: Fri, 20 Dec 2024 11:46:41 -0600 Subject: [PATCH 02/13] fix: add guard and removed re-render --- .../routes/chat/chat-chatbot-details.tsx | 2 +- .../chat/onboarding-chatbot-details.tsx | 33 +++++++++++------- apps/masterbots.ai/components/ui/tooltip.tsx | 10 +++--- apps/masterbots.ai/package.json | 2 +- bun.lockb | Bin 408776 -> 409416 bytes 5 files changed, 27 insertions(+), 20 deletions(-) diff --git a/apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx b/apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx index 8db54a2f..fa241616 100644 --- a/apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx +++ b/apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx @@ -59,7 +59,7 @@ export default function ChatChatbotDetails() { } fetchData() - }, [activeCategory, activeChatbot, session?.user]) + }, [activeCategory, activeChatbot]) if (isLoading || !session?.user) return diff --git a/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx b/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx index 4f19b25a..36a156d3 100644 --- a/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx +++ b/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx @@ -2,7 +2,7 @@ import { Button } from '@/components/ui/button' import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card' import { cn } from '@/lib/utils' import type { ChatbotDetailsProps } from '@/types/types' -import { PanelLeft, MessageSquarePlus } from 'lucide-react' +import { PanelLeft, MessageSquarePlus, Bot } from 'lucide-react' import Image from 'next/image' export function OnboardingChatbotDetails({ @@ -16,20 +16,27 @@ export function OnboardingChatbotDetails({
{/* Background tooltip effect */} -
+ {isWelcomeView && ( +
+ )}

{isWelcomeView ? 'Welcome to Masterbots!' : botName}

- + {!isWelcomeView && ( +
+ + bio: +
+ )}

- Pick a Bot and Start Chatting + Pick a Bot and Start Chatting

-

- Find Your Favorite Bot in the Sidebar +

+ Find Your Favorite Bot in the Sidebar

@@ -88,7 +95,7 @@ export function OnboardingChatbotDetails({ > - New Chat With {botName} + Chat With {botName} Now
diff --git a/apps/masterbots.ai/components/ui/tooltip.tsx b/apps/masterbots.ai/components/ui/tooltip.tsx index af1d48be..30fc44d9 100644 --- a/apps/masterbots.ai/components/ui/tooltip.tsx +++ b/apps/masterbots.ai/components/ui/tooltip.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import * as React from 'react' -import * as TooltipPrimitive from '@radix-ui/react-tooltip' +import * as React from "react" +import * as TooltipPrimitive from "@radix-ui/react-tooltip" -import { cn } from '@/lib/utils' +import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider @@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - 'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1', + "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className )} {...props} diff --git a/apps/masterbots.ai/package.json b/apps/masterbots.ai/package.json index acb030e7..400af47f 100644 --- a/apps/masterbots.ai/package.json +++ b/apps/masterbots.ai/package.json @@ -33,7 +33,7 @@ "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.1", - "@radix-ui/react-tooltip": "^1.1.3", + "@radix-ui/react-tooltip": "^1.1.6", "@stripe/react-stripe-js": "^2.8.1", "@stripe/stripe-js": "^3.5.0", "@vercel/analytics": "^1.3.2", diff --git a/bun.lockb b/bun.lockb index 6efc9fddce3813767b8ee661ef1b1e27f597cfd9..be4a19e31188375274adc1de937d5c02f64719f3 100755 GIT binary patch delta 17881 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 delta 17851 zcmeI4dz?*W`~TP4d+jlMGK|A8V}?N`hm1L34`ZCqjEEc(8cd;3k&M!er+RYE*tkiQ z5`!d(L54xaV9J!rA1y{hX=ieMzKE%4=c%QrOKN4BL z#`ar=5k=&M48te`kNeZ%1K8!Ui{KD=l)qU8U)ph(X{!T9j7T3bz%ce;OR7n*7tTl< z`m|K@Gwd+zHE;I4pi;{rf7!B+SQK)SP0b5em=H z_JBddpBg+c?YSpLq>oA;Hgd#M!A`16!Ty?2mE!A!m_}LLpBemI+Q{?~#!&h}F7qDK zxCedYp!8vbpU5yS<0p0{e@0ZBOm9iksDia07PSzTLi1p0!pO8|()vH0ZoH2jfqkZg zX?NJb^#0F3N$%fbORra^qlAl>F^&7+!qQF?SHqHSK6-KSql(g1zoAz)jLfW8$v_;2 z!qVeCU>Uv%<(!NY%R3d@5@{Nx&?{9ijgs&a!=J02o;G06*a#>7Bm5*?N|b32_bU9w z&x$sUaCjyx1&<+L(Fc#H{apH!UDHReCj*Ii4F|i$uoU!^PH>eBrDqn9VQKi6N=`wY zV;uV`Ea`ezc80Bszf{GT%p!7?K|DsR6kiBS^ESaU)E~l9N)`M>Z+WjXdR1wL=m&JO zw!-2+k{&XJ%Ff0#dLSmJELFMQBv|q(t>XmsQt&b@YxoUUP_MQHS?s2)>E%Q~E+1{VpA=%UF zDh>2cX`SqyOQP=Q{lQ{G`2J7NvNZ( zOOl0uu`08jc6Z|XCIw@(zMc05thTl#hr#Y)$_LJ9;{AICKOPWEm>zN zHNQue>G9Cf>s)gXiRyAy}<~L5KMnjme1QD$Vo%)Lwvz6V@aIj zoVCRpjNlYrs;AHUE0z@JR63TUrSWa+X)H-<`HL8-)mY83m?2ny=s43)|9cZTa+2(H zbf7mwTU6i~pLZpel;Dykc!RvAo@Y{eXRJHv#^1J>P_E-%6%x+iwBTIoLVClWz0&8M zfmI*N@@IGRd3Inu=%2#8F3xGz*q_S0?oLQN-2Ut)KJR4Fv6x?!w*yON0ds!7&s(;* zGbrTM(r5Nk?aDKz6A@!=7n#*-wdL`b>f-bMf~A|%!e`c0?IK9(?UQT{Rqdk8CZ48cOrx(#jWUxxO9^&!g0~2^ zwu9c5Wlf_g>FI=reBM{FWM+D$!k&#--5s~G;il1*2)iZbld4@sR?Mn!HL)UtvYk!! zQ6lZhU^Z6XN>uC{j+72|#---@JheHHTl)(~H3}vmgG{rT4$H8d0ipKZlUUMu_RJ0L z!IAnHmNQqIHVO8uLTT*}?UL+?f~cR~$q zZ5pArc4#l5_I7Ml4r(X%F+zCbW8(N5*%7;kIWB%M$r ze`x1q?*a)?6PL^m&q1uZqI*hJ34~e^s_!rCp6q#%P$RqkxrC%+8Tjo!Pe@gI+^*r{ zgj(7j3kf-!F`Je5jCeTy@B2JGxgqH6pF)l~gzOf1FA#G2l!@$#yN~tnpRzL9`#d3? zlF7IeOZOZ5jOYG99Lw3$8>^$;y2XSZleT-^)l7Rcrk+3f%-(83b;kHZL}vxb8og3Y zh16g=^m*WRg;^$xv1F&P{H3}x#8}P{%LGfQZg(S{^ctb2D)e5nQ7|DnAKbDoJonTf zwcQP=grs}fW6&pHb+ZTSAR+O$SB~f2ns(JYCkGEFBnQ>)>Eqq36{Z(^R+(CqZKo5f zH&$OK7dmGhmYh6}XQ>CB>A()w&gboeCGD|0!j=1=+EJS}hjAYwDr@^4pLc||n3Qzx zYAok;;#BiQaHrDAuK5#$WCNk4Z~Ht;ZC$$h3ZVw*mddVZ`n>UV95+@B#XpawN3pBV zwX=?DA7?gpy&I<{3g3uRJ7919cxQC&jokALR)SsRyM&}jD)w$tFov9oOxPTsw_bv? zFj>SylPrw>{we*Fyr~-R&kjfFEj9L+TIF-?sH-L>Qi)>R z;y8uTK5qxP;c<$lPnKahODvlm?hh=dzp*?Iai`N$3U}q!S0VMt=|S#+WQ+}eQF>A^ zhRkmY`^4w^$ftIQOFeFboQcJ(_fE%hjuIJw9at?$!3O$@&kR)s^_jbU8<<8KVo86O zYd-HLEE&Jj_V}3%otg*vix&92t+0}b^Z2_gPEy_^5{D<7Mh~PQS+(A$v1EYlW5~53 zIhO*PM`m)@X8hqX3>SPA=0D>W|3t#&gB(2)4#utm%O%Y1p-~qu0XK)ayE7hw%face z@ClvlpIDOrs^jlw z>BtLO7nXc}*S4_O7hy?%8J70l)bTJs2ecp!mRLz(YIcb?*Z&Jkejc4q5G*5BN^`W% zH@X<*OMw*;q=qp%;%=6Vs-lbEy_)ZXr4cn@>45}T($|IM5*Gh@n(OQMByBf<g zAdEmeSPJS0bMs@2fo0A~ykwN6c^oX4u;~BNwy;crf5Vb)5-j;m)ts&4XTnlZr8#qs z4$Orm!?$3$gr$Y=!qUQ}uq=vPSPJ?SmW=XXx&AMfd^h4Jyh(GulRnefqJ^!nWV{WQ zOITX4L)*fV!A@ADueJRREG^y(i~j-5hhWL?2+V)RN&XSPGg`l3Gkfu6EnI`8fa|ba z!jj=FSXwIGAhsJ8+oSDZ&G!ha*SecAnS_iO{t>q-u+-yzShBAsk(x!Xi7naI)_(EY zF9DVTNP^}1CzkY$h%XCwhQ;m{tQQpl`x2IdAAzNyp4#rE`B7L3dK{KZShm9vur%O# zShl%wu%v%g^Xo9rA&gnDq<;&R4qgz-g7oEwuv~Yu)bwL?$#Auf|0kA;uOVJI zSMyrU>tHExBP zn7J7*xIQS^wCeHdP5%h_<)yNpCO`UF**fbE?9G4qr7e3NtJeF{(#w-ORE?_heM`^z z)UPl0yU`>*^waf~9{0v}ZJisNc<#H68z#=bl$-v#YrI>vn&j%Bk|w!A)jUGxz3Sv7 zR}XbUgw)9h_p3RR5oS+DxGBN|s@)WXwo?$6PeG`mu8MF)gg#RdYN;ht5pt#?gua1L zTlIPaq30V2c_P$N-f0NI(-4MELx@-FL|7|A#cYH`H8>k#P&PuL2=!FtbcBfM2xF%s z_*8)i+eN7DM`)lj{0O7{2nR(-RyAfIRG)z`Wd=fu+9$$Z5mII%G*J^~B8;Dja9V_B zs=+LTq*(~_W+AjtCq+0RLaIV&rRFGv*$UyN2yIlm*$8cCBP^ed&`wgj z{fLU3hY&FjVeCAF9;!fu?IP5kkI+kH%tshKAK{<~y;Y635vsq9Fy(E8K5Cx`dqqfj z2ce&u@D9TGcMwjCkfs_eKuB7EFmD0E0CiG?6C$L(i;%A7yo)gVU4)w=@L=yfgtqS? zEPoGSu(~S36%qO@M0iRqS%{Fc5Fzw^grTa}`v^VXN5~UlxbiMS2wsFRbP>X{YMlsc zMX0zKVT2mI7-7(2ghCOXSCKgg5jhBBa}Zuo1tM%0q4pAl43)72Ve}G&gCe}BYAi*l zz7%1~QiQQ;p9p(JNLhxEsU|E#7{3hRvc@*e*itPY~v) zj870oe}ZsOgt@B5YJ}>m5vHt0n5XuMuvdhXH3)C332P9>uR%C1!UEMG7a=JZVO}o6 zd+MYJCqzhHi}1dhvle0YT7;V-ELQE-A+%kGuzVfD5_MICD&nSfvK%Aq>hxC=_9}irk10u@PbH zMuc2dAi{PLYHvbVr!qDnjNXKBP=rrajeLaa`3O_;5%SbN5%!9ZvKe8Mny?vR{APsH zB5YO-wjd;JL72A%VXHbR!U+*lw<3J5=4?fny%pi62-{S<&k)*vhOqoIgaUO{gexNS z`5a-VTJkwU&gTfBUmz5!USA;e`~o3Qgs+r$8$$3lgrVCIiqtw0){0PZJHj_=@OFej z+Yt&y_*O+0AVd@(j4eR;UKNP2U4+^@5ca8z9SEa$ARH9ofU2<*q54jQDLWAks(m8t z6(MC8!jEdgE`;&B5KfD5ST!g_NGe2_SBP*_ofP4O2&rEp{H*4Di7@+1S7`3dFI~l& zsmi6@mWmE@$CE=Jg@O;BqVo%>F(gpeW#-P zam(MdiRBHvb#1Q9DEBHSu_E!45*r$LHM*Dwgkh>nn7d9);H~I@rw7Ll8R7i)3cMjj z%N_TVtCX2Lt)jcwrjW27losX%ne{eTZWe>V1XU>#gYh2TblW6(fHdkvi5#+}n z?}LpTtM9dtz1FG`?(g_z8lURK48Ju76^|XuERY$uLuJi|9GYQKG2+>)K@7u?>!5bz zjf1gCs?T-Eb~KD8gg0yLu=Z<;)*DSm@`%=&5k9L2;i%S{qs`FTF|D;go29xOahFNy zucLk;ivQ%bzcD~-C$)QPw1HatRcmd~!qft?$Sg&a4F7LBsvTio=-St5t+mJE<*j|4 z(OL(rR{?((V4T%jN5V&Fm5lK@t)&t^s#||vYn{--86K_@#sw`tgjG&8J4&-|=&rt~ zqq-0!yNz6zw8l$2jS3LN)LJkb_8`u;zdzU@2GzJ^*qc$pI7$yg&|~;y@0Y5~RNUXvM9z*O)Cm+! zlGnL%wYo#d>n;52Sv>z;MtEGzT3)5^*tL5f%7@ z%;e-h0}d+lqI-m=9#K7WGcLM&n<3|9x92)nULCsRu4?Zqe_nFG@6D9MP!7o@#4Z4G zh<2scKfynOXTbMB_Vy>>bTANH#YYb50fbXPBd`cN8Eyy~fcl^wNCfd94%7jPw6Sn) zH-8HIAb}d7I=Bzq3;Z}#S)F37DDGP9QfG==J3^NtO$Q4=Rdq7dN(_GhPr3iE2G4-S z<$e`k!m49dRcR$GRpl=+c*!q~TCikP6JDS;hg#)B|Kg@nN?H&6O?tMZb+1@i|EInrPRek}Jy?4TDNKZRa9hv@93%4%@Iyf2_-iP;a^0~X z0sMK9(G`}$9|qk3e_>@qG&xNB!E*E57k(7<0zE+=P=)+^ySWE^ObgOVDM)%mrs0?H zXCMQN1}^}aro+Kd@Fb81iSN^d<*sW8Ecx^Vg9%G-4$^)B-|583Z?LD(hh_4Qv|4&V zZqXz&$!G-jb6^yB76f$un$3_5B;)7NM}mNFbDd7s#~6G9y4+?Rq+y%z-3qpV%|Py@ zGV=-Cz(KlOe#5K-tq8A$Ujt)+6n+NC57-xh{7_m0vViET;ZMLSAU`)wf)n6l?3Lh6 za0L4!cm+64_#Ajg#{U-rQuv2NEC$tMR}TqG=Yl==nY zWpt#jVoTQ2*g&}wmNYWu4uQ8+d^xL3rc40oOBrBsk!}zd$wJ&^M*gR;EQdhRcaNFO zW|_SbC*iw&WO=Md+XV7t8OU_raF>%f+?`+}ae)fi-GVJXQdyaqfA=j!lgxJk3a}Uc zFnA{z3U&a=Pd1;IDgXAOFF=rreByG})8~X`1K18@s3 zsmymkcA#&8ROA~lhWKMm`R7v%*?GQ(W%rRv#9$Y}QkmWGS3oKg=z-gXDKo+z(T=Hqxq=+cVNy*}Rz9H$FB#HZeEsG3&91RsI^w%6;ZTtE@-u zUT0O91yuePtAbf0H}4axi^FIcrTRL@ES-x3cSar!Yms~sRI?Pp#w^*IjXIrh^QGt*5g7zJHYtq2*Q7%(jDi5#% zwZBujT#DXf@}kJI&8lV2Q1RQW_smi1+ilj9=D$?Rb}Q1Ho!etO_aus}Ap=Z|18yJFO?{2R`nL8~)Xt?DAvl;TK;I$2cSK`CqSP z_x>9C+Ncf0)Q?Rdf)51MuANpybl?NRhpuj2y}|1LCLVQT-OI^v6|~LMlB>_4xxDt+F9CzmN{gDW>)mTA%PfZ^D0L6`@M(X6#K>W4Bc+r2Re4cSufLmKmph+-*hHvp=ZfEDiek zLYYV0W$EU=39$)DvGGRWTfIL%n$gDHd(>}s1ARmoLsjh}s`aXBQ)Jajd5hO4j=& z)vY2c!If81C46mlbQP9VSzlWTQGxFl`;Pd1#~Wwr^s_UFi{&Y03sv|v4gR^LI`Osj zrqgfXYW6o)`{2aV&fik2-J`8=_2)O1$F;h&%Kz4ia21wTmG@W?QTjW@tYMXY-}LR? z`x>}RhEN9AD6YEhVJgL`%stkG=)m`lUxv4Bw(#PR6O@mabj9CtRNcR2sc2D6{FVXx zyT=7YGg!r(vC3II73Bfjcl2d#)%!cfFIg>tq5@ybbvrPodadZBCnztG4&w=IZ&m7h z7Vscd9+kR$Ygp1E1@i%i7tw zX0@v_C8Z%u`;W@2xV=_Fbl}6j9XYR;-0Nv`@J>^|E3aPOOXr;`uV(LM_8KbfiWM0Z z_*C%pz+)#bkAJbFoghK_rixl{m}%Q_pH(3$@L^#|YyOdb3DH?PTh>A+HEtg*@2S2L zN>lMy$u#hN;?OrYRLM@;xCQq_>dAnQRbBSep7ARFH)w`>ZNHW1S{R`^pSHqdXh-0K z&$4?ax7fI7=V@IK&!o3Ts5ASie^G=AKENb95TQOi#xf0jD_Otem|C%KpN%C&T~;`q z{d%cIvU;-b$o-1B{$e^#U zrRt>gw=LskT@#oHWWY{#gXhpf3yjZy;@tMC&Q)0N!yMF*6A#x17G64_{W9XoBJ)2l|-dwg>Q;c=MFRc zfp2$XXIH85YqP2{{BqFXaV$pNcZ7+;gy{)$@=ZFz8VY<8{LP{T-8v_#0y}}dtvf@| zk-s7dJ<4eJRu3HI0J0lbPK6%hVBB=ns;H}WmtN6nPC1K0?e!Y&kpN zFu-;HI>7eAi463UbkNH`TUpL}x-F}$UnspJ{{$Rug>o01vD&ND<5cTT*yq$oZyx2< zn&Z~jT2c!eFh(7fd5uZ+-3ca`UCT&y-$}w%)w5?QXT(WHifT_id1nBnyz=V%lSDW9 zm0OXjD*IP!oHHdOT?|I-DQBjfVhrsri&M)^aU$9)Jx;azg(}+N)WG6*_B7T0H>*6e zo(DX4HoS0k<2NfQ`af?Y&W@453H!=v3cQ`R2rDY^(Q>@|> ztQYutdB~tPS6=ujdA&UaxPRdGEyDS#_ivjC8`l%+@Od8oj5}k+P#oQ!>XiETQTM23 z=jhu;XYKyfO_FMb#ul_7+f9#ay;$N?-=iG-IGIhaO22B2 ziwgXI5{%uQKfBrH=uti3^oL!QyH?bl+?|0@bFSH&&0X!%L*`+~uGUu#uhS(SJ{FTM zEUkuKr__q-_3Ktf%6YBcg3A(nDmg8!Afc1jF1=o?FVP5mRi7L2`478y-#SK&?Dz2v zj2OjR%+xZ0KRg*e`>T>KkMF3$xOJw-yYBo(3%jXy-LzV&61S|6&E{(JEk?4r zIt(?;_wsi&WOm?@7Z>(eRylGfHh&?IHLm<4CH^d1_t5v)Vc4HH=-0K$sD|G+z3F7x zvO#XcKdq-Pne}oPU-WEst7&6ALAkrHc&rv7Sq*~hpN4B2s6)v?kKSW6bnMQ_L8|a3 pKkE843L0UCWF>32WO1viZlnY?y2pMcMr!^iEVi%e(>UnV{{TSycjEv6 From 09c210039eceb8ca8a59833b8c0925000889f925 Mon Sep 17 00:00:00 2001 From: Bran18 Date: Fri, 20 Dec 2024 13:15:34 -0600 Subject: [PATCH 03/13] fix: refactor mobile bot chatbot details --- .../routes/chat/chat-chatbot-details.tsx | 14 +- .../chat/chat-onboarding-chatbot-mobile.tsx | 39 +++++ .../chat/chat-selected-chatbot-mobile.tsx | 88 +++++++++++ .../onboarding-chatbot-mobile-details.tsx | 147 ------------------ 4 files changed, 139 insertions(+), 149 deletions(-) create mode 100644 apps/masterbots.ai/components/routes/chat/chat-onboarding-chatbot-mobile.tsx create mode 100644 apps/masterbots.ai/components/routes/chat/chat-selected-chatbot-mobile.tsx delete mode 100644 apps/masterbots.ai/components/routes/chat/onboarding-chatbot-mobile-details.tsx diff --git a/apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx b/apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx index fa241616..44a3fb82 100644 --- a/apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx +++ b/apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx @@ -6,7 +6,8 @@ import { useSession } from 'next-auth/react' import { useParams } from 'next/navigation' import { useEffect, useState } from 'react' import { OnboardingChatbotDetails } from '@/components/routes/chat/onboarding-chatbot-details' -import { OnboardingMobileChatbotDetails } from '@/components/routes/chat/onboarding-chatbot-mobile-details' +import { OnboardingMobileView } from '@/components/routes/chat/chat-onboarding-chatbot-mobile' +import { SelectedBotMobileView } from '@/components/routes/chat/chat-selected-chatbot-mobile' export default function ChatChatbotDetails() { const { data: session } = useSession() @@ -94,7 +95,16 @@ export default function ChatChatbotDetails() { return ( <> - + {isWelcomeView ? ( + + ) : ( + + )}{' '} ) } diff --git a/apps/masterbots.ai/components/routes/chat/chat-onboarding-chatbot-mobile.tsx b/apps/masterbots.ai/components/routes/chat/chat-onboarding-chatbot-mobile.tsx new file mode 100644 index 00000000..d399db31 --- /dev/null +++ b/apps/masterbots.ai/components/routes/chat/chat-onboarding-chatbot-mobile.tsx @@ -0,0 +1,39 @@ +import { Card, CardHeader } from '@/components/ui/card' +import { PanelLeft } from 'lucide-react' + +export function OnboardingMobileView() { + return ( +
+ + +
+
+

+ Welcome to Masterbots! +

+
+
+ +
+

+ Here you can create new threads and share them to your network! + Navigate with the sidebar and pick any bot of your interest. +

+
+
+

+ Select a Bot To Chat with +

+
+ +

+ Go to sidebar and select +

+
+
+
+ + +
+ ) +} diff --git a/apps/masterbots.ai/components/routes/chat/chat-selected-chatbot-mobile.tsx b/apps/masterbots.ai/components/routes/chat/chat-selected-chatbot-mobile.tsx new file mode 100644 index 00000000..817af686 --- /dev/null +++ b/apps/masterbots.ai/components/routes/chat/chat-selected-chatbot-mobile.tsx @@ -0,0 +1,88 @@ +import { Button } from '@/components/ui/button' +import { Card, CardFooter, CardHeader } from '@/components/ui/card' +import { cn } from '@/lib/utils' +import { Bot, MessageSquarePlus } from 'lucide-react' +import Image from 'next/image' + +interface SelectedBotMobileViewProps { + botName: string + description: string + avatar: string + onNewChat: () => void +} + +export function SelectedBotMobileView({ + botName, + description, + avatar, + onNewChat +}: SelectedBotMobileViewProps) { + return ( +
+ + +
+
+

+ {botName} +

+
+ +
+ + bio: +
+ +
+ {/* Avatar container positioned absolutely */} +
+
+ {`${botName} +
+
+ + {/* Separator line */} +
+
+ +
+

+ {description} +

+
+
+ + + + + + +
+ ) +} + +export default SelectedBotMobileView diff --git a/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-mobile-details.tsx b/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-mobile-details.tsx deleted file mode 100644 index 93ed7512..00000000 --- a/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-mobile-details.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { Button } from '@/components/ui/button' -import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card' -import { cn, numberShortener } from '@/lib/utils' -import type { ChatbotDetailsProps } from '@/types/types' -import { Bot, MessageSquarePlus, Users } from 'lucide-react' -import Image from 'next/image' - -export function OnboardingMobileChatbotDetails({ - botName = 'BuildBot', - avatar = '', - description, - threadCount = 0, - followersCount = 3200, - isWelcomeView = true, - categoryName, - onNewChat, - onFollow -}: ChatbotDetailsProps) { - return ( -
- - -
- {isWelcomeView ? ( - //* Onboarding View Layout - <> - -
-

- Welcome to Masterbots! -

-

- Here you can create new threads and share them to your - network! Navigate with the sidebar and pick any bot of your - interest. -

-
- -
- -
-
-

- Your Journey -
- Begins Here! -

-

- Try and start with:
- {botName} -

-
- -
- {`${botName} -
-
- - ) : ( - //* Selected Bot View Layout - <> -

- {botName} -

-
-
-

- {description} -

- -
- {`${botName} -
-
- - )} -
- - - -
- - - Threads: {numberShortener(threadCount)} - -
- -
-
- - - Followers: {numberShortener(followersCount)} - -
- -
- - - - - - -
- ) -} From 3d9c7b244be26fd110970d0ce0f14ffa5505ddd4 Mon Sep 17 00:00:00 2001 From: Bran18 Date: Fri, 20 Dec 2024 13:53:33 -0600 Subject: [PATCH 04/13] refactor: make chatPannel bigger --- .../components/routes/chat/chat-combobox.tsx | 60 +++++++++++++------ .../components/routes/chat/prompt-form.tsx | 6 +- 2 files changed, 45 insertions(+), 21 deletions(-) diff --git a/apps/masterbots.ai/components/routes/chat/chat-combobox.tsx b/apps/masterbots.ai/components/routes/chat/chat-combobox.tsx index f42d0b2e..112ef3b7 100644 --- a/apps/masterbots.ai/components/routes/chat/chat-combobox.tsx +++ b/apps/masterbots.ai/components/routes/chat/chat-combobox.tsx @@ -31,7 +31,7 @@ import { usePowerUp } from '@/lib/hooks/use-power-up' //* Model options available in the combobox, each with label, value, and logo icon. const models = [ - { label: 'GPT-4o', value: AIModels.Default, logo: "MB" }, + { label: 'GPT-4o', value: AIModels.Default, logo: 'MB' }, { label: 'GPT-4', value: AIModels.GPT4, logo: }, { label: 'Claude3', value: AIModels.Claude3, logo: }, { label: 'llama3_8', value: AIModels.llama3_8b, logo: }, @@ -45,6 +45,7 @@ export function ChatCombobox() { const [open, setOpen] = React.useState(false) const [value, setValue] = React.useState(selectedModel as string) const { isPowerUp } = usePowerUp() + const isDevEnv = process.env.NEXT_PUBLIC_APP_ENV !== 'prod' return ( @@ -54,8 +55,11 @@ export function ChatCombobox() { role="combobox" aria-expanded={open} className={cn( - buttonVariants({ size: 'sm', variant: isPowerUp ? 'powerUp' : 'outline' }), - 'absolute left-0 top-4 size-8 rounded-full p-0 sm:left-4' + buttonVariants({ + size: 'sm', + variant: isPowerUp ? 'powerUp' : 'outline' + }), + 'absolute left-0 top-5 size-8 rounded-full p-0 sm:left-4' )} > {/* Renders the selected model's logo or default icon */} @@ -74,32 +78,52 @@ export function ChatCombobox() { No model found. - {/* Iterates over models to create selectable items */} - {models.map(model => ( - { + {/* Render models only in dev or local environments, otherwise show default */} + {isDevEnv ? ( + models.map(model => ( + { process.env.NEXT_PUBLIC_APP_ENV !== 'prod' - ? (setValue(currentValue === value ? '' : currentValue), changeModel(currentValue as AIModels)) - : '' - setOpen(false) // Closes the popover after selection. + ? (setValue(currentValue === value ? '' : currentValue), + changeModel(currentValue as AIModels)) + : '' + setOpen(false) // Closes the popover after selection. + }} + > + {model.label} + + + )) + ) : ( + { + setValue(AIModels.Default) + changeModel(AIModels.Default) + setOpen(false) }} > - {model.label} - {/* Visual checkmark icon for the selected model */} + Masterbot's Model - ))} + )} ) -} \ No newline at end of file +} diff --git a/apps/masterbots.ai/components/routes/chat/prompt-form.tsx b/apps/masterbots.ai/components/routes/chat/prompt-form.tsx index 664be586..4490bccc 100644 --- a/apps/masterbots.ai/components/routes/chat/prompt-form.tsx +++ b/apps/masterbots.ai/components/routes/chat/prompt-form.tsx @@ -90,7 +90,7 @@ export function PromptForm({
@@ -108,9 +108,9 @@ export function PromptForm({ spellCheck={false} disabled={disabled} className={cn( - "w-full resize-none bg-transparent px-4 focus-within:outline-none sm:text-sm", + "w-full resize-none bg-transparent px-4 py-1 my-1 focus-within:outline-none sm:text-sm", "min-h-[80px] md:min-h-[60px]", //? Smaller height on mobile - "py-2 md:py-[1.3rem]" //? Adjusted padding for mobile + "md:py-[1.3rem]" //? Adjusted padding for mobile )} />
From 9ee3c5fa6be01aea383d2034d7e93d272ee4a2eb Mon Sep 17 00:00:00 2001 From: Bran18 Date: Tue, 24 Dec 2024 11:29:31 -0600 Subject: [PATCH 05/13] chore:add new bot card design + sidebar hover color --- apps/masterbots.ai/app/globals.css | 26 ++ .../layout/sidebar/sidebar-link.tsx | 310 ++++++++++-------- .../chat/chat-onboarding-chatbot-mobile.tsx | 7 +- .../chat/chat-selected-chatbot-mobile.tsx | 50 ++- .../chat/onboarding-chatbot-details.tsx | 39 +-- 5 files changed, 238 insertions(+), 194 deletions(-) diff --git a/apps/masterbots.ai/app/globals.css b/apps/masterbots.ai/app/globals.css index fcaa5bb6..39a6add9 100644 --- a/apps/masterbots.ai/app/globals.css +++ b/apps/masterbots.ai/app/globals.css @@ -49,6 +49,9 @@ --tertiary: 288, 82%, 50%; --tertiary-foreground: 0 0% 98%; --font-size-base: 1rem; + + --background-sidebar-gradient: linear-gradient(180deg, rgba(190, 22, 232, 0.2) 0%, rgba(190, 22, 232, 0.4) 100%); + --background-sidebar-hover-gradient: linear-gradient(180deg, rgba(190, 22, 232, 0.1) 0%, rgba(190, 22, 232, 0.3) 100%); } .dark { @@ -94,6 +97,9 @@ --tertiary: 120, 100%, 65%; --tertiary-foreground: 0 0% 98%; + + --background-sidebar-gradient: linear-gradient(180deg, rgba(130, 228, 110, 0.2) 0%, rgba(130, 228, 110, 0.4) 100%); + --background-sidebar-hover-gradient: linear-gradient(180deg, rgba(130, 228, 110, 0.1) 0%, rgba(130, 228, 110, 0.3) 100%); } } @@ -305,3 +311,23 @@ .lucide { stroke-width: 1.25px; } + +/* Sidebar gradient styles */ +.sidebar-gradient { + transition: background-image 0.3s ease; +} + +/* Hover state */ +.sidebar-gradient:hover:not(.selected) { + background-image: var(--background-sidebar-hover-gradient); +} + +/* Selected state */ +.sidebar-gradient.selected { + background-image: var(--background-sidebar-gradient); +} + +/* Selected + hover state */ +.sidebar-gradient.selected:hover { + background-image: var(--background-sidebar-gradient); +} diff --git a/apps/masterbots.ai/components/layout/sidebar/sidebar-link.tsx b/apps/masterbots.ai/components/layout/sidebar/sidebar-link.tsx index 57b5595e..81166b01 100755 --- a/apps/masterbots.ai/components/layout/sidebar/sidebar-link.tsx +++ b/apps/masterbots.ai/components/layout/sidebar/sidebar-link.tsx @@ -1,11 +1,11 @@ 'use client' -import { Checkbox } from "@/components/ui/checkbox" +import { Checkbox } from '@/components/ui/checkbox' import { IconCaretRight } from '@/components/ui/icons' import { useSidebar } from '@/lib/hooks/use-sidebar' import { urlBuilders } from '@/lib/url' import { cn } from '@/lib/utils' -import { Category, Chatbot } from 'mb-genql' +import type { Category, Chatbot } from 'mb-genql' import { toSlug } from 'mb-lib' import Image from 'next/image' import Link from 'next/link' @@ -18,7 +18,11 @@ interface SidebarLinkProps { page?: string } -export default function SidebarLink({ category, isFilterMode, page }: SidebarLinkProps) { +export default function SidebarLink({ + category, + isFilterMode, + page +}: SidebarLinkProps) { const router = useRouter() const pathname = usePathname() const isBrowse = !/^\/(?:c|u)(?:\/|$)/.test(pathname) @@ -39,51 +43,73 @@ export default function SidebarLink({ category, isFilterMode, page }: SidebarLin } = useSidebar() const isExpanded = expandedCategories.includes(category.categoryId) - const handleClickCategory = useCallback((e: React.MouseEvent) => { - e.stopPropagation() - if (!isFilterMode) { - setExpandedCategories(prev => - prev.includes(category.categoryId) - ? [] - : [category.categoryId] - ) - setActiveCategory(prev => { - const newCategory = prev === category.categoryId ? null : category.categoryId - if (newCategory) { - setActiveChatbot(null) - navigateTo({ - page, - slug: typeof slug === 'string' ? slug : undefined, - categoryName: toSlug(category.name.toLowerCase()), - isBrowse - }) - - } - else { - setActiveChatbot(null) - navigateTo({ - page, - slug: typeof slug === 'string' ? slug : undefined, - isBrowse - }) - } - return newCategory - }) - } - }, [category.categoryId, category.name, setActiveCategory, setExpandedCategories, setActiveChatbot, router, isFilterMode, isBrowse]) + // biome-ignore lint/correctness/useExhaustiveDependencies: + const handleClickCategory = useCallback( + (e: React.MouseEvent) => { + e.stopPropagation() + if (!isFilterMode) { + setExpandedCategories(prev => + prev.includes(category.categoryId) ? [] : [category.categoryId] + ) + setActiveCategory(prev => { + const newCategory = + prev === category.categoryId ? null : category.categoryId + if (newCategory) { + setActiveChatbot(null) + navigateTo({ + page, + slug: typeof slug === 'string' ? slug : undefined, + categoryName: toSlug(category.name.toLowerCase()), + isBrowse + }) + } else { + setActiveChatbot(null) + navigateTo({ + page, + slug: typeof slug === 'string' ? slug : undefined, + isBrowse + }) + } + return newCategory + }) + } + }, + [ + category.categoryId, + category.name, + setActiveCategory, + setExpandedCategories, + setActiveChatbot, + router, + isFilterMode, + isBrowse + ] + ) - const handleCheckboxChange = useCallback((checked: boolean) => { - setSelectedCategories(prev => - checked - ? [...prev, category.categoryId] - : prev.filter(id => id !== category.categoryId) - ) - setSelectedChatbots(prev => - checked - ? [...prev, ...category.chatbots.map(chatbot => chatbot.chatbot.chatbotId)] - : prev.filter(id => !category.chatbots.some(chatbot => chatbot.chatbot.chatbotId === id)) - ) - }, [category.categoryId, category.chatbots]) + // biome-ignore lint/correctness/useExhaustiveDependencies: + const handleCheckboxChange = useCallback( + (checked: boolean) => { + setSelectedCategories(prev => + checked + ? [...prev, category.categoryId] + : prev.filter(id => id !== category.categoryId) + ) + setSelectedChatbots(prev => + checked + ? [ + ...prev, + ...category.chatbots.map(chatbot => chatbot.chatbot.chatbotId) + ] + : prev.filter( + id => + !category.chatbots.some( + chatbot => chatbot.chatbot.chatbotId === id + ) + ) + ) + }, + [category.categoryId, category.chatbots] + ) const isActive = activeCategory === category.categoryId const isSelected = selectedCategories.includes(category.categoryId) @@ -94,7 +120,7 @@ export default function SidebarLink({ category, isFilterMode, page }: SidebarLin e.stopPropagation()} + onClick={e => e.stopPropagation()} className="mr-2" /> )} @@ -110,12 +136,14 @@ export default function SidebarLink({ category, isFilterMode, page }: SidebarLin const childrenContent = (isExpanded || isFilterMode) && (
- {category.chatbots.map((chatbotCategory) => ( + {category.chatbots.map(chatbotCategory => ( + {/* biome-ignore lint/a11y/useKeyWithClickEvents: */}
@@ -143,18 +172,19 @@ export default function SidebarLink({ category, isFilterMode, page }: SidebarLin return (
+ {/* biome-ignore lint/a11y/useButtonType: */}
-

- Select a Bot To Chat with -

-

- Go to sidebar and select +

+ Go To Sidebar And Select One Bot

diff --git a/apps/masterbots.ai/components/routes/chat/chat-selected-chatbot-mobile.tsx b/apps/masterbots.ai/components/routes/chat/chat-selected-chatbot-mobile.tsx index 817af686..da28a282 100644 --- a/apps/masterbots.ai/components/routes/chat/chat-selected-chatbot-mobile.tsx +++ b/apps/masterbots.ai/components/routes/chat/chat-selected-chatbot-mobile.tsx @@ -1,7 +1,6 @@ -import { Button } from '@/components/ui/button' import { Card, CardFooter, CardHeader } from '@/components/ui/card' import { cn } from '@/lib/utils' -import { Bot, MessageSquarePlus } from 'lucide-react' +import { Bot, ArrowBigDown } from 'lucide-react' import Image from 'next/image' interface SelectedBotMobileViewProps { @@ -36,20 +35,20 @@ export function SelectedBotMobileView({
{/* Avatar container positioned absolutely */}
-
- {`${botName} +
+ {`${botName}
@@ -65,20 +64,11 @@ export function SelectedBotMobileView({
- - + +

+ + Start Chatting Below +

diff --git a/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx b/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx index 36a156d3..edd230e9 100644 --- a/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx +++ b/apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx @@ -1,8 +1,7 @@ -import { Button } from '@/components/ui/button' import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card' import { cn } from '@/lib/utils' import type { ChatbotDetailsProps } from '@/types/types' -import { PanelLeft, MessageSquarePlus, Bot } from 'lucide-react' +import { ArrowBigLeft, ArrowBigDown, Bot } from 'lucide-react' import Image from 'next/image' export function OnboardingChatbotDetails({ @@ -16,7 +15,7 @@ export function OnboardingChatbotDetails({
{/* Background tooltip effect */} - {isWelcomeView && ( + {/* {isWelcomeView && (
- )} + )} */} @@ -67,15 +66,10 @@ export function OnboardingChatbotDetails({ {isWelcomeView && (
-

- Pick a Bot and Start Chatting +

+ + Go To Sidebar And Select One Bot

-
- -

- Find Your Favorite Bot in the Sidebar -

-
)} @@ -83,21 +77,12 @@ export function OnboardingChatbotDetails({ {!isWelcomeView && (
- +
+

+ + Start Chatting Below +

+
)} From fed4c2bf68a0a2073b2bbc7c74dd19f35ec6ab64 Mon Sep 17 00:00:00 2001 From: Bran18 Date: Tue, 24 Dec 2024 11:40:01 -0600 Subject: [PATCH 06/13] chore: delete public and private sw + icons --- .../components/routes/chat/chat-options.tsx | 9 +-------- .../components/routes/thread/thread-popup.tsx | 1 - 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/apps/masterbots.ai/components/routes/chat/chat-options.tsx b/apps/masterbots.ai/components/routes/chat/chat-options.tsx index 06c9f68a..8ddaa8d5 100644 --- a/apps/masterbots.ai/components/routes/chat/chat-options.tsx +++ b/apps/masterbots.ai/components/routes/chat/chat-options.tsx @@ -19,7 +19,7 @@ import { } from '@/components/ui/dropdown-menu' import { IconSpinner } from '@/components/ui/icons' import { useThreadVisibility } from '@/lib/hooks/use-thread-visibility' -import { BadgeCheck, Eye, EyeOff, MoreVertical, Trash } from 'lucide-react' +import { Eye, EyeOff, MoreVertical, Trash } from 'lucide-react' import type { Thread } from 'mb-genql' import { toSlug } from 'mb-lib' import type React from 'react' @@ -100,13 +100,6 @@ export function ChatOptions({ threadId, thread, isBrowse }: ChatOptionsProps) { {!isBrowse && (
-
- {thread?.isApproved ? ( - - ) : ( - - )} -
{thread?.isPublic ? 'Public' : 'Private'} diff --git a/apps/masterbots.ai/components/routes/thread/thread-popup.tsx b/apps/masterbots.ai/components/routes/thread/thread-popup.tsx index 28606385..eee649e4 100644 --- a/apps/masterbots.ai/components/routes/thread/thread-popup.tsx +++ b/apps/masterbots.ai/components/routes/thread/thread-popup.tsx @@ -169,7 +169,6 @@ export function ThreadPopUpCardHeader({ messages }: { messages: AiMessage[] }) {
- From 5120cf37eb955c648dac356e1215618c8b25b1b2 Mon Sep 17 00:00:00 2001 From: Bran18 Date: Fri, 27 Dec 2024 11:47:17 -0600 Subject: [PATCH 07/13] chore: include public + delete extra actions --- apps/masterbots.ai/app/globals.css | 8 +- .../components/layout/header/header.tsx | 8 +- .../layout/sidebar/profile-sidebar.tsx | 57 ++++---- .../components/layout/sidebar/sidebar.tsx | 25 ++-- .../components/routes/chat/chat-options.tsx | 8 -- .../chat/onboarding-chatbot-details.tsx | 132 ++++++++---------- .../components/routes/chat/prompt-form.tsx | 3 +- 7 files changed, 109 insertions(+), 132 deletions(-) diff --git a/apps/masterbots.ai/app/globals.css b/apps/masterbots.ai/app/globals.css index 39a6add9..9f7460e2 100644 --- a/apps/masterbots.ai/app/globals.css +++ b/apps/masterbots.ai/app/globals.css @@ -50,8 +50,8 @@ --tertiary-foreground: 0 0% 98%; --font-size-base: 1rem; - --background-sidebar-gradient: linear-gradient(180deg, rgba(190, 22, 232, 0.2) 0%, rgba(190, 22, 232, 0.4) 100%); - --background-sidebar-hover-gradient: linear-gradient(180deg, rgba(190, 22, 232, 0.1) 0%, rgba(190, 22, 232, 0.3) 100%); + --background-sidebar-gradient: linear-gradient(180deg, rgba(155, 22, 232, 0.2) 0%, rgba(190, 22, 232, 0.53) 100%); + --background-sidebar-hover-gradient: linear-gradient(-180deg, rgba(166, 22, 232, 0.1) 0%, rgba(190, 22, 232, 0.3) 100%); } .dark { @@ -98,8 +98,8 @@ --tertiary: 120, 100%, 65%; --tertiary-foreground: 0 0% 98%; - --background-sidebar-gradient: linear-gradient(180deg, rgba(130, 228, 110, 0.2) 0%, rgba(130, 228, 110, 0.4) 100%); - --background-sidebar-hover-gradient: linear-gradient(180deg, rgba(130, 228, 110, 0.1) 0%, rgba(130, 228, 110, 0.3) 100%); + --background-sidebar-gradient: linear-gradient(180deg, rgba(115, 201, 97, 0.2) 0%, rgba(122, 214, 104, 0.4) 100%); + --background-sidebar-hover-gradient: linear-gradient(-180deg, rgba(113, 199, 96, 0.1) 0%, rgba(117, 205, 99, 0.3) 100%); } } diff --git a/apps/masterbots.ai/components/layout/header/header.tsx b/apps/masterbots.ai/components/layout/header/header.tsx index 7e926359..bc58e012 100644 --- a/apps/masterbots.ai/components/layout/header/header.tsx +++ b/apps/masterbots.ai/components/layout/header/header.tsx @@ -20,12 +20,8 @@ export function Header() {
- {appConfig.features.devMode && ( - <> - - - - )} + + {appConfig.features.devMode && }
diff --git a/apps/masterbots.ai/components/layout/sidebar/profile-sidebar.tsx b/apps/masterbots.ai/components/layout/sidebar/profile-sidebar.tsx index 7707d1e3..6eb1cd62 100644 --- a/apps/masterbots.ai/components/layout/sidebar/profile-sidebar.tsx +++ b/apps/masterbots.ai/components/layout/sidebar/profile-sidebar.tsx @@ -43,16 +43,18 @@ export function ProfileSidebar({ user }: ProfileSidebarProps) { } }, []) - const goToProfile = useCallback((e: React.MouseEvent) => { - e.preventDefault() - e.stopPropagation() - const userSlug = toSlugWithUnderScore(user.name || '') - if (userSlug) { - setIsOpen(false) - router.push(`/u/${userSlug}/t`) - } - }, [router, user.name]) - + const goToProfile = useCallback( + (e: React.MouseEvent) => { + e.preventDefault() + e.stopPropagation() + const userSlug = toSlugWithUnderScore(user.name || '') + if (userSlug) { + setIsOpen(false) + router.push(`/u/${userSlug}/t`) + } + }, + [router, user.name] + ) return ( @@ -115,32 +117,31 @@ export function ProfileSidebar({ user }: ProfileSidebarProps) { Chat - {appConfig.features.devMode && ( - - )} - {appConfig.features.devMode && ( - + <> + + + )} diff --git a/apps/masterbots.ai/components/layout/sidebar/sidebar.tsx b/apps/masterbots.ai/components/layout/sidebar/sidebar.tsx index 308ff070..ab0b441a 100644 --- a/apps/masterbots.ai/components/layout/sidebar/sidebar.tsx +++ b/apps/masterbots.ai/components/layout/sidebar/sidebar.tsx @@ -10,34 +10,31 @@ import { useThread } from '@/lib/hooks/use-thread' export function Sidebar({ className }: React.ComponentProps<'div'>) { const { isSidebarOpen, isLoading } = useSidebar() - const prevPathRef = React.useRef(usePathname()); - const pathname = usePathname(); - const { setActiveThread, setIsOpenPopup } = useThread() - const rootAndChatRegex = /^\/(?:c)?$/; + const prevPathRef = React.useRef(usePathname()) + const pathname = usePathname() + const { setActiveThread, setIsOpenPopup } = useThread() + const rootAndChatRegex = /^\/(?:c)?$/ + // biome-ignore lint/correctness/useExhaustiveDependencies: React.useEffect(() => { if (rootAndChatRegex.test(pathname)) { - setActiveThread(null); - setIsOpenPopup(false); + setActiveThread(null) + setIsOpenPopup(false) } - prevPathRef.current = pathname; - }, [pathname]); + prevPathRef.current = pathname + }, [pathname]) - if (isLoading) return null return ( <>

- + Threads: {chatbot.threads.length} @@ -65,7 +65,7 @@ export function BrowseChatbotMobileDetails({ alt={`${chatbot.name} avatar`} width={74} height={74} - className="object-cover size-full p-0 m-0" + className="object-cover p-0 m-0 size-full" />
From e2b35c45d50e2590df09b5721099fbad9aee5a8b Mon Sep 17 00:00:00 2001 From: Bran18 Date: Tue, 21 Jan 2025 20:57:27 -0600 Subject: [PATCH 13/13] chore:add latest --- apps/masterbots.ai/components/layout/sidebar/sidebar.tsx | 2 +- apps/masterbots.ai/next-env.d.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/masterbots.ai/components/layout/sidebar/sidebar.tsx b/apps/masterbots.ai/components/layout/sidebar/sidebar.tsx index 8ce92887..753dc718 100644 --- a/apps/masterbots.ai/components/layout/sidebar/sidebar.tsx +++ b/apps/masterbots.ai/components/layout/sidebar/sidebar.tsx @@ -35,7 +35,7 @@ export function Sidebar({ className }: React.ComponentProps<'div'>) { className, 'h-full flex flex-col z-40', isChatRoute - ? 'bg-[#fae8ff] dark:bg-[#17021D]' // For /c routes + ? 'bg-[#fae8ff] dark:bg-[#17021D]' // For /c routes only : 'bg-[#eeffea] dark:bg-[#0B1608]' // For other routes )} > diff --git a/apps/masterbots.ai/next-env.d.ts b/apps/masterbots.ai/next-env.d.ts index 40c3d680..1b3be084 100644 --- a/apps/masterbots.ai/next-env.d.ts +++ b/apps/masterbots.ai/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.