Added example

1 files changed, 196 insertions, 1 deletions

diff --git a/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts b/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts
index 405949c1e..b4c21f6e3 100644
--- a/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts
+++ b/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts
@@ -96,7 +96,202 @@ Example: To change document height, disable auto-height and set height in a sing
 {... inputs: { action: "edit", documentId: "doc123", fieldEdits: [
   { fieldName: "layout_autoHeight", fieldValue: false },
   { fieldName: "height", fieldValue: 300 }
-]}}`;
+]}}
+  
+
+Here is a detailed example:
+
+<interaction description="Using DocumentMetadataTool to create and align a diagram with its notes">
+    <stage number="1" role="user">
+        <query>Create a flow-chart of neurotransmitter release at a synapse, and place a notes box directly underneath that explains each step.</query>
+    </stage>
+
+    <!--  CREATE THE DIAGRAM -->
+    <stage number="2" role="assistant">
+        <thought>
+            I will create a DiagramBox containing a Mermaid flow-chart. After that, I'll make a notes document, read the diagram’s metadata, and then move the notes so it lines up beneath the chart.
+        </thought>
+        <action>documentMetadata</action>
+    </stage>
+
+    <stage number="3" role="user">
+        <action_rules>***Action rules omitted***</action_rules>
+    </stage>
+
+    <stage number="4" role="assistant">
+        <action_input>
+            <action_input_description>Creating a DiagramBox with a Mermaid chart of neurotransmitter release.</action_input_description>
+            <inputs>
+                <action>create</action>
+                <title>Synaptic Release Flowchart</title>
+                <data>graph TD; A(Vesicle docks)-->B(Ca²⁺ influx); B-->C(Vesicle fuses); C-->D(Neurotransmitter released)</data>
+                <doc_type>diagram</doc_type>
+            </inputs>
+        </action_input>
+    </stage>
+
+    <stage number="5" role="user">
+        <observation>
+            <chunk chunk_id="9f2c43c8-0a16-4c12-987b-b813d2f7b1ee" chunk_type="text">
+                Document created successfully.
+                Document ID: 9f2c43c8-0a16-4c12-987b-b813d2f7b1ee
+                Type: diagram
+                Title: "Synaptic Release Flowchart"
+
+                The document has been created with default dimensions and positioning.
+                …
+                Full metadata for the created document:
+                { /* huge JSON omitted for brevity */ }
+            </chunk>
+        </observation>
+    </stage>
+
+    <!--  CREATE THE NOTES DOC -->
+    <stage number="6" role="assistant">
+        <thought>
+            I will create a plain-text notes document that summarises the diagram’s steps.
+        </thought>
+        <action>documentMetadata</action>
+    </stage>
+
+    <stage number="7" role="user">
+        <action_rules>***Action rules omitted***</action_rules>
+    </stage>
+
+    <stage number="8" role="assistant">
+        <action_input>
+            <action_input_description>Creating a text document for explanatory notes.</action_input_description>
+            <inputs>
+                <action>create</action>
+                <title>Synaptic Release – Notes</title>
+                <data>This diagram shows vesicle docking, calcium-triggered fusion, and neurotransmitter release into the synaptic cleft.</data>
+                <doc_type>note</doc_type>
+            </inputs>
+        </action_input>
+    </stage>
+
+    <stage number="9" role="user">
+        <observation>
+            <chunk chunk_id="c8e3f4b9-7d2e-462a-a444-61e8e9ff0c7f" chunk_type="text">
+                Document created successfully.
+                Document ID: c8e3f4b9-7d2e-462a-a444-61e8e9ff0c7f
+                Type: note
+                Title: "Synaptic Release – Notes"
+                …
+                Full metadata for the created document:
+                { /* huge JSON omitted for brevity */ }
+            </chunk>
+        </observation>
+    </stage>
+
+    <!--  READ DIAGRAM METADATA -->
+    <stage number="10" role="assistant">
+        <thought>
+            I'll fetch the diagram’s width, height, and position so I can align the notes box underneath it.
+        </thought>
+        <action>documentMetadata</action>
+    </stage>
+
+    <stage number="11" role="user">
+        <action_rules>***Action rules omitted***</action_rules>
+    </stage>
+
+    <stage number="12" role="assistant">
+        <action_input>
+            <action_input_description>Getting metadata for the diagram document.</action_input_description>
+            <inputs>
+                <action>get</action>
+                <documentId>9f2c43c8-0a16-4c12-987b-b813d2f7b1ee</documentId>
+            </inputs>
+        </action_input>
+    </stage>
+
+    <stage number="13" role="user">
+        <observation>
+            <chunk chunk_id="9f2c43c8-0a16-4c12-987b-b813d2f7b1ee" chunk_type="text">
+                {
+                  "x": 100,
+                  "y": 100,
+                  "width": 600,
+                  "height": 300,
+                  "layout_autoWidth": false,
+                  "layout_autoHeight": false
+                }
+            </chunk>
+        </observation>
+    </stage>
+
+    <!--  MOVE & SIZE THE NOTES DOC -->
+    <stage number="14" role="assistant">
+        <thought>
+            The diagram ends at y = 100 + 300 = 400.  
+            I’ll move the notes to x = 100, y = 420 (a 20-px gap) and expand its width to 600 px.
+        </thought>
+        <action>documentMetadata</action>
+    </stage>
+
+    <stage number="15" role="user">
+        <action_rules>***Action rules omitted***</action_rules>
+    </stage>
+
+    <stage number="16" role="assistant">
+        <action_input>
+            <action_input_description>Editing the notes document’s position and size.</action_input_description>
+            <inputs>
+                <action>edit</action>
+                <documentId>c8e3f4b9-7d2e-462a-a444-61e8e9ff0c7f</documentId>
+                <fieldEdits>[
+                    {"fieldName":"layout_autoWidth","fieldValue":false},
+                    {"fieldName":"width","fieldValue":600},
+                    {"fieldName":"x","fieldValue":100},
+                    {"fieldName":"y","fieldValue":420}
+                ]</fieldEdits>
+            </inputs>
+        </action_input>
+    </stage>
+
+    <stage number="17" role="user">
+        <observation>
+            <chunk chunk_id="c8e3f4b9-7d2e-462a-a444-61e8e9ff0c7f" chunk_type="text">
+                Successfully edited 4 fields on document c8e3f4b9-7d2e-462a-a444-61e8e9ff0c7f.
+                New position: (x:100, y:420)  Width:600
+            </chunk>
+        </observation>
+    </stage>
+
+    <!--  FINAL ANSWER -->
+    <stage number="18" role="assistant">
+        <thought>
+            Both documents are now created and perfectly aligned; I can summarise the result.
+        </thought>
+        <answer>
+            <grounded_text citation_index="1">
+                A **DiagramBox** depicting neurotransmitter release was created at **(100 px, 100 px)**, sized **600 × 300 px**.
+            </grounded_text>
+            <grounded_text citation_index="2">
+                A **notes document** was then resized to **600 px** wide and moved to **(100 px, 420 px)**—20 px below the diagram—to keep the explanation directly beneath the visualization.
+            </grounded_text>
+            <normal_text>
+                This layout ensures viewers can read the synopsis while referring to the flow-chart above.
+            </normal_text>
+            <citations>
+                <citation index="1" chunk_id="9f2c43c8-0a16-4c12-987b-b813d2f7b1ee" type="text"></citation>
+                <citation index="2" chunk_id="c8e3f4b9-7d2e-462a-a444-61e8e9ff0c7f" type="text"></citation>
+            </citations>
+            <follow_up_questions>
+                <question>Would you like to tweak the diagram’s styling (e.g., colours or fonts)?</question>
+                <question>Should I link external references or papers in the notes?</question>
+                <question>Do you want similar diagrams for other neural processes?</question>
+            </follow_up_questions>
+            <loop_summary>
+                The assistant used **DocumentMetadataTool** four times:  
+                1) **create** DiagramBox → 2) **create** notes document → 3) **get** diagram metadata → 4) **edit** notes position/size.  
+                This demonstrates creating, inspecting, and aligning documents within a Freeform view.
+            </loop_summary>
+        </answer>
+    </stage>
+</interaction>
+`;
 
 // Extensive usage guidelines for the tool
 const citationRules = `USAGE GUIDELINES: