jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

refactor: Design updates to Playground from uplift sweep (#4428)

Browse source 
* design sweep changes

* [autofix.ci] apply automated fixes

* update truncate fade

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Mike Fortman 2024-11-06 15:58:41 -06:00 • committed by GitHub
commit 63435689d4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 18 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/components/ui/textAnimation.tsx
View file

@ -37,7 +37,7 @@ const defaultContainerVariants: Variants = {
visible: { visible: {
opacity: 1, opacity: 1,
transition: { transition: {
staggerChildren: 0.025, staggerChildren: 0.015,
}, },
}, },
exit: { exit: {

4
src/frontend/src/modals/IOModal/components/IOFieldView/components/sessionSelector/newSessionSelector.tsx
View file

@ -152,10 +152,10 @@ export default function SessionSelector({
<ShadTooltip styleClasses="z-50" content={session}> <ShadTooltip styleClasses="z-50" content={session}>
<div <div
className={cn( className={cn(
"h-4 w-full group-hover:truncate-secondary-hover", "w-full whitespace-nowrap group-hover:truncate-secondary-hover",
isVisible isVisible
? "truncate-secondary-hover" ? "truncate-secondary-hover"
: "truncate-muted dark:truncate-background", : "truncate-muted dark:truncate-canvas",
)} )}
> >
{session === currentFlowId ? "Default Session" : session} {session === currentFlowId ? "Default Session" : session}

25
src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
View file

@ -243,36 +243,35 @@ export default function ChatMessage({
className="flex w-full gap-4 rounded-md p-2" className="flex w-full gap-4 rounded-md p-2"
> >
<LogoIcon /> <LogoIcon />
<div className="w-full rounded-md border border-error-red-border bg-error-red p-4 text-[14px] text-foreground"> <div className="w-full rounded-xl border border-error-red-border bg-error-red p-4 text-[14px] text-foreground">
<div className="mb-2 flex items-center gap-2"> <div className="mb-2 flex items-center gap-2">
<ForwardedIconComponent <ForwardedIconComponent
className="h-[18px] w-[18px] text-destructive" className="h-[18px] w-[18px] text-destructive"
name="OctagonAlert" name="OctagonAlert"
/> />
<span className="">An error stopped your flow.</span> <span className="">
</div> An error occured in the{" "}
<div className="mb-4">
<h3 className="pb-3 font-semibold">Error details:</h3>
<p className="pb-1">
Component:{" "}
<span <span
className={cn( className={cn(
closeChat ? "cursor-pointer underline" : "", closeChat ? "cursor-pointer hover:underline" : "",
)} )}
onClick={() => { onClick={() => {
fitViewNode(chat.properties?.source?.id ?? ""); fitViewNode(chat.properties?.source?.id ?? "");
closeChat?.(); closeChat?.();
}} }}
> >
{errorContent.component} <strong>{errorContent.component}</strong>
</span> </span>{" "}
</p> Component, stopping your flow. See below for more details.
</span>
</div>
<div className="">
<h3 className="pb-3 font-semibold">Error details:</h3>
{errorContent.field && ( {errorContent.field && (
<p className="pb-1">Field: {errorContent.field}</p> <p className="pb-1">Field: {errorContent.field}</p>
)} )}
{errorContent.reason && ( {errorContent.reason && (
<span className=""> <span className="">
Reason:{" "}
<Markdown <Markdown
linkTarget="_blank" linkTarget="_blank"
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
@ -297,7 +296,7 @@ export default function ChatMessage({
)} )}
</div> </div>
{errorContent.solution && ( {errorContent.solution && (
<div> <div className="mt-4">
<h3 className="pb-3 font-semibold">Steps to fix:</h3> <h3 className="pb-3 font-semibold">Steps to fix:</h3>
<ol className="list-decimal pl-5"> <ol className="list-decimal pl-5">
<li>Check the component settings</li> <li>Check the component settings</li>

6
src/frontend/src/modals/IOModal/newModal.tsx
View file

@ -271,7 +271,7 @@ export default function IOModal({
: "w-0", : "w-0",
)} )}
> >
<div className="flex h-full flex-col overflow-y-auto border-r border-border bg-muted p-6 text-center custom-scroll dark:bg-background"> <div className="flex h-full flex-col overflow-y-auto border-r border-border bg-muted p-4 text-center custom-scroll dark:bg-canvas">
<div className="flex items-center gap-2 pb-8"> <div className="flex items-center gap-2 pb-8">
<ShadTooltip <ShadTooltip
styleClasses="z-50" styleClasses="z-50"
@ -355,7 +355,7 @@ export default function IOModal({
)} )}
</div> </div>
</div> </div>
<div className="flex h-full min-w-96 flex-grow bg-background dark:bg-accent"> <div className="flex h-full min-w-96 flex-grow bg-background">
{selectedViewField && ( {selectedViewField && (
<div <div
className={cn( className={cn(
@ -411,7 +411,7 @@ export default function IOModal({
)} )}
<div <div
className={cn( className={cn(
"flex h-full w-full flex-col justify-between p-6", "flex h-full w-full flex-col justify-between p-4",
selectedViewField ? "hidden" : "", selectedViewField ? "hidden" : "",
)} )}
> >