giselles-ai · toyamarinyon · Feb 26, 2025 · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025
@@ -31,9 +31,11 @@
 
 ## Tasks
 
-- [ ] Show running job
+- [ ] Add setting button to title
+- [ ] Rework node select intereaction
 - [ ] Show unable sources
 - [ ] Auto detect storage backend
+- [ ] Create exention for a source
 - [ ] Update text node icon
 - [ ] Make fill yellow for connected file node port
 - [ ] Styling connector
@@ -42,7 +44,6 @@
 - [ ] 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
@@ -58,6 +59,11 @@
 
 ## Done
 
+- [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

@@ -46,6 +46,9 @@
 
 	--color-generation-node-1: hsl(219, 90%, 52%);
 	--color-generation-node-2: hsl(219, 98%, 23%);
+
+	--font-sans: var(--font-geist-sans);
+	--font-accent: var(--font-hubot-sans);
 }
 
 @layer components {

@@ -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>
 	);

@@ -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:",

@@ -95,3 +95,9 @@
     :versions:
     - 2.0.1
     :when: 2025-02-17 09:01:39.703928000 Z
+- - :permit
+  - SIL OPEN FONT LICENSE
+  - :who: OSPO @masutaka
+    :why: Compatible with Apache-2.0 license. See https://opensource.org/license/mpl-2-0
+    :versions: []
+    :when: 2025-02-27 06:29:24.670306000 Z
@@ -8,19 +8,20 @@
 * 32 New BSD
 * 16 Simplified BSD
 * 3 MIT OR Apache-2.0
-* 3 Mozilla Public License 2.0
 * 3 BlueOak-1.0.0
-* 2 The Unlicense
-* 2 LGPL-3.0-or-later
+* 3 Mozilla Public License 2.0
 * 2 MIT-0
-* 1 Python-2.0
-* 1 CC-BY-4.0
-* 1 (AFL-2.1 OR BSD-3-Clause)
-* 1 (MIT AND Zlib)
-* 1 (BSD-2-Clause OR MIT OR Apache-2.0)
-* 1 BSD Zero Clause License
-* 1 (MIT OR CC0-1.0)
+* 2 LGPL-3.0-or-later
+* 2 The Unlicense
 * 1 BSD
+* 1 (MIT OR CC0-1.0)
+* 1 BSD Zero Clause License
+* 1 (BSD-2-Clause OR MIT OR Apache-2.0)
+* 1 (MIT AND Zlib)
+* 1 (AFL-2.1 OR BSD-3-Clause)
+* 1 SIL OPEN FONT LICENSE
+* 1 CC-BY-4.0
+* 1 Python-2.0
 
 
 
@@ -6235,6 +6236,17 @@ CC-BY-4.0 permitted
 
 
 
+<a name="geist"></a>
+### geist v1.3.1
+#### 
+
+##### Paths
+* /home/runner/work/giselle/giselle
+
+SIL OPEN FONT LICENSE permitted
+
+
+
 <a name="gensync"></a>
 ### gensync v1.0.0-beta.2
 #### 

