Merge remote-tracking branch 'origin/main' into migrate-notice-md-to-…

…license-html-report

.github/workflows/ci.yml

@@ -0,0 +1,18 @@
+name: CI
+
+on:
+  - push
+  - pull_request
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Biome
+        uses: biomejs/[email protected]
+        with:
+          version: 1.9.4
+      - name: Run Biome
+        run: biome ci .

.gitignore

@@ -42,4 +42,4 @@ next-env.d.ts
 .env.sentry-build-plugin
 
 # prepare fonts programmatically
-app/fonts/index.ts
+app/fonts/

app/(auth)/lib/is-route06-user.ts

@@ -1,8 +1,7 @@
 "use server";
 
 import { getUser } from "@/lib/supabase";
-
-const R06_EMAIL_DOMAIN = "route06.co.jp";
+import { isEmailFromRoute06 } from "@/lib/utils";
 
 export const isRoute06User = async () => {
 	const supabaseUser = await getUser();
@@ -12,6 +11,5 @@ export const isRoute06User = async () => {
 		throw new Error("No email found for user");
 	}
 
-	const emailDomain = email.split("@")[1];
-	return emailDomain === R06_EMAIL_DOMAIN;
+	return isEmailFromRoute06(email);
 };

app/(auth)/signup/verify-email/verify-email-form.tsx

@@ -71,6 +71,7 @@ export const VerifyEmailForm: FC = () => {
 						data-1p-ignore
 						name="token"
 						onComplete={handleComplete}
+						className="notranslate" // prevent Google Chrome translation to avoid DOM error
 					>
 						<InputOTPGroup>
 							<InputOTPSlot index={0} />

app/(main)/layout.tsx

@@ -18,7 +18,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 					<UserButton />
 				</div>
 			</header>
-			<main className="flex-1">{children}</main>
+			<main className="flex-1 overflow-y-auto">{children}</main>
 		</div>
 	);
 }

app/(playground)/p/[agentId]/beta-proto/artifact/schema.ts

