Prompt example

resources/files/prompt_data.json

@@ -0,0 +1,12 @@
+[
+    "summarize this paragraph: [insert text here]",
+    "rewrite this sentence to sound more professional: [insert text here]",
+    "translate this into spanish: [insert text here]",
+    "write a short story about a time traveler discovering a lost civilization.",
+    "create a to-do list for planning a weekend trip.",
+    "explain quantum mechanics in simple terms.",
+    "generate a list of pros and cons for adopting a pet.",
+    "compose a thank-you email for a job interview.",
+    "give me three fun facts about ancient egypt.",
+    "write a motivational quote to inspire creativity."
+]

src/chat/chat_panel.rs

@@ -1,5 +1,6 @@
 use makepad_widgets::*;
-use std::cell::{Ref, RefCell, RefMut};
+use rand::seq::SliceRandom;
+use std::{cell::{Ref, RefCell, RefMut}, fs};
 
 use crate::{
     chat::{
@@ -183,6 +184,86 @@ live_design! {
         }
     }
 
+    PromptExample = <View> {
+        width: Fit,
+        height: Fit,
+        flow: Right,
+        spacing: 10,
+
+        prompt1 = <MolyButton> {
+            width: 150
+            height: 100,
+
+            draw_text: {
+                text_style: <REGULAR_FONT>{font_size: 14},
+                color:  #98A2B3,
+            }
+
+            text: "prompt 1",
+
+            draw_bg: {
+                radius: 10.0,
+                border_width: 1.0,
+                border_color: #98A2B3,
+            }
+        }
+
+        prompt2 = <MolyButton> {
+            width: 150
+            height: 100,
+
+            draw_text: {
+                text_style: <REGULAR_FONT>{font_size: 14},
+                color:  #98A2B3,
+            }
+
+            text: "prompt 2",
+
+            draw_bg: {
+                radius: 10.0,
+                border_width: 1.0,
+                border_color: #98A2B3,
+            }
+        }
+
+        prompt3 = <MolyButton> {
+            width: 150
+            height: 100,
+
+            draw_text: {
+                text_style: <REGULAR_FONT>{font_size: 14},
+                color:  #98A2B3,
+            }
+
+            text: "prompt 3",
+
+            draw_bg: {
+                radius: 10.0,
+                border_width: 1.0,
+                border_color: #98A2B3,
+            }
+        }
+
+        prompt4 = <MolyButton> {
+            width: 150
+            height: 100,
+
+            draw_text: {
+                text_style: <REGULAR_FONT>{font_size: 14},
+                color:  #98A2B3,
+            }
+
+            text: "prompt 4",
+
+            draw_bg: {
+                radius: 10.0,
+                border_width: 1.0,
+                border_color: #98A2B3,
+            }
+        }
+    }
+
+
     pub ChatPanel = {{ChatPanel}} {
         flow: Overlay
         width: Fill
@@ -312,6 +393,8 @@ live_design! {
                     }
                     text: "How can I help you?"
                 }
+
+                prompt_example = <PromptExample> {}
             }
 
             main = <View> {
@@ -418,13 +501,28 @@ impl Widget for ChatPanel {
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         self.update_view(cx, scope);
 
+        // Read a file from JSON.
+        let file_content = fs::read_to_string("./resources/files/prompt_data.json").expect("Failed to read JSON file");
+
+        // Parse the JSON data and store it in a vector.
+        let items: Vec<String> = serde_json::from_str(&file_content).expect("Failed to parse JSON");
+
+        // Randomly select 4 items from the vector.
+        let mut rng = rand::thread_rng();
+        let selected_items: Vec<&String> = items.choose_multiple(&mut rng, 4).collect();
+
         // We need to make sure we're drawing this widget in order to focus on the prompt input
         // Otherwise, when navigating from another section this command would happen before the widget is drawn
         // (not having any effect).
         if self.focus_on_prompt_input_pending {
             self.focus_on_prompt_input_pending = false;
 
             self.prompt_input(id!(main_prompt_input)).reset_text(true);
+            // it donesn't work, it cannot focus on the input when siwtching from another section
+            self.button(id!(prompt1)).set_text(selected_items[0]);
+            self.button(id!(prompt2)).set_text(selected_items[1]);
+            self.button(id!(prompt3)).set_text(selected_items[2]);
+            self.button(id!(prompt4)).set_text(selected_items[3]);
         }
 
         let message_list_uid = self.portal_list(id!(chat)).widget_uid();