Use Markdown in AI Summary tab implemented (JabRef#12266)

* Checkbox and WebView added to the FXML * WebView and CheckBox added, onMarkdownToggle() method implemented to handle checkbox changes * WebView erased from fxml * WebView added and set programmatically * CheckBox Moved * TextArea wrapped around StackPane | Imports updated | Version updated * StackPane added | MarkdownFormatter initialized outside of contructor | Lazy initialization of WebView implemented * CheckBox and The Button on the same level, wrapped around BorderPane * replace TextArea with WebView for summary display * simplify summary component layout * TextFlow removed * <pre> changed to <body><div> * Default FontFamily and Size applied using ThemeManager * Described the PR in CHANGELOG.md * MarkdownFormatter renamed and now static * Removed changes from changelog, as requested * ThemeManager removed as requested
JabRef · Dec 16, 2024 · 31adbc2 · 31adbc2
1 parent 617b47b
commit 31adbc2
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 19 deletions.
diff --git a/src/main/java/org/jabref/gui/ai/components/summary/SummaryShowingComponent.fxml b/src/main/java/org/jabref/gui/ai/components/summary/SummaryShowingComponent.fxml
@@ -1,22 +1,26 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?import javafx.geometry.Insets?>
+<?import javafx.scene.control.CheckBox?>
 <?import javafx.scene.control.Button?>
-<?import javafx.scene.control.TextArea?>
 <?import javafx.scene.layout.VBox?>
-<?import javafx.scene.text.Text?>
+<?import javafx.scene.layout.BorderPane?>
 <?import javafx.scene.text.TextFlow?>
-<fx:root alignment="TOP_CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" spacing="10.0" type="VBox" xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.jabref.gui.ai.components.summary.SummaryShowingComponent">
-   <children>
-      <TextArea fx:id="summaryTextArea" editable="false" wrapText="true" VBox.vgrow="ALWAYS" />
-      <Button mnemonicParsing="false" onAction="#onRegenerateButtonClick" text="%Regenerate" />
-      <TextFlow textAlignment="CENTER">
-         <children>
-            <Text fx:id="summaryInfoText" strokeType="OUTSIDE" strokeWidth="0.0" text="%Generated at %0 by %1" />
-         </children>
-      </TextFlow>
-   </children>
-   <padding>
-      <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
-   </padding>
+<?import javafx.scene.text.Text?>
+
+<fx:root alignment="TOP_CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="400.0" minWidth="-Infinity" spacing="8.0" type="VBox" xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.jabref.gui.ai.components.summary.SummaryShowingComponent">
+    <children>
+        <BorderPane minHeight="30.0">
+            <left>
+                <CheckBox fx:id="markdownCheckbox" mnemonicParsing="false" onAction="#onMarkdownToggle" text="Markdown" />
+            </left>
+            <center>
+                <Button mnemonicParsing="false" onAction="#onRegenerateButtonClick" text="%Regenerate" translateX="-40" />
+            </center>
+        </BorderPane>
+        <Text fx:id="summaryInfoText" strokeType="OUTSIDE" strokeWidth="0.0" text="%Generated at %0 by %1" />
+    </children>
+    <padding>
+        <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
+    </padding>
 </fx:root>
diff --git a/src/main/java/org/jabref/gui/ai/components/summary/SummaryShowingComponent.java b/src/main/java/org/jabref/gui/ai/components/summary/SummaryShowingComponent.java
@@ -6,18 +6,24 @@
 import java.util.Locale;
 
 import javafx.fxml.FXML;
-import javafx.scene.control.TextArea;
+import javafx.scene.control.CheckBox;
+import javafx.scene.layout.Priority;
 import javafx.scene.layout.VBox;
 import javafx.scene.text.Text;
+import javafx.scene.web.WebView;
 
 import org.jabref.logic.ai.summarization.Summary;
+import org.jabref.logic.layout.format.MarkdownFormatter;
+import org.jabref.logic.util.WebViewStore;
 
 import com.airhacks.afterburner.views.ViewLoader;
 
 public class SummaryShowingComponent extends VBox {
-    @FXML private TextArea summaryTextArea;
+    private static final MarkdownFormatter MARKDOWN_FORMATTER = new MarkdownFormatter();
     @FXML private Text summaryInfoText;
+    @FXML private CheckBox markdownCheckbox;
 
+    private WebView contentWebView;
     private final Summary summary;
     private final Runnable regenerateCallback;
 
@@ -32,20 +38,49 @@ public SummaryShowingComponent(Summary summary, Runnable regenerateCallback) {
 
     @FXML
     private void initialize() {
-        summaryTextArea.setText(summary.content());
+        initializeWebView();
+        updateContent(false); // Start in plain text mode
+        updateInfoText();
+    }
+
+    private void initializeWebView() {
+        contentWebView = WebViewStore.get();
+        VBox.setVgrow(contentWebView, Priority.ALWAYS);
+
+        getChildren().addFirst(contentWebView);
+    }
+
+    private void updateContent(boolean isMarkdown) {
+        String content = summary.content();
+        if (isMarkdown) {
+            contentWebView.getEngine().loadContent(MARKDOWN_FORMATTER.format(content));
+        } else {
+            contentWebView.getEngine().loadContent(
+                    "<body style='margin: 0; padding: 5px; width: 100vw'>" +
+                            "<div style='white-space: pre-wrap; word-wrap: break-word; width: 100vw'>" +
+                            content +
+                            "</div></body>"
+            );
+        }
+    }
 
+    private void updateInfoText() {
         String newInfo = summaryInfoText
                 .getText()
                 .replaceAll("%0", formatTimestamp(summary.timestamp()))
                 .replaceAll("%1", summary.aiProvider().getLabel() + " " + summary.model());
-
         summaryInfoText.setText(newInfo);
     }
 
     private static String formatTimestamp(LocalDateTime timestamp) {
         return timestamp.format(DateTimeFormatter.ofLocalizedDateTime(FormatStyle.MEDIUM).withLocale(Locale.getDefault()));
     }
 
+    @FXML
+    private void onMarkdownToggle() {
+        updateContent(markdownCheckbox.isSelected());
+    }
+
     @FXML
     private void onRegenerateButtonClick() {
         regenerateCallback.run();