moly_kit/widgets/

prompt_input.rs

use makepad_widgets::defer_with_redraw::DeferWithRedraw;
use makepad_widgets::*;
use std::cell::{Ref, RefMut};

#[allow(unused)]
use crate::{
    aitk::protocol::*,
    utils::makepad::events::EventExt,
    widgets::attachment_list::{AttachmentListRef, AttachmentListWidgetExt},
};

script_mod! {
    use mod.prelude.widgets.*

    let SubmitButton = Button {
        width: 28,
        height: 28,
        padding: 0
        margin: Inset { bottom: 2 },
        align: Align { x: 0.5, y: 0.5 }

        draw_text +: {
            text_style: theme.font_icons { font_size: 11 }
            color: #fff
            color_hover: #fff
            color_focus: #fff
            color_down: #fff
        }

        draw_bg +: {
            get_color: fn() {
                if self.disabled == 1.0 {
                    return #xD0D5DD;
                }
                return #000;
            }

            pixel: fn() {
                let sdf = Sdf2d.viewport(self.pos * self.rect_size)
                let center = self.rect_size * 0.5
                let radius = min(self.rect_size.x self.rect_size.y) * 0.5

                sdf.circle(center.x center.y radius)
                sdf.fill_keep(self.get_color())

                return sdf.result
            }
        }
    }

    let SendButton = SubmitButton {
        text: "\u{f062}" // fa-arrow-up
    }

    let StopButton = SubmitButton {
        visible: false
        text: "\u{f04d}" // fa-stop
        draw_text +: {
            text_style +: { font_size: 8.5 }
        }
    }

    let AttachButton = Button {
        visible: false
        text: "\u{f0c6}" // fa-paperclip
        width: Fit,
        height: Fit,
        padding: Inset { left: 8, right: 8, top: 6, bottom: 6 }
        draw_text +: {
            text_style: theme.font_icons { font_size: 13. }
            color: #333,
            color_hover: #111,
            color_focus: #111
            color_down: #000
        }
        draw_bg +: {
            color_down: #0000
            border_radius: 7.
            border_size: 0.
            color_hover: #xf2
        }
    }

    let AudioButton = Button {
        visible: false
        width: 28, height: 28
        text: "\u{f590}" // fa-headset
        draw_text +: {
            text_style: theme.font_icons { font_size: 13. }
            color: #333,
            color_hover: #111,
            color_focus: #111
            color_down: #000
        }
        draw_bg +: {
            color_down: #0000
            border_radius: 7.
            border_size: 0.
        }
    }

    let SttButton = Button {
        visible: false
        width: 28, height: 28
        text: "\u{f130}" // fa-microphone
        draw_text +: {
            text_style: theme.font_icons { font_size: 13. }
            color: #333,
            color_hover: #111,
            color_focus: #111
            color_down: #000
        }
        draw_bg +: {
            color_down: #0000
            border_radius: 7.
            border_size: 0.
        }
    }

    let SendControls = View {
        width: Fit, height: Fit
        align: Align { x: 0.5, y: 0.5 }
        spacing: 10
        stt := SttButton {}
        audio := AudioButton {}
        send := SendButton {}
        stop := StopButton {}
    }

    mod.widgets.PromptInputBase = #(PromptInput::register_widget(vm))
    mod.widgets.PromptInput = set_type_default() do mod.widgets.PromptInputBase {
        height: Fit { max: FitBound.Abs(350) }
        flow: Down

        persistent := RoundedView {
            height: Fit
            flow: Down
            padding: Inset { top: 10, bottom: 10, left: 10, right: 10 }
            draw_bg +: {
                color: #fff,
                border_radius: 10.0,
                border_color: #xD0D5DD,
                border_size: 1.0,
            }
            top := View {
                height: Fit
                attachments := mod.widgets.DenseAttachmentList {}
            }
            center := View {
                height: Fit
                text_input := TextInput {
                    height: Fit {
                        min: FitBound.Abs(35)
                        max: FitBound.Abs(180)
                    }
                    width: Fill
                    empty_text: "Start typing...",
                    draw_bg +: {
                        pixel: fn() {
                            return vec4(0.)
                        }
                    }
                    draw_text +: {
                        color: #000
                        color_hover: #000
                        color_focus: #000
                        color_empty: #x98A2B3
                        color_empty_focus: #x98A2B3
                        color_empty_hover: #x98A2B3
                        text_style +: { font_size: 11 }
                    }
                    draw_selection +: {
                        color: #xd9e7e999
                        color_hover: #xd9e7e999
                        color_focus: #xd9e7e999
                    }
                    draw_cursor +: {
                        color: #000
                    }
                }
                right := View {
                    width: Fit, height: Fit
                }
            }
            bottom := View {
                height: Fit
                left := View {
                    width: Fit, height: Fit
                    align: Align { x: 0.0, y: 0.5 }
                    attach := AttachButton {}
                    model_selector := mod.widgets.ModelSelector {}
                }
                width: Fill, height: Fit
                separator := View { width: Fill, height: 1 }
                SendControls {}
            }
        }
    }
}

