Main Chat Interface Procedure Guide

This procedure guide explains how to use the Main Chat Interface to compose and send messages, attach files, use voice input, configure agent roles, select projects, and interact with AI responses including citations and follow-up suggestions. The Main Chat Interface provides a unified system for all communication with the AI assistant.

---

Table of Contents

1. Accessing the Main Chat Interface
2. Understanding the Main Chat Interface
3. Composing a New Message
4. Attaching Files
5. Using Drag and Drop
6. Using Voice Input
7. Configuring Agent Roles
8. Selecting Projects
9. Using Source with Files Mode
10. Sending Messages and Loading States
11. Understanding Message Format
12. Working with Citations
13. Using Next Suggestions
14. Key Features Summary
15. Best Practices
16. Troubleshooting
17. Security Notes

---

Accessing the Main Chat Interface

Step 1: Locate the Chat Input Box

1. Log in to the application
2. Navigate to the Chat interface
3. The Chat Input box appears in one of two locations:
   • New Chat: Centered on the screen when no chat is selected or no messages exist
   • Existing Chat: At the bottom of the chat panel when viewing an active conversation

Step 2: Understanding Input Box States

The Chat Input box adapts based on context:

• New Chat State:

  • Centered on screen
  • Shows placeholder text: “Ask me anything…”

• Active Chat State:

  • Positioned at bottom of chat panel
  • Shows placeholder text based on context
  • Integrates with existing conversation

---

Understanding the Main Chat Interface

Input Box Components

The Main Chat Interface consists of several key components:

1. Text Area: Main input field for typing messages
2. Character Counter: Shows character count (max 2000 characters)
3. File Attachment Button: Paperclip icon (📎) for attaching files
4. Voice Input Button: Microphone icon (🎤) for voice recording
5. Send Button: Arrow icon (→) to send the message
6. Agent Role Selector: Dropdown to configure AI role, tone, and style
7. Project Selector: Dropdown to select projects for context
8. Source Mode Toggle: Switch for controlling knowledge base usage (when files attached)
9. File/Evidence Display: Shows attached files and knowledge library references

Visual Indicators

• File Icons: Different icons for PDFs, images, documents, etc.
• Project Colors: Files and evidence color-coded by associated project
• Upload Status: Visual feedback during file upload
• Recording Indicator: Animated microphone icon during voice recording
• Character Limit Warning: Visual warning when approaching 2000 character limit

---

Composing a New Message

Step 1: Start Typing

1. Click in the text area of the Chat Input box
2. Begin typing your message
3. The input box will automatically expand as you type
4. Character counter updates in real-time

---

Attaching Files

Step 1: Access File Attachment

1. Locate the paperclip icon (📎) in the Chat Input box
2. Click the paperclip icon to open the file picker
3. Alternatively, use drag and drop (see Using Drag and Drop)

Step 2: Select Files

1. The file picker dialog opens
2. Navigate to the files you want to attach
3. Select multiple files by holding Ctrl (Windows) or Cmd (Mac) while clicking
4. Supported file types include:
   • PDF documents (.pdf)
   • Word documents (.docx, .doc)
   • Text files (.txt)
   • Images (.jpg, .png, .gif, etc.)
   • Excel files (.xlsx, .xls)
   • And more

Step 3: View Attached Files

1. After selection, files appear as file bubbles above the text input
2. Each file shows:
   • File name
   • File type icon
   • Project color (if associated with a project)
   • Remove button (X)
3. Maximum 4 items total (files + knowledge library references combined)
4. If you exceed the limit, an alert message appears

Step 4: Remove Attached Files

1. Hover over a file bubble to see the remove button
2. Click the X button to remove the file
3. The file is immediately removed from the attachment list
4. You can add a different file if needed

Step 5: File Upload Behavior

When you send a message with files:

1. Files are uploaded to the server
2. Upload acknowledgment messages appear in the chat
3. Files become available for the AI to reference
4. If identical files already exist, a reuse message appears
5. Files are associated with the current chat session

---

