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

Styling fixes on both applications of codeTabsComponent

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-17 17:06:59 -03:00
commit 8c49bcfaa5
6 changed files with 62 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -1,5 +1,5 @@
import { Check, Clipboard, Download } from "lucide-react"; import { Check, Clipboard, Download } from "lucide-react";
import { useState } from "react"; import { useContext, useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import AccordionComponent from "../../components/AccordionComponent"; import AccordionComponent from "../../components/AccordionComponent";
@ -28,6 +28,7 @@ import {
TabsList, TabsList,
TabsTrigger, TabsTrigger,
} from "../../components/ui/tabs"; } from "../../components/ui/tabs";
import { darkContext } from "../../contexts/darkContext";
import { FlowType } from "../../types/flow/index"; import { FlowType } from "../../types/flow/index";
import { classNames } from "../../utils"; import { classNames } from "../../utils";
@ -36,16 +37,25 @@ export default function CodeTabsComponent({
tabs, tabs,
activeTab, activeTab,
setActiveTab, setActiveTab,
tweaks: { tweak, tweaksList, buildContent, getValue, buildTweakObject }, isMessage,
tweaks,
}: { }: {
flow?: FlowType; flow?: FlowType;
tabs: any; tabs: any;
activeTab: string; activeTab: string;
setActiveTab: any; setActiveTab: any;
tweaks?: any; isMessage?: boolean;
tweaks?: {
tweak?: any;
tweaksList?: any;
buildContent?: any;
getValue?: any;
buildTweakObject?: any;
};
}) { }) {
const [isCopied, setIsCopied] = useState<Boolean>(false); const [isCopied, setIsCopied] = useState<Boolean>(false);
const [openAccordion, setOpenAccordion] = useState([]); const [openAccordion, setOpenAccordion] = useState([]);
const { dark } = useContext(darkContext);
const copyToClipboard = () => { const copyToClipboard = () => {
if (!navigator.clipboard || !navigator.clipboard.writeText) { if (!navigator.clipboard || !navigator.clipboard.writeText) {
@ -85,7 +95,7 @@ export default function CodeTabsComponent({
function openAccordions() { function openAccordions() {
let accordionsToOpen = []; let accordionsToOpen = [];
tweak.current.forEach((el) => { tweaks.tweak.current.forEach((el) => {
Object.keys(el).forEach((key) => { Object.keys(el).forEach((key) => {
if (Object.keys(el[key]).length > 0) { if (Object.keys(el[key]).length > 0) {
accordionsToOpen.push(key); accordionsToOpen.push(key);
@ -101,7 +111,11 @@ export default function CodeTabsComponent({
return ( return (
<Tabs <Tabs
value={activeTab} value={activeTab}
className="api-modal-tabs" className={
"api-modal-tabs " +
(isMessage ? "dark " : "") +
(dark && isMessage ? "bg-background" : "")
}
onValueChange={(value) => { onValueChange={(value) => {
setActiveTab(value); setActiveTab(value);
if (value === "3") { if (value === "3") {
@ -112,7 +126,13 @@ export default function CodeTabsComponent({
<div className="api-modal-tablist-div"> <div className="api-modal-tablist-div">
<TabsList> <TabsList>
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<TabsTrigger key={index} value={index.toString()}> <TabsTrigger
className={
isMessage ? "data-[state=active]:bg-primary-foreground" : ""
}
key={index}
value={index.toString()}
>
{tab.name} {tab.name}
</TabsTrigger> </TabsTrigger>
))} ))}
@ -163,7 +183,7 @@ export default function CodeTabsComponent({
> >
{flow["data"]["nodes"].map((t: any, index) => ( {flow["data"]["nodes"].map((t: any, index) => (
<div className="px-3" key={index}> <div className="px-3" key={index}>
{tweaksList.current.includes(t["data"]["id"]) && ( {tweaks.tweaksList.current.includes(t["data"]["id"]) && (
<AccordionComponent <AccordionComponent
trigger={t["data"]["id"]} trigger={t["data"]["id"]}
open={openAccordion} open={openAccordion}
@ -233,7 +253,7 @@ export default function CodeTabsComponent({
} }
onChange={(k) => {}} onChange={(k) => {}}
onAddInput={(k) => { onAddInput={(k) => {
buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node.template[n] t.data.node.template[n]
@ -243,7 +263,7 @@ export default function CodeTabsComponent({
) : t.data.node.template[n] ) : t.data.node.template[n]
.multiline ? ( .multiline ? (
<ShadTooltip <ShadTooltip
content={buildContent( content={tweaks.buildContent(
t.data.node.template[n] t.data.node.template[n]
.value .value
)} )}
@ -252,7 +272,7 @@ export default function CodeTabsComponent({
<TextAreaComponent <TextAreaComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={getValue( value={tweaks.getValue(
t.data.node.template[ t.data.node.template[
n n
].value, ].value,
@ -262,7 +282,7 @@ export default function CodeTabsComponent({
] ]
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node t.data.node
@ -280,14 +300,14 @@ export default function CodeTabsComponent({
t.data.node.template[n] t.data.node.template[n]
.password ?? false .password ?? false
} }
value={getValue( value={tweaks.getValue(
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
t.data.node.template[n] t.data.node.template[n]
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node.template[n] t.data.node.template[n]
@ -309,7 +329,7 @@ export default function CodeTabsComponent({
t.data.node.template[ t.data.node.template[
n n
].value = e; ].value = e;
buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
e, e,
t.data.node.template[n] t.data.node.template[n]
@ -322,8 +342,8 @@ export default function CodeTabsComponent({
) : t.data.node.template[n].type === ) : t.data.node.template[n].type ===
"file" ? ( "file" ? (
<ShadTooltip <ShadTooltip
content={buildContent( content={tweaks.buildContent(
getValue( tweaks.getValue(
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
@ -360,14 +380,14 @@ export default function CodeTabsComponent({
<FloatComponent <FloatComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={getValue( value={tweaks.getValue(
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
t.data.node.template[n] t.data.node.template[n]
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node.template[n] t.data.node.template[n]
@ -388,13 +408,13 @@ export default function CodeTabsComponent({
.options .options
} }
onSelect={(k) => { onSelect={(k) => {
buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node.template[n] t.data.node.template[n]
); );
}} }}
value={getValue( value={tweaks.getValue(
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
@ -408,14 +428,14 @@ export default function CodeTabsComponent({
<IntComponent <IntComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={getValue( value={tweaks.getValue(
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
t.data.node.template[n] t.data.node.template[n]
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node.template[n] t.data.node.template[n]
@ -426,8 +446,8 @@ export default function CodeTabsComponent({
) : t.data.node.template[n].type === ) : t.data.node.template[n].type ===
"prompt" ? ( "prompt" ? (
<ShadTooltip <ShadTooltip
content={buildContent( content={tweaks.buildContent(
getValue( tweaks.getValue(
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
@ -439,14 +459,14 @@ export default function CodeTabsComponent({
<PromptAreaComponent <PromptAreaComponent
editNode={true} editNode={true}
disabled={false} disabled={false}
value={getValue( value={tweaks.getValue(
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
t.data.node.template[n] t.data.node.template[n]
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node.template[n] t.data.node.template[n]
@ -458,8 +478,8 @@ export default function CodeTabsComponent({
) : t.data.node.template[n].type === ) : t.data.node.template[n].type ===
"code" ? ( "code" ? (
<ShadTooltip <ShadTooltip
content={buildContent( content={tweaks.buildContent(
getValue( tweaks.getValue(
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
@ -471,14 +491,14 @@ export default function CodeTabsComponent({
<CodeAreaComponent <CodeAreaComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={getValue( value={tweaks.getValue(
t.data.node.template[n] t.data.node.template[n]
.value, .value,
t.data, t.data,
t.data.node.template[n] t.data.node.template[n]
)} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( tweaks.buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node.template[n] t.data.node.template[n]
@ -504,7 +524,7 @@ export default function CodeTabsComponent({
</AccordionComponent> </AccordionComponent>
)} )}
{tweaksList.current.length === 0 && ( {tweaks.tweaksList.current.length === 0 && (
<> <>
<div className="pt-3"> <div className="pt-3">
No tweaks are available for this flow. No tweaks are available for this flow.

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

@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"fixed z-50 grid w-full gap-3 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0", "fixed z-50 flex w-full flex-col gap-3 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
className className
)} )}
{...props} {...props}

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

@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
<TabsPrimitive.List <TabsPrimitive.List
ref={ref} ref={ref}
className={cn( className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",
className className
)} )}
{...props} {...props}

3
src/frontend/src/index.css
View file

@ -145,6 +145,9 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }
pre {
font-family: inherit;
}
/* The style below sets the cursor property of the element with the class .react-flow__pane to the default cursor. /* The style below sets the cursor property of the element with the class .react-flow__pane to the default cursor.
The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */ The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */

4
src/frontend/src/modals/baseModal/index.tsx
View file

@ -104,7 +104,9 @@ function BaseModal({
</DialogTrigger> </DialogTrigger>
<DialogContent className={minWidth}> <DialogContent className={minWidth}>
{headerChild} {headerChild}
<div className={`mt-2 flex ${height} w-full `}>{ContentChild}</div> <div className={`mt-2 flex flex-col ${height} w-full `}>
{ContentChild}
</div>
<div className="flex flex-row-reverse">{ContentFooter}</div> <div className="flex flex-row-reverse">{ContentFooter}</div>
</DialogContent> </DialogContent>

5
src/frontend/src/modals/formModal/chatMessage/index.tsx
View file

@ -80,8 +80,8 @@ export default function ChatMessage({
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]} remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]} rehypePlugins={[rehypeMathjax]}
className="markdown prose inline-block break-words text-primary className="markdown inline-block break-words text-primary
dark:prose-invert sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]" sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]"
components={{ components={{
code: ({ code: ({
node, node,
@ -111,6 +111,7 @@ export default function ChatMessage({
return !inline ? ( return !inline ? (
<CodeTabsComponent <CodeTabsComponent
isMessage
tabs={[ tabs={[
{ {
name: (match && match[1]) || "", name: (match && match[1]) || "",