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

sidebar dark mode implemented

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-28 22:41:40 -03:00
commit 7742859c12
5 changed files with 25 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,11 +20,11 @@ export default function ExtraSidebar() {
<aside <aside
className={` ${ className={` ${
isStackedOpen ? "w-60" : "w-0 " 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-slate-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-slate-800 border dark:border-slate-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"> <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} {extraNavigation.title}
</span> </span>
<button <button

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

@ -21,7 +21,7 @@ export default function Sidebar() {
<div className="w-20 h-full"> <div className="w-20 h-full">
<nav <nav
aria-label="Sidebar" aria-label="Sidebar"
className="h-full overflow-y-auto bg-gray-800" className="h-full overflow-y-auto bg-slate-800 dark:bg-slate-900"
> >
<div className="flex flex-col h-full justify-between"> <div className="flex flex-col h-full justify-between">
<div className="relative flex w-20 flex-col space-y-3 p-3"> <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" leaveTo="translate-y-96"
> >
<div className="w-[400px] absolute bottom-0 right-6"> <div className="w-[400px] absolute bottom-0 right-6">
<div className="border h-full rounded-xl rounded-b-none bg-white shadow"> <div className="border dark:border-slate-700 h-full rounded-xl rounded-b-none bg-white dark:bg-slate-800 shadow">
<div className="flex justify-between items-center px-5 py-3 border-b"> <div className="flex justify-between items-center px-5 py-3 border-b dark:border-b-slate-700">
<div className="flex gap-3 text-xl font-medium items-center"> <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']}} /> <Bars3CenterLeftIcon className="h-8 w-8 mt-1" style={{color: nodeColors['chat']}} />
Chat Chat
</div> </div>
@ -99,21 +99,21 @@ export default function Chat({flow, reactFlowInstance }) {
setOpen(false); 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> </button>
</div> </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-slate-900 p-3 py-5">
{chatHistory.map((c, i) => ( {chatHistory.map((c, i) => (
<div key={i}> <div key={i}>
{c.isSend ? ( {!c.isSend ? (
<div className="w-full text-end"> <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} {c.message}
</div> </div>
</div> </div>
) : ( ) : (
<div className="w-full text-start"> <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-slate-700 bg-gray-200 font-normal rounded-tl-none">
{c.message} {c.message}
</div> </div>
</div> </div>
@ -122,7 +122,7 @@ export default function Chat({flow, reactFlowInstance }) {
))} ))}
<div ref={ref}></div> <div ref={ref}></div>
</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-slate-800 border-t dark:border-t-slate-600 flex items-center justify-between p-3">
<div className="relative w-full mt-1 rounded-md shadow-sm"> <div className="relative w-full mt-1 rounded-md shadow-sm">
<input <input
onKeyDown={(event)=>{ onKeyDown={(event)=>{
@ -135,7 +135,7 @@ export default function Chat({flow, reactFlowInstance }) {
onChange={(e) => { onChange={(e) => {
setChatValue(e.target.value); 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-slate-600 dark:bg-slate-700 dark:text-white pr-10 sm:text-sm"
placeholder="Send a message..." placeholder="Send a message..."
/> />
<div className="absolute inset-y-0 right-0 flex items-center pr-3"> <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()} onClick={() => sendMessage()}
> >
<PaperAirplaneIcon <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" aria-hidden="true"
/> />
</button> </button>
@ -164,7 +164,7 @@ export default function Chat({flow, reactFlowInstance }) {
leaveTo="translate-y-96" leaveTo="translate-y-96"
> >
<div className="absolute bottom-0 right-6"> <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-slate-800 dark:border-slate-600 dark:text-white shadow">
<button <button
onClick={() => { onClick={() => {
setOpen(true); setOpen(true);

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

@ -19,10 +19,10 @@ export default function DisclosureComponent({
{({ open }) => ( {({ open }) => (
<> <>
<div> <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-slate-700 dark:border-y-slate-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"> <div className="flex gap-4">
<Icon className="w-6 text-gray-800" /> <Icon className="w-6 text-gray-800 dark:text-white" />
<span className="flex items-center text-sm text-gray-800 font-medium"> <span className="flex items-center text-sm text-gray-800 dark:text-white font-medium">
{title} {title}
</span> </span>
</div> </div>
@ -36,7 +36,7 @@ export default function DisclosureComponent({
<ChevronRightIcon <ChevronRightIcon
className={`${ className={`${
open ? "rotate-90 transform" : "" open ? "rotate-90 transform" : ""
} h-5 w-5 text-gray-800`} } h-5 w-5 text-gray-800 dark:text-white`}
/> />
</Disclosure.Button> </Disclosure.Button>
</div> </div>

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

@ -70,7 +70,7 @@ 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"> <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> <span className="text-black dark:text-white w-36 truncate">{t}</span>
<Bars2Icon className="w-6 h-6 text-gray-400" /> <Bars2Icon className="w-6 h-6 text-gray-400" />
</div> </div>
</div> </div>
@ -95,7 +95,7 @@ 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"> <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> <span className="text-black dark:text-white w-36 truncate">Chat Input</span>
<Bars2Icon className="w-6 h-6 text-gray-400" /> <Bars2Icon className="w-6 h-6 text-gray-400" />
</div> </div>
</div> </div>
@ -112,7 +112,7 @@ 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"> <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> <span className="text-black dark:text-white w-36 truncate">Chat Output</span>
<Bars2Icon className="w-6 h-6 text-gray-400" /> <Bars2Icon className="w-6 h-6 text-gray-400" />
</div> </div>
</div> </div>
@ -135,7 +135,7 @@ 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"> <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> <span className="text-black dark:text-white w-36 truncate">String</span>
<Bars2Icon className="w-6 h-6 text-gray-400" /> <Bars2Icon className="w-6 h-6 text-gray-400" />
</div> </div>
</div> </div>
@ -152,7 +152,7 @@ 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"> <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> <span className="text-black dark:text-white w-36 truncate">Boolean</span>
<Bars2Icon className="w-6 h-6 text-gray-400" /> <Bars2Icon className="w-6 h-6 text-gray-400" />
</div> </div>
</div> </div>