Using Drag and Drop

Step 1: Drag Files from File System

1. Open your file explorer (Windows Explorer, Finder, etc.)
2. Select one or more files you want to attach
3. Drag the files over the Chat Input box area
4. The input box shows a visual indicator (highlighted border) when files are dragged over it
5. Release the mouse to drop the files

Step 2: Drag Evidence from Knowledge Library

1. Open the Knowledge Library (right sidebar)
2. Locate the document you want to reference
3. Click and drag the document card
4. Drag it over the Chat Input box
5. The input box shows a visual indicator
6. Release to drop the evidence reference

Step 3: Understanding Drop Behavior

When dropping items:

• Files from file system: Added as uploaded files (yellow styling)
• Evidence from library: Added as evidence references (project-colored styling)
• Combined limit: Maximum 4 items total (files + evidence)
• Automatic project selection: Dropping evidence may auto-select associated projects

Step 4: Visual Feedback

During drag and drop:

1. Drag Over State: Input box border highlights
2. File Count: Shows how many files are being dragged
3. Drop Zone: Clear visual indication of drop target
4. Error Messages: Alerts if limit exceeded or invalid file type

---

Using Voice Input

Step 1: Access Voice Recording

1. Locate the microphone icon (🎤) in the Chat Input box
2. Click the microphone icon to start recording
3. The icon changes to indicate recording state

Step 2: Grant Microphone Permission

First Time Use:

1. Browser will prompt for microphone permission
2. Click “Allow” to grant access
3. If denied, follow browser-specific instructions to enable

Permission States:

• Granted: Recording starts immediately
• Prompt: Browser asks for permission
• Denied: Error message appears with instructions

Step 3: Record Your Message

1. Click the microphone to start recording
2. Speak clearly into your microphone
3. Visual feedback shows:
   • Animated microphone icon
   • “Recording…” status message
   • Real-time transcript appears in text area
4. Auto-stop: Recording stops after 2.5 seconds of silence
5. Manual stop: Click microphone again to stop recording

Step 5: Handle Errors

If voice recording fails:

1. Permission Denied:

   • Error message appears
   • Click “Grant Permission” button if available
   • Follow browser settings to enable microphone

2. No Microphone:

   • Error message indicates no microphone detected
   • Use text input instead

3. Recording Failed:

   • Try clicking microphone again
   • Check microphone connection
   • Verify browser permissions

---

Configuring Agent Roles

Step 1: Access Role Selector

1. Locate the Agent Role indicator below the Chat Input box
2. Shows format: “Agent Role of [Role Name]”
3. Click on the underlined role name to open dropdown

Step 2: Select Agent Role

1. Role Dropdown opens showing available roles:
   • Director of Construction Technology
   • Construction Manager
   • Project Manager
   • Site Engineer
   • And more…
2. Click a role to select it
3. The role updates immediately
4. Role affects how the AI responds to your messages

Step 3: Configure Tone

1. After selecting role, configure Tone:
   • Professional: Formal, business-like communication
   • Casual: Relaxed, conversational communication
2. Tone affects the style of AI responses
3. Selected tone persists for the chat session

Step 4: Configure Style

1. Configure Communication Style:
   • Serious: Formal and direct
   • Reserved: Cautious and measured
   • Balanced: Moderate approach
   • Lighthearted: Friendly and approachable
   • Humorous: Playful and entertaining
2. Style affects the personality of AI responses
3. Selected style persists for the chat session

Step 5: Understanding Role Impact

The selected role, tone, and style:

• Affect AI responses: Responses match your selected configuration
• Persist per chat: Settings saved for each chat session
• Sync with profile: Defaults from your profile settings
• Can be changed: Update anytime during conversation

---

Selecting Projects

Step 1: Access Project Selector

1. Locate the Project Selector in the Chat Input area
2. Shows current project selection or “All Knowledge”
3. Click to open project dropdown

Step 2: Select Projects

1. Project Dropdown opens showing:
   • Available projects (with color indicators)
   • “All Knowledge” option (no project filter)
