merge origin/main

apps/playground/README.md

@@ -31,26 +31,20 @@
 
 ## Tasks
 
-- [ ] Set viewport to storage
+- [ ] Add setting button to title
+- [ ] Show unable sources
 - [ ] Auto detect storage backend
-- [ ] Workflow View
 - [ ] Update text node icon
-- [ ] Add generate text short cut
-- [ ] Make fill yellow for connected file node port
-- [ ] Styling connector
-- [ ] Support multi output
 - [ ] API Middleware
 - [ ] API Auth
 - [ ] API Rate Limit
 - [ ] Add to do comment llmProviders property
 - [ ] Handling error in file upload
-- [ ] Better font
 - [ ] Cancel button
 - [ ] LLM Provider from .env
 - [ ] Undo/Redo for prompt editor
 - [ ] Telemetry
 - [ ] Animation
-- [ ] Markdown styling
 
 
 ## Backlog
@@ -61,6 +55,23 @@
 
 ## Done
 
+- [x] Create exention for a source
+- [x] Rework node select intereaction
+- [x] Make fill yellow for connected file node port
+- [x] Styling connector
+- [x] Add title
+- [x] Better font(base: Geist, accent: Hubot)
+- [x] Fix layout of text node
+- [x] Improve layout of gen node's prompt tab
+- [x] Show running job
+- [x] Show running state on run view
+- [x] Workflow View
+- [x] Show flow selector if workspace has multiple flows
+- [x] Markdown styling
+- [x] Add generate text short cut
+- [x] Set viewport to storage
+- [x] animate spinner
+- [x] Support multi output
 - [x] Prompt object to html to markdown
 - [x] Add typecheck script to template of turborepo
 - [x] at removeFileHandler (packages/giselle-engine/src/core/handlers/remove-file.ts:35:53)

apps/playground/app/api/giselle/[...next-giselle]/route.ts

@@ -1,10 +1,3 @@
 import { giselleEngine } from "@/giselle-engine";
 
-// export const { GET, POST } = giselleEngine.handlers;
-//
-
-export const GET = () => {
-	return Response.json({ hello: "world" });
-};
-
-export const POST = giselleEngine.handlers.POST;
+export const { GET, POST } = giselleEngine.handlers;

apps/playground/app/globals.css

