From 615d9e577e881cd66e528ff7fc6419547f911303 Mon Sep 17 00:00:00 2001 From: thewbuk <57405495+thewbuk@users.noreply.github.com> Date: Wed, 22 May 2024 14:34:32 +0100 Subject: [PATCH 001/218] feat: init structure --- .../src/app/[entity]/knowladge/page.tsx | 17 ++++++ .../src/app/[entity]/knowladge/render.tsx | 30 +++++++++++ .../src/new-ui/Icons/GraduationHat.tsx | 22 ++++++++ .../design-system/src/new-ui/Icons/index.ts | 2 + .../src/components/top-bar/TopbarLinks.tsx | 5 ++ packages/toolkit/src/view/index.ts | 1 + .../src/view/knowladge/KnowladgeBaseView.tsx | 52 +++++++++++++++++++ packages/toolkit/src/view/knowladge/index.ts | 1 + 8 files changed, 130 insertions(+) create mode 100644 apps/console/src/app/[entity]/knowladge/page.tsx create mode 100644 apps/console/src/app/[entity]/knowladge/render.tsx create mode 100644 packages/design-system/src/new-ui/Icons/GraduationHat.tsx create mode 100644 packages/toolkit/src/view/knowladge/KnowladgeBaseView.tsx create mode 100644 packages/toolkit/src/view/knowladge/index.ts diff --git a/apps/console/src/app/[entity]/knowladge/page.tsx b/apps/console/src/app/[entity]/knowladge/page.tsx new file mode 100644 index 0000000000..7654d140fe --- /dev/null +++ b/apps/console/src/app/[entity]/knowladge/page.tsx @@ -0,0 +1,17 @@ +import { Metadata } from "next"; +import { KnowladgeBasePageRender } from "./render"; + +export async function generateMetadata() { + const metadata: Metadata = { + title: `Instill Cloud | Knowledge Base`, + openGraph: { + images: ["/instill-open-graph.png"], + }, + }; + + return Promise.resolve(metadata); +} + +export default async function Page() { + return ; +} diff --git a/apps/console/src/app/[entity]/knowladge/render.tsx b/apps/console/src/app/[entity]/knowladge/render.tsx new file mode 100644 index 0000000000..836b7b108e --- /dev/null +++ b/apps/console/src/app/[entity]/knowladge/render.tsx @@ -0,0 +1,30 @@ +"use client"; + +import { Logo } from "@instill-ai/design-system"; +import { AppTopbar, KnowladgeBaseView, PageBase } from "@instill-ai/toolkit"; +import { useAppAccessToken } from "lib/use-app-access-token"; +import { useAppTrackToken } from "lib/useAppTrackToken"; +import { useRouter } from "next/navigation"; + +export const KnowladgeBasePageRender = () => { + const router = useRouter(); + + const accessToken = useAppAccessToken(); + useAppTrackToken({ enabled: true }); + // useInitAmplitude(); + + return ( + + } /> + + + + + + + ); +}; diff --git a/packages/design-system/src/new-ui/Icons/GraduationHat.tsx b/packages/design-system/src/new-ui/Icons/GraduationHat.tsx new file mode 100644 index 0000000000..e9568fd7e5 --- /dev/null +++ b/packages/design-system/src/new-ui/Icons/GraduationHat.tsx @@ -0,0 +1,22 @@ +"use client"; + +import * as React from "react"; +import { IconBase, IconBaseProps } from "./IconBase"; + +export const GraduationHat = React.forwardRef< + SVGSVGElement, + Omit +>((props, ref) => { + const { className, ...passThrough } = props; + return ( + + + + ); +}); +GraduationHat.displayName = "IconGraduationHat"; diff --git a/packages/design-system/src/new-ui/Icons/index.ts b/packages/design-system/src/new-ui/Icons/index.ts index 7de79aa09e..ec8c3bbae9 100644 --- a/packages/design-system/src/new-ui/Icons/index.ts +++ b/packages/design-system/src/new-ui/Icons/index.ts @@ -60,6 +60,7 @@ import { Flag04 } from "./Flag04"; import { Gear01 } from "./Gear01"; import { GitMerge } from "./GitMerge"; import { Globe01 } from "./Globe01"; +import { GraduationHat } from "./GraduationHat"; import { HelpCircle } from "./HelpCircle"; import { Image01 } from "./Image01"; import { ImagePlus } from "./ImagePlus"; @@ -191,6 +192,7 @@ export const Icons = { Gear01, GitMerge, Globe01, + GraduationHat, HelpCircle, IntersectSquare, Link01, diff --git a/packages/toolkit/src/components/top-bar/TopbarLinks.tsx b/packages/toolkit/src/components/top-bar/TopbarLinks.tsx index fcb8c8e8c6..2eb99ad920 100644 --- a/packages/toolkit/src/components/top-bar/TopbarLinks.tsx +++ b/packages/toolkit/src/components/top-bar/TopbarLinks.tsx @@ -12,6 +12,11 @@ export const topbarItems = [ icon: , name: "Pipelines", }, + { + pathName: "knowledge-base", + icon: , + name: "Knowledge base", + }, { pathName: "models", icon: , diff --git a/packages/toolkit/src/view/index.ts b/packages/toolkit/src/view/index.ts index 8972d9df3f..98bdc47c5d 100644 --- a/packages/toolkit/src/view/index.ts +++ b/packages/toolkit/src/view/index.ts @@ -6,3 +6,4 @@ export * from "./pipeline"; export * from "./pipeline-builder"; export * from "./profile/user-profile-view"; export * from "./settings"; +export * from "./knowladge"; diff --git a/packages/toolkit/src/view/knowladge/KnowladgeBaseView.tsx b/packages/toolkit/src/view/knowladge/KnowladgeBaseView.tsx new file mode 100644 index 0000000000..c1acd9f19e --- /dev/null +++ b/packages/toolkit/src/view/knowladge/KnowladgeBaseView.tsx @@ -0,0 +1,52 @@ +"use client"; + +import dynamic from "next/dynamic"; +import { Button, Icons } from "@instill-ai/design-system"; +import { GeneralAppPageProp, useModels, useWatchUserModels } from "../../lib"; +import { useParams } from "next/navigation"; + +export type KnowladgeBaseViewProps = GeneralAppPageProp; + +export const KnowladgeBaseView = ( + props: KnowladgeBaseViewProps +) => { + const { router, enableQuery, accessToken } = props; + const { entity } = useParams(); + + /* ------------------------------------------------------------------------- + * Query resource data + * -----------------------------------------------------------------------*/ + + const models = useModels({ + enabled: enableQuery, + accessToken, + }); + const modelsWatchState = useWatchUserModels({ + modelNames: models.isSuccess ? models.data.map((p) => p.name) : [], + enabled: enableQuery && models.isSuccess && models.data.length > 0, + accessToken, + }); + const isLoadingResource = + models.isLoading || (models.isSuccess && models.data.length > 0) + ? modelsWatchState.isLoading + : false; + + /* ------------------------------------------------------------------------- + * Render + * -----------------------------------------------------------------------*/ + + return ( +
+
+ +
+
+ ); +}; diff --git a/packages/toolkit/src/view/knowladge/index.ts b/packages/toolkit/src/view/knowladge/index.ts new file mode 100644 index 0000000000..50da29ffca --- /dev/null +++ b/packages/toolkit/src/view/knowladge/index.ts @@ -0,0 +1 @@ +export * from "./KnowladgeBaseView"; From 518a236c938f4e851e005ff79231209b6e3b3d24 Mon Sep 17 00:00:00 2001 From: thewbuk <57405495+thewbuk@users.noreply.github.com> Date: Wed, 22 May 2024 15:58:25 +0100 Subject: [PATCH 002/218] feat: frst card components and sidebar --- .../{knowladge => knowledge}/page.tsx | 0 .../{knowladge => knowledge}/render.tsx | 4 +- .../src/components/top-bar/TopbarLinks.tsx | 2 +- packages/toolkit/src/view/index.ts | 2 +- .../src/view/knowladge/KnowladgeBaseView.tsx | 52 ----- .../src/view/knowledge/KnowladgeBaseView.tsx | 211 ++++++++++++++++++ .../components/CreatedKnowledgeBaseCard.tsx | 36 +++ .../components/KnowledgeBaseCard.tsx | 29 +++ .../src/view/knowledge/components/Sidebar.tsx | 58 +++++ .../view/{knowladge => knowledge}/index.ts | 0 10 files changed, 338 insertions(+), 56 deletions(-) rename apps/console/src/app/[entity]/{knowladge => knowledge}/page.tsx (100%) rename apps/console/src/app/[entity]/{knowladge => knowledge}/render.tsx (90%) delete mode 100644 packages/toolkit/src/view/knowladge/KnowladgeBaseView.tsx create mode 100644 packages/toolkit/src/view/knowledge/KnowladgeBaseView.tsx create mode 100644 packages/toolkit/src/view/knowledge/components/CreatedKnowledgeBaseCard.tsx create mode 100644 packages/toolkit/src/view/knowledge/components/KnowledgeBaseCard.tsx create mode 100644 packages/toolkit/src/view/knowledge/components/Sidebar.tsx rename packages/toolkit/src/view/{knowladge => knowledge}/index.ts (100%) diff --git a/apps/console/src/app/[entity]/knowladge/page.tsx b/apps/console/src/app/[entity]/knowledge/page.tsx similarity index 100% rename from apps/console/src/app/[entity]/knowladge/page.tsx rename to apps/console/src/app/[entity]/knowledge/page.tsx diff --git a/apps/console/src/app/[entity]/knowladge/render.tsx b/apps/console/src/app/[entity]/knowledge/render.tsx similarity index 90% rename from apps/console/src/app/[entity]/knowladge/render.tsx rename to apps/console/src/app/[entity]/knowledge/render.tsx index 836b7b108e..363e8d6074 100644 --- a/apps/console/src/app/[entity]/knowladge/render.tsx +++ b/apps/console/src/app/[entity]/knowledge/render.tsx @@ -1,7 +1,7 @@ "use client"; import { Logo } from "@instill-ai/design-system"; -import { AppTopbar, KnowladgeBaseView, PageBase } from "@instill-ai/toolkit"; +import { AppTopbar, KnowledgeBaseView, PageBase } from "@instill-ai/toolkit"; import { useAppAccessToken } from "lib/use-app-access-token"; import { useAppTrackToken } from "lib/useAppTrackToken"; import { useRouter } from "next/navigation"; @@ -18,7 +18,7 @@ export const KnowladgeBasePageRender = () => { } /> - , name: "Knowledge base", }, diff --git a/packages/toolkit/src/view/index.ts b/packages/toolkit/src/view/index.ts index 98bdc47c5d..a67cb672bf 100644 --- a/packages/toolkit/src/view/index.ts +++ b/packages/toolkit/src/view/index.ts @@ -6,4 +6,4 @@ export * from "./pipeline"; export * from "./pipeline-builder"; export * from "./profile/user-profile-view"; export * from "./settings"; -export * from "./knowladge"; +export * from "./knowledge"; diff --git a/packages/toolkit/src/view/knowladge/KnowladgeBaseView.tsx b/packages/toolkit/src/view/knowladge/KnowladgeBaseView.tsx deleted file mode 100644 index c1acd9f19e..0000000000 --- a/packages/toolkit/src/view/knowladge/KnowladgeBaseView.tsx +++ /dev/null @@ -1,52 +0,0 @@ -"use client"; - -import dynamic from "next/dynamic"; -import { Button, Icons } from "@instill-ai/design-system"; -import { GeneralAppPageProp, useModels, useWatchUserModels } from "../../lib"; -import { useParams } from "next/navigation"; - -export type KnowladgeBaseViewProps = GeneralAppPageProp; - -export const KnowladgeBaseView = ( - props: KnowladgeBaseViewProps -) => { - const { router, enableQuery, accessToken } = props; - const { entity } = useParams(); - - /* ------------------------------------------------------------------------- - * Query resource data - * -----------------------------------------------------------------------*/ - - const models = useModels({ - enabled: enableQuery, - accessToken, - }); - const modelsWatchState = useWatchUserModels({ - modelNames: models.isSuccess ? models.data.map((p) => p.name) : [], - enabled: enableQuery && models.isSuccess && models.data.length > 0, - accessToken, - }); - const isLoadingResource = - models.isLoading || (models.isSuccess && models.data.length > 0) - ? modelsWatchState.isLoading - : false; - - /* ------------------------------------------------------------------------- - * Render - * -----------------------------------------------------------------------*/ - - return ( -
-
- -
-
- ); -}; diff --git a/packages/toolkit/src/view/knowledge/KnowladgeBaseView.tsx b/packages/toolkit/src/view/knowledge/KnowladgeBaseView.tsx new file mode 100644 index 0000000000..19168cfbe4 --- /dev/null +++ b/packages/toolkit/src/view/knowledge/KnowladgeBaseView.tsx @@ -0,0 +1,211 @@ +// KnowledgeBaseView.tsx +"use client"; + +import dynamic from "next/dynamic"; +import { useParams } from "next/navigation"; +import { Button, Icons, Separator, Collapsible, ScrollArea, TabMenu, Form, Field, Label, Input, Textarea, Dialog } from "@instill-ai/design-system"; +import { GeneralAppPageProp, useModels, useWatchUserModels } from "../../lib"; +import { Sidebar } from "./components/Sidebar"; +import { KnowledgeBaseCard } from "./components/KnowledgeBaseCard"; +import * as z from "zod"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as React from 'react' + +export type KnowledgeBaseViewProps = GeneralAppPageProp; + +const CreateKnowledgeFormSchema = z.object({ + title: z.string().min(1, { message: "Title is required" }), + description: z.string().min(1, { message: "Description is required" }), + tags: z.string().optional(), +}); + +type CreateKnowledgeFormProps = { + onSubmit: (data: z.infer) => void; +}; + +export const KnowledgeBaseView = (props: KnowledgeBaseViewProps) => { + const { router, enableQuery, accessToken } = props; + const { entity } = useParams(); + const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false); + + /* ------------------------------------------------------------------------- + * Query resource data + * -----------------------------------------------------------------------*/ + const models = useModels({ + enabled: enableQuery, + accessToken, + }); + + const modelsWatchState = useWatchUserModels({ + modelNames: models.isSuccess ? models.data.map((p) => p.name) : [], + enabled: enableQuery && models.isSuccess && models.data.length > 0, + accessToken, + }); + + const handleCreateKnowledgeSubmit: CreateKnowledgeFormProps["onSubmit"] = (data) => { + console.log("Create Knowledge submitted:", data); + // Perform the necessary actions with the form data (e.g., API call, state update, etc.) + setIsCreateDialogOpen(false); + }; + + const isLoadingResource = + models.isLoading || (models.isSuccess && models.data.length > 0) + ? modelsWatchState.isLoading + : false; + + /* ------------------------------------------------------------------------- + * Render + * -----------------------------------------------------------------------*/ + return ( +
+
+
+ +
+
+
+
+