@@ -15,7 +15,7 @@ export const schema = jsonSchema<GeneratedObject>({
 				title: { type: "string", description: "The title of the artefact" },
 				content: {
 					type: "string",
-					description: `The content of the artefact formatted markdown.`,
+					description: "The content of the artefact formatted markdown.",
 				},
 				citations: {
 					type: "array",

app/(playground)/p/[agentId]/beta-proto/component.tsx

@@ -1,228 +1,21 @@
 "use client";
 
-import { GiselleLogo } from "@/components/giselle-logo";
-import {
-	Background,
-	BackgroundVariant,
-	Panel,
-	ReactFlow,
-	ReactFlowProvider,
-	useReactFlow,
-} from "@xyflow/react";
-import Link from "next/link";
-import { useState } from "react";
-import bg from "./bg.png";
 import "@xyflow/react/dist/style.css";
-import { GradientPathDefinitions } from "./connector/gradient-definitions";
-import {
-	MousePositionProvider,
-	useMousePosition,
-} from "./contexts/mouse-position";
+import { Editor } from "./editor";
 import { FeatureFlagProvider } from "./feature-flags/provider";
 import type { FeatureFlags } from "./feature-flags/types";
-import {
-	giselleNodeArchetypes,
-	promptBlueprint,
-	textGeneratorParameterNames,
-	webSearchBlueprint,
-} from "./giselle-node/blueprints";
-import {
-	GiselleNode,
-	GiselleNodeInformationPanel,
-} from "./giselle-node/components";
-import { type GiselleNodeId, panelTabs } from "./giselle-node/types";
-import {
-	addNodesAndConnect,
-	selectNode,
-	selectNodeAndSetPanelTab,
-} from "./graph/actions";
 import { useGraph } from "./graph/context";
 import { GraphProvider } from "./graph/provider";
-import type { Graph } from "./graph/types";
-import {
-	type ReactFlowNode,
-	edgeTypes,
-	nodeTypes,
-} from "./react-flow-adapter/giselle-node";
-import {
-	useConnectionHandler,
-	useGraphToReactFlowEffect,
-	useKeyUpHandler,
-	useNodeEventHandler,
-} from "./react-flow-adapter/graph";
-import { setSelectTool } from "./tool/actions";
-import { Toolbar } from "./tool/components";
-import { useTool } from "./tool/context";
-import { ToolProvider } from "./tool/provider";
+import { type Graph, playgroundModes } from "./graph/types";
 import type { AgentId } from "./types";
+import { Viewer } from "./viewer";
 
 function Inner() {
-	const [previewMode, setPreviewMode] = useState(false);
-	const { state: toolState, dispatch: toolDispatch } = useTool();
-	const { dispatch: graphDispatch } = useGraph();
-	const reactFlowInstance = useReactFlow();
-	const mousePosition = useMousePosition();
-	useGraphToReactFlowEffect();
-	const { handleConnect } = useConnectionHandler();
-	const { handleNodeDragStop } = useNodeEventHandler();
-	const { handleKeyUp } = useKeyUpHandler();
-	return (
-		<div className="w-full h-screen">
-			<div className="absolute z-10 left-[20px] right-[20px] top-[20px] h-[36px] flex justify-between">
-				<div className="flex gap-[8px] items-center">
-					<Link href="/">
-						<GiselleLogo className="fill-white w-[70px] h-auto mt-[6px]" />
-					</Link>
-					<div className="font-rosart text-[18px] text-black--30">
-						Playground
-					</div>
-					{/**
-					<div className="flex items-center gap-[10px] group">
-						<label className="w-[30px] h-[18px] border border-black-70 rounded-full relative bg-black-80 cursor-pointer group has-[:checked]:bg-black-70 ">
-							<div className="absolute bg-black-100 rounded-full w-[16px] h-[16px] group-has-[:checked]:translate-x-[12px]  transition-all" />
-							<input type="checkbox" name="previewMode" className="hidden" />
-						</label>
-						<div className="relative font-avenir h-[18px] text-[12px]">
-							<div className="h-[18px] flex items-center absolute top-0 text-black--30 opacity-100 group-has-[:checked]:opacity-0 transition-opacity duration-400">
-								Edit
-							</div>
-							<div className="h-[18px] flex items-center  absolute text-black--30 opacity-0 group-has-[:checked]:opacity-100 transition-opacity duration-400">
-								Preview
-							</div>
-						</div>
-					</div>
-				 */}
-				</div>
-			</div>
-			<ReactFlow<ReactFlowNode>
-				defaultNodes={[]}
-				defaultEdges={[]}
-				nodeTypes={nodeTypes}
-				edgeTypes={edgeTypes}
-				panOnScroll
-				onKeyUp={handleKeyUp}
-				selectionOnDrag
-				panOnDrag={false}
-				colorMode="dark"
-				onConnect={handleConnect}
-				onNodeDragStop={handleNodeDragStop}
-				onNodeClick={(_, node) => {
-					graphDispatch(
-						selectNodeAndSetPanelTab({
-							selectNode: {
-								id: node.id as GiselleNodeId,
-								panelTab: panelTabs.property,
-							},
-						}),
-					);
-				}}
-				onPaneClick={(event) => {
-					event.preventDefault();
-					graphDispatch(
-						selectNode({
-							selectedNodeIds: [],
-						}),
-					);
-					if (toolState.activeTool.type === "addGiselleNode") {
-						const position = reactFlowInstance.flowToScreenPosition({
-							x: event.clientX,
-							y: event.clientY,
-						});
-						if (
-							toolState.activeTool.giselleNodeBlueprint.archetype ===
-							giselleNodeArchetypes.textGenerator
-						) {
-							graphDispatch(
-								addNodesAndConnect({
-									sourceNode: {
-										node: promptBlueprint,
-										position: {
-											x: position.x - 300,
-											y: position.y + 100,
-										},
-									},
-									targetNode: {
-										node: toolState.activeTool.giselleNodeBlueprint,
-										position,
-									},
-									connector: {
-										targetParameterName:
-											textGeneratorParameterNames.instruction,
-									},
-								}),
-							);
-						}
-						if (
-							toolState.activeTool.giselleNodeBlueprint.archetype ===
-							giselleNodeArchetypes.webSearch
-						) {
-							graphDispatch(
-								addNodesAndConnect({
-									sourceNode: {
-										node: promptBlueprint,
-										position: {
-											x: position.x - 300,
-											y: position.y + 100,
-										},
-									},
-									targetNode: {
-										node: toolState.activeTool.giselleNodeBlueprint,
-										position,
-									},
-									connector: {
-										targetParameterName:
-											textGeneratorParameterNames.instruction,
-									},
-								}),
-							);
-						}
-						toolDispatch(setSelectTool);
-					}
-				}}
-				deleteKeyCode={null}
-			>
-				<Background
-					className="!bg-black-100"
-					lineWidth={0}
-					variant={BackgroundVariant.Lines}
-					style={{
-						backgroundImage: `url(${bg.src})`,
-						backgroundPositionX: "center",
-						backgroundPositionY: "center",
-						backgroundSize: "cover",
-					}}
-				/>
-				{toolState.activeTool.type === "addGiselleNode" && (
-					<div
-						className="absolute"
-						style={{
-							left: `${mousePosition.x - 0}px`,
-							top: `${mousePosition.y - 0}px`,
-						}}
-					>
-						<GiselleNode {...toolState.activeTool.giselleNodeBlueprint} />
-					</div>
-				)}
-
-				<Panel position={"bottom-center"}>
-					<Toolbar />
-				</Panel>
-				<Panel position="top-right" className="!top-0 !bottom-0 !right-0 !m-0">
-					<GiselleNodeInformationPanel />
-				</Panel>
-				{/**<Panel position="top-left" className="!top-0 !bottom-0 !left-0 !m-0">
-					<div className="absolute bg-black-100 w-[380px] rounded-[16px] overflow-hidden shadow-[0px_0px_8px_0px_hsla(0,_0%,_100%,_0.2)] top-[80px] bottom-[20px] left-[20px]">
-						<div className="absolute z-0 rounded-[16px] inset-0 border mask-fill bg-gradient-to-br bg-origin-border bg-clip-boarder border-transparent from-[hsla(233,4%,37%,1)] to-[hsla(233,62%,22%,1)]" />
-						<div className="flex gap-[10px] flex-col h-full">
-							<div className="relative z-10 pt-[16px] px-[24px] flex justify-between h-[40px]">
-								hello
-							</div>
-						</div>
-					</div>
-				</Panel>**/}
-			</ReactFlow>
-		</div>
-	);
+	const { state } = useGraph();
+	if (state.graph.mode === playgroundModes.edit) {
+		return <Editor />;
+	}
+	return <Viewer />;
 }
 
 interface PlaygroundProps {
@@ -232,17 +25,10 @@ interface PlaygroundProps {
 }
 export function Playground(props: PlaygroundProps) {
 	return (
-		<ReactFlowProvider>
-			<FeatureFlagProvider {...props.featureFlags}>
-				<MousePositionProvider>
-					<ToolProvider>
-						<GraphProvider agentId={props.agentId} defaultGraph={props.graph}>
-							<GradientPathDefinitions />
-							<Inner />
-						</GraphProvider>
-					</ToolProvider>
-				</MousePositionProvider>
-			</FeatureFlagProvider>
-		</ReactFlowProvider>
+		<FeatureFlagProvider {...props.featureFlags}>
+			<GraphProvider agentId={props.agentId} defaultGraph={props.graph}>
+				<Inner />
+			</GraphProvider>
+		</FeatureFlagProvider>
 	);
 }

app/(playground)/p/[agentId]/beta-proto/components/icons/sparkles.tsx

@@ -0,0 +1,26 @@
+import type { FC, SVGProps } from "react";
+
+export const SparklesIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg
+		width="18"
+		height="18"
+		viewBox="0 0 18 18"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<title>Sparkles Icon</title>
+		<g clipPath="url(#clip0_6588_4373)">
+			<g filter="url(#filter0_d_6588_4373)">
+				<path d="M14.7272 7.77291C8.63104 8.24793 8.24769 8.63129 7.77266 14.7275C7.29764 8.63129 6.91428 8.24793 0.818115 7.77291C6.91428 7.29788 7.29764 6.91453 7.77266 0.818359C8.24769 6.91453 8.63104 7.29788 14.7272 7.77291Z" />
+			</g>
+			<g filter="url(#filter1_d_6588_4373)">
+				<path d="M17.1818 14.7273C13.9541 14.9507 13.7513 15.131 13.4999 18C13.2486 15.131 13.0458 14.9507 9.81812 14.7273C13.0458 14.5039 13.2486 14.3236 13.4999 11.4546C13.7513 14.3236 13.9541 14.5039 17.1818 14.7273Z" />
+			</g>
+		</g>
+		<defs>
+			<clipPath id="clip0_6588_4373">
+				<rect width="18" height="18" />
+			</clipPath>
+		</defs>
+	</svg>
+);

app/(playground)/p/[agentId]/beta-proto/components/icons/willis.tsx → app/(playground)/p/[agentId]/beta-proto/components/icons/willi.tsx

@@ -1,6 +1,6 @@
 import type { FC, SVGProps } from "react";
 
-export const WillisIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+export const WilliIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
 	<svg
 		width="16"
 		height="16"