Create data flow diagram

[edloidas]

Using the https://app.eraser.io create diagrams:

• [x] Create a components diagram, splitting the whole app into several parts.
• [x] Iterate this diagram by adding data flow to it.
• [x] Add variation of it, showing MVP.
• [x] Add a variation of it, showing the desired functionality.

[edloidas]

https://app.eraser.io/workspace/WLZZgaJrJANBXcaOkZIA

[edloidas]

[edloidas]

[edloidas]

Legend

Page: A Live Edit page component or Wizard's edit panel form. We only support CKEditor for now.

Widget: A UI entry point to communicate with Enonic Saga. Consists of Content viewer to show selected comonent, TextArea for user input and Send button to send request. TextArea can be replaced by the dropdow for now, allowing to select simple commands, like Expand, Simplify, etc.

Server: A prozy to transform user inputs and create a stable connection between UI and OpenAI endpoint.

OpenAI: An endpoint with access to the preconfigures assistant, running on GPT-4 Turbo.

Communication

Communication between Enonic and OpenAI can be done in two ways:

1. Reguar POST requests: may take several seconds to complete. platform.openai.com/docs/api-reference/making-requests
2. Server Sent Events (SSE): Data is sent via chunks. It's faster to show new data, but harder to receive it and format after. platform.openai.com/docs/api-reference/chat/streaming

Data

Page > Widget: Not only Text, but actually a Selection, cursor Position and the whole content of the input.

Widget > Widget: Adding Context means apssing additional metadata, like content Display Name, Description, Tags.