AnkiHubSoftware / ankihub_addon

3 stars 0 forks source link

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

Closed RisingOrange closed 5 months ago

RisingOrange commented 5 months ago

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

Related issues

https://ankihub.atlassian.net/browse/BUILD-424

Proposed changes

How to reproduce

Screenshots and videos

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

Comments

codecov[bot] commented 5 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 5 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 5 months ago

Where is this header? Is it already implemented?

no, this is on the Figma files

pedroven commented 5 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 5 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 5 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.