Input Component UI

Relevant source files

The following files were used as context for generating this wiki page:

• input.go
• main.go
• README.md
• go.mod
• go.sum

The Input Component UI serves as the foundational interface layer for the Terminal Wizard project, enabling user interaction through structured data entry. Built using the Bubble Tea and Lip Gloss libraries, this component facilitates the capture of user responses within a terminal environment. It abstracts complex terminal input handling into a unified interface, allowing the application to support multiple input types such as short-text fields and multi-line text areas.

The system is designed around a state-driven architecture where the Main model manages a sequence of Question objects, each containing a specific Input implementation. This modular approach ensures that the UI can transition seamlessly between different questions while maintaining a consistent visual style defined by the application's styling engine.

Sources: README.md:1-24, main.go:27-46, input.go:9-17

Architecture and Interface Design

The core of the input system is the Input interface, which defines the contract for any UI component capable of gathering user data. This interface ensures that the main application loop can interact with various input types (like single-line and multi-line inputs) without knowing their underlying implementation details.

The Input Interface

The Input interface requires implementations to handle standard terminal events and state management:

Method	Return Type	Description
Blink()	tea.Msg	Returns a message to handle cursor blinking.
Blur()	tea.Msg	Handles the loss of focus for the input field.
Focus()	tea.Cmd	Returns a command to give focus to the input field.
SetValue(string)	void	Programs the input field with a specific string value.
Value()	string	Retrieves the current text content from the input.
Update(tea.Msg)	(Input, tea.Cmd)	Updates the component state based on terminal messages.
View()	string	Renders the component's visual representation.

Sources: input.go:9-17

Component Relationship

The following diagram illustrates the relationship between the central Main model, the Question structure, and the Input implementations.

Input Implementations

The project provides two primary concrete implementations of the Input interface, wrapping specialized Bubbles components.

Short Answer Field

This component uses textinput.Model for brief, single-line entries. It is initialized with a placeholder and automatically focused upon creation.

• Key Function: NewShortAnswerField()
• Behavior: Optimized for single-line strings like names or identifiers.

Sources: input.go:22-35

Long Answer Field

This component uses textarea.Model for multi-line text blocks. It allows users to enter more extensive information, such as descriptions or quotes.

• Key Function: NewLongAnswerField()
• Behavior: Supports vertical expansion and multi-line navigation.

Sources: input.go:76-89

Data Flow and Interaction

The UI manages data flow through the Bubble Tea Elm-architecture (Model-Update-View). When a user interacts with the keyboard, the Main model intercepts the message and delegates it to the currently active question's input component.

Sequence of User Input

The following sequence diagram demonstrates the flow of a user pressing "Enter" to submit a response and move to the next question.

Navigation Logic

Navigation is handled by the Next() method within the Main struct. It ensures the index wraps around or stops based on the total number of questions.

func (m *Main) Next() {
	if m.index < len(m.questions)-1 {
		m.index++
	} else {
		m.index = 0
	}
}

Sources: main.go:119-125

Visual Styling and Layout

The Input Component UI utilizes lipgloss to manage the aesthetic presentation of the wizard.

UI Style Configuration

Styles are centralized in a Styles struct, ensuring a uniform look across all input fields.

Element	Style Attribute	Value / Configuration
BorderColor	lipgloss.Color	"36" (Teal/Cyan)
InputField	lipgloss.Style	Normal Border, Padding 1, Width 80

Sources: main.go:14-25

Layout Rendering

The final view is constructed using lipgloss.Place to center the content within the terminal window. The question text and the styled input field are joined vertically.

return lipgloss.Place(
    m.width,
    m.height,
    lipgloss.Center,
    lipgloss.Center,
    lipgloss.JoinVertical(
        lipgloss.Left,
        current.question,
        m.styles.InputField.Render(current.input.View()),
    ),
)

Sources: main.go:103-117

Conclusion

The Input Component UI provides a robust and extensible framework for gathering user data in terminal applications. By abstracting different input types behind a common interface and leveraging a centralized styling system, it creates a consistent user experience while simplifying the complexity of terminal state management.