Added example questions to AI chat (#12747)

* Added example questions to AI chat

* Added example questions to AI chat

* added inline FXML annotaions

* fix dark mode support for example questions lables

* refactored codes

* Added example questions to AI chat

# Conflicts:
#	src/main/java/org/jabref/gui/Base.css
#	src/main/java/org/jabref/gui/ai/components/aichat/AiChatComponent.fxml
#	src/main/java/org/jabref/gui/ai/components/aichat/AiChatComponent.java

* merged

* Merge branch 'main' into fix-for-issue-12745

* refactor the code for issue #12747

* remove unwanted lines in Base.css

* remove unwanted lines in AI=iChatComponent.java

* Update CHANGELOG.md

* optimized imports in AiChatComponent.fxml

* Clean up & optimize imports, clean up code style

* Clean up and optimize imports in `AiTab.fxml`

* added localization to ai chat

* Added localization to the AI chat

* added localization to ai chat

* added localization to ai chat

* make example questions strings contant strings

---------

Co-authored-by: Oliver Kopp <[email protected]>
Co-authored-by: Subhramit Basu <[email protected]>
Co-authored-by: Christoph <[email protected]>

Author: 4 people

CHANGELOG.md

@@ -27,6 +27,7 @@ Note that this project **does not** adhere to [Semantic Versioning](https://semv
 - We added a feature for enabling drag-and-drop of files into groups  [#12540](https://github.com/JabRef/jabref/issues/12540)
 - We added support for reordering keywords via drag and drop, automatic alphabetical ordering, and improved pasting and editing functionalities in the keyword editor. [#10984](https://github.com/JabRef/jabref/issues/10984)
 - We added a new functionality where author names having multiple spaces in-between will be considered as separate user block as it does for " and ". [#12701](https://github.com/JabRef/jabref/issues/12701)
+- We added a set of example questions to guide users in starting meaningful AI chat interactions. [#12702](https://github.com/JabRef/jabref/issues/12702)
 - We added support for loading and displaying BibTeX .blg warnings in the Check integrity dialog, with custom path selection and metadata persistence. [#11998](https://github.com/JabRef/jabref/issues/11998)
 - We added an option to choose whether to open the file explorer in the files directory or in the last opened directory when attaching files. [#12554](https://github.com/JabRef/jabref/issues/12554)
 - We enhanced support for parsing XMP metadata from PDF files. [#12829](https://github.com/JabRef/jabref/issues/12829)

src/main/java/org/jabref/gui/Base.css

@@ -2493,6 +2493,21 @@ journalInfo .grid-cell-b {
     -fx-font-size: 1em; -fx-font-weight: bold; -fx-text-fill: -jr-theme;
 }
 
+.exampleQuestionStyle {
+    -fx-background-color: transparent;
+    -fx-padding: 2px 10px;
+    -fx-background-radius: 20px;
+    -fx-border-radius: 20px;
+    -fx-border-width: 0.062em;
+    -fx-border-color: -fx-outer-border;
+    -fx-font-weight: bold;
+    -fx-underline: false !important;
+    -fx-text-fill: -fx-text-base-color;
+}
+.exampleQuestionStyle:hover {
+    -fx-background-color: rgba(0, 0, 0, 0.12);
+}
+
 .refresh {
     -fx-background-color: transparent;
 }

src/main/java/org/jabref/gui/ai/components/aichat/AiChatComponent.fxml

@@ -11,6 +11,7 @@
 <?import org.jabref.gui.ai.components.aichat.chatprompt.ChatPromptComponent?>
 <?import org.jabref.gui.ai.components.util.Loadable?>
 <?import org.jabref.gui.icon.JabRefIconView?>
+<?import javafx.scene.control.Hyperlink?>
 <fx:root type="javafx.scene.layout.VBox"
          spacing="10"
          xmlns="http://javafx.com/javafx/17.0.2-ea"
@@ -20,9 +21,16 @@
         <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
     </padding>
     <Loadable fx:id="uiLoadableChatHistory" VBox.vgrow="ALWAYS">
-        <ChatHistoryComponent fx:id="uiChatHistory" VBox.vgrow="ALWAYS" fitToWidth="true" />
+        <ChatHistoryComponent fx:id="uiChatHistory" VBox.vgrow="ALWAYS" fitToWidth="true"/>
     </Loadable>
 
+    <HBox spacing="10" alignment="CENTER" fx:id="exQuestionBox">
+        <Label text="%Try with examples" BorderPane.alignment="CENTER"/>
+        <Hyperlink fx:id="exQuestion1" BorderPane.alignment="CENTER" styleClass="exampleQuestionStyle"/>
+        <Hyperlink fx:id="exQuestion2" BorderPane.alignment="CENTER" styleClass="exampleQuestionStyle"/>
+        <Hyperlink fx:id="exQuestion3" BorderPane.alignment="CENTER" styleClass="exampleQuestionStyle"/>
+    </HBox>
+
     <HBox spacing="10">
         <Button alignment="CENTER"
                 fx:id="notificationsButton"
@@ -32,7 +40,7 @@
                 <Tooltip text="%Notifications"/>
             </tooltip>
         </Button>
-        <ChatPromptComponent fx:id="chatPrompt" HBox.hgrow="ALWAYS" />
+        <ChatPromptComponent fx:id="chatPrompt" HBox.hgrow="ALWAYS"/>
     </HBox>
     <HBox alignment="CENTER" spacing="50">
         <Label fx:id="noticeText"

src/main/java/org/jabref/gui/ai/components/aichat/AiChatComponent.java

@@ -10,7 +10,9 @@
 import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
 import javafx.scene.control.Button;
+import javafx.scene.control.Hyperlink;
 import javafx.scene.control.Label;
+import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
 import javafx.scene.paint.Color;
 
@@ -46,6 +48,11 @@
 public class AiChatComponent extends VBox {
     private static final Logger LOGGER = LoggerFactory.getLogger(AiChatComponent.class);
 
+    // Example Questions
+    private static final String EXAMPLE_QUESTION_1 = Localization.lang("What is the goal of the paper?");
+    private static final String EXAMPLE_QUESTION_2 = Localization.lang("Which methods were used in the research?");
+    private static final String EXAMPLE_QUESTION_3 = Localization.lang("What are the key findings?");
+
     private final AiService aiService;
     private final ObservableList<BibEntry> entries;
     private final BibDatabaseContext bibDatabaseContext;
@@ -57,11 +64,17 @@ public class AiChatComponent extends VBox {
 
     private final ObservableList<Notification> notifications = FXCollections.observableArrayList();
 
+
+
     @FXML private Loadable uiLoadableChatHistory;
     @FXML private ChatHistoryComponent uiChatHistory;
     @FXML private Button notificationsButton;
     @FXML private ChatPromptComponent chatPrompt;
     @FXML private Label noticeText;
+    @FXML private Hyperlink exQuestion1;
+    @FXML private Hyperlink exQuestion2;
+    @FXML private Hyperlink exQuestion3;
+    @FXML private HBox exQuestionBox;
 
     public AiChatComponent(AiService aiService,
                            StringProperty name,
@@ -94,6 +107,8 @@ public void initialize() {
         initializeChatPrompt();
         initializeNotice();
         initializeNotifications();
+        sendExampleQuestions();
+        initializeExampleQuestions();
     }
 
     private void initializeNotifications() {
@@ -111,6 +126,35 @@ private void initializeNotice() {
         noticeText.setText(newNotice);
     }
 
+    private void initializeExampleQuestions() {
+        exQuestion1.setText(EXAMPLE_QUESTION_1);
+        exQuestion2.setText(EXAMPLE_QUESTION_2);
+        exQuestion3.setText(EXAMPLE_QUESTION_3);
+    }
+
+    private void sendExampleQuestions() {
+        addExampleQuestionAction(exQuestion1);
+        addExampleQuestionAction(exQuestion2);
+        addExampleQuestionAction(exQuestion3);
+    }
+
+    private void addExampleQuestionAction(Hyperlink hyperlink) {
+        if (chatPrompt.getHistory().contains(hyperlink.getText())) {
+            exQuestionBox.getChildren().remove(hyperlink);
+            if (exQuestionBox.getChildren().size() == 1) {
+                this.getChildren().remove(exQuestionBox);
+            }
+            return;
+        }
+        hyperlink.setOnAction(event -> {
+            onSendMessage(hyperlink.getText());
+            exQuestionBox.getChildren().remove(hyperlink);
+            if (exQuestionBox.getChildren().size() == 1) {
+                this.getChildren().remove(exQuestionBox);
+            }
+        });
+    }
+
     private void initializeChatPrompt() {
         notificationsButton.setOnAction(event ->
                 new PopOver(new NotificationsComponent(notifications))

src/main/java/org/jabref/gui/preferences/ai/AiTab.fxml

@@ -5,20 +5,19 @@
 <?import javafx.scene.control.CheckBox?>
 <?import javafx.scene.control.ComboBox?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.control.Tab?>
+<?import javafx.scene.control.TabPane?>
+<?import javafx.scene.control.TextArea?>
 <?import javafx.scene.control.TextField?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 <?import org.jabref.gui.icon.JabRefIconView?>
-<?import com.dlsc.gemsfx.ResizableTextArea?>
 <?import com.dlsc.unitfx.IntegerInputField?>
 <?import org.controlsfx.control.SearchableComboBox?>
 <?import org.controlsfx.control.textfield.CustomPasswordField?>
-<?import javafx.scene.control.TabPane?>
-<?import javafx.scene.control.Tab?>
-<?import javafx.scene.control.TextArea?>
 <fx:root
         spacing="10.0"
         type="VBox"

src/main/resources/l10n/JabRef_en.properties

@@ -2714,6 +2714,10 @@ System\ message\ for\ chatting=System message for chatting
 User\ message\ for\ chatting=User message for chatting
 Completion\ text\ for\ summarization\ of\ a\ chunk=Completion text for summarization of a chunk
 Completion\ text\ for\ summarization\ of\ several\ chunks=Completion text for summarization of several chunks
+Try\ with\ examples=Try with examples
+What\ is\ the\ goal\ of\ the\ paper?=What is the goal of the paper?
+Which\ methods\ were\ used\ in\ the\ research?=Which methods were used in the research?
+What\ are\ the\ key\ findings?=What are the key findings?
 
 Link=Link
 Source\ URL=Source URL