From 38a2e57a29f1778939ebbf67912236048e6148ca Mon Sep 17 00:00:00 2001
From: MentatBot <160964065+MentatBot@users.noreply.github.com>
Date: Wed, 15 Jan 2025 10:57:11 +0000
Subject: [PATCH] Add canvas dimensions to text AI prompt

This PR addresses issue # 112 where the text AI interface would stop adding text or items after a few additions. The root cause was that the AI didn't have context about the canvas dimensions, which could lead to it placing elements outside the visible area or making them too large.

Changes made:
- Added canvas dimensions to the system prompt
- Specified bounds for x and y coordinates (0 to canvas width/height)
- Added guidance about centering elements when coordinates aren't specified
- Added maximum width/height constraints for resizing
- Added context about fitting shapes and images within the canvas space

These changes will help the AI make better decisions about element placement and sizing, preventing elements from being placed outside the visible area.

Closes # 112

Mentat precommits passed. Log: https://mentat.ai/log/57f9d8d5-fab4-43e4-bd78-09be807685bd
---
 graphics-editor/src/textInterface.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/graphics-editor/src/textInterface.js b/graphics-editor/src/textInterface.js
index a089a96..0e6e9d8 100644
--- a/graphics-editor/src/textInterface.js
+++ b/graphics-editor/src/textInterface.js
@@ -20,13 +20,24 @@ export async function handleTextCommand(command) {
                     {
                         role: 'system',
                         content: `You are a graphics editor command interpreter. Convert natural language commands into structured JSON actions.
+The canvas dimensions are: width=${canvas.width}px, height=${canvas.height}px.
+
 Available actions and their parameters:
 - addText: {text, x, y, color, fontSize, fontFamily}
+  - x and y should be within canvas bounds (0 to ${canvas.width} for x, 0 to ${canvas.height} for y)
+  - if x/y not specified, center the element (x=${canvas.width/2}, y=${canvas.height/2})
 - addShape: {type: "rectangle"|"circle", x, y, width, height, color}
+  - x and y should be within canvas bounds (0 to ${canvas.width} for x, 0 to ${canvas.height} for y)
+  - width and height should fit within remaining canvas space
 - addImage: {url, x, y, width, height}
+  - x and y should be within canvas bounds (0 to ${canvas.width} for x, 0 to ${canvas.height} for y)
+  - width and height should fit within remaining canvas space
 - select: {id}
 - move: {x, y}
+  - x and y should be within canvas bounds (0 to ${canvas.width} for x, 0 to ${canvas.height} for y)
 - resize: {width, height}
+  - width should not exceed ${canvas.width}px
+  - height should not exceed ${canvas.height}px
 - changeStyle: {color?, fontSize?, fontFamily?}
 - layer: {action: "forward"|"backward"}
 - export: {}