2. Select one or more projects:
   • Click to select/deselect projects
   • Multiple projects can be selected
   • Selected projects show checkmarks
3. “All Knowledge” option:
   • Shows all documents across all projects
   • No project filtering applied

Step 3: Understanding Project Selection Impact

Selected projects affect:

• Document Access: AI can reference documents from selected projects
• Knowledge Base: Search limited to selected projects
• Chat Context: Conversation focused on selected projects
• Evidence References: Dropping evidence may auto-select associated projects

Step 4: Project Selection Behavior

• Auto-selection: Dropping evidence may auto-select its project
• Multiple Projects: Can select multiple projects for cross-project queries
• All Knowledge: Selecting “All Knowledge” clears project filters
• Visual Indicators: Selected projects show in project selector

---

Using Source with Files Mode

Step 1: Attach Files First

1. Attach one or more files using file attachment or drag and drop
2. Files appear as file bubbles above the input
3. Source Mode Toggle appears when files are attached

Step 2: Understand Source Modes

When files are attached, you have two modes:

• “No Source” Mode (default):

  • AI uses only the attached files
  • Ignores general knowledge base
  • Focuses exclusively on uploaded content

• “+Source” Mode (Source with Knowledge):

  • AI uses general knowledge base
  • Files are available but not exclusively used
  • AI can reference other documents

Step 3: Toggle Source Mode

1. Locate the toggle switch near attached files
2. Toggle to “+Source” to enable Source with Knowledge mode
3. Toggle shows current mode state
4. Mode applies to the next message sent

Step 4: When to Use Source Mode

Use “+Source” mode when:

• You want AI to use general knowledge
• You want AI to reference other documents
• Files are supplementary to your question

Use “No Source” mode when:

• You want AI to focus only on specific uploaded files
• You need analysis of particular documents
• You want to exclude general knowledge base
• You’re working with confidential or project-specific documents

---

Sending Messages and Loading States

Step 1: Send a Message

1. Compose your message in the text input
2. Optionally attach files or evidence references
3. Configure agent role, tone, and style if needed
4. Select projects for context if desired
5. Click the Send button (→) or press Enter

Step 2: Immediate Loading State

After sending:

1. Message appears immediately in chat
2. Input box clears and becomes disabled
3. Loading indicator appears showing:
   • “Processing…” message
   • Progress stages (if applicable)
   • Elapsed time counter
4. Pending message state shows in chat

Step 3: Processing Stages

The loading indicator shows processing stages:

1. Processing Request: Initial request processing
2. Searching Knowledge Base: Finding relevant documents
3. Generating Response: AI generating answer
4. Formatting Response: Preparing final response
5. Complete: Response ready

Step 4: Response Arrival

When response arrives:

1. Pending message updates with AI response
2. Citations appear (if any) as numbered references
3. Follow-up suggestions appear below response
4. Input box re-enables for next message
5. Character counter resets

Step 5: Error Handling

If sending fails:

1. Error message appears in chat
2. Input box re-enables immediately
3. Your message is preserved (not lost)
4. Retry sending when ready
5. Check network connection if errors persist

---

Understanding Message Format

Step 1: User Message Format

User messages appear as:

• Text content: Your typed or voice-transcribed message
• Attached files: File bubbles showing attached documents
• Evidence references: Knowledge library items you referenced
• Project context: Selected projects (shown in message metadata)
• Timestamp: When message was sent

Step 2: AI Response Format

AI responses include:

• Response text: Main answer or information
• Citations: Numbered references to source documents
• File attachments: Documents referenced in response
• Role/Tone/Style tags: Shows AI configuration used
• Follow-up suggestions: Next question recommendations

Step 3: Citation Markers in Text

Citations appear as:

• Superscript numbers: Like [1], [2], [3] in the text
• Clickable: Click to view source document
• Tooltips: Hover to see document name and page
• Inline references: Integrated naturally in response text

Step 4: Message Metadata

Each message shows:

