Add persona selection to AI qs

[paulb777]

Partnered with Gemini CLI to add Persona support to demonstrate system instructions:

[paulb777]

/gemini summary

[paulb777]

/gemini review

[gemini-code-assist]

Summary of Changes

This pull request introduces a new feature to the AI application, enabling users to select or define a 'persona' for the AI model. This functionality leverages system instructions to guide the AI's conversational style, allowing for more tailored and engaging interactions. The changes involve adding a new UI element to the sidebar for persona selection, implementing the logic to apply these personas to the AI model's parameters, and structuring the predefined persona data.

Highlights

• Persona Selection UI: I've added a new section to the left sidebar that allows users to select from a list of predefined AI personas or input a custom persona. This provides a user-friendly interface for controlling the AI's conversational style.
• Dynamic System Instructions: The application now dynamically updates the AI model's systemInstruction parameter based on the user's persona selection. This ensures that the AI's responses align with the chosen persona, whether it's a predefined one or a custom instruction.
• Predefined Persona Configuration: I've introduced a new configuration file (personas.ts) to centralize the definitions of various predefined AI personas. Each persona includes an ID, a display name, and the specific system instruction text, making it easy to add or modify personas.
• Styling Enhancements: The CSS for the left sidebar has been updated to seamlessly integrate the new persona selection UI. This includes new styles for the dropdown and textarea elements, ensuring a consistent and polished look.

Changelog

• ai/ai-react-app/src/components/Layout/LeftSidebar.module.css
  • Added new CSS classes for the persona selection UI, including styles for the sidebar container, persona selector section, persona dropdown, and custom persona textarea.
  • Refined existing styles for navigation buttons, backend selector, selector title, and radio groups to improve overall consistency and appearance.
• ai/ai-react-app/src/components/Layout/LeftSidebar.tsx
  • Imported necessary React hooks (useState, useEffect) and types (ModelParams) along with the new PREDEFINED_PERSONAS configuration.
  • Extended the LeftSidebarProps interface to accept generativeParams and setGenerativeParams, allowing the sidebar to influence AI model behavior.
  • Introduced local state for selectedPersonaId and customPersona to manage the user's persona choice.
  • Implemented a useEffect hook that updates the AI model's systemInstruction based on the selected persona or custom input, ensuring the instruction is only updated when its text content changes.
  • Added event handlers (handlePersonaChange, handleCustomPersonaChange) to manage user interactions with the persona dropdown and custom textarea.
  • Rendered the new 'Persona' selection section, which includes a dropdown populated with predefined personas and a conditional textarea for entering custom persona instructions, visible only when the application is in 'chat' mode.
• ai/ai-react-app/src/components/Layout/MainLayout.tsx
  • Modified the LeftSidebar component instantiation to pass down the generativeParams and setGenerativeParams props, enabling the sidebar to control the AI model's system instructions.
• ai/ai-react-app/src/config/personas.ts
  • Created a new file to define the Persona interface, specifying the structure for persona objects (id, name, systemInstruction).
  • Exported PREDEFINED_PERSONAS, an array containing various pre-configured AI personas such as 'Pirate Captain', 'Shakespearean Poet', 'Sarcastic Teenager', and 'Helpful Senior Developer', along with a 'Default' and 'Custom' option.

Activity

• paulb777 requested a review from Gemini.
• paulb777 requested a summary from Gemini.

[gemini-code-assist]

Code Review

This pull request adds a persona selection feature to the AI chat interface, allowing users to set a system instruction for the model from a list of predefined personas or a custom one. The changes include new UI components in the left sidebar, state management for the selected persona, and a useEffect to update the model parameters. I've identified a few areas for improvement regarding CSS maintainability, UI/UX on button states, and code simplification in the React component.

[paulb777]

/gemini review

[gemini-code-assist]

Code Review

This pull request successfully adds a persona selection feature to the chat interface, allowing users to apply system instructions to the AI model. The implementation is solid, introducing a new configuration file for personas and updating the sidebar component with the necessary state management and UI elements. My review includes a couple of suggestions to improve code clarity and type safety in the new TypeScript code, primarily by leveraging useMemo for derived state and as const for constant data structures. These changes will enhance the maintainability of the new feature.

[paulb777]

/gemini review

[gemini-code-assist]

Code Review

This pull request successfully introduces a persona selection feature for the AI chat, allowing users to apply system instructions through a dropdown menu in the left sidebar. The implementation includes a new set of predefined personas, updates to the UI components to support this selection, and the necessary state management to pass the selected persona's system instruction to the generative model.

The code is generally well-structured. I've identified a couple of areas for improvement:

• A potential UI state inconsistency in the LeftSidebar where it may not reflect external changes to the persona settings.
• A minor inconsistency in HTML heading levels between the left and right sidebars.

Addressing these points will improve the robustness and maintainability of the new feature.

[paulb777]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a persona selection feature, enhancing user interaction by allowing system instructions to be configured. The implementation is well-structured, with clear separation of concerns. Suggestions focus on improving robustness and maintainability by using constants and memoization.

[dlarocque]

Ty!

[paulb777]

@dlarocque Thanks for helping me through it!