@@ -393,7 +393,7 @@ export function Editor() {
 		}
 	});
 	return (
-		<div className="flex-1">
+		<div className="flex-1 overflow-hidden font-sans">
 			<ReactFlowProvider>
 				<ToolbarContextProvider>
 					<MousePositionProvider>
@@ -421,7 +421,7 @@ export function Editor() {
 								defaultSize={0}
 							>
 								{selectedNodes.length === 1 && (
-									<div className="flex-1">
+									<div className="flex-1 overflow-hidden">
 										<PropertiesPanel />
 									</div>
 								)}

@@ -106,7 +106,7 @@ export function TextGenerationNodePropertiesPanel({
 						>
 							<Tabs.List
 								className={clsx(
-									"flex gap-[16px] text-[14px]",
+									"flex gap-[16px] text-[14px] font-accent",
 									"**:p-[4px] **:border-b **:cursor-pointer",
 									"**:data-[state=active]:text-white-900 **:data-[state=active]:border-white-900",
 									"**:data-[state=inactive]:text-black-400 **:data-[state=inactive]:border-transparent",
@@ -118,7 +118,7 @@ export function TextGenerationNodePropertiesPanel({
 							</Tabs.List>
 							<Tabs.Content
 								value="prompt"
-								className="flex-1 flex flex-col overflow-y-auto"
+								className="flex-1 flex flex-col overflow-hidden"
 							>
 								<PromptPanel node={node} />
 							</Tabs.Content>

@@ -0,0 +1,73 @@
+"use client";
+
+import clsx from "clsx/lite";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function EditableText({
+	value,
+	fallbackValue,
+	onChange,
+}: {
+	value?: string;
+	fallbackValue: string;
+	onChange?: (value?: string) => void;
+}) {
+	const [edit, setEdit] = useState(false);
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		if (edit) {
+			inputRef.current?.select();
+			inputRef.current?.focus();
+		}
+	}, [edit]);
+
+	const updateValue = useCallback(() => {
+		if (!inputRef.current) {
+			return;
+		}
+		setEdit(false);
+		const currentValue =
+			inputRef.current.value.length === 0 ? undefined : inputRef.current.value;
+		if (fallbackValue === currentValue) {
+			return;
+		}
+		onChange?.(currentValue);
+		inputRef.current.value = currentValue ?? fallbackValue;
+	}, [onChange, fallbackValue]);
+
+	return (
+		<div className="group" data-editing={edit}>
+			<input
+				type="text"
+				className={clsx(
+					"w-[200px] py-[2px] px-[4px] rounded-[4px] hidden group-data-[editing=true]:block",
+					"outline-none ring-[1px] ring-primary-900",
+					"text-white-900 text-[14px]",
+				)}
+				ref={inputRef}
+				data-edit={edit}
+				defaultValue={value ?? fallbackValue}
+				onBlur={() => updateValue()}
+				onKeyDown={(e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						updateValue();
+					}
+				}}
+			/>
+			<button
+				type="button"
+				className={clsx(
+					"py-[2px] px-[4px] rounded-[4px] group-data-[editing=true]:hidden",
+					"hover:bg-white-900/20",
+					"text-white-900 text-[14px]",
+					"cursor-default",
+				)}
+				onClick={() => setEdit(true)}
+			>
+				{value ?? fallbackValue}
+			</button>
+		</div>
+	);
+}
@@ -1,2 +1,3 @@
 export * from "./properties-panel";
 export * from "./node-dropdown";
+export * from "./editable-text";
@@ -1,4 +1,5 @@
-import clsx from "clsx/lite";
+"use client";
+
 import {
 	type ReactNode,
 	useCallback,
@@ -7,13 +8,18 @@ import {
 	useRef,
 	useState,
 } from "react";
+import { EditableText } from "./editable-text";
 
 export function PropertiesPanelRoot({
 	children,
 }: {
 	children: ReactNode;
 }) {
-	return <div className="h-full flex flex-col gap-[8px]">{children}</div>;
+	return (
+		<div className="h-full w-full flex flex-col gap-[8px] overflow-hidden">
+			{children}
+		</div>
+	);
 }
 
 export function PropertiesPanelHeader({
@@ -62,37 +68,12 @@ export function PropertiesPanelHeader({
 				<div className="w-[28px] h-[28px] bg-white-900 rounded-[4px] flex items-center justify-center">
 					{icon}
 				</div>
-				<div className="group" data-editing={edit}>
-					<input
-						type="text"
-						className={clsx(
-							"w-[200px] py-[2px] px-[4px] rounded-[8px] hidden group-data-[editing=true]:block",
-							"outline-none ring-[1px] ring-primary-900",
-							"text-white-900 text-[14px]",
-						)}
-						ref={inputRef}
-						data-edit={edit}
-						defaultValue={name ?? fallbackName}
-						onBlur={updateName}
-						onKeyDown={(e) => {
-							if (e.key === "Enter") {
-								e.preventDefault();
-								updateName();
-							}
-						}}
+				<div>
+					<EditableText
+						onChange={(value) => onChangeName?.(value)}
+						value={name}
+						fallbackValue={fallbackName}
 					/>
-					<button
-						type="button"
-						className={clsx(
-							"py-[2px] px-[4px] rounded-[8px] group-data-[editing=true]:hidden",
-							"hover:bg-white-900/20",
-							"text-white-900 text-[14px]",
-							"cursor-default",
-						)}
-						onClick={() => setEdit(true)}
-					>
-						{name ?? fallbackName}
-					</button>
 					{description && (
 						<p className="px-[5px] text-white-400 text-[10px]">{description}</p>
 					)}
@@ -108,5 +89,9 @@ export function PropertiesPanelContent({
 }: {
 	children: ReactNode;
 }) {
-	return <div className="px-[16px] h-full">{children}</div>;
+	return (
+		<div className="px-[16px] flex-1 h-full flex flex-col overflow-hidden">
+			{children}
+		</div>
+	);
 }
@@ -1,21 +1,36 @@
 import clsx from "clsx";
+import { useWorkflowDesigner } from "giselle-sdk/react";
 import { PlayIcon } from "lucide-react";
 import type { ReactNode } from "react";
+import { EditableText } from "../editor/properties-panel/ui";
 import { GiselleLogo } from "../icons";
 
 export function Header({
 	action,
 }: {
 	action?: ReactNode;
 }) {
+	const { data, updateName } = useWorkflowDesigner();
 	return (
 		<div className="h-[54px] pl-[24px] pr-[16px] flex items-center justify-between shrink-0">
-			<GiselleLogo className="fill-white-900 w-[70px] h-auto mt-[6px]" />
+			<div className="flex items-center gap-[8px] text-white-950">
+				<GiselleLogo className="fill-white-900 w-[70px] h-auto mt-[6px]" />
+				<Divider />
+				<EditableText
+					fallbackValue="Untitled"
+					onChange={updateName}
+					value={data.name}
+				/>
+			</div>
 			{action && <div className="flex items-center">{action}</div>}
 		</div>
 	);
 }
 
+function Divider() {
+	return <div className="text-[24px] font-[250]">/</div>;
+}
+
 export function RunButton({
 	onClick,
 }: {

@@ -17,7 +17,7 @@ export function Button({
 			className={clsx(
 				"p-[1px] h-[34px]",
 				"rounded-[8px] text-white-900",
-				"text-[14px] cursor-pointer",
+				"text-[14px] cursor-pointer font-accent",
 				"bg-linear-[var(--button-gradient-angle)] data-[loading=true]:animate-rotate-button-gradient-angle from-[hsl(0,_2%,_89%)]/60 via-[hsl(0,_2%,_89%)] to-[hsl(0,_0%,_36%)] from-30% via-50% to-100%",
 				"data-[loading=true]:cursor-wait",
 				className,

@@ -30,6 +30,7 @@ export type UIState = z.infer<typeof UIState>;
 
 export const Workspace = z.object({
 	id: WorkspaceId.schema,
+	name: z.string().optional(),
 	schemaVersion: WorkspaceSchemaVersion,
 	nodes: z.array(Node),
 	connections: z.array(Connection),