@@ -5,36 +5,63 @@
 @source "../../../packages/text-editor/src/react/";
 
 @theme {
-	--color-true-white: hsl(0 0% 100%);
-	--color-white: hsl(220 60% 98%);
-	--color-white-20: hsl(207 43% 91%);
-	--color-white-50: hsl(207 16% 75%);
-	--color-white-900: hsl(220, 60%, 98%);
-	--color-true-black: hsl(0, 0%, 0%);
-	--color-black: hsl(229 100% 2%);
-	--color-black-20: hsl(231 62% 6%);
-	--color-black-30: hsl(207 19% 77%);
-	--color-black-400: hsl(222, 21%, 40%);
+	--color-black-950: hsl(0, 0%, 0%);
 	--color-black-900: hsl(229, 100%, 2%);
-	--color-blue: hsl(219, 90%, 52%);
-	--color-blue-20: hsl(212, 79%, 87%);
-	--color-blue-60: hsl(223, 23%, 67%);
+	--color-black-850: hsl(231, 62%, 6%);
+	--color-black-800: hsl(231, 47%, 22%);
+	--color-black-400: hsl(222, 21%, 40%);
+	--color-black-300: hsl(222, 21%, 50%);
+	--color-black-200: hsl(209, 17%, 75%);
+	--color-black: hsl(229 100% 2%);
+
+	--color-white-950: hsl(0 0% 100%);
+	--color-white-900: hsl(220, 60%, 98%);
+	--color-white-850: hsl(0, 0%, 96%);
+	--color-white-800: hsl(207, 43%, 91%);
+	--color-white-400: hsl(207, 16%, 75%);
+
+	--color-blue-900: hsl(219, 90%, 52%);
+	--color-blue-800: hsl(219, 90%, 60%);
+	--color-blue-400: hsl(224, 82%, 68%);
+	--color-blue-300: hsl(216, 35%, 64%);
+	--color-blue-200: hsl(212, 79%, 87%);
+	--color-blue-100: hsl(192, 73%, 84%);
+
+	--color-green-900: hsl(141, 100%, 61%);
 
-	--color-text-node-1: hsl(178, 94%, 49%);
+	--color-chartreuse-900: hsl(69, 100%, 52%);
+
+	--color-turquoise-900: hsl(178, 94%, 49%);
+
+	--color-primary-900: var(--color-blue-900);
+	--color-primary-800: var(--color-blue-800);
+	--color-primary-400: var(--color-blue-400);
+	--color-primary-300: var(--color-blue-300);
+	--color-primary-200: var(--color-blue-200);
+	--color-primary-100: var(--color-blue-100);
+
+	--color-text-node-1: var(--color-turquoise-900);
 	--color-text-node-2: hsl(178, 95%, 25%);
 
-	--color-file-node-1: hsl(69, 100%, 52%);
+	--color-file-node-1: var(--color-chartreuse-900);
 	--color-file-node-2: hsl(69, 99%, 32%);
 
+	--color-node-data-900: var(--color-chartreuse-900);
+	--color-node-plaintext-900: var(--color-turquoise-900);
+
 	--color-generation-node-1: hsl(219, 90%, 52%);
 	--color-generation-node-2: hsl(219, 98%, 23%);
 
-  --color-github-node-1: hsl(264, 80%, 70%);
+	--color-github-node-1: hsl(264, 80%, 70%);
   --color-github-node-2: hsl(264, 80%, 30%);
+
+	--font-sans: var(--font-geist-sans);
+	--font-accent: var(--font-hubot-sans);
 }
 
 @layer components {
-	.prompt-editor {
+	.prompt-editor,
+	.markdown-renderer {
 		/* Base variables */
 		--base-font-size: 14;
 		--rem-base: calc(var(--base-font-size) / 16);
@@ -55,14 +82,66 @@
 		--radius-base: calc(4 / var(--base-font-size) * 1rem);
 
 		/* Base styles */
-		color: var(--color-white);
+		color: var(--color-white-900);
 		font-size: var(--text-base);
 		line-height: var(--line-height-ratio);
 
 		&:focus-visible {
 			outline: none;
 		}
 
+		/* Headings */
+		h1 {
+			font-size: calc(24 / var(--base-font-size) * 1em);
+			font-weight: 600;
+			line-height: calc(32 / 24);
+			margin-top: calc(32 / 24 * 1em);
+			margin-bottom: calc(16 / 24 * 1em);
+		}
+		h1:first-child {
+			margin-top: 0;
+		}
+
+		h2 {
+			font-size: calc(20 / var(--base-font-size) * 1em);
+			font-weight: 600;
+			line-height: calc(28 / 20);
+			margin-top: calc(32 / 20 * 1em);
+			margin-bottom: calc(16 / 20 * 1em);
+		}
+
+		h3 {
+			font-size: calc(18 / var(--base-font-size) * 1em);
+			font-weight: 600;
+			line-height: calc(28 / 18);
+			margin-top: calc(24 / 18 * 1em);
+			margin-bottom: calc(12 / 18 * 1em);
+		}
+
+		h4 {
+			font-size: calc(16 / var(--base-font-size) * 1em);
+			font-weight: 600;
+			line-height: calc(24 / 16);
+			margin-top: calc(24 / 16 * 1em);
+			margin-bottom: calc(12 / 16 * 1em);
+		}
+
+		h5 {
+			font-size: calc(14 / var(--base-font-size) * 1em);
+			font-weight: 600;
+			line-height: calc(20 / 14);
+			margin-top: calc(20 / 14 * 1em);
+			margin-bottom: calc(12 / 14 * 1em);
+		}
+
+		h6 {
+			font-size: calc(12 / var(--base-font-size) * 1em);
+			font-weight: 600;
+			line-height: calc(16 / 12);
+			margin-top: calc(20 / 12 * 1em);
+			margin-bottom: calc(12 / 12 * 1em);
+		}
+
 		/* Paragraph */
 		p {
 			margin-top: var(--spacing-1);
@@ -107,7 +186,7 @@
 
 		/* Inline code */
 		code {
-			color: #111827;
+			color: var(--color-white-900);
 			font-weight: 600;
 			font-size: var(--text-sm);
 		}

apps/playground/app/layout.tsx

@@ -1,9 +1,16 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { GeistSans } from "geist/font/sans";
+import { Hubot_Sans } from "next/font/google";
+
+const hubot = Hubot_Sans({
+	weight: "variable",
+	variable: "--font-hubot-sans",
+	subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
-	title: "Create Next App",
-	description: "Generated by create next app",
+	title: "Giselle / Playground",
 };
 
 export default function RootLayout({
@@ -12,7 +19,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="en">
+		<html lang="en" className={`${GeistSans.variable} ${hubot.variable}`}>
 			<body>{children}</body>
 		</html>
 	);

apps/playground/app/workspaces/[workspaceId]/page.tsx

@@ -14,7 +14,7 @@ export default function Page() {
 	};
 
 	return (
-		<div className="flex flex-col h-screen bg-black">
+		<div className="flex flex-col h-screen bg-black-900">
 			<Header action={<RunButton onClick={handleRunButtonClick} />} />
 			<Editor />
 		</div>

apps/playground/app/workspaces/[workspaceId]/run/page.tsx

@@ -2,7 +2,7 @@ import { Header, Viewer } from "@giselle-internal/workflow-designer-ui";
 
 export default function () {
 	return (
-		<div className="flex flex-col h-screen bg-black">
+		<div className="flex flex-col h-screen bg-black-900">
 			<Header />
 			<Viewer />
 		</div>

apps/playground/package.json

@@ -19,6 +19,7 @@
 		"@giselle-sdk/workflow-designer": "workspace:*",
 		"@tailwindcss/postcss": "catalog:",
 		"@xyflow/react": "catalog:",
+		"geist": "1.3.1",
 		"giselle-sdk": "workspace:^",
 		"lucide-react": "catalog:",
 		"next": "catalog:",

apps/studio.giselles.ai/app/(main)/settings/team/page.tsx

@@ -1,4 +1,5 @@
 import { Skeleton } from "@/components/ui/skeleton";
+import { settingsV2Flag } from "@/flags";
 import { Suspense } from "react";
 import { AgentTimeCharge } from "./agent-time-charge";
 import { AgentUsage } from "./agent-usage";
@@ -7,14 +8,16 @@ import { DangerZone } from "./danger-zone";
 import { TeamMembers } from "./team-members";
 import { TeamName } from "./team-name";
 
-export default function TeamPage() {
+export default async function TeamPage() {
+	const settingsV2Mode = await settingsV2Flag();
+
 	return (
 		<div className="grid gap-[16px]">
 			<h3
 				className="text-[32px] text-black--30 font-rosart"
 				style={{ textShadow: "0px 0px 20px hsla(207, 100%, 48%, 1)" }}
 			>
-				Team
+				Team {settingsV2Mode ? "V2" : ""}
 			</h3>
 			<Suspense
 				fallback={

apps/studio.giselles.ai/flags.ts

@@ -55,7 +55,13 @@ export const playgroundV2Flag = flag<boolean>({
 export const googleOauthFlag = flag<boolean>({
 	key: "google-oauth",
 	async decide() {
-		return takeLocalEnv("GOOGLE_OAUTH_FLAG");
+		if (
+			process.env.GOOGLE_OAUTH_FLAG === undefined ||
+			process.env.GOOGLE_OAUTH_FLAG === "false"
+		) {
+			return false;
+		}
+		return true;
 	},
 	description: "Enable Google OAuth",
 	defaultValue: false,
@@ -77,3 +83,16 @@ export const developerFlag = flag<boolean>({
 		{ value: true, label: "Enable" },
 	],
 });
+
+export const settingsV2Flag = flag<boolean>({
+	key: "settings-v2",
+	async decide() {
+		return takeLocalEnv("SETTINGS_V2_FLAG");
+	},
+	description: "Enable Settings V2",
+	defaultValue: false,
+	options: [
+		{ value: false, label: "disable" },
+		{ value: true, label: "Enable" },
+	],
+});