Update to newest sagittarius version

.env.local

@@ -8,7 +8,7 @@ PLAYGROUND_MOCK_DIR=#./mock
 PLAYGROUND_FRAME_ANCESTORS=#"'self'"
 
 NEXT_PUBLIC_SCULPTOR_VERSION=0.0.0
-NEXT_PUBLIC_PICTOR_VERSION=0.16.0
+NEXT_PUBLIC_PICTOR_VERSION=0.17.0
 NEXT_PUBLIC_ALLOWED_REDIRECT_DOMAINS=*.code0.tech,*.codezero.build
 NEXT_PUBLIC_SUBSCRIPTION_URL=https://codezero.build/subscription
 

package.json

@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.9",
-    "@code0-tech/pictor": "^0.16.0",
-    "@code0-tech/triangulum": "^0.32.0",
+    "@code0-tech/pictor": "^0.17.0",
+    "@code0-tech/triangulum": "^0.33.0",
     "@code0-tech/tucana": "^0.0.82",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lint": "^6.9.5",

src/packages/ce/src/ai/components/AIChatComponent.tsx

@@ -4,7 +4,9 @@ import {
     ButtonGroup,
     Card,
     EditorInput,
-    Flex,
+    EditorInputValue,
+    EditorTokenRule,
+    Flex, getSize,
     Progress,
     SelectContent,
     SelectItem,
@@ -29,6 +31,8 @@ import {useAIGenerationStore} from "@edition/ai/hooks/AI.generation.hook";
 import {AIGeneratingMessageComponent} from "@edition/ai/components/AIGeneratingMessageComponent";
 import BorderBeam from "border-beam";
 
+const EMPTY_TOKEN_RULES: EditorTokenRule[] = []
+
 export interface AIChatComponentProps {
     projectId: NamespaceProject['id']
     flowId?: Flow['id']
@@ -135,9 +139,9 @@ export const AIChatComponent: React.FC<AIChatComponentProps> = (props) => {
         <Card paddingSize={"xs"} color={"secondary"} w={"var(--radix-popper-anchor-width)"}>
 
             <BorderBeam style={{
-                marginTop: "-0.6rem",
-                marginLeft: "-0.6rem",
-                marginRight: "-0.6rem"
+                marginTop: `calc(-1 * (${getSize("xs")} - 0.1rem))`,
+                marginLeft: `calc(-1 * (${getSize("xs")} - 0.1rem))`,
+                marginRight: `calc(-1 * (${getSize("xs")} - 0.1rem))`
 
             }} strength={1} theme={"dark"} size={aiLoading ? "line" : "md"} duration={aiLoading ? 2 : 5}>
                 <Card color={"primary"} paddingSize={"xxs"} pos={"relative"}>
@@ -189,7 +193,8 @@ export const AIChatComponent: React.FC<AIChatComponentProps> = (props) => {
                         ) : (
                             <EditorInput
                                 key={prompt}
-                                value={prompt}
+                                initialValue={prompt}
+                                tokenRules={EMPTY_TOKEN_RULES}
                                 onChange={(value) => {
                                     setPromptState(value)
                                 }}
@@ -199,7 +204,9 @@ export const AIChatComponent: React.FC<AIChatComponentProps> = (props) => {
                                         boxShadow: "none"
                                     }
                                 }}
-                                placeholder={"Describe what you want to edit..."}/>
+                                placeholder={"Describe what you want to edit..."}>
+                                <EditorInputValue/>
+                            </EditorInput>
                         )
                     }
                     <Spacing spacing={"xxs"}/>

src/packages/ce/src/ai/services/fragments/AI.flow.fragment.graphql

@@ -27,6 +27,47 @@ fragment AIFlow on AiGenerationFlow {
                 ... on AiGenerationLiteralValue {
                     __typename
                     value
+                    references {
+                        __typename
+                        signature
+                        value {
+                            __typename
+                            ... on AiGenerationLiteralValue {
+                                __typename
+                                value
+                            }
+                            ... on AiGenerationReferenceValue {
+                                __typename
+                                id
+                                nodeFunctionId
+                                inputIndex
+                                inputTypeIdentifier
+                                parameterIndex
+                                referencePath {
+                                    __typename
+                                    path
+                                    arrayIndex
+                                }
+                            }
+                            ... on AiGenerationSubFlowValue {
+                                __typename
+                                startingNodeId
+                                signature
+                                settings {
+                                    __typename
+                                    identifier
+                                    defaultValue
+                                    hidden
+                                    optional
+                                }
+                                functionDefinition {
+                                    __typename
+                                    id
+                                    identifier
+                                }
+                            }
+                        }
+                    }
                 }
                 ... on AiGenerationReferenceValue {
                     __typename

src/packages/ce/src/ai/util/AI.flow.mapper.ts

@@ -16,7 +16,7 @@ const FALLBACK_FLOW_NAME = "Untitled flow"
 const mapValue = (value?: AiGenerationNodeValue | null): NodeParameterValueInput => {
     switch (value?.__typename) {
         case "AiGenerationLiteralValue":
-            return {literalValue: (value as AiGenerationLiteralValue).value ?? null}
+            return {literalValue: {value: (value as AiGenerationLiteralValue).value ?? null}}
         case "AiGenerationReferenceValue": {
             const v = value as AiGenerationReferenceValue
             return {
@@ -56,6 +56,21 @@ const mapValue = (value?: AiGenerationNodeValue | null): NodeParameterValueInput
     }
 }
 
+const mapParameterValue = (value?: AiGenerationNodeValue | null): NodeParameterValueInput => {
+    if (value?.__typename === "AiGenerationLiteralValue" && value.references && value.references.length > 0) {
+        return {
+            literalValue: {
+                value: value.value ?? null,
+                references: value.references.map(ref => ({
+                    signature: ref.signature ?? "",
+                    value: mapValue(ref.value),
+                })),
+            },
+        }
+    }
+    return mapValue(value)
+}
+
 export const ensureUniqueFlowName = (name: string, existingNames: string[]): string => {
     if (!existingNames.includes(name)) return name
     let i = 2
@@ -83,7 +98,7 @@ export const mapAiGenerationFlowToFlowInput = (
         functionDefinitionId: node?.functionDefinition?.id!,
         parameters: (node?.parameters ?? []).map<NodeParameterInput>(p => ({
             cast: p?.cast ?? undefined,
-            value: mapValue(p?.value),
+            value: mapParameterValue(p?.value),
         })),
     }))
 

src/packages/ce/src/datatype/components/inputs/json/DataTypeJSONInputComponent.tsx

@@ -71,9 +71,7 @@ export const DataTypeJSONInputComponent: React.FC<DataTypeJSONInputComponentProp
                                              formValidation?.setValue?.(value)
                                              onChangeDebounced(value)
                                          }}
-                                         wrapperComponent={{
-                                             onClick: () => handleEntryClick(undefined)
-                                         }}
+                                         onClick={() => handleEntryClick(undefined)}
                                          suggestions={suggestions}
                                          formValidation={formValidation}>
                 <DataTypeJSONInputTreeComponent

src/packages/ce/src/datatype/components/inputs/number/DataTypeNumberInputComponent.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {DataTypeInputComponentProps} from "../DataTypeInputComponent";
-import {EditorInput, InputDescription, InputLabel} from "@code0-tech/pictor";
+import {EditorInput, EditorInputValue, EditorTokenRule, InputDescription, InputLabel} from "@code0-tech/pictor";
 import {useDebouncedCallback} from "use-debounce";
 import {
     LiteralValue,
@@ -14,6 +14,8 @@ import {DataTypeInputValueComponent} from "@edition/datatype/components/inputs/D
 
 export type DataTypeNumberInputComponentProps = DataTypeInputComponentProps
 
+const EMPTY_TOKEN_RULES: EditorTokenRule[] = []
+
 export const DataTypeNumberInputComponent: React.FC<DataTypeNumberInputComponentProps> = (props) => {
 
     const {formValidation, title, initialValue, description, suggestions, onChange} = props
@@ -38,7 +40,8 @@ export const DataTypeNumberInputComponent: React.FC<DataTypeNumberInputComponent
             onChangeDebounced(value)
         }} suggestions={suggestions}
                                      formValidation={formValidation}>
-            <EditorInput value={(defaultValue as LiteralValue)?.value?.toString()}
+            <EditorInput initialValue={(defaultValue as LiteralValue)?.value?.toString()}
+                         tokenRules={EMPTY_TOKEN_RULES}
                          onChange={(value) => {
                              if (typeof value === "string") {
                                  formValidation?.setValue?.(value ? {
@@ -59,7 +62,9 @@ export const DataTypeNumberInputComponent: React.FC<DataTypeNumberInputComponent
                                  onChangeDebounced(value)
                              }}/>
                          }
-                         rightType={"action"}/>
+                         rightType={"action"}>
+                <EditorInputValue/>
+            </EditorInput>
         </DataTypeInputValueComponent>
     </>, [formValidation, defaultValue])
 }

src/packages/ce/src/datatype/components/inputs/sub-flow/DataTypeSubFlowInputComponent.tsx

@@ -54,10 +54,8 @@ export const DataTypeSubFlowInputComponent: React.FC<DataTypeSubFlowInputCompone
         <InputDescription>{description}</InputDescription>
         <DataTypeInputValueComponent inside
                                      showSuggestions={false}
-                                     wrapperComponent={{
-                                         onClick: () => {
-                                             setSuggestionDialogOpen(true)
-                                         }
+                                     onClick={() => {
+                                         setSuggestionDialogOpen(true)
                                      }}
                                      initialValue={initialValue}
                                      onChange={(value) => {

src/packages/ce/src/datatype/components/inputs/text/DataTypeTextInputComponent.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {DataTypeInputComponentProps} from "../DataTypeInputComponent";
-import {EditorInput, InputDescription, InputLabel} from "@code0-tech/pictor";
+import {EditorInput, EditorInputValue, EditorTokenRule, InputDescription, InputLabel} from "@code0-tech/pictor";
 import {useDebouncedCallback} from "use-debounce";
 import {
     LiteralValue,
@@ -14,6 +14,8 @@ import {DataTypeInputValueComponent} from "@edition/datatype/components/inputs/D
 
 export type DataTypeTextInputComponentProps = DataTypeInputComponentProps
 
+const EMPTY_TOKEN_RULES: EditorTokenRule[] = []
+
 export const DataTypeTextInputComponent: React.FC<DataTypeTextInputComponentProps> = (props) => {
 
     const {formValidation, title, initialValue, description, suggestions, onChange} = props
@@ -34,7 +36,8 @@ export const DataTypeTextInputComponent: React.FC<DataTypeTextInputComponentProp
             formValidation?.setValue?.(value)
             onChangeDebounced(value)
         }} suggestions={suggestions} formValidation={formValidation}>
-            <EditorInput value={(defaultValue as LiteralValue)?.value?.toString()}
+            <EditorInput initialValue={(defaultValue as LiteralValue)?.value?.toString()}
+                         tokenRules={EMPTY_TOKEN_RULES}
                          onChange={value => {
                              if (typeof value === "string") {
                                  formValidation?.setValue?.(value ? {__typename: "LiteralValue", value: value} : null)
@@ -52,7 +55,9 @@ export const DataTypeTextInputComponent: React.FC<DataTypeTextInputComponentProp
                                  onChangeDebounced(value)
                              }}/>
                          }
-                         rightType={"action"}/>
+                         rightType={"action"}>
+                <EditorInputValue/>
+            </EditorInput>
         </DataTypeInputValueComponent>
     </>, [formValidation, defaultValue])
 }

src/packages/ce/src/flow/components/FlowCreateDialogComponent.tsx

@@ -362,7 +362,8 @@ export const FlowCreateDialogComponent: React.FC<FlowCreateDialogComponentProps>
                     data-qa-selector={"flow-create-name"}
                     description={"You can choose a name here and only use alphanumeric names."}
                     title={"Name of the flow"}
-                    {...inputs.getInputProps("name")}/>
+                    {...inputs.getInputProps("name")}
+                    onChange={() => validate("name")}/>
                 <Spacing spacing={"xl"}/>
                 <Flex justify={"space-between"} align={"center"}>
                     {flowTypeId ? (

src/packages/ce/src/flow/components/FlowNameInputComponent.tsx

@@ -1,48 +1,24 @@
 import React from "react";
-import {Badge, InputSuggestion, InputSyntaxSegment, TextInput, TextInputProps} from "@code0-tech/pictor"
+import {Badge, EditorInput, EditorInputProps, EditorInputValue, EditorTokenRule} from "@code0-tech/pictor"
 
-export interface FlowNameInputComponentProps extends TextInputProps {
+export interface FlowNameInputComponentProps extends EditorInputProps {
 
 }
 
 export const FlowNameInputComponent: React.FC<FlowNameInputComponentProps> = (props) => {
 
-    const {...rest} = props
-
-    const transformSyntax = (
-        value?: string | null,
-        _: (InputSuggestion | any)[] = [],
-    ): InputSyntaxSegment[] => {
-
-        const normalizePath = (s: string) => {
-            const r = [], b = ""
-            let buf = b
-            s.split("").forEach(c =>
-                c === "/"
-                    ? (buf && r.push(buf), buf = "", r.push("/"))
-                    : buf += c
-            )
-            buf && r.push(buf)
-            return r
-        };
-        const splitValue = normalizePath(value ?? "")
-        let cursor = 0
-
-        return splitValue.map((value, index) => {
-            const segment = {
-                type: splitValue.length - 1 !== index ? "block" : "text",
-                value: value,
-                start: cursor,
-                end: cursor + value.length,
-                visualLength: splitValue.length - 1 !== index ? 1 : value.length,
-                content: splitValue.length - 1 !== index ?
-                    <Badge color={value == "/" ? "warning" : "info"}>{value}</Badge> : value,
-            }
-            cursor += value.length
-            return [segment]
-        }).flat() as InputSyntaxSegment[]
-
-    }
-
-    return <TextInput transformSyntax={transformSyntax} {...rest}/>
+    const tokenRules: EditorTokenRule[] = [
+        {
+            pattern: /[^/]+(?=\/)/g,
+            wrap: (_text, children) => <Badge color={"info"}>{children}</Badge>,
+        },
+        {
+            pattern: /\//g,
+            wrap: (_text, children) => <Badge color={"warning"}>{children}</Badge>,
+        },
+    ]
+
+    return <EditorInput singleLine tokenRules={tokenRules} {...props}>
+        <EditorInputValue/>
+    </EditorInput>
 }

src/packages/ce/src/flow/components/FlowRenameDialogComponent.tsx

@@ -63,7 +63,8 @@ export const FlowRenameDialogComponent: React.FC<FlowRenameDialogComponentProps>
                     <FlowNameInputComponent
                         description={"You can choose a new name here and only use alphanumeric names."}
                         title={props.contextData.type == "item" ? "Name of the flow" : "Name of the folder"}
-                        {...inputs.getInputProps("path")}/>
+                        {...inputs.getInputProps("path")}
+                        onChange={() => validate("path")}/>
                 </div>
                 <Flex justify={"space-between"} align={"center"}>
                     <DialogClose asChild>