#[derive(Default, Copy, Clone, PartialEq)]
pub enum Task {
    #[default]
    Send,
    Stop,
}

#[derive(Default, Copy, Clone, PartialEq)]
pub enum Interactivity {
    #[default]
    Enabled,
    Disabled,
}

/// A prepared text input for conversation with bots.
///
/// This is mostly a dummy widget. Prefer using and adapting [crate::widgets::chat::Chat] instead.
#[derive(Script, Widget)]
pub struct PromptInput {
    #[deref]
    pub deref: View,

    /// Placeholder text shown when the input is empty.
    #[live(String::from("Start typing..."))]
    pub empty_text: String,

    /// Placeholder text shown when a realtime model is selected.
    #[live(String::from("For realtime models, use the audio feature ->"))]
    pub realtime_empty_text: String,

    /// If this widget should provoke sending a message or stopping the current response.
    #[rust]
    pub task: Task,

    /// If this widget should be interactive or not.
    #[rust]
    pub interactivity: Interactivity,

    /// Capabilities of the currently selected bot
    #[rust]
    pub bot_capabilities: Option<BotCapabilities>,
}

impl ScriptHook for PromptInput {
    fn on_after_new(&mut self, _vm: &mut ScriptVm) {
        // Cannot call update_button_visibility here because we don't have cx.
        // It will be called later when bot capabilities are set.
    }
}

impl Widget for PromptInput {
    fn set_text(&mut self, cx: &mut Cx, v: &str) {
        self.text_input(cx, ids!(text_input)).set_text(cx, v);
    }

    fn text(&self) -> String {
        self.child_by_path(&[id!(text_input)])
            .borrow::<TextInput>()
            .map(|ti| ti.text())
            .unwrap_or_else(|| {
                error!("PromptInput::text(): text_input child not found or wrong type");
                String::new()
            })
    }

    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
        self.deref.handle_event(cx, event, scope);
        self.ui_runner().handle(cx, event, scope, self);

        if self.button(cx, ids!(attach)).clicked(event.actions()) {
            let ui = self.ui_runner();
            Attachment::pick_multiple(move |result| match result {
                Ok(attachments) => {
                    ui.defer_with_redraw(move |me: &mut PromptInput, cx, _| {
                        let mut list = me.attachment_list_ref(cx);
                        list.write().attachments.extend(attachments);
                        list.write().on_tap(move |list, index| {
                            list.attachments.remove(index);
                        });
                    });
                }
                Err(_) => {}
            });
        }
    }

    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
        let supports_realtime = self
            .bot_capabilities
            .as_ref()
            .map(|caps| caps.has_capability(&BotCapability::AudioCall))
            .unwrap_or(false);

        let supports_attachments = self
            .bot_capabilities
            .as_ref()
            .map(|caps| caps.has_capability(&BotCapability::AttachmentInput))
            .unwrap_or(false);

        // Attach button: only on supported platforms and if bot supports it
        #[cfg(any(
            target_os = "windows",
            target_os = "macos",
            target_os = "linux",
            target_arch = "wasm32"
        ))]
        self.button(cx, ids!(attach))
            .set_visible(cx, supports_attachments);

        #[cfg(not(any(
            target_os = "windows",
            target_os = "macos",
            target_os = "linux",
            target_arch = "wasm32"
        )))]
        self.button(cx, ids!(attach)).set_visible(cx, false);

        // Audio button: only on non-wasm and if bot supports realtime
        #[cfg(not(target_arch = "wasm32"))]
        self.button(cx, ids!(audio))
            .set_visible(cx, supports_realtime);

        // Send/stop buttons: hidden for realtime, toggled by task otherwise
        let mut send = self.button(cx, ids!(send));
        let mut stop = self.button(cx, ids!(stop));

        if supports_realtime {
            send.set_visible(cx, false);
            stop.set_visible(cx, false);
        } else {
            match self.task {
                Task::Send => {
                    send.set_visible(cx, true);
                    stop.set_visible(cx, false);
                }
                Task::Stop => {
                    send.set_visible(cx, false);
                    stop.set_visible(cx, true);
                }
            }
        }

        // Interactivity and text input state
        let input = self.text_input(cx, ids!(text_input));
        if supports_realtime {
            self.interactivity = Interactivity::Disabled;
            input.set_is_read_only(cx, true);
            input.set_empty_text(cx, self.realtime_empty_text.clone());
        } else {
            input.set_is_read_only(cx, false);
            input.set_empty_text(cx, self.empty_text.clone());
        }

        let enabled = self.interactivity == Interactivity::Enabled;
        send.set_enabled(cx, enabled);
        stop.set_enabled(cx, enabled);

        self.deref.draw_walk(cx, scope, walk)
    }
}

