feat(chat ui): brand new greeting UI + rotating tips (#1262)

Author: GoodluckH

crates/q_cli/src/cli/chat/mod.rs

@@ -42,13 +42,15 @@ use crossterm::style::{
     Color,
     Stylize,
 };
+use crossterm::terminal::ClearType;
 use crossterm::{
     cursor,
     execute,
     queue,
     style,
     terminal,
 };
+use dialoguer::console::strip_ansi_codes;
 use eyre::{
     ErrReport,
     Result,
@@ -66,7 +68,10 @@ use fig_api_client::model::{
     ToolResultStatus,
 };
 use fig_os_shim::Context;
-use fig_settings::Settings;
+use fig_settings::{
+    Settings,
+    State,
+};
 use fig_util::CLI_BINARY_NAME;
 use hooks::{
     Hook,
@@ -151,27 +156,45 @@ use crate::util::token_counter::TokenCounter;
 
 const WELCOME_TEXT: &str = color_print::cstr! {"
 
-<em>Hi, I'm <magenta,em>Amazon Q</magenta,em>. Ask me anything.</em>
-
-<cyan!>Things to try</cyan!>
-• Fix the build failures in this project.
-• List my s3 buckets in us-west-2.
-• Write unit tests for my application.
-• Help me understand my git status.
-
-<em>/tools</em>        <black!>View and manage tools and permissions</black!>
-<em>/issue</em>        <black!>Report an issue or make a feature request</black!>
-<em>/profile</em>      <black!>(Beta) Manage profiles for the chat session</black!>
-<em>/context</em>      <black!>(Beta) Manage context files and hooks for a profile</black!>
-<em>/compact</em>      <black!>Summarize the conversation to free up context space</black!>
-<em>/help</em>         <black!>Show the help dialogue</black!>
-<em>/quit</em>         <black!>Quit the application</black!>
-
-<cyan!>Use Ctrl(^) + j to provide multi-line prompts.</cyan!>
-<cyan!>Use Ctrl(^) + k to fuzzily search commands and context.</cyan!>
+<em>Welcome to </em>
+<cyan!>
+ █████╗ ███╗   ███╗ █████╗ ███████╗ ██████╗ ███╗   ██╗     ██████╗ 
+██╔══██╗████╗ ████║██╔══██╗╚══███╔╝██╔═══██╗████╗  ██║    ██╔═══██╗
+███████║██╔████╔██║███████║  ███╔╝ ██║   ██║██╔██╗ ██║    ██║   ██║
+██╔══██║██║╚██╔╝██║██╔══██║ ███╔╝  ██║   ██║██║╚██╗██║    ██║▄▄ ██║
+██║  ██║██║ ╚═╝ ██║██║  ██║███████╗╚██████╔╝██║ ╚████║    ╚██████╔╝
+╚═╝  ╚═╝╚═╝     ╚═╝╚═╝  ╚═╝╚══════╝ ╚═════╝ ╚═╝  ╚═══╝     ╚══▀▀═╝ 
+</cyan!>                                                        
+"};
 
+const SMALL_SCREEN_WECLOME_TEXT: &str = color_print::cstr! {"
+<em>Welcome to <cyan!>Amazon Q</cyan!>!</em>
 "};
 
+const ROTATING_TIPS: [&str; 7] = [
+    color_print::cstr! {"You can use <green!>/editor</green!> to edit your prompt with a vim-like experience"},
+    color_print::cstr! {"You can execute bash commands by typing <green!>!</green!> followed by the command"},
+    color_print::cstr! {"Q can use tools without asking for confirmation every time. Give <green!>/tools trust</green!> a try"},
+    color_print::cstr! {"You can programmatically inject context to your prompts by using hooks. Check out <green!>/context hooks help</green!>"},
+    color_print::cstr! {"You can use <green!>/compact</green!> to replace the conversation history with its summary to free up the context space"},
+    color_print::cstr! {"<green!>/usage</green!> shows you a visual breakdown of your current context window usage"},
+    color_print::cstr! {"If you want to file an issue to the Q CLI team, just tell me, or run <green!>q issue</green!>"},
+];
+
+const GREETING_BREAK_POINT: usize = 67;
+
+const POPULAR_SHORTCUTS: &str = color_print::cstr! {"
+<black!>
+<green!>/help</green!> all commands  <em>•</em>  <green!>ctrl + j</green!> new lines  <em>•</em>  <green!>ctrl + k</green!> fuzzy search
+</black!>"};
+
+const SMALL_SCREEN_POPULAR_SHORTCUTS: &str = color_print::cstr! {"
+<black!>
+<green!>/help</green!> all commands
+<green!>ctrl + j</green!> new lines
+<green!>ctrl + k</green!> fuzzy search
+</black!>
+"};
 const HELP_TEXT: &str = color_print::cstr! {"
 
 <magenta,em>q</magenta,em> (Amazon Q Chat)
@@ -310,6 +333,7 @@ pub async fn chat(
     let mut chat = ChatContext::new(
         ctx,
         Settings::new(),
+        State::new(),
         output,
         input,
         InputSource::new()?,
@@ -362,6 +386,8 @@ pub enum ChatError {
 pub struct ChatContext<W: Write> {
     ctx: Arc<Context>,
     settings: Settings,
+    /// The [State] to use for the chat context.
+    state: State,
     /// The [Write] destination for printing conversation text.
     output: W,
     initial_input: Option<String>,
@@ -391,6 +417,7 @@ impl<W: Write> ChatContext<W> {
     pub async fn new(
         ctx: Arc<Context>,
         settings: Settings,
+        state: State,
         output: W,
         input: Option<String>,
         input_source: InputSource,
@@ -405,6 +432,7 @@ impl<W: Write> ChatContext<W> {
         Ok(Self {
             ctx,
             settings,
+            state,
             output,
             initial_input: input,
             input_source,
@@ -540,11 +568,135 @@ where
         Ok(content.trim().to_string())
     }
 
+    fn draw_tip_box(&mut self, text: &str) -> Result<()> {
+        let box_width = GREETING_BREAK_POINT;
+        let inner_width = box_width - 4; // account for │ and padding
+
+        // wrap the single line into multiple lines respecting inner width
+        // Manually wrap the text by splitting at word boundaries
+        let mut wrapped_lines = Vec::new();
+        let mut line = String::new();
+
+        for word in text.split_whitespace() {
+            if line.len() + word.len() < inner_width {
+                if !line.is_empty() {
+                    line.push(' ');
+                }
+                line.push_str(word);
+            } else {
+                wrapped_lines.push(line);
+                line = word.to_string();
+            }
+        }
+
+        if !line.is_empty() {
+            wrapped_lines.push(line);
+        }
+
+        // ───── Did you know? ─────
+        let label = " Did you know? ";
+        let side_len = (box_width.saturating_sub(label.len())) / 2;
+        let top_border = format!(
+            "╭{}{}{}╮",
+            "─".repeat(side_len - 1),
+            label,
+            "─".repeat(box_width - side_len - label.len() - 1)
+        );
+
+        // Build output
+        execute!(
+            self.output,
+            terminal::Clear(ClearType::CurrentLine),
+            cursor::MoveToColumn(0),
+            style::Print(format!("{top_border}\n")),
+        )?;
+
+        // Top vertical padding
+        execute!(
+            self.output,
+            style::Print(format!("│{: <width$}│\n", "", width = box_width - 2))
+        )?;
+
+        // Centered wrapped content
+        for line in wrapped_lines {
+            let visible_line_len = strip_ansi_codes(&line).len();
+            let left_pad = (box_width - 4 - visible_line_len) / 2;
+
+            let content = format!(
+                "│ {: <pad$}{}{: <rem$} │",
+                "",
+                line,
+                "",
+                pad = left_pad,
+                rem = box_width - 4 - left_pad - visible_line_len
+            );
+            execute!(self.output, style::Print(format!("{}\n", content)))?;
+        }
+
+        // Bottom vertical padding
+        execute!(
+            self.output,
+            style::Print(format!("│{: <width$}│\n", "", width = box_width - 2))
+        )?;
+
+        // Bottom rounded corner line: ╰────────────╯
+        let bottom = format!("╰{}╯", "─".repeat(box_width - 2));
+        execute!(self.output, style::Print(format!("{}\n", bottom)))?;
+
+        Ok(())
+    }
+
     async fn try_chat(&mut self) -> Result<()> {
+        let is_small_screen = self.terminal_width() < GREETING_BREAK_POINT;
         if self.interactive && self.settings.get_bool_or("chat.greeting.enabled", true) {
-            execute!(self.output, style::Print(WELCOME_TEXT))?;
+            execute!(
+                self.output,
+                style::Print(if is_small_screen {
+                    SMALL_SCREEN_WECLOME_TEXT
+                } else {
+                    WELCOME_TEXT
+                }),
+                style::Print("\n\n"),
+            )?;
+
+            let current_tip_index =
+                (self.state.get_int_or("chat.greeting.rotating_tips_current_index", 0) as usize) % ROTATING_TIPS.len();
+
+            let tip = ROTATING_TIPS[current_tip_index];
+            if is_small_screen {
+                // If the screen is small, print the tip in a single line
+                execute!(
+                    self.output,
+                    style::Print("💡 ".to_string()),
+                    style::Print(tip),
+                    style::Print("\n")
+                )?;
+            } else {
+                self.draw_tip_box(tip)?;
+            }
+
+            // update the current tip index
+            let next_tip_index = (current_tip_index + 1) % ROTATING_TIPS.len();
+            self.state
+                .set_value("chat.greeting.rotating_tips_current_index", next_tip_index)?;
         }
 
+        execute!(
+            self.output,
+            style::Print(if is_small_screen {
+                SMALL_SCREEN_POPULAR_SHORTCUTS
+            } else {
+                POPULAR_SHORTCUTS
+            }),
+            style::Print(
+                "━"
+                    .repeat(if is_small_screen { 0 } else { GREETING_BREAK_POINT })
+                    .dark_grey()
+            )
+        )?;
+        execute!(self.output, style::Print("\n"), style::SetForegroundColor(Color::Reset))?;
+        self.output.flush()?;
+
         let mut ctrl_c_stream = signal(SignalKind::interrupt())?;
 
         let mut next_state = Some(ChatState::PromptUser {
@@ -2924,6 +3076,7 @@ mod tests {
         ChatContext::new(
             Arc::clone(&ctx),
             Settings::new_fake(),
+            State::new_fake(),
             std::io::stdout(),
             None,
             InputSource::new_mock(vec![
@@ -3047,6 +3200,7 @@ mod tests {
         ChatContext::new(
             Arc::clone(&ctx),
             Settings::new_fake(),
+            State::new_fake(),
             std::io::stdout(),
             None,
             InputSource::new_mock(vec![
@@ -3145,6 +3299,7 @@ mod tests {
         ChatContext::new(
             Arc::clone(&ctx),
             Settings::new_fake(),
+            State::new_fake(),
             std::io::stdout(),
             None,
             InputSource::new_mock(vec![
@@ -3215,6 +3370,7 @@ mod tests {
         ChatContext::new(
             Arc::clone(&ctx),
             Settings::new_fake(),
+            State::new_fake(),
             std::io::stdout(),
             None,
             InputSource::new_mock(vec![