Before, our prompts were just a string like "Translate this text:
user text" and just before being sent to the backend, it was
converted to an "messages" object compatible with OpenAI API like [{
"role": "user", "content": "Translate this text: user text"}].
Now, we use "messages" object directly when building the prompt
because in the near future we will create more complex prompts with
system content and user content so we will need "messages" object
dirrectly.
- Button was not added in MobileResponsiveAppBar
- Mobile behavior related scripts were not correctly added for web composer
- Mobile behavior related scripts return value was not properly handled for web composer
- In responsive web, bottomsheet modal clicks were intercepted by iframe behind
- Support tap in addition to hover for context menu
- Improve clamping for greater screen sizes to avoid Scribe getting off screen
- Set a padding to 0 to avoid random padding depending on screen sizes
Previosuly, we display Scribe mobile (bottomsheet) if platform was mobile, so also Android or iOS tablet.
Now we choose to display Scribe mobile relatively to display screens instead of platform to display the desktop Scribe (context menu) for tablets.
Because the Scribe mobile is a full screen modal, we do not see the
current content (so either the selected text or entire composer text)
when selecting our AI actions.
That's why we add here a scrollable card that displays the current
content.
In recent commits I separated how we could add text in the editor. So
we need to escape HTML in both method that add text:
insertTextInEditor and setTextInEditor.
I had to extract the HTML escape part of
convertTextContentToHtmlContent because when using setTextInEditor we
do not need to convert \n to <br>.
- Add getSavedSelection to check saved selection without consuming it
- Distinguish between setText (replace all) and insertText (at cursor) operations
- Fix replace callback to use setText when no selection exists
- Clean up saved selection state after restoration in HTML utils
- Move mobile editor focus and selection restore to appropriate callbacks
- Fix Scribe replace on mobile when opened from menu bar (to be complete
this fix needs this PR https://github.com/Enough-Software/enough_html_editor/pull/37)
- Ensure all mobile editor call are awaited
- Do not clear text if a selection has been restored (which mean we replace a selection)
- Avoid collapseToEnd crash
enough_html_editor uses execCommand to insert HTML. However
execCommand only works if the contenteditable element is focused. So
inserting or replacing Scribe result do not work if the user did not
click before in the composer.
Here we manually focus the contenteditable element to fix this before
inserting content.
When opening Scribe mobile modal, we now unfocus the composer to hide the keyboard and the selection start and end icons from the OS.
Add new methods to save, restore, and clear text selection in HTML editor. These methods allow preserving and restoring user selection state when opening the Scribe mobile modal so that the "replace" action still works.
Same features than Scribe desktop but as a full screen modal instead of a context menu.
Reuse menu and submenu components.
Reuse suggestion components.
Reuse 99% of Scribe desktop style.
The button was never displayed because the selectionchange event listener was loaded when the WebView was not entirely loaded so selectionchange event were never fired.
Now we setup selection listener when the WebView is loaded instead of created.
Because the HTML editor is different, we need a different selector to get the editable element.
We also need to add a small offset to the coordinates to avoid positionning the overlay icon above native selection UI in mobile. For example, Android adds a marker at the beginning and the end of the selection and we do not want to display the Scribe overlay icon above this marker.
Scribe is always composed of menu (aka category) and submenu (aka action) :
- submenu item UI was already in an UI only component. I moved it to items folder.
- menu item UI was mixed in a component with desktop related UX. So I extract the UI to create an UI only component. I moved it also to items folder.
In Scribe desktop, the suggestion is displayed in a popup.
In Scribe mobile, it will be displayed in a full screen modal.
But it share the same logic about loading, success and error.
So here I extract this logic and use it in the AI Scribe desktop to be able to use it later in AI Scribe mobile.
Even if all keys were translated, Scribe UI was always in default
language.
In short, it is not possible to load multiple localization delegates
with different .arb files. But we need these translations to be
located in a separate file because in the future we will move Scribe
in a separate module.
See
https://github.com/Innim/flutter_multiple_localization for more
explanation.
Collapsing a selection means removing it and keep the cursor at the
end. It will be needed by the scribe for "Insert" action where we
want to insert a text at the cursor even if the user selected text.
Before sending input to the LLM, we clean the composer input to
remove html tags. We relied on regex that we not complete enough and
could be bypassed easily. So let's use the html parser available in
Dart instead.
I also added some tests.
If it was opened at the top of the composer, it could go off screen to the top.
modalHeight was missing so the calculateModalPosition method could not protect the AI scribe menu to go off screen from the top.
- Button : the button with sparkle icon to display AI scribe
- Menu : the menu where you can select the action (eg: translate)
- Bar : the input where you can write a custom action
- Suggestion : the wrapper of the result of the LLM
This mixin leverages HTML callbacks that can be set by WebView editor
to send text selection event to the composer so the composer will
receive text selection event necessary to display buttons related to
text selection.
Théo Poizat