impl PromptInput {
    /// Reset this prompt input erasing text, removing attachments, etc.
    pub fn reset(&mut self, cx: &mut Cx) {
        self.text_input_ref(cx).set_text(cx, "");
        self.attachment_list_ref(cx).write().attachments.clear();
    }

    /// Returns a reference to the inner `TextInput` widget.
    pub fn text_input_ref(&self, cx: &Cx) -> TextInputRef {
        self.text_input(cx, ids!(text_input))
    }

    /// Check if the submit button or the return key was pressed.
    ///
    /// Note: To know what the button submission means, check [Self::task] or
    /// the utility methods.
    pub fn submitted(&self, cx: &Cx, actions: &Actions) -> bool {
        let send = self.button(cx, ids!(send));
        let stop = self.button(cx, ids!(stop));
        let input = self.text_input_ref(cx);
        (send.clicked(actions) || stop.clicked(actions) || input.returned(actions).is_some())
            && self.interactivity == Interactivity::Enabled
    }

    pub fn call_pressed(&self, cx: &Cx, actions: &Actions) -> bool {
        self.button(cx, ids!(audio)).clicked(actions)
    }

    pub fn stt_pressed(&self, cx: &Cx, actions: &Actions) -> bool {
        self.button(cx, ids!(stt)).clicked(actions)
    }

    /// Shorthand to check if [Self::task] is set to [Task::Send].
    pub fn has_send_task(&self) -> bool {
        self.task == Task::Send
    }

    /// Shorthand to check if [Self::task] is set to [Task::Stop].
    pub fn has_stop_task(&self) -> bool {
        self.task == Task::Stop
    }

    /// Allows submission.
    pub fn enable(&mut self) {
        self.interactivity = Interactivity::Enabled;
    }

    /// Disallows submission.
    pub fn disable(&mut self) {
        self.interactivity = Interactivity::Disabled;
    }

    /// Shorthand to set [Self::task] to [Task::Send].
    pub fn set_send(&mut self) {
        self.task = Task::Send;
    }

    /// Shorthand to set [Self::task] to [Task::Stop].
    pub fn set_stop(&mut self) {
        self.task = Task::Stop;
    }

    pub(crate) fn attachment_list_ref(&self, cx: &Cx) -> AttachmentListRef {
        self.attachment_list(cx, ids!(attachments))
    }

    /// Set the chat controller for the model selector
    pub fn set_chat_controller(
        &mut self,
        cx: &Cx,
        controller: Option<
            std::sync::Arc<std::sync::Mutex<crate::aitk::controllers::chat::ChatController>>,
        >,
    ) {
        if let Some(mut inner) = self
            .widget(cx, ids!(model_selector))
            .borrow_mut::<crate::widgets::model_selector::ModelSelector>()
        {
            inner.chat_controller = controller;
        }
    }

    /// Set the capabilities of the currently selected bot
    pub fn set_bot_capabilities(&mut self, cx: &mut Cx, capabilities: Option<BotCapabilities>) {
        let was_realtime = self
            .bot_capabilities
            .as_ref()
            .map(|caps| caps.has_capability(&BotCapability::AudioCall))
            .unwrap_or(false);

        let is_realtime = capabilities
            .as_ref()
            .map(|caps| caps.has_capability(&BotCapability::AudioCall))
            .unwrap_or(false);

        self.bot_capabilities = capabilities;

        // Reset text input state when switching away from realtime
        if was_realtime && !is_realtime {
            self.interactivity = Interactivity::Enabled;
            self.text_input_ref(cx).set_is_read_only(cx, false);
            self.text_input_ref(cx).set_text(cx, "");
        }

        self.redraw(cx);
    }

    /// Set whether the speech-to-text button is visible.
    pub fn set_stt_visible(&mut self, cx: &mut Cx, visible: bool) {
        self.button(cx, ids!(stt)).set_visible(cx, visible);
    }
}

impl PromptInputRef {
    /// Immutable access to the underlying [[PromptInput]].
    ///
    /// Panics if the widget reference is empty or if it's already borrowed.
    pub fn read(&self) -> Ref<'_, PromptInput> {
        self.borrow().unwrap()
    }

    /// Mutable access to the underlying [[PromptInput]].
    ///
    /// Panics if the widget reference is empty or if it's already borrowed.
    pub fn write(&mut self) -> RefMut<'_, PromptInput> {
        self.borrow_mut().unwrap()
    }

    /// Immutable reader to the underlying [[PromptInput]].
    ///
    /// Panics if the widget reference is empty or if it's already borrowed.
    pub fn read_with<R>(&self, f: impl FnOnce(&PromptInput) -> R) -> R {
        f(&*self.read())
    }

    /// Mutable writer to the underlying [[PromptInput]].
    ///
    /// Panics if the widget reference is empty or if it's already borrowed.
    pub fn write_with<R>(&mut self, f: impl FnOnce(&mut PromptInput) -> R) -> R {
        f(&mut *self.write())
    }
}