'; // Message avatar $output .= '

'; if ( $type === 'user' ) { $output .= ''; } else { $output .= ''; } $output .= '

'; // Message content $output .= '

'; $output .= '

'; if ( ! empty( $metadata['error'] ) ) { $output .= '

⚠️

'; } $output .= wp_kses_post( $content ); $output .= '

'; // Message time and metadata $output .= '

'; $output .= '' . esc_html( $timestamp ) . ''; if ( $type === 'bot' && ! empty( $metadata['sources'] ) ) { $output .= '

'; $output .= ''; $output .= ''; $output .= '

'; } $output .= '

'; $output .= '

'; $output .= ''; return $output; } /** * Render typing indicator */ public static function render_typing_indicator() { $output = '

'; $output .= '

'; $output .= ''; $output .= '

'; $output .= '

'; $output .= ''; $output .= '

'; $output .= '

'; return $output; } /** * Render quick reply buttons */ public static function render_quick_replies( $replies ) { if ( empty( $replies ) ) { return ''; } $output = '

'; foreach ( $replies as $reply ) { $output .= ''; } $output .= '

'; return $output; } /** * Render suggested questions */ public static function render_suggested_questions() { $suggestions = array( __( 'What services do you offer?', 'aiohm-knowledge-assistant' ), __( 'How can I contact support?', 'aiohm-knowledge-assistant' ), __( 'What are your business hours?', 'aiohm-knowledge-assistant' ), __( 'Do you have a FAQ section?', 'aiohm-knowledge-assistant' ), ); // Try to get suggestions from Q&A dataset $qa_dataset = get_option( 'aiohm_qa_dataset', array() ); if ( ! empty( $qa_dataset ) ) { $custom_suggestions = array_slice( wp_list_pluck( $qa_dataset, 'question' ), 0, 4 ); if ( ! empty( $custom_suggestions ) ) { $suggestions = $custom_suggestions; } } $output = '

'; $output .= '

' . __( 'Suggested questions:', 'aiohm-knowledge-assistant' ) . '

'; foreach ( $suggestions as $suggestion ) { $output .= ''; } $output .= '

'; return $output; } /** * Render chat header with status */ public static function render_chat_header( $title, $subtitle = '', $show_status = true ) { $output = '

'; // Title and subtitle $output .= '

'; $output .= '

' . esc_html( $title ) . '

'; if ( ! empty( $subtitle ) ) { $output .= '

' . esc_html( $subtitle ) . '

'; } $output .= '

'; // Status indicator if ( $show_status ) { $output .= '

'; $output .= ''; $output .= '' . __( 'Ready', 'aiohm-knowledge-assistant' ) . ''; $output .= '

'; } $output .= '

'; return $output; } /** * Render empty chat state */ public static function render_empty_state( $welcome_message = '' ) { if ( empty( $welcome_message ) ) { $welcome_message = __( 'Hello! How can I help you today?', 'aiohm-knowledge-assistant' ); } $output = '

'; $output .= '

'; $output .= ''; $output .= '

'; $output .= '

' . esc_html( $welcome_message ) . '

'; $output .= self::render_suggested_questions(); $output .= '

'; return $output; } /** * Format message content with markdown-like formatting */ public static function format_message_content( $content ) { // Basic markdown-like formatting $content = wp_kses_post( $content ); // Bold text $content = preg_replace( '/\*\*(.*?)\*\*/', '$1', $content ); // Italic text $content = preg_replace( '/\*(.*?)\*/', '$1', $content ); // Line breaks $content = nl2br( $content ); // Links (simple detection) $content = preg_replace( '/https?:\/\/[^\s<>"]+/', '$0', $content ); return $content; } /** * Render chat input with features */ public static function render_chat_input( $placeholder = '', $features = array() ) { if ( empty( $placeholder ) ) { $placeholder = __( 'Type your message...', 'aiohm-knowledge-assistant' ); } $features = wp_parse_args( $features, array( 'show_emoji' => false, 'show_attachment' => false, 'show_voice' => false, 'auto_resize' => true, 'max_rows' => 4, ) ); $output = '

'; // Input wrapper $output .= '

'; // Additional features buttons (left side) if ( $features['show_emoji'] || $features['show_attachment'] || $features['show_voice'] ) { $output .= '

'; if ( $features['show_emoji'] ) { $output .= ''; } if ( $features['show_attachment'] ) { $output .= ''; } $output .= '

'; } // Text input $input_classes = array( 'aiohm-chat-input' ); if ( $features['auto_resize'] ) { $input_classes[] = 'aiohm-auto-resize'; } $output .= '

';
			$output .= '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">';
			$output .= '<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>';
			$output .= '<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>';
			$output .= '<line x1="12" y1="19" x2="12" y2="23"></line>';
			$output .= '<line x1="8" y1="23" x2="16" y2="23"></line>';
			$output .= '</svg>';
			$output .= '</button>';
		}

$output .= '<button type="button" class="aiohm-chat-send-btn" disabled>';
		$output .= '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">';
		$output .= '<line x1="22" y1="2" x2="11" y2="13"></line>';
		$output .= '<polygon points="22,2 15,22 11,13 2,9"></polygon>';
		$output .= '</svg>';
		$output .= '</button>';

$output .= '</div>';
		$output .= '</div>';

// Character counter (if enabled)
		if ( ! empty( $features['show_counter'] ) ) {
			$output .= '<div class="aiohm-character-counter">';
			$output .= '<span class="aiohm-char-count">0</span>';
			if ( ! empty( $features['max_chars'] ) ) {
				$output .= '<span class="aiohm-char-limit">/' . intval( $features['max_chars'] ) . '</span>';
			}
			$output .= '</div>';
		}

$output .= '</div>';

return $output;
	}
}