feat: MVP Knowledge

apps/console/src/app/[entity]/knowledge/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`,
+    openGraph: {
+      images: ["/instill-open-graph.png"],
+    },
+  };
+
+  return Promise.resolve(metadata);
+}
+
+export default async function Page() {
+  return <KnowladgeBasePageRender />;
+}

apps/console/src/app/[entity]/knowledge/render.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+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";
+
+export const KnowladgeBasePageRender = () => {
+  const router = useRouter();
+
+  const accessToken = useAppAccessToken();
+  useAppTrackToken({ enabled: true });
+  // useInitAmplitude();
+
+  return (
+    <PageBase>
+      <AppTopbar />
+      <PageBase.Container>
+        <PageBase.Content contentPadding="!p-0">
+          <KnowledgeBaseView
+            accessToken={accessToken.isSuccess ? accessToken.data : null}
+            enableQuery={accessToken.isSuccess}
+            router={router}
+          />
+        </PageBase.Content>
+      </PageBase.Container>
+    </PageBase>
+  );
+};

packages/design-system/src/new-ui/Icons/GraduationHat.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const GraduationHat = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M17 14.5001V11.4945C17 11.315 17 11.2253 16.9727 11.146C16.9485 11.076 16.9091 11.0122 16.8572 10.9592C16.7986 10.8993 16.7183 10.8592 16.5578 10.779L12 8.50006M4 9.50006V16.3067C4 16.6786 4 16.8645 4.05802 17.0274C4.10931 17.1713 4.1929 17.3016 4.30238 17.4082C4.42622 17.5287 4.59527 17.6062 4.93335 17.7612L11.3334 20.6945C11.5786 20.8069 11.7012 20.8631 11.8289 20.8853C11.9421 20.9049 12.0579 20.9049 12.1711 20.8853C12.2988 20.8631 12.4214 20.8069 12.6666 20.6945L19.0666 17.7612C19.4047 17.6062 19.5738 17.5287 19.6976 17.4082C19.8071 17.3016 19.8907 17.1713 19.942 17.0274C20 16.8645 20 16.6786 20 16.3067V9.50006M2 8.50006L11.6422 3.67895C11.7734 3.61336 11.839 3.58056 11.9078 3.56766C11.9687 3.55622 12.0313 3.55622 12.0922 3.56766C12.161 3.58056 12.2266 3.61336 12.3578 3.67895L22 8.50006L12.3578 13.3212C12.2266 13.3868 12.161 13.4196 12.0922 13.4325C12.0313 13.4439 11.9687 13.4439 11.9078 13.4325C11.839 13.4196 11.7734 13.3868 11.6422 13.3212L2 8.50006Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+GraduationHat.displayName = "IconGraduationHat";

packages/design-system/src/new-ui/Icons/MDFile.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const MDFile = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path d="M0 4.88648C0 2.67734 1.79086 0.886475 4 0.886475H20L32 12.8865V36.8865C32 39.0956 30.2091 40.8865 28 40.8865H4C1.79086 40.8865 0 39.0956 0 36.8865V4.88648Z" fill="#316FED" />
+      <path opacity="0.3" d="M20 0.886475L32 12.8865H24C21.7909 12.8865 20 11.0956 20 8.88647V0.886475Z" fill="white" />
+    </IconBase>
+  );
+});
+MDFile.displayName = "IconMDFile";

packages/design-system/src/new-ui/Icons/PDFFile.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const PDFFile = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path d="M0 4.88648C0 2.67734 1.79086 0.886475 4 0.886475H20L32 12.8865V36.8865C32 39.0956 30.2091 40.8865 28 40.8865H4C1.79086 40.8865 0 39.0956 0 36.8865V4.88648Z" fill="#E02E3D" />
+      <path opacity="0.3" d="M20 0.886475L32 12.8865H24C21.7909 12.8865 20 11.0956 20 8.88647V0.886475Z" fill="white" />
+    </IconBase>
+  );
+});
+PDFFile.displayName = "IconPDFFile";

packages/design-system/src/new-ui/Icons/SlashDivider.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const SlashDivider = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M1 21L11 1"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+SlashDivider.displayName = "SlashDivider";

packages/design-system/src/new-ui/Icons/TXTFile.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const TXTFile = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path d="M0 4.88648C0 2.67734 1.79086 0.886475 4 0.886475H20L32 12.8865V36.8865C32 39.0956 30.2091 40.8865 28 40.8865H4C1.79086 40.8865 0 39.0956 0 36.8865V4.88648Z" fill="#1D2433" />
+      <path opacity="0.3" d="M20 0.886475L32 12.8865H24C21.7909 12.8865 20 11.0956 20 8.88647V0.886475Z" fill="white" />
+    </IconBase>
+  );
+});
+TXTFile.displayName = "IconTXTFile";

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";
@@ -74,6 +75,7 @@ import { LockUnlocked03 } from "./LockUnlocked03";
 import { Logout01 } from "./Logout01";
 import { Mail01 } from "./Mail01";
 import { MasterCard } from "./MasterCard";
+import { MDFile } from "./MDFile";
 import { Menu01 } from "./Menu01";
 import { MessageChatSquare } from "./MessageChatSquare";
 import { MessageSmileSquare } from "./MessageSmileSquare";
@@ -82,6 +84,7 @@ import { Model } from "./Model";
 import { MultipleVideo } from "./MultipleVideo";
 import { NewModel } from "./NewModel";
 import { PauseCircle } from "./PauseCircle";
+import {PDFFile} from "./PDFFile"
 import { Pipeline } from "./Pipeline";
 import { Play } from "./Play";
 import { PlayCircle } from "./PlayCircle";
@@ -100,6 +103,7 @@ import { Scales02 } from "./Scales02";
 import { SearchLg } from "./SearchLg";
 import { SearchSm } from "./SearchSm";
 import { Settings02 } from "./Settings02";
+import { SlashDivider } from "./SlashDivider";
 import { Share07 } from "./Share07";
 import { Sliders01 } from "./Sliders01";
 import { SortLinesDown } from "./SortLinesDown";
@@ -115,6 +119,7 @@ import { Trash01 } from "./Trash01";
 import { Trash03 } from "./Trash03";
 import { Type01 } from "./Type01";
 import { Type02 } from "./Type02";
+import { TXTFile } from "./TXTFile";
 import { TypePlus } from "./TypePlus";
 import { Update } from "./Update";
 import { Upload01 } from "./Upload01";
@@ -191,6 +196,7 @@ export const Icons = {
   Gear01,
   GitMerge,
   Globe01,
+  GraduationHat,
   HelpCircle,
   IntersectSquare,
   Link01,
@@ -207,12 +213,14 @@ export const Icons = {
   MultipleVideo,
   PauseCircle,
   MasterCard,
+  MDFile,
   Menu01,
   MessageChatSquare,
   Minus,
   Mail01,
   MessageSmileSquare,
   NewModel,
+  PDFFile,
   Pipeline,
   Play,
   PlayCircle,
@@ -231,6 +239,7 @@ export const Icons = {
   Settings02,
   SpeechRecognition,
   Sliders01,
+  SlashDivider,
   Speaker01,
   Stop,
   SearchLg,
@@ -247,6 +256,7 @@ export const Icons = {
   Type02,
   TypePlus,
   Tool01,
+  TXTFile,
   Upload01,
   User01,
   User02,

packages/sdk/src/main/index.ts

@@ -9,7 +9,7 @@ import {
 } from "../core";
 import { ModelClient } from "../model";
 import { GeneralRecord, HttpMethod } from "../types";
-import { ComponentClient, PipelineClient } from "../vdp";
+import { ComponentClient, PipelineClient, ArtifactClient } from "../vdp";
 import { ReleaseClient } from "../vdp/release";
 import { SecretClient } from "../vdp/secret";
 import { TriggerClient } from "../vdp/trigger";
@@ -87,6 +87,7 @@ export class InstillAPIClient {
   vdp = {
     component: new ComponentClient(this),
     pipeline: new PipelineClient(this),
+    artifact: new ArtifactClient(this),
     release: new ReleaseClient(this),
     trigger: new TriggerClient(this),
     secret: new SecretClient(this),