+ Knowledge Base +

+
+ +
+ setIsCreateDialogOpen(true)} + /> + + + +
+
+
+
+ setIsCreateDialogOpen(false)} + onSubmit={handleCreateKnowledgeSubmit} + /> +
+ ); +}; + +const CreateKnowledgeDialog = ({ + isOpen, + onClose, + onSubmit, +}: { + isOpen: boolean; + onClose: () => void; + onSubmit: CreateKnowledgeFormProps["onSubmit"]; +}) => { + const form = useForm>({ + resolver: zodResolver(CreateKnowledgeFormSchema), + defaultValues: { + title: "", + description: "", + tags: "", + }, + }); + + return ( + + +
+ + Create Knowledge + + +
+ ( + + Title + + + + + + + + )} + /> + ( + + Description + + + + + + + + )} + /> + ( + + Tags + + + + + + + + )} + /> +
+ + +
+ +
+
+ + + ); +}; \ No newline at end of file diff --git a/packages/toolkit/src/view/knowledge/components/CreatedKnowledgeBaseCard.tsx b/packages/toolkit/src/view/knowledge/components/CreatedKnowledgeBaseCard.tsx new file mode 100644 index 0000000000..f18bb6574a --- /dev/null +++ b/packages/toolkit/src/view/knowledge/components/CreatedKnowledgeBaseCard.tsx @@ -0,0 +1,36 @@ +import { Icons } from "@instill-ai/design-system"; + +type CreatedKnowledgeBaseCardProps = { + title: string; + description: string; + tags: string[]; +}; + +export const CreatedKnowledgeBaseCard = ({ + title, + description, + tags, +}: CreatedKnowledgeBaseCardProps) => { + return ( +
+
+

+ {title} +

+ +
+
+

{description}

+
+ {tags.map((tag) => ( +
+ {tag} +
+ ))} +
+
+ ); +}; \ No newline at end of file diff --git a/packages/toolkit/src/view/knowledge/components/KnowledgeBaseCard.tsx b/packages/toolkit/src/view/knowledge/components/KnowledgeBaseCard.tsx new file mode 100644 index 0000000000..b57455a109 --- /dev/null +++ b/packages/toolkit/src/view/knowledge/components/KnowledgeBaseCard.tsx @@ -0,0 +1,29 @@ +import { Icons } from "@instill-ai/design-system"; + +type KnowledgeBaseCardProps = { + title: string; + description: string; + onClick?: () => void; +}; + +export const KnowledgeBaseCard = ({ + title, + description, + onClick, +}: KnowledgeBaseCardProps) => { + return ( +
+
+ +

+ {title} +

+
+
+

{description}

+
+ ); +}; \ No newline at end of file diff --git a/packages/toolkit/src/view/knowledge/components/Sidebar.tsx b/packages/toolkit/src/view/knowledge/components/Sidebar.tsx new file mode 100644 index 0000000000..95c2f20e42 --- /dev/null +++ b/packages/toolkit/src/view/knowledge/components/Sidebar.tsx @@ -0,0 +1,58 @@ +import { Collapsible, Nullable, ScrollArea, TabMenu } from "@instill-ai/design-system"; +import * as React from 'react' + +export const Sidebar = () => { + const [activeTab, setActiveTab] = React.useState>("my-knowledge-bases"); + + return ( + + ); +}; \ No newline at end of file diff --git a/packages/toolkit/src/view/knowladge/index.ts b/packages/toolkit/src/view/knowledge/index.ts similarity index 100% rename from packages/toolkit/src/view/knowladge/index.ts rename to packages/toolkit/src/view/knowledge/index.ts From 65e13fdc40f10807dc4f52d5d988704512e7f0c1 Mon Sep 17 00:00:00 2001 From: thewbuk <57405495+thewbuk@users.noreply.github.com> Date: Wed, 22 May 2024 16:42:29 +0100 Subject: [PATCH 003/218] feat sidebar and popup --- .../src/view/knowledge/KnowladgeBaseView.tsx | 119 +-------------- .../components/CreateKnowledgeDialog.tsx | 144 ++++++++++++++++++ .../components/CreatedKnowledgeBaseCard.tsx | 55 ++++--- .../components/KnowledgeBaseCard.tsx | 11 +- .../src/view/knowledge/components/Sidebar.tsx | 89 +++++------ 5 files changed, 222 insertions(+), 196 deletions(-) create mode 100644 packages/toolkit/src/view/knowledge/components/CreateKnowledgeDialog.tsx diff --git a/packages/toolkit/src/view/knowledge/KnowladgeBaseView.tsx b/packages/toolkit/src/view/knowledge/KnowladgeBaseView.tsx index 19168cfbe4..132b6cc224 100644 --- a/packages/toolkit/src/view/knowledge/KnowladgeBaseView.tsx +++ b/packages/toolkit/src/view/knowledge/KnowladgeBaseView.tsx @@ -3,14 +3,14 @@ import dynamic from "next/dynamic"; import { useParams } from "next/navigation"; -import { Button, Icons, Separator, Collapsible, ScrollArea, TabMenu, Form, Field, Label, Input, Textarea, Dialog } from "@instill-ai/design-system"; +import { Button, Icons, Separator } from "@instill-ai/design-system"; import { GeneralAppPageProp, useModels, useWatchUserModels } from "../../lib"; import { Sidebar } from "./components/Sidebar"; import { KnowledgeBaseCard } from "./components/KnowledgeBaseCard"; +import { CreatedKnowledgeBaseCard } from "./components/CreatedKnowledgeBaseCard"; +import { CreateKnowledgeDialog } from "./components/CreateKnowledgeDialog"; import * as z from "zod"; -import { useForm } from "react-hook-form"; -import { zodResolver } from "@hookform/resolvers/zod"; -import * as React from 'react' +import * as React from "react"; export type KnowledgeBaseViewProps = GeneralAppPageProp; @@ -77,17 +77,17 @@ export const KnowledgeBaseView = (props: KnowledgeBaseViewProps) => { description="Import your own text data or write data in real-time via Webhook for LLM context enhancement." onClick={() => setIsCreateDialogOpen(true)} /> - - - { />
); -}; - -const CreateKnowledgeDialog = ({ - isOpen, - onClose, - onSubmit, -}: { - isOpen: boolean; - onClose: () => void; - onSubmit: CreateKnowledgeFormProps["onSubmit"]; -}) => { - const form = useForm>({ - resolver: zodResolver(CreateKnowledgeFormSchema), - defaultValues: { - title: "", - description: "", - tags: "", - }, - }); - - return ( - - -
- - Create Knowledge - - -
- ( - - Title - - - - - - - - )} - /> - ( - - Description - - - - - - - - )} - /> - ( - - Tags - - - - - - - - )} - /> -
- - -
- -
-
- - - ); }; \ No newline at end of file diff --git a/packages/toolkit/src/view/knowledge/components/CreateKnowledgeDialog.tsx b/packages/toolkit/src/view/knowledge/components/CreateKnowledgeDialog.tsx new file mode 100644 index 0000000000..de1f8bcfc7 --- /dev/null +++ b/packages/toolkit/src/view/knowledge/components/CreateKnowledgeDialog.tsx @@ -0,0 +1,144 @@ +// CreateKnowledgeDialog.tsx +import { + Button, + Dialog, + Form, + Icons, + Input, + Label, + Textarea, +} from "@instill-ai/design-system"; +import * as z from "zod"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; + +const CreateKnowledgeFormSchema = z.object({ + title: z.string().min(1, { message: "Title is required" }), + description: z.string().min(1, { message: "Description is required" }), + tags: z.string().optional(), +}); + +type CreateKnowledgeFormProps = { + onSubmit: (data: z.infer) => void; +}; + +export const CreateKnowledgeDialog = ({ + isOpen, + onClose, + onSubmit, +}: { + isOpen: boolean; + onClose: () => void; + onSubmit: CreateKnowledgeFormProps["onSubmit"]; +}) => { + const form = useForm>({ + resolver: zodResolver(CreateKnowledgeFormSchema), + defaultValues: { + title: "", + description: "", + tags: "", + }, + }); + + return ( + + + + Create new knowledge base + + + + +
+ ( + + + Name + + + + + + + + + )} + /> + ( + + + Description + + +