[BUILD-415] feat: Add AnkiHub AI to reviewer webview

RisingOrange commented 4 months ago

Adds the AnkiHub AI button and iframe to the reviewer webview.

Proposed changes

Add AnkiHub AI UI to the reviewer webview. Use webview_will_set_content hook to inject ankihub_ai.js to the reviewer web content. ankihub_ai.js sets up the AnkiHub AI button and firame. The button is used for toggling the visibility of the iframe.
ankihub_ai.js needs images for the button icons. These images are copied into Anki's media folder to make them accessible from the webview (they are copied in entry_point._copy_web_media_to_media_folder).
Protect feature using chatbot feature flag

How to reproduce

Activate the "chatbot" feature flag for you
Comment out this code: https://github.com/ankipalace/ankihub_addon/blob/dce99deda1ca0812153f167d1e9d132ebe8e672c/ankihub/gui/reviewer.py#L105-L107
Choose a deck from Anki's main window and start the reviewer
The AnkiHub AI button should show up
Click the button to open the AnkiHub AI iframe
The iframe won't load the AnkiHub AI page yet, because we need to set some decorators on the chatbot view on the web-app. (It worked when I tested it against the branch of this POC PR: https://github.com/ankipalace/ankihub/pull/2120)

Screenshots and videos

The screenshot shows the iframe loading the flashcard selector page, instead of the chatbot page. This is just for testing.

Comments

For now, it's simpler to inject the javascript into the reviewer webview, instead of adding it to the note type template. This way we...
- can include the credentials in the javascript without them being stored on the note type where they would be somewhat exposed.
- don't have to add logic to the note type javascript to not show the AnkiHub AI on mobile
However, we can't use this method for showing the AnkiHub AI UI on mobile.
This doesn't pass the Anki note id of the current node to the view yet. I don't know how it should be passed yet.

codecov[bot] commented 4 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 87.64%. Comparing base (ce0a928) to head (681e0fd). Report is 2 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #976 +/- ## ========================================== + Coverage 87.49% 87.64% +0.14% ========================================== Files 66 66 Lines 6685 6717 +32 ========================================== + Hits 5849 5887 +38 + Misses 836 830 -6 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

RisingOrange commented 4 months ago

@pedroven

Can you add the header of the chatbot widget? Since the header has a close button. this probably needs to be added here

Where is this header? Is it already implemented?

Is there a way to adapt the visualization (responsivity) of the widget on different window sizes?

Anki sets the .mobile class on mobile devices: https://docs.ankiweb.net/templates/styling.html#platform-specific-css. We can also use media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

pedroven commented 4 months ago

Where is this header? Is it already implemented?

no, this is on the Figma files

pedroven commented 4 months ago

Anki sets the .mobile class on mobile devices: https://docs.ankiweb.net/templates/styling.html#platform-specific-css. We can also use media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

I was talking specifically about the desktop environment @RisingOrange

RisingOrange commented 4 months ago

Where is this header? Is it already implemented?

no, this is on the Figma files

It might be easiest to define this header on the template returned by the server and make it use postMessage to send a message to a js listener on the reviewer webview when the close button is clicked. Then the listener can react by hiding the ifame.

We will probably also use this pattern for opening the browser and unsuspending cards when the user clicks on the related button in the ifame. See https://github.com/ankipalace/ankihub/pull/2138.

RisingOrange commented 4 months ago

Anki sets the .mobile class on mobile devices: https://docs.ankiweb.net/templates/styling.html#platform-specific-css. We can also use media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

I was talking specifically about the desktop environment @RisingOrange

CSS with media queries should work here, or percentage values for the width and height of the iframe.

AnkiHubSoftware / ankihub_addon