From 01d1552e9961b2e9f6c3e663780babc3a370bc62 Mon Sep 17 00:00:00 2001 From: Edouard Wautier <4435185+Duncid@users.noreply.github.com> Date: Tue, 3 Oct 2023 12:51:09 +0200 Subject: [PATCH] Polishing search bar (#1917) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Polishing search bar * Adjusting * Incorporating changes, bumping version * Adding system avatars * llama --------- Co-authored-by: édouard wautier --- .../claudeInstant_avatar_full.png | Bin 0 -> 2709 bytes .../static/systemavatar/llama_avatar_full.png | Bin 0 -> 10162 bytes .../systemavatar/mistral_avatar_full.png | Bin 0 -> 1048 bytes sparkle/package-lock.json | 4 +- sparkle/package.json | 2 +- sparkle/src/components/Searchbar.tsx | 45 +++++++-- sparkle/src/stories/Searchbar.stories.tsx | 93 ++++++++++++------ 7 files changed, 100 insertions(+), 44 deletions(-) create mode 100644 front/public/static/systemavatar/claudeInstant_avatar_full.png create mode 100644 front/public/static/systemavatar/llama_avatar_full.png create mode 100644 front/public/static/systemavatar/mistral_avatar_full.png diff --git a/front/public/static/systemavatar/claudeInstant_avatar_full.png b/front/public/static/systemavatar/claudeInstant_avatar_full.png new file mode 100644 index 0000000000000000000000000000000000000000..ce5a0af77a548b97c2a5279abb94e7bb6b3845a5 GIT binary patch literal 2709 zcmds3`#+TH7Jueq+;_<4bt{)jZHckBT$)Ic%ZPHiy3J_VDismhqs&aIt<1ROxD}>d zN*%d$D2g#}s-aEU*}@Ku%!wFGF2fjO=Defx%lQ}f5AWw$&syK_^Q^U=wbtjox;MaE zTf<7renwk z8||^j1As?anz9HL05pE^_4L?(4mCN*$ufIy)H=QElAiiD?HvE>8*us>rVRbpJ`9}U zJzwLrOF{p++eylCwTs&6VYtyUsNu}UiI&rG5k#Nek2JR#5HXL|50Hb(EZj70>|RU_ zHZ~@d7P)keT3Nv8lj?j?hit0kX;xE`^o^ZHc2~Vdc0Sl~6b-JbgLNA~cH!S_(|6~x zJ?(<9;B(($%)NAVoFkbPSIE@;_NG5?BccQ(jSbkTz*us_?M50Ns6J|u3%xU)*3xJXlHt@!1Ekw|;xT<62P6 z8+GYd?inktFc}lOfpJm1%)|lrZxht9$nh0Q0QMHcg-P4R+mU1mwCkJ)*QDXIEl|g9 zg)2I9loE7=(^J|maf;N6^Z~n*#^;(=j_p^6)5j&rGp__uZ<&mf*1+n9a0QeBn8&JC ze6U5^Uw6q;9{ofO_8D=LYa3x6V98h_r1WM#+Wz9*m5Y@sBc)0Wwy-^}^v@FfT34rZ zuka=?ZP9B*;vk zjiKGZW?Li7tR5Y64N`0gZ+N^oYJ3slxv0Y^gqN&H;D%m^rOZ|f#b5 zw1}s=mNqG>Ztj(DhM~eNV7lX_#EB5!V+KPF+fdFBs;``SV}L5FC|^nz4JbZjy%&zz z6gc@2dGL8GnZ1+8ovlxjPixlu#qi)zEP3s?q*pq}Z9ZHz6<=1}`)9J~{J~%c+=wMu z`Z|#?$(^WembjD7RMN)IFVzAHc@4T|m2P=qO38?KXrKvZR)_BB#iWTj3Tj#C`eEt^ zsPI?taMMv)%IKuHD%Yy2oW*cagN-eD+;QIHtX}D;WmS0yi=i8h;=y9|6$5cJHdVk; z96&5A#`0>qV@HI{Y^28NP`D+)L{)I`vFe!hZW(0^{K&o zqqHUpz(XAex!KGej&7i)18$xOl5`#AW=U_d&IM=VYe?vtjP&VPNjE#~+KM6&U6Xcy zS~T#NFiPti!xtp!;N|b{@OhJg?T}@u!G0smk`>sN?i^*h)MhwcXHFs0uw?V2vWgzg zbadD^mN&p5=~(_Ksg=``i#oM_!UcGPCs&OX!6jAR+9!B$sv5i%@z&$C?8u>Rj1!Zw ztV2JQ?=08$BG?{#O&NM!kZFkYYqckfR;gN@ZZ&qj6}Dzm2cQNPIKTd=Y+DD*eM$Gs zy097Oi^GrwY9m8Hg8fJcyAA47MQuDIAidN~m>tzP7rggzH@>D>QlfI+7x;BZoO)R9 z!emY^v^2hI(jMo?>HI>q5qMqBCWyss4N1H+z;xBdU43LcRBWdRa{zbp% z+~IGke2@RSHkQksiFvaSBh&2 zSDHg+puS#W32>6d5PN+H;#?YY1YzN5q$J+) z7kaPR=^UvX#n-e0M8P2hx((YrwV@2j&MNaGdeOho!WC8Lx!(6`sy?k%%$`E)ILf`u z9PfA*zmY^DFhlzNK>1)pPpepw?;7vbbQ4MBY}Wy0F(BQVlpy5}KBdNK0$*aj_g0V-RbOM5zDu=1ISm#$WuhLHS}Fxu^&M zY-cgTlzv-rNrr3QR@~cNhA1@?#oGlJr0R?P4)NfzL|rEi{&PHh!_uR(BMb1VT zv=U>)JT|MJo$o*XU@ouSL5zu>VhEGd|M_IkUWQNJPR#VYj literal 0 HcmV?d00001 diff --git a/front/public/static/systemavatar/llama_avatar_full.png b/front/public/static/systemavatar/llama_avatar_full.png new file mode 100644 index 0000000000000000000000000000000000000000..4beaeae23d74850f1c1e1dfca9ea1a5a96240530 GIT binary patch literal 10162 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

yQBnO(0jXq+nj zB!^@>W$1#WTc=>Rt>lJLZ&&OHBzaTz9^e${DLErtIWTyFwNQ0>k^Vp+x>(LkNGan} zXm2+jIB zPEoEcCIbu%bFEg#JB2)iy9EtpqJmM+(%MmCLre6%i0z!Sd5c)~P>o_$TA6u)urI#f zc(N(KBGiwJW4MaDB&VIlDb%2Q-YADXfo~i6#ZTZ zDx<#p=letq(-76y(F3Z##EPI=)GV4A-{BXGg?6asNT+E=$~U%idY=jII@ zs_)C+r6S!{t`XqcRxTn3-p&jBJ~q@(WZr&g^Sv8;Jc=iczT-Oz&H?|&1V8C~fDO46 z+Th72Uy&XUqCFg?AV&wPdh*kY)~b2$GM++gLiRgJ{?ZI-p0AmNxXxwofr0clTq1Vc z=x7=_x)2NQTZ12$Nh5_<8NbI19L%8Yg$uHKDT4wzxF4&TYEU^V;hkEnE$%EBiJ5!6 zw6ByU{Y+gFRc5a>9=|uerV!`X?dWl3cxVY}QUjD{@ zaFFo&?&KITZ^yABfz1t1yv8E*zWOVbF2nMLqToTSXp@_5Xv*aW3tFHq`9bC1@ePTS zH#HyVnGjDIx1Vl&ipsnD`_8aPOzD`Oaq(}x>$$Eq318x5k5%x33*pu0%SQ9Ad@buz z*HBX$*c!^yD%Mvx-UuK)Ogl(~9bF6|5ry3KqaKC@_|ge%wF>1+OjKAxf_QKI#9!en zdAq6l(Y}jTe^eRR!^vtP*b_x7@4odL3*N!(b#L<+RgMG5T}NE?S9Lj{>)MhH3wg0~ z>O@&O8$sS793*c`8mc^{|Qq{N4*~{cQeN$6*e^%L zD{?)_`-%Rf2iTv#RW;aH3Eo_VFg3d1e%)e;81FryeW>#G71u`6{|3>FVljHR&+6a49}E80T8`O^zUI;3 zOqWrsUh3r9BbdF>AE$Q-J~lW=xFxWIvt!d*?F0LkQXGQPl>TF^h`H)7KuJ+=o@cMP z}hR<-#eahRr!WC@by|a&}Q|6%3{f^gXEhSMb7}78}FMufY>+4zjYU5-1;sMTr z=5zc;_b2oZJ;EoUnS~fc|LoB|>;8AbUjj7bMxeuQ3QxDHrn=fc-T%VMoA%Ah1tK@z zv{Qm*0kqn~% literal 0 HcmV?d00001 diff --git a/front/public/static/systemavatar/mistral_avatar_full.png b/front/public/static/systemavatar/mistral_avatar_full.png new file mode 100644 index 0000000000000000000000000000000000000000..4a5d486cb36e5e1b722e947187c850374b7a279e GIT binary patch literal 1048 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G$6%U;1OBOz`!jG!i)^F=172) z6bHFGF|0c$^AgBmNq6*hWMJ6X&;2Knm4ShIt*47)NCo5DyBl*w0!17yZs)kz!o9(j zWA2PacX&HyuyIV|?LDC&VO3zGm*}qD`{t{y`oDwM`PapLxt~~TwU$|Bue5?UgM!b{ zM{oWfxqIi{eA~@6|E+iLvi6<&y*^TnfkT*LboxE(jVB)sc31te*}dz(>GWG)^8X*+ zzw^qc4G%BedtYx(9a}bwCv-oy3V-_}Q*Ud{&4L#e*Wdnm)ogy6g&~oNV)TtE=i~3g zZ(iL#zw^r3w?F;gPVfJp9)7*>)78&qol`;+0IwA0?f?J) literal 0 HcmV?d00001 diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json index f4179d226bb4..f4315019b35c 100644 --- a/sparkle/package-lock.json +++ b/sparkle/package-lock.json @@ -1,12 +1,12 @@ { "name": "@dust-tt/sparkle", - "version": "0.1.93", + "version": "0.1.96", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@dust-tt/sparkle", - "version": "0.1.93", + "version": "0.1.96", "license": "ISC", "dependencies": { "@headlessui/react": "^1.7.17" diff --git a/sparkle/package.json b/sparkle/package.json index ed4225e68b1f..4b52c1e02703 100644 --- a/sparkle/package.json +++ b/sparkle/package.json @@ -1,6 +1,6 @@ { "name": "@dust-tt/sparkle", - "version": "0.1.95", + "version": "0.1.96", "scripts": { "build": "rm -rf dist && rollup -c", "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true", diff --git a/sparkle/src/components/Searchbar.tsx b/sparkle/src/components/Searchbar.tsx index 1807d7261ea1..7545a0a8fee5 100644 --- a/sparkle/src/components/Searchbar.tsx +++ b/sparkle/src/components/Searchbar.tsx @@ -1,8 +1,11 @@ -import React from "react"; +import React, { useRef } from "react"; -import { MagnifyingGlass } from "@sparkle/icons/stroke"; +import { Icon } from "@sparkle/components/Icon"; import { classNames } from "@sparkle/lib/utils"; +import { MagnifyingGlassStrokeIcon, XMarkIcon } from ".."; +import { IconButton } from "./IconButton"; + export function Searchbar({ placeholder, value, @@ -24,20 +27,33 @@ export function Searchbar({ disabled?: boolean; className?: string; }) { + const clearInputField = () => { + onChange?.(""); + }; + return (

-
+
- +
+ {value && onChange ? ( + + ) : ( + + )} +
diff --git a/sparkle/src/stories/Searchbar.stories.tsx b/sparkle/src/stories/Searchbar.stories.tsx index 9e450b6d8fb5..71261619a5c3 100644 --- a/sparkle/src/stories/Searchbar.stories.tsx +++ b/sparkle/src/stories/Searchbar.stories.tsx @@ -1,5 +1,5 @@ import type { Meta } from "@storybook/react"; -import React from "react"; +import React, { useState } from "react"; import { Searchbar } from "../index_with_tw_base"; @@ -10,34 +10,63 @@ const meta = { export default meta; -export const SearchbarExample = () => ( -
- - - - - -
-); +export const SearchbarExample = () => { + const [inputValue, setInputValue] = useState(""); + const [inputValue2, setInputValue2] = useState("value"); + const [inputValue3, setInputValue3] = useState("value"); + const [inputValue4, setInputValue4] = useState("value"); + + const handleChange = (value: string) => { + setInputValue(value); + }; + const handleChange2 = (value: string) => { + setInputValue2(value); + }; + const handleChange3 = (value: string) => { + setInputValue3(value); + }; + const handleChange4 = (value: string) => { + setInputValue4(value); + }; + + return ( +
+ + + + + +
+ ); +};