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

Merge branch 'dark_mode_and_refactoring' into dev

Browse source
This commit is contained in:
Lucas Oliveira 2023-03-02 09:22:44 -03:00
commit 3fd5673e6d
26 changed files with 161 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

2
space_flow/public/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="width: 100%; height:100%">
<body id='body' style="width: 100%; height:100%">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div style="width: 100vw; height:100vh" id='root'>
</div>

9
space_flow/src/App.tsx
View file

@ -10,7 +10,8 @@ import { alertContext } from "./contexts/alertContext";
import { locationContext } from "./contexts/locationContext";
import Sidebar from "./components/SidebarComponent";
import Header from "./components/HeaderComponent";
import { TabsManager } from "./pages/FlowPage/flowManager";
import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent";
import { darkContext } from "./contexts/darkContext";
export default function App() {
var _ = require("lodash");
@ -24,6 +25,8 @@ export default function App() {
setIsStackedOpen(true);
}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
const {dark} = useContext(darkContext);
const {
errorData,
errorOpen,
@ -102,10 +105,10 @@ export default function App() {
<ExtraSidebar />
{/* Main area */}
<main className="min-w-0 flex-1 border-t border-gray-200 flex">
<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
{/* Primary column */}
<div className="w-full h-full">
<TabsManager></TabsManager>
<TabsManagerComponent></TabsManagerComponent>
</div>
</main>
</div>

10
space_flow/src/CustomNodes/BooleanNode/index.tsx
View file

@ -10,8 +10,8 @@ export default function BooleanNode({ data }) {
const [enabled, setEnabled] = useState(false);
const {types, deleteNode} = useContext(typesContext);
return (
<div className="prompt-node relative bg-white rounded-lg solid border flex flex-col justify-center">
<div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 border-b ">
<div className="prompt-node relative bg-white dark:bg-gray-900 rounded-lg solid border dark:border-gray-700 flex flex-col justify-center">
<div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 dark:bg-gray-800 dark:text-white dark:border-b-gray-700 border-b ">
<div className="flex items-center gap-4 text-lg">
<CheckCircleIcon
className="w-10 h-10 p-1 rounded"
@ -35,8 +35,10 @@ export default function BooleanNode({ data }) {
position={Position.Right}
id={data.type}
isValidConnection={(connection) => isValidConnection(data,connection)}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[types[data.type]] }}
className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
style={{
borderColor: nodeColors[types[data.type]],
}}
></Handle>
</div>
);

6
space_flow/src/CustomNodes/ChatInputNode/index.tsx
View file

@ -13,7 +13,7 @@ export default function ChatInputNode({ data }) {
const { types } = useContext(typesContext);
return (
<div
className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50"
className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
style={{ color: nodeColors[types[data.type]] }}
>
<Tooltip title="Prefix: str">
@ -24,7 +24,7 @@ export default function ChatInputNode({ data }) {
}
position={Position.Left}
id={"str|Prefix|" + data.id}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
style={{
borderColor: nodeColors[types[data.type]],
}}
@ -38,7 +38,7 @@ export default function ChatInputNode({ data }) {
}
position={Position.Right}
id={"str|str|" + data.id}
className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white"}
className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
style={{
borderColor: nodeColors[types[data.type]],
}}

4
space_flow/src/CustomNodes/ChatOutputNode/index.tsx
View file

@ -9,14 +9,14 @@ import { typesContext } from "../../contexts/typesContext";
export default function ChatOutputNode({ data }) {
const {types} = useContext(typesContext);
return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-gray-800 dark:border-gray-700" style={{color: nodeColors[types[data.type]]}}>
<Tooltip title="Message: str">
<Handle
type="target"
isValidConnection={(connection) => isValidConnection(data,connection)}
position={Position.Left}
id={"str|output|"+data.id}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
}
style={{
borderColor: nodeColors[types[data.type]],

4
space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -43,7 +43,7 @@ export default function ParameterComponent({
let disabled = reactFlowInstance?.getEdges().some((e) => (e.targetHandle === id)) ?? false;
return (
<div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 mt-1 px-5 py-2">
<div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2">
<>
<div className="text-sm truncate">{title}<span className="text-red-600">{required ? " *" : ""}</span></div>
<Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
@ -56,7 +56,7 @@ export default function ParameterComponent({
}
className={
(left ? "-ml-0.5 " : "-mr-0.5 ") +
"w-3 h-3 rounded-full border-2 bg-white"
"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
}
style={{
borderColor: color,

10
space_flow/src/CustomNodes/GenericNode/index.tsx
View file

@ -16,8 +16,8 @@ export default function GenericNode({ data }) {
return (
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
<div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
<div className="prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg solid border dark:border-gray-700 flex flex-col justify-center">
<div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
<div className="w-full flex items-center truncate gap-4 text-lg">
<Icon
className="w-10 h-10 p-1 rounded"
@ -26,7 +26,7 @@ export default function GenericNode({ data }) {
<div className="truncate">{data.type}</div>
</div>
<button onClick={() => {deleteNode(data.id)}}>
<TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
</button>
</div>
@ -41,7 +41,7 @@ export default function GenericNode({ data }) {
.map((t, idx) => (
<div key={idx}>
{idx === 0 ? (
<div className="px-5 py-2 mt-2 text-center">Inputs:</div>
<div className="px-5 py-2 mt-2 dark:text-white text-center">Inputs:</div>
) : (
<></>
)}
@ -73,7 +73,7 @@ export default function GenericNode({ data }) {
)}
</div>
))}
<div className="px-5 py-2 mt-2 text-center">Output:</div>
<div className="px-5 py-2 mt-2 dark:text-white text-center">Output:</div>
<ParameterComponent
data={data}
color={nodeColors[types[data.type]]}

16
space_flow/src/CustomNodes/InputNode/index.tsx
View file

@ -15,7 +15,7 @@ import TextAreaComponent from "../../components/textAreaComponent";
export default function InputNode({ data }) {
const {types, deleteNode} = useContext(typesContext);
return (
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
<div className="prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg solid border dark:border-gray-700 flex flex-col justify-center">
<Tooltip title="Prefix: str">
<Handle
type="target"
@ -24,12 +24,14 @@ export default function InputNode({ data }) {
isValidConnection={(connection) =>
isValidConnection(data, connection)
}
className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[types[data.type]] }}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
style={{
borderColor: nodeColors[types[data.type]],
}}
></Handle>
</Tooltip>
<div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
<div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 dark:bg-gray-800 dark:text-white border-b dark:border-b-gray-700 ">
<div className="flex items-center gap-4 text-lg">
<Bars3CenterLeftIcon
className="w-10 h-10 p-1 rounded"
@ -60,8 +62,10 @@ export default function InputNode({ data }) {
position={Position.Right}
id={data.type}
isValidConnection={(connection) => isValidConnection(data, connection)}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[types[data.type]] }}
className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
style={{
borderColor: nodeColors[types[data.type]],
}}
></Handle>
</div>
);

2
space_flow/src/alerts/alertDropDown/index.tsx
View file

@ -67,7 +67,7 @@ export default function AlertDropdown({closeFunction, open}: AlertDropdownProps)
<SingleAlert key={index} dropItem={alertItem} removeAlert={removeFromNotificationList} />
))
:
<div className="h-full w-full pb-16 text-slate-500 flex justify-center items-center">
<div className="h-full w-full pb-16 text-gray-500 flex justify-center items-center">
No new notifications
</div>
}

6
space_flow/src/components/ExtraSidebarComponent/index.tsx
View file

@ -20,11 +20,11 @@ export default function ExtraSidebar() {
<aside
className={` ${
isStackedOpen ? "w-60" : "w-0 "
} flex-shrink-0 flex overflow-hidden flex-col border-r transition-all duration-500`}
} flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
>
<div className="w-60 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
<div className="w-60 dark:bg-gray-800 border dark:border-gray-700 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
<div className="flex pt-4 px-4 justify-between align-middle w-full">
<span className="text-gray-900 text-lg ml-2 font-semibold">
<span className="text-gray-900 dark:text-white text-lg ml-2 font-semibold">
{extraNavigation.title}
</span>
<button

16
space_flow/src/components/HeaderComponent/index.tsx
View file

@ -4,6 +4,7 @@ import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
import {
BellIcon,
MoonIcon,
SunIcon,
} from '@heroicons/react/24/outline'
import { classNames } from '../../utils'
import { Link } from 'react-router-dom'
@ -11,6 +12,7 @@ import Breadcrumb from '../breadcrumbComponent'
import { alertContext } from '../../contexts/alertContext'
import { useLayer,Arrow } from 'react-laag'
import AlertDropdown from '../../alerts/alertDropDown'
import { darkContext } from '../../contexts/darkContext'
export default function Header({user, userNavigation}){
const {notificationCenter, setNotificationCenter} = useContext(alertContext)
@ -24,8 +26,9 @@ export default function Header({user, userNavigation}){
containerOffset: 12,
arrowOffset: 4,
})
const {dark, setDark} = useContext(darkContext);
return (
<header className="relative flex h-16 w-full shrink-0 items-center bg-white">
<header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-gray-800">
{/* Logo area */}
<div className="static shrink-0">
<a
@ -47,8 +50,15 @@ export default function Header({user, userNavigation}){
</div>
<div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
<div className="flex items-center space-x-8">
<span className="inline-flex">
<button type="button" {...triggerProps} className="-mx-1 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
<span className="inline-flex gap-6">
<button className="text-gray-400 hover:text-gray-500 " onClick={()=>{setDark(!dark)}}>
{dark ?
<SunIcon className="h-6 w-6" />
:
<MoonIcon className="h-6 w-6" />
}
</button>
<button type="button" {...triggerProps} className="-mx-1 rounded-full p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
<span className="sr-only">View notifications</span>
{notificationCenter&&<div className='absolute top-[2px] w-2 h-2 rounded-full bg-red-600 right-[7px]'></div>}

2
space_flow/src/components/SidebarComponent/index.tsx
View file

@ -21,7 +21,7 @@ export default function Sidebar() {
<div className="w-20 h-full">
<nav
aria-label="Sidebar"
className="h-full overflow-y-auto bg-gray-800"
className="h-full overflow-y-auto bg-gray-800 dark:bg-gray-900"
>
<div className="flex flex-col h-full justify-between">
<div className="relative flex w-20 flex-col space-y-3 p-3">

24
space_flow/src/components/chatComponent/index.tsx
View file

@ -88,9 +88,9 @@ export default function Chat({flow, reactFlowInstance }) {
leaveTo="translate-y-96"
>
<div className="w-[400px] absolute bottom-0 right-6">
<div className="border h-full rounded-xl rounded-b-none bg-white shadow">
<div className="flex justify-between items-center px-5 py-3 border-b">
<div className="flex gap-3 text-xl font-medium items-center">
<div className="border dark:border-gray-700 h-full rounded-xl rounded-b-none bg-white dark:bg-gray-800 shadow">
<div className="flex justify-between items-center px-5 py-3 border-b dark:border-b-gray-700">
<div className="flex gap-3 text-xl dark:text-white font-medium items-center">
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" style={{color: nodeColors['chat']}} />
Chat
</div>
@ -99,21 +99,21 @@ export default function Chat({flow, reactFlowInstance }) {
setOpen(false);
}}
>
<XMarkIcon className="h-6 w-6 text-gray-600" />
<XMarkIcon className="h-6 w-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
</button>
</div>
<div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 p-3 py-5">
<div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-gray-900 p-3 py-5">
{chatHistory.map((c, i) => (
<div key={i}>
{c.isSend ? (
{!c.isSend ? (
<div className="w-full text-end">
<div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
<div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block text-white rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
{c.message}
</div>
</div>
) : (
<div className="w-full text-start">
<div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tl-none">
<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tl-none">
{c.message}
</div>
</div>
@ -122,7 +122,7 @@ export default function Chat({flow, reactFlowInstance }) {
))}
<div ref={ref}></div>
</div>
<div className="w-full bg-white border-t flex items-center justify-between p-3">
<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex items-center justify-between p-3">
<div className="relative w-full mt-1 rounded-md shadow-sm">
<input
onKeyDown={(event)=>{
@ -135,7 +135,7 @@ export default function Chat({flow, reactFlowInstance }) {
onChange={(e) => {
setChatValue(e.target.value);
}}
className="form-input block w-full rounded-md border-gray-300 pr-10 sm:text-sm"
className="form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white pr-10 sm:text-sm"
placeholder="Send a message..."
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
@ -143,7 +143,7 @@ export default function Chat({flow, reactFlowInstance }) {
onClick={() => sendMessage()}
>
<PaperAirplaneIcon
className="h-5 w-5 text-gray-400 hover:text-gray-600"
className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
aria-hidden="true"
/>
</button>
@ -164,7 +164,7 @@ export default function Chat({flow, reactFlowInstance }) {
leaveTo="translate-y-96"
>
<div className="absolute bottom-0 right-6">
<div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white shadow">
<div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white shadow">
<button
onClick={() => {
setOpen(true);

2
space_flow/src/components/inputComponent/index.tsx
View file

@ -13,7 +13,7 @@ export default function InputComponent({value, onChange, disabled}){
<input
type="text"
value={myValue}
className={"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200" : "")}
className={"block w-full form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200 dark:bg-gray-700" : "")}
placeholder="Type a text"
onChange={(e) => {
setMyValue(e.target.value);

2
space_flow/src/components/textAreaComponent/index.tsx
View file

@ -17,7 +17,7 @@ export default function TextAreaComponent({ value, onChange, disabled }) {
<div className="w-full flex items-center gap-3">
<span
className={
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
}
>

6
space_flow/src/components/toggleComponent/index.tsx
View file

@ -16,15 +16,15 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
setEnabled(x);
}}
className={classNames(
enabled ? "bg-indigo-600" : "bg-gray-200",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-600",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
)}
>
<span className="sr-only">Use setting</span>
<span
className={classNames(
enabled ? "translate-x-5" : "translate-x-0",
"pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200" : "bg-white"
"pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200 dark:bg-gray-600" : "bg-white dark:bg-gray-800"
)}
>
<span

34
space_flow/src/contexts/darkContext.tsx Normal file
View file

@ -0,0 +1,34 @@
import { createContext, useEffect, useState } from "react";
type darkContextType = {
dark: {};
setDark: (newState: {}) => void;
};
const initialValue = {
dark: {},
setDark: () => {},
};
export const darkContext = createContext<darkContextType>(initialValue);
export function DarkProvider({ children }) {
const [dark, setDark] = useState(false);
useEffect(()=>{
if(dark){
document.getElementById("body").classList.add("dark");
} else {
document.getElementById("body").classList.remove("dark");
}
}, [dark])
return (
<darkContext.Provider
value={{
dark,
setDark,
}}
>
{children}
</darkContext.Provider>
);
}

21
space_flow/src/contexts/index.tsx
View file

@ -1,4 +1,5 @@
import { AlertProvider } from "./alertContext";
import { DarkProvider } from "./darkContext";
import { LocationProvider } from "./locationContext";
import PopUpProvider from "./popUpContext";
import { TabsProvider } from "./tabsContext";
@ -8,15 +9,17 @@ export default function ContextWrapper({ children }) {
//element to wrap all context
return (
<>
<LocationProvider>
<PopUpProvider>
<TypesProvider>
<TabsProvider>
<AlertProvider>{children}</AlertProvider>
</TabsProvider>
</TypesProvider>
</PopUpProvider>
</LocationProvider>
<DarkProvider>
<LocationProvider>
<PopUpProvider>
<TypesProvider>
<TabsProvider>
<AlertProvider>{children}</AlertProvider>
</TabsProvider>
</TypesProvider>
</PopUpProvider>
</LocationProvider>
</DarkProvider>
</>
);
}

18
space_flow/src/modals/textAreaModal/index.tsx
View file

@ -32,7 +32,7 @@ export default function TextAreaModal({value, setValue}){
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
@ -46,11 +46,11 @@ export default function TextAreaModal({value, setValue}){
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-[700px]">
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button
type="button"
className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
onClick={() => {
setModalOpen(false);
}}
@ -61,7 +61,7 @@ export default function TextAreaModal({value, setValue}){
</div>
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-6 z-10 justify-center shadow-sm">
<div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
<div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
<ClipboardDocumentListIcon
className="h-6 w-6 text-blue-600"
aria-hidden="true"
@ -70,20 +70,20 @@ export default function TextAreaModal({value, setValue}){
<div className="mt-10 text-center sm:ml-4 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
className="text-lg font-medium dark:text-white leading-6 text-gray-900"
>
Edit text
</Dialog.Title>
</div>
</div>
<div className="h-full w-full bg-gray-200 p-4 gap-4 flex flex-row justify-center items-center">
<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex h-full w-full">
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white shadow">
<textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
<textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
</div>
</div>
</div>
<div className="bg-gray-200 w-full pb-3 flex flex-row-reverse px-4">
<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
<button
type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"

0
space_flow/src/pages/FlowPage/components/connection/index.tsx → space_flow/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
View file

8
space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

@ -19,10 +19,10 @@ export default function DisclosureComponent({
{({ open }) => (
<>
<div>
<div className="select-none bg-gray-50 w-full flex justify-between items-center -mt-px px-3 py-2 border border-gray-200">
<div className="select-none bg-gray-50 dark:bg-gray-700 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
<div className="flex gap-4">
<Icon className="w-6 text-gray-800" />
<span className="flex items-center text-sm text-gray-800 font-medium">
<Icon className="w-6 text-gray-800 dark:text-white" />
<span className="flex items-center text-sm text-gray-800 dark:text-white font-medium">
{title}
</span>
</div>
@ -36,7 +36,7 @@ export default function DisclosureComponent({
<ChevronRightIcon
className={`${
open ? "rotate-90 transform" : ""
} h-5 w-5 text-gray-800`}
} h-5 w-5 text-gray-800 dark:text-white`}
/>
</Disclosure.Button>
</div>

30
space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -69,9 +69,9 @@ export default function ExtraSidebar() {
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black w-36 truncate">{t}</span>
<Bars2Icon className="w-6 h-6 text-gray-400" />
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black dark:text-white w-36 truncate">{t}</span>
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>
@ -94,9 +94,9 @@ export default function ExtraSidebar() {
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black w-36 truncate">Chat Input</span>
<Bars2Icon className="w-6 h-6 text-gray-400" />
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black dark:text-white w-36 truncate">Chat Input</span>
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>
@ -111,9 +111,9 @@ export default function ExtraSidebar() {
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black w-36 truncate">Chat Output</span>
<Bars2Icon className="w-6 h-6 text-gray-400" />
<div className="flex w-full justify-between text-sm px-4 py-3 items-center dark:border-gray-600 border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black dark:text-white w-36 truncate">Chat Output</span>
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>
@ -134,9 +134,9 @@ export default function ExtraSidebar() {
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black w-36 truncate">String</span>
<Bars2Icon className="w-6 h-6 text-gray-400" />
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-gray-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black dark:text-white w-36 truncate">String</span>
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>
@ -151,9 +151,9 @@ export default function ExtraSidebar() {
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black w-36 truncate">Boolean</span>
<Bars2Icon className="w-6 h-6 text-gray-400" />
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-gray-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black dark:text-white w-36 truncate">Boolean</span>
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>

14
space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx → space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
View file

@ -6,7 +6,7 @@ import { TabsContext } from "../../../../contexts/tabsContext";
var _ = require("lodash");
export default function TabComponent({ selected, flow, onClick }) {
const { removeFlow, updateFlow, flows, downloadFlow } =
const { removeFlow, updateFlow, flows } =
useContext(TabsContext);
const [isRename, setIsRename] = useState(false);
const [value, setValue] = useState("");
@ -15,7 +15,7 @@ export default function TabComponent({ selected, flow, onClick }) {
{flow ? (
!selected ? (
<div
className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-gray-600 -ml-px"
onClick={onClick}
>
{flow.name}
@ -25,11 +25,11 @@ export default function TabComponent({ selected, flow, onClick }) {
removeFlow(flow.id);
}}
>
<XMarkIcon className="h-4 hover:bg-white rounded-full" />
<XMarkIcon className="h-4 hover:bg-white dark:hover:bg-gray-600 rounded-full" />
</button>
</div>
) : (
<div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
<div className="bg-white dark:text-white dark:bg-gray-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1.5 rounded-t-xl -ml-px">
{isRename ? (
<input
autoFocus
@ -70,7 +70,7 @@ export default function TabComponent({ selected, flow, onClick }) {
}}
>
{flows.length > 1 && (
<XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
<XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full" />
)}
</button>
</div>
@ -78,10 +78,10 @@ export default function TabComponent({ selected, flow, onClick }) {
) : (
<div className="h-full py-1.5 flex justify-center items-center">
<button
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-gray-600 dark:text-white -ml-px"
onClick={onClick}
>
<PlusIcon className="h-5 rounded-full hover:bg-white" />
<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-gray-600" />
</button>
</div>
)}

12
space_flow/src/pages/FlowPage/flowManager/index.tsx → space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
View file

@ -1,12 +1,10 @@
import { useContext, useEffect } from "react";
import { ReactFlowProvider } from "reactflow";
import FlowPage from "..";
import { TabsContext } from "../../../contexts/tabsContext";
import TabComponent from "./tabComponent";
import { example } from "../../../data_assets/example";
var _ = require("lodash");
import TabComponent from "../tabComponent";
import { TabsContext } from "../../../../contexts/tabsContext";
import FlowPage from "../..";
export function TabsManager() {
export default function TabsManagerComponent() {
const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
useEffect(() => {
if (flows.length === 0) {
@ -16,7 +14,7 @@ export function TabsManager() {
return (
<div className="h-full w-full flex flex-col">
<div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 px-2">
<div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
{flows.map((flow, index) => {
return (
<TabComponent

10
space_flow/src/pages/FlowPage/index.tsx
View file

@ -13,7 +13,6 @@ import { locationContext } from "../../contexts/locationContext";
import ExtraSidebar from "./components/extraSidebarComponent";
import Chat from "../../components/chatComponent";
import GenericNode from "../../CustomNodes/GenericNode";
import connection from "./components/connection";
import ChatInputNode from "../../CustomNodes/ChatInputNode";
import ChatOutputNode from "../../CustomNodes/ChatOutputNode";
import InputNode from "../../CustomNodes/InputNode";
@ -25,6 +24,7 @@ import {
ArrowDownTrayIcon,
ArrowUpTrayIcon,
} from "@heroicons/react/24/outline";
import ConnectionLineComponent from "./components/ConnectionLineComponent";
const nodeTypes = {
genericNode: GenericNode,
@ -170,21 +170,19 @@ export default function FlowPage({ flow }) {
onLoad={setReactFlowInstance}
onInit={setReactFlowInstance}
nodeTypes={nodeTypes}
connectionLineComponent={connection}
connectionLineComponent={ConnectionLineComponent}
onDragOver={onDragOver}
onDrop={onDrop}
>
<Background />
<Controls>
<Background className="dark:bg-gray-900"/>
<Controls className="[&>button]:text-black [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">
<ControlButton
className="text-black hover:text-blue-500"
onClick={() => uploadFlow()}
>
<ArrowUpTrayIcon />
</ControlButton>
<ControlButton
className="text-black hover:text-blue-500"
onClick={() => downloadFlow()}
>
<ArrowDownTrayIcon />

1
space_flow/tailwind.config.js
View file

@ -2,6 +2,7 @@
const plugin = require('tailwindcss/plugin')
module.exports = {
content: ["./src/**/*.{js,ts,tsx,jsx}"],
darkMode: 'class',
important:true,
theme: {
extend: {},