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

feat: add notion integration components (#3579)

Browse source
This commit is contained in:
anovazzi1 2024-08-27 22:01:43 -03:00 • committed by GitHub
commit 03e95d4522
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 1098 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/frontend/feature-config.json
View file

@ -4,5 +4,6 @@
"ENABLE_LANGFLOW_STORE": true,
"ENABLE_PROFILE_ICONS": true,
"ENABLE_SOCIAL_LINKS": true,
"ENABLE_BRANDING": true
"ENABLE_BRANDING": true,
"ENABLE_MVPS": false
}

2
src/frontend/src/constants/constants.ts
View file

@ -729,6 +729,8 @@ export const PRIORITY_SIDEBAR_ORDER = [
"embeddings",
];
export const BUNDLES_SIDEBAR_FOLDER_NAMES = ["notion"];
export const AUTHORIZED_DUPLICATE_REQUESTS = [
"/health",
"/flows",

132
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -1,3 +1,4 @@
import FeatureFlags from "@/../feature-config.json";
import { cloneDeep } from "lodash";
import { LinkIcon, SparklesIcon } from "lucide-react";
import { Fragment, useEffect, useState } from "react";
@ -5,7 +6,10 @@ import IconComponent from "../../../../components/genericIconComponent";
import ShadTooltip from "../../../../components/shadTooltipComponent";
import { Input } from "../../../../components/ui/input";
import { Separator } from "../../../../components/ui/separator";
import { PRIORITY_SIDEBAR_ORDER } from "../../../../constants/constants";
import {
BUNDLES_SIDEBAR_FOLDER_NAMES,
PRIORITY_SIDEBAR_ORDER,
} from "../../../../constants/constants";
import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore";
import { useTypesStore } from "../../../../stores/typesStore";
@ -408,6 +412,132 @@ export default function ExtraSidebar(): JSX.Element {
),
)}
</ParentDisclosureComponent>
{FeatureFlags.ENABLE_MVPS && (
<>
<Separator />
<ParentDisclosureComponent
defaultOpen={search.length !== 0 || getFilterEdge.length !== 0}
key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Bundle`}
button={{
title: "Bundles",
Icon: nodeIconsLucide.unknown,
}}
testId="extended-disclosure"
>
{Object.keys(dataFilter)
.sort(sortKeys)
.filter((x) => BUNDLES_SIDEBAR_FOLDER_NAMES.includes(x))
.map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<Fragment
key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
>
<DisclosureComponent
isChild={false}
defaultOpen={
getFilterEdge.length !== 0 || search.length !== 0
? true
: false
}
button={{
title: nodeNames[SBSectionName] ?? nodeNames.unknown,
Icon:
nodeIconsLucide[SBSectionName] ??
nodeIconsLucide.unknown,
}}
>
<div className="side-bar-components-gap">
{Object.keys(dataFilter[SBSectionName])
.sort((a, b) =>
sensitiveSort(
dataFilter[SBSectionName][a].display_name,
dataFilter[SBSectionName][b].display_name,
),
)
.map((SBItemName: string, index) => (
<ShadTooltip
content={
dataFilter[SBSectionName][SBItemName]
.display_name
}
side="right"
key={index}
>
<SidebarDraggableComponent
sectionName={SBSectionName as string}
apiClass={
dataFilter[SBSectionName][SBItemName]
}
key={index}
onDragStart={(event) =>
onDragStart(event, {
//split type to remove type in nodes saved with same name removing it's
type: removeCountFromString(SBItemName),
node: dataFilter[SBSectionName][
SBItemName
],
})
}
color={nodeColors[SBSectionName]}
itemName={SBItemName}
//convert error to boolean
error={
!!dataFilter[SBSectionName][SBItemName]
.error
}
display_name={
dataFilter[SBSectionName][SBItemName]
.display_name
}
official={
dataFilter[SBSectionName][SBItemName]
.official === false
? false
: true
}
/>
</ShadTooltip>
))}
</div>
</DisclosureComponent>
{index ===
Object.keys(dataFilter).length -
PRIORITY_SIDEBAR_ORDER.length +
1 && (
<>
<a
target={"_blank"}
href="https://langflow.store"
className="components-disclosure-arrangement"
>
<div className="flex gap-4">
{/* BUG ON THIS ICON */}
<SparklesIcon
strokeWidth={1.5}
className="w-[22px] text-primary"
/>
<span className="components-disclosure-title">
Discover More
</span>
</div>
<div className="components-disclosure-div">
<div>
<LinkIcon className="h-4 w-4 text-foreground" />
</div>
</div>
</a>
</>
)}
</Fragment>
) : (
<div key={index}></div>
),
)}
</ParentDisclosureComponent>
</>
)}
</div>
</div>
);

3
src/frontend/src/utils/styleUtils.ts
View file

@ -283,6 +283,7 @@ export const nodeColors: { [char: string]: string } = {
textsplitters: "#B47CB5",
toolkits: "#DB2C2C",
wrappers: "#E6277A",
notion: "#000000",
helpers: "#31A3CC",
prototypes: "#E6277A",
astra_assistants: "#272541",
@ -309,6 +310,7 @@ export const nodeNames: { [char: string]: string } = {
data: "Data",
prompts: "Prompts",
models: "Models",
notion: "Notion",
model_specs: "Model Specs",
chains: "Chains",
agents: "Agents",
@ -403,6 +405,7 @@ export const nodeIconsLucide: iconsType = {
MongoDBAtlasVectorSearch: MongoDBIcon,
MongoDB: MongoDBIcon,
MongoDBChatMessageHistory: MongoDBIcon,
notion: NotionIcon,
NotionDirectoryLoader: NotionIcon,
NVIDIA: NvidiaIcon,
ChatOpenAI: OpenAiIcon,