• Timestamp: When sent/received
• Status: Pending, complete, or error
• Processing time: How long response took
• Context: Project associations
• Tags: Role, tone, style indicators

---

Working with Citations

Step 1: Understanding Citations

Citations are references to source documents used in AI responses:

• Numbered references: [1], [2], [3] appear in response text
• Source documents: Link to specific documents in knowledge base
• Page numbers: Reference specific pages when available
• Highlighted text: Shows quoted or referenced content

Step 2: View Citation Details

1. Hover over a citation number (e.g., [1])
2. Tooltip appears showing:
   • Document filename
   • Page number (if available)
   • “Click to view” instruction
3. Tooltip stays visible while hovering

Step 3: Open Citation Source

1. Click a citation number in the response
2. Document Modal opens showing:
   • Full document viewer
   • Citation highlighted on specific page
   • Navigation to other citations
   • Document metadata
3. Navigate citations: Use citation sidebar to jump between references

Step 4: Navigate Multiple Citations

When multiple citations exist:

1. Citation sidebar shows all citations
2. Click any citation to jump to that reference
3. Highlighted sections show quoted content
4. Page navigation jumps to cited pages
5. Close modal to return to chat

Step 5: Citation Types

Citations can reference:

• Uploaded files: Documents you attached to the chat
• Knowledge library: Documents from knowledge base
• Bulk uploads: System-wide documents
• Project documents: Documents associated with selected projects

---

Using Next Suggestions

Step 1: Understanding Follow-up Suggestions

After AI responses, follow-up suggestions appear:

• Suggested questions: AI-generated relevant follow-ups
• Context-aware: Based on current conversation
• Clickable: Click to use as your next message
• Dynamic: Changes based on conversation context

Step 2: View Suggestions

1. Scroll to bottom of AI response
2. Follow-up section appears below response
3. Questions are contextually relevant to the response

Step 3: Use a Suggestion

1. Click any suggested question
2. Question automatically populates in input box
3. Review and edit if needed
4. Send normally or modify before sending
5. Suggestion usage is tracked for improvement

Step 4: Suggestion Types

Suggestions include:

• Recent questions: Based on your previous questions
• Topic-based: Generated from conversation topics
• Contextual: Related to current response content
• Exploratory: Help you dive deeper into topics

---

Key Features Summary

Input Features

• Unified Interface: Same input box for all contexts
• Multi-modal Input: Text, voice, files, and evidence
• Character Limits: 2000 character maximum with counter
• Real-time Feedback: Visual indicators for all actions
• Responsive Design: Adapts to screen size and context

File Management Features

• Multiple File Types: PDFs, Word, images, Excel, and more
• Drag and Drop: Easy file attachment from file system
• Evidence Integration: Reference knowledge library documents
• Visual Previews: File bubbles with type indicators
• Project Association: Files color-coded by project

Voice Features

• One-click Recording: Simple microphone activation
• Auto-transcription: Real-time speech-to-text
• Auto-stop: Stops after silence detection
• Permission Management: Clear error handling
• Transcript Editing: Edit before sending

Configuration Features

• Agent Roles: Customize AI persona
• Tone Selection: Professional or casual communication
• Style Options: Serious to humorous range
• Project Selection: Focus on specific projects
• Source Mode: Control knowledge base usage

Response Features

• Citation System: Numbered references to sources
• Document Viewer: Click citations to view sources
• Follow-up Suggestions: AI-generated next questions
• Processing Indicators: Clear loading states
• Error Recovery: Graceful error handling

---

Best Practices

Composing Messages

1. Be Specific: Clear, specific questions get better answers
2. Use Context: Reference previous messages when needed
3. Attach Relevant Files: Include documents that support your question
4. Select Projects: Narrow focus to relevant projects
5. Review Before Sending: Check for typos and clarity

File Management

1. Limit Attachments: Keep to essential files (max 4 items)
2. Use Descriptive Names: Name files clearly for easier reference
3. Combine Related Files: Attach related documents together
4. Use Source Mode Wisely: Toggle to “+Source” when you want knowledge base access, or leave as “No Source” (default) for file-only focus
5. Remove Unused Files: Clean up attachments before sending

Voice Input

1. Speak Clearly: Enunciate for better transcription
2. Use Quiet Environment: Reduce background noise
3. Review Transcripts: Always check transcription accuracy
4. Edit Before Sending: Correct any transcription errors
5. Grant Permissions: Allow microphone access for best experience

Agent Configuration

1. Match Role to Task: Select role appropriate for your question
2. Consistent Settings: Keep tone/style consistent within a chat
3. Experiment: Try different configurations to find your preference
4. Profile Sync: Settings sync with your profile defaults
5. Context Matters: Adjust based on conversation topic

Project Selection

1. Be Selective: Choose only relevant projects
2. Use “All Knowledge”: When you need broad search
3. Multiple Projects: Select multiple for cross-project queries
4. Auto-selection: Let evidence drops auto-select projects
5. Clear When Done: Reset to “All Knowledge” when switching topics

Working with Citations

1. Click to Explore: Click citations to verify sources
2. Check Page Numbers: Verify cited pages are accurate
3. Use Multiple Citations: Reference multiple sources when needed
4. Navigate Efficiently: Use citation sidebar for quick navigation
5. Understand Context: Citations show where information came from

Using Suggestions

1. Click to Use: Quick way to continue conversation
2. Edit if Needed: Modify suggestions before sending
3. Explore Topics: Use suggestions to dive deeper
4. Track Usage: System learns from your question patterns
5. Start New Chats: Use suggestions to begin conversations

---

Troubleshooting

Issue: Input Box Not Appearing

Solutions:

• Refresh the page
• Check if you’re logged in
• Verify chat interface is loaded
• Clear browser cache if issues persist
• Check browser console for errors

Issue: Files Not Attaching

Solutions:

• Check file size limits
• Verify file type is supported
• Ensure you haven’t exceeded 4-item limit
• Try drag and drop instead of file picker
• Check browser permissions for file access

Issue: Voice Recording Not Working

Solutions:

• Grant microphone permission in browser settings
• Check microphone is connected and working
• Verify browser supports speech recognition
• Try refreshing the page
• Check browser console for errors
• Use text input as alternative

Issue: Character Limit Reached

Solutions:

• Split message into multiple parts
• Remove unnecessary text
• Use file attachments for long content
• Summarize your question
• Character limit is 2000 characters

Issue: Message Not Sending

Solutions:

• Check internet connection
• Verify you’re still logged in
• Wait for previous message to complete
• Refresh page and retry
• Check for error messages in chat
• Clear browser cache

Issue: Citations Not Appearing

Solutions:

• Citations only appear when AI references documents
• Check if documents are available in knowledge base
• Verify project selection includes document projects
• Ensure files were uploaded successfully
• Wait for response to fully load

Issue: Suggestions Not Showing

Solutions:

• Suggestions appear after AI responses
• Check if suggestions are enabled in your profile
• Wait for response to complete
• Refresh page if suggestions don’t appear
• Suggestions may not appear for very short responses

Issue: Project Selection Not Working

Solutions:

• Verify you have access to selected projects
• Check project permissions in your profile
• Try selecting “All Knowledge” instead
• Refresh page to reload project list
• Contact admin if projects are missing

Issue: Source Mode Toggle Missing

Solutions:

• Toggle only appears when files are attached
• Attach at least one file to see toggle
• Check if files uploaded successfully
• Refresh page if toggle doesn’t appear
• Verify files are in supported format

Issue: Drag and Drop Not Working

Solutions:

• Ensure files are valid and not corrupted
• Check browser supports drag and drop
• Try file picker instead
• Verify you haven’t exceeded item limit
• Check browser console for errors

---

Security Notes

• File Uploads: Files are uploaded securely and associated with your account
• Voice Data: Voice recordings are processed locally and not stored
• Project Access: You can only access projects you have permission for
• Message Privacy: Messages are private to your account and organization
• Citation Sources: Citations only reference documents you have access to

---