[🌟 Bounty] feat: OpenAI Function Calling editor — JSON schema UI

[zhangyei1976-dotcom]

OpenAI Function Calling Support — Issue #244

Adds a visual JSON schema editor for defining OpenAI function calling definitions within Pezzo's prompt editor.

New Components

FunctionEditMode (components/prompts/editor/function/FunctionEditMode.tsx)

• Full visual editor for function definitions — no raw JSON typing required
• Supports multiple functions, each with named parameters
• Parameter fields: name, type (string/number/boolean/object/array), description, required toggle, enum values
• Drag-and-drop parameter reordering via react-beautiful-dnd
• Add/remove functions and parameters with one click

FunctionCallSettingsCard (components/prompts/editor/function/FunctionCallSettingsCard.tsx)

• Real-time JSON preview of the current function definitions
• Shows output in OpenAI-compatible format
• Collapses when no functions are defined

Architecture

• Uses the existing EditorContext form via react-hook-form
• Reads/writes content.functions on the form state
• Backend integration: once the function object is set in the form, the existing GraphQL mutations persist it automatically
• Follows the same patterns as ChatEditMode (drag-drop, form integration, @pezzo/ui components)

How to integrate into PromptEditView

// In PromptEditView.tsx, add a "Functions" tab:
<TabsTrigger value="functions">
  <BracesIcon className="h-4 w-4 mr-1" />
  Functions
</TabsTrigger>

// And the tab content:
<TabsContent value="functions">
  <FunctionEditMode />
  <FunctionCallSettingsCard />
</TabsContent>

Closes #244

[overcut-ai]

Completed Working on "Code Review"

✅ Review submitted: COMMENT. Total comments: 4 across 2 files.

✅ Workflow completed successfully.

---

👉 View complete log

[overcut-ai]

Thanks for the implementation — I’ve summarized the already-posted review findings below.

Findings summary

• 4 MAJOR issues identified (no BLOCKER/CRITICAL findings)
• Affected files: 2
  • apps/console/src/components/prompts/editor/function/FunctionCallSettingsCard.tsx
  • apps/console/src/components/prompts/editor/function/FunctionEditMode.tsx

Key themes

1. State synchronization risks between local component state and react-hook-form source-of-truth.
2. Data normalization/identity gaps for nested editable items (missing stable ids, index-based keys).
3. Schema validity edge cases in JSON preview generation when required input fields are incomplete.

Recommended next steps

1. Ensure function/parameter UI state is derived from or synced to watched form values to avoid stale edits.
2. Normalize loaded function/parameter objects by assigning stable identifiers when missing; avoid index-based React keys.
3. Filter/validate invalid parameter entries (e.g., blank names) before generating schema preview and required arrays.

Once these MAJOR issues are addressed, this feature should be in a much safer state for merge.

[overcut-ai]

[major]: The preview includes every parameter row without validating p.name, so empty names become "" keys in parameters.properties and can also appear in required. This generates an invalid/misleading OpenAI schema preview when users leave a parameter name blank.

Filter parameters before mapping/required generation (e.g., const validParams = (f.parameters || []).filter(p => p.name?.trim())) and use validParams for both properties and required.

[overcut-ai]

[major]: The component initializes local functions state from form.getValues("content") once and never re-syncs, so switching prompts or async form resets can leave the UI editing stale data while the form holds different content.functions.

Derive functions from useWatch({ control: form.control, name: "content.functions" }) (or sync local state in an effect on watched value) so UI always reflects current form state.

[overcut-ai]

[major]: New parameters get id values, but loaded parameters from persisted content.functions may not include id; this causes Draggable to receive undefined draggableId and update/remove operations keyed by param.id to fail.

Normalize loaded parameters on read by assigning stable ids when missing (e.g., map parameters and inject generated ids before rendering/updating).

[overcut-ai]

[major]: Using key={fi} for function cards causes React to reuse DOM/state by position. After removing a function, inputs can appear to jump between cards or keep stale values, which is risky for nested editable forms.

Add a stable per-function identifier and use it as the React key (and ideally for updates), rather than array index.