Desciption
Modern conversational AI interfaces are rapidly evolving beyond simple chat windows into sophisticated, multi-modal experiences that blend conversation with direct manipulation, collaborative editing, and intelligent content generation.
This meta issue is for creating a UX concept covering current and future aspects of conversational interface design for Drupal AI.
Once we have a UX, we can proceed to further expand the API between frontend applications (the conversational interface) and Drupal's chat connection.
The work should be executed in the following steps
- Create and approve UX
- Expand / define chat API
- Select most important features
- Implement selected functionality
The UX work will be done in this issue, implementation work can be done in child issues.
UX Briefing
Project Goal: To design a flexible and intuitive chat interface for Drupal AI that enables users to interact with Drupal websites using agentic AI functionality. The interface must adapt to various display contexts and effectively present diverse AI responses, including rich media and "artifacts."
Scope: This briefing focuses specifically on the chat interface UX, not a full workspace like Claude or Gemini.
Core Principles & Context
Adaptability: The chat UI must be launchable from different locations (header bar, sidebar, bottom right) and utilize varying amounts of space (slide-up chat, sidebar integration, content section embed, modal window).
Rich Interaction: Support for diverse AI response types beyond plain text is crucial, including visual elements, code snippets, and "artifacts" (documents, complex media).
User-Centric: Prioritize clear visual feedback, contextual guidance, and user control to foster trust and efficiency.
Key Visual Components & Requirements
Based on the provided concepts, the following visual components are essential for the Drupal AI chat interface:
Main Conversational Interface
Chat History Display:
- Clear distinction between user queries and AI responses (e.g., distinct chat bubbles, avatars).
- Support for plain text, bold text, and clear typography.
User Input Field:
- Prominently placed at the bottom.
- Includes a "Send" button.
- Attachment Button: A paperclip icon or "Attach File" button for direct document/file uploads.
- Voice Input Button: For speech-to-text activation (consider large touch target for mobile).
- Visual Feedback Indicators (for AI Processing States):
- Typing Indicator: Classic three-dot ellipsis animation or "AI is typing..." for short responses.
- Spinner/Loader: Circular or animated AI icon for brief processing times ("AI is thinking...", "Searching...").
- Progress Bar: Linear or circular with percentage/descriptive text ("Generating draft...", "Synthesizing content...") for longer operations.
- Skeleton Screens: For complex content generation, a visual outline of forthcoming content.
- Checkmarks: To indicate successful completion.
- Cancel Option: An "X" icon or "Stop" button adjacent to active indicators to allow users to cancel long-running AI operations.
Follow-Up Questions & Suggestions
Quick Reply Buttons:
- Styled as pills or compact rectangular buttons.
- Dynamically generated, contextually relevant follow-up questions or actionable prompts (e.g., "Tell me more," "Summarize this," "Save as draft").
- "Show More Suggestions" option if applicable.
Contextual Prompts: AI-generated conversation starters or nudges.
Document & Artifact Display
In-line Artifacts: For small, self-contained items like code snippets, short data tables, or single-image previews, rendered directly within the chat bubble for immediate comprehension.
Collapsible Sidebar:
- For document previews (e.g., technical specs, research papers) when AI references or generates them.
- Allows scrolling, viewing key highlights/summaries, and related document suggestions.
- Easily expandable/collapsible to manage screen real estate.
- Full-Screen Overlay (Modal Window):
- For detailed document viewing (when clicking a preview or link).
- Includes standard functionalities: zoom, full-text search, download options, potentially AI-powered annotations/highlights.
- Maintains conversational context in the background (dimmed).
- Canvas Mode: A dedicated workspace for editing or deep interaction with complex AI-generated content (e.g., a structured report, a content outline). This should be accessible from the chat but open as a distinct view.
Rich Content Rendering
- Interactive Image Gallery/Carousel:
- For multiple images (product images, design variations).
- Swipe/click navigation, AI-generated captions.
- Options to expand, save, or generate similar images.
- Embedded Slideshow Player:
- For AI-generated presentations or curated content sets.
- "Next"/"Previous" controls, AI-generated captions/key takeaways.
- Options to download or export to Drupal content types.
- Interactive Elements: Clickable tools or quick-response buttons embedded within responses (e.g., "Show more like this," "Generate different style").
Customizable Settings & AI Model Selection
- Settings Access Point: A clearly visible "Settings" icon (gear icon) or menu option.
- AI Persona/Tone Selector: Dropdown/radio buttons for tone (Professional, Friendly, Concise, Creative).
- Domain/Model Selection ("AI Modes"): Toggles/radio buttons/dropdown for pre-configured AI behaviors (e.g., Research Assistant, Code Generator, Content Editor, Marketing Strategist), with brief descriptions.
- Output Refinement Options: Checkboxes/toggles for preferences like "Generate detailed responses," "Include source citations," "Suggest follow-up questions automatically."
- Feedback Mechanism: Prominent "Send Feedback" button or a structured section for ratings/issues (e.g., thumbs-up/down).
- Reset/Clear Conversation Options: Buttons to "Clear Current Conversation" or "Reset AI State."
Wireframe & Prototype Considerations (for Figma)
The UX designer should use this briefing to create low-fidelity visual representations (Wireframes) of the chat interface, demonstrating how the above components work in in different contexts:
- Launching the chat from different entry points.
- Sending a query and observing AI processing feedback.
- Interacting with quick replies and follow-up suggestions.
- Viewing in-line artifacts.
- Opening a document in the sidebar and then in a full-screen overlay.
- Interacting with an image gallery/slideshow.
- Accessing and adjusting AI settings.
In addition a prototype should be created with the following focus areas:
- Responsiveness: Show how the layout adapts to different screen sizes (mobile, tablet, desktop).
- Transitions: Illustrate smooth transitions when the chat opens/closes or changes display modes.
- Interaction States: Clearly show hover, active, and disabled states for interactive elements.
Additional information / Screenshots / Prototype Videos
As preparation for this issue a UX research was done using Gemini and Claude.
Screenshots Drupal Chat
More Screenshots Drupal Chat
Screenshots Claude Deep Research
More Screenshots Claude Deep Research
Screenshots Gemini Research
More Screenshots Gemini Research
Figma wirefame from XB and demo video
Screenshot and Demo video
Figma Link XB
Todo
- Create UX Briefing
- Create UX and approve
- Select important features
- Do issue breakdown as child issues for implementation
Accept
- We have an approved UX
- We have selected the most important features
- We have broken the most important features down for implementation