@manta-eu/react 0.11.0 → 0.13.0

package/src/routes/memories/components/MemoryPropertyFields.tsx

@@ -0,0 +1,288 @@
+import {
+  GQLMemorySchemaValueType,
+  type GQLMemorySchemaFieldsFragment,
+  type GQLMemorySchemaPropertyFieldsFragment,
+} from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
+import { Plus, X } from "lucide-react";
+import { match } from "ts-pattern";
+import {
+  computedProperties,
+  writableProperties,
+  type MemoryPropertyErrors,
+  type MemoryPropertyValues,
+} from "../memory-property-values";
+import { valueTypeLabels } from "../schemas/schema-form";
+import { DateValueInput } from "./DateValueInput";
+import { EntityValuePicker } from "./EntityValuePicker";
+import { Badge } from "#components/badge/index";
+import { Button } from "#components/button/index";
+import { Input, Textarea } from "#components/input/index";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import { cn } from "#lib/utils";
+
+const inlineOptionLimit = 4;
+// Radix Select has no empty value, so clearing an optional choice goes through a sentinel.
+const unsetChoice = "__unset__";
+
+type ValueInputProps = {
+  property: GQLMemorySchemaPropertyFieldsFragment;
+  id: string;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+};
+
+function ValueInput(props: ValueInputProps) {
+  const { property, id, value, error, onChange } = props;
+  const placeholder = `Enter ${property.label.toLowerCase()}`;
+  return match(property.valueType)
+    .with(GQLMemorySchemaValueType.LongText, () => (
+      <Textarea
+        id={id}
+        aria-label={property.label}
+        placeholder={placeholder}
+        value={value}
+        minRows={2}
+        maxRows={6}
+        error={error}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    ))
+    .with(GQLMemorySchemaValueType.Entity, () => (
+      <EntityValuePicker
+        id={id}
+        label={property.label}
+        value={value}
+        entityClass={property.entityClass ?? null}
+        error={error}
+        onChange={onChange}
+      />
+    ))
+    .with(GQLMemorySchemaValueType.Date, GQLMemorySchemaValueType.DateTime, (valueType) => (
+      <DateValueInput
+        id={id}
+        label={property.label}
+        withTime={valueType === GQLMemorySchemaValueType.DateTime}
+        min={property.minValue}
+        max={property.maxValue}
+        value={value}
+        error={error}
+        onChange={onChange}
+      />
+    ))
+    .with(
+      GQLMemorySchemaValueType.Text,
+      GQLMemorySchemaValueType.Integer,
+      GQLMemorySchemaValueType.Decimal,
+      GQLMemorySchemaValueType.Url,
+      GQLMemorySchemaValueType.Boolean,
+      (valueType) => (
+        <Input
+          id={id}
+          label={property.label}
+          hiddenLabel
+          placeholder={placeholder}
+          type={match(valueType)
+            .with(GQLMemorySchemaValueType.Integer, GQLMemorySchemaValueType.Decimal, () => "number")
+            .with(GQLMemorySchemaValueType.Url, () => "url")
+            .otherwise(() => "text")}
+          step={valueType === GQLMemorySchemaValueType.Decimal ? "any" : undefined}
+          min={property.minValue ?? undefined}
+          max={property.maxValue ?? undefined}
+          maxLength={property.maxLength ?? undefined}
+          value={value}
+          error={error}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      ),
+    )
+    .exhaustive();
+}
+
+type ChoiceButtonsProps = {
+  labelId: string;
+  choices: readonly { value: string; label: string; description?: string | null }[];
+  selected: readonly string[];
+  onToggle: (value: string) => void;
+};
+
+function ChoiceButtons(props: ChoiceButtonsProps) {
+  const { labelId, choices, selected, onToggle } = props;
+  return (
+    <div role="group" aria-labelledby={labelId} className="flex flex-wrap gap-1">
+      {choices.map((choice) => (
+        <Button
+          key={choice.value}
+          type="button"
+          variant={selected.includes(choice.value) ? "primary" : "tertiary"}
+          size="sm"
+          rounded="md"
+          aria-pressed={selected.includes(choice.value)}
+          title={choice.description ?? undefined}
+          onClick={() => onToggle(choice.value)}
+        >
+          {choice.label}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+type PropertyFieldProps = {
+  property: GQLMemorySchemaPropertyFieldsFragment;
+  values: readonly string[];
+  error?: string;
+  onChange: (values: string[]) => void;
+};
+
+function PropertyField(props: PropertyFieldProps) {
+  const { property, values, error, onChange } = props;
+  const id = `memory-property-${property.order}-${property.label.replace(/[^a-zA-Z0-9]/g, "-")}`;
+  const labelId = `${id}-label`;
+  const isBoolean = property.valueType === GQLMemorySchemaValueType.Boolean;
+  const choices = isBoolean
+    ? [
+        { value: "true", label: "Yes" },
+        { value: "false", label: "No" },
+      ]
+    : property.options.map((option) => ({
+        value: option.value,
+        label: option.label ?? option.value,
+        description: option.description,
+      }));
+
+  function toggle(value: string) {
+    if (values.includes(value)) onChange(values.filter((current) => current !== value));
+    else onChange(property.multiValued && !isBoolean ? [...values, value] : [value]);
+  }
+
+  const control = isPresent(choices) ? (
+    !property.multiValued && choices.length > inlineOptionLimit ? (
+      <Select
+        value={values[0] ?? ""}
+        onValueChange={(value) => onChange(isPresent(value) && value !== unsetChoice ? [value] : [])}
+      >
+        <SelectTrigger label={property.label} id={id} hiddenLabel error={error}>
+          <SelectValue placeholder={`Select ${property.label.toLowerCase()}`} />
+        </SelectTrigger>
+        <SelectContent>
+          {!property.required && <SelectItem value={unsetChoice}>Not set</SelectItem>}
+          {choices.map((choice) => (
+            <SelectItem key={choice.value} value={choice.value}>
+              {choice.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    ) : (
+      <ChoiceButtons labelId={labelId} choices={choices} selected={values} onToggle={toggle} />
+    )
+  ) : property.multiValued ? (
+    <div className="flex flex-col gap-2">
+      {(isPresent(values) ? values : [""]).map((value, index) => (
+        <div key={index} className="flex items-start gap-2">
+          <div className="min-w-0 flex-1">
+            <ValueInput
+              property={property}
+              id={index === 0 ? id : `${id}-${index}`}
+              value={value}
+              onChange={(next) =>
+                onChange((isPresent(values) ? values : [""]).map((current, i) => (i === index ? next : current)))
+              }
+            />
+          </div>
+          {values.length > 1 && (
+            <Button
+              type="button"
+              variant="tertiary"
+              size="base"
+              iconOnly
+              icon={X}
+              aria-label={`Remove ${property.label} value ${index + 1}`}
+              onClick={() => onChange(values.filter((_, i) => i !== index))}
+            />
+          )}
+        </div>
+      ))}
+      <Button
+        type="button"
+        variant="tertiary"
+        size="sm"
+        icon={Plus}
+        className="w-fit"
+        onClick={() => onChange([...(isPresent(values) ? values : [""]), ""])}
+      >
+        Add value
+      </Button>
+    </div>
+  ) : (
+    <ValueInput property={property} id={id} value={values[0] ?? ""} onChange={(next) => onChange([next])} />
+  );
+
+  return (
+    <div className="flex flex-col gap-2 rounded-lg bg-faint p-3">
+      <div className="flex items-center gap-2">
+        <label id={labelId} htmlFor={id} className="flex-1 typography-small-medium text-default-foreground">
+          {property.label}
+          {property.required && <span className="ml-1 text-error-foreground">*</span>}
+        </label>
+        <span className="shrink-0 rounded border border-muted-border bg-card px-1.5 py-0.5 typography-tiny text-muted-foreground">
+          {valueTypeLabels[property.valueType]}
+          {property.unit ? ` · ${property.unit}` : ""}
+          {property.multiValued ? " · list" : ""}
+        </span>
+      </div>
+      {property.description && <p className="typography-tiny text-muted-foreground">{property.description}</p>}
+      {control}
+      {error && <p className="typography-small text-error-foreground">{error}</p>}
+    </div>
+  );
+}
+
+type ComputedPropertyFieldProps = { property: GQLMemorySchemaPropertyFieldsFragment; values: string[] };
+
+function ComputedPropertyField(props: ComputedPropertyFieldProps) {
+  const { property, values } = props;
+  return (
+    <div className="flex flex-col gap-1.5 rounded-lg border border-dashed border-muted-border p-3">
+      <div className="flex items-center gap-2">
+        <span className="flex-1 typography-small-medium text-default-foreground">{property.label}</span>
+        <Badge variant="info" size="sm">
+          Computed by a rule
+        </Badge>
+      </div>
+      {property.description && <p className="typography-tiny text-muted-foreground">{property.description}</p>}
+      <p className={cn("typography-small", isPresent(values) ? "text-default-foreground" : "text-muted-foreground")}>
+        {isPresent(values) ? values.join(", ") : "Not computed yet"}
+      </p>
+    </div>
+  );
+}
+
+export type MemoryPropertyFieldsProps = {
+  schema: GQLMemorySchemaFieldsFragment;
+  values: MemoryPropertyValues;
+  errors: MemoryPropertyErrors;
+  onChange: (path: string, values: string[]) => void;
+};
+
+export function MemoryPropertyFields(props: MemoryPropertyFieldsProps) {
+  const { schema, values, errors, onChange } = props;
+  return (
+    <>
+      {writableProperties(schema).map((property) => (
+        <PropertyField
+          key={property.path}
+          property={property}
+          values={values[property.path] ?? []}
+          error={errors[property.path]}
+          onChange={(next) => onChange(property.path, next)}
+        />
+      ))}
+      {computedProperties(schema).map((property) => (
+        <ComputedPropertyField key={property.path} property={property} values={values[property.path] ?? []} />
+      ))}
+    </>
+  );
+}

package/src/routes/memories/components/RuleDraftDialog.tsx

@@ -0,0 +1,35 @@
+import { anthropicPrimaryModel, isOperatorAllowedModel } from "@manta-eu/client/shared/model";
+import { useRef } from "react";
+import { useNavigate } from "react-router";
+import type { RuleDraftRequest } from "../schemas/schema-rule-context";
+import { useSelectedModel } from "#hooks/useSelectedModel";
+import { useAuthContext } from "#providers/AuthContext";
+import { CreateRuleChatModal } from "#routes/rules/components/CreateRuleChatModal";
+
+export type RuleDraftDialogProps = {
+  request: RuleDraftRequest | null;
+  onClose: () => void;
+};
+
+export function RuleDraftDialog(props: RuleDraftDialogProps) {
+  const { request, onClose } = props;
+  const navigate = useNavigate();
+  const { allowedModels } = useAuthContext();
+  const primaryModel = allowedModels?.[0] ?? anthropicPrimaryModel;
+  const [model] = useSelectedModel(isOperatorAllowedModel(primaryModel) ? primaryModel : anthropicPrimaryModel);
+  const lastRequest = useRef(request);
+  if (request !== null) lastRequest.current = request;
+  const shown = request ?? lastRequest.current;
+
+  return (
+    <CreateRuleChatModal
+      key={shown?.key}
+      open={request !== null}
+      onOpenChange={(open) => !open && onClose()}
+      subject={shown?.subject}
+      ruleSuggestions={shown?.suggestions}
+      onDraftStarted={() => void navigate("/rules", { state: { fromChat: true } })}
+      model={model}
+    />
+  );
+}