Skip to main content

​
Overview

SkillRise AI is an intelligent learning assistant that helps students understand concepts, debug code, and get personalized explanations. Accessible from /ai-chat, the AI assistant provides contextual help throughout your learning journey.

​
Chat Interface

The AI chat page features a modern messaging interface designed for educational conversations: AI chat interface with sidebar history and main conversation area

​
Layout Components

History Sidebar

  • Previous chat sessions
  • Organized by date
  • Quick access to past conversations
  • Desktop: Always visible
  • Mobile: Drawer overlay

Chat Area

  • Message history with alternating bubbles
  • Real-time typing indicator
  • Auto-scrolling to latest message
  • Markdown-rendered responses

Input Section

  • Auto-expanding textarea
  • Send button (enabled when text present)
  • Keyboard shortcuts (Shift+Enter)
  • “Shift+Enter for new line” hint

Empty State

  • “How can I help you?” greeting
  • Suggested use cases
  • Welcoming sparkle icon
  • Clean, centered layout

​
Chat History Sidebar

​
Desktop Sidebar

On larger screens, the history sidebar is permanently visible: 
<aside className="w-64 shrink-0 flex-col border-r">
  <div className="p-4 border-b">
    <p className="text-xs font-semibold uppercase">Chat History</p>
    <button className="w-full bg-teal-600">+ New Chat</button>
  </div>
  <div className="flex-1 overflow-y-auto p-2">
    {chatHistory.map(chat => (
      <ChatHistoryItem key={chat.sessionId} {...chat} />
    ))}
  </div>
</aside>

​
Mobile Drawer

On mobile, history opens as an overlay drawer:
1

Trigger

Tap “History” button in mobile toolbar
2

Overlay

Black translucent backdrop appears
3

Drawer

White panel slides in from left (72 wide)
4

Dismiss

Tap backdrop or X button to close

​
Chat History Items

Each previous conversation shows:
  • First user message - Truncated to one line
  • Last updated date - Formatted “DD MMM YYYY”
  • Active state - Teal background when selected
  • Delete button - Trash icon, appears on hover
Chat history item showing title, date, and delete button on hover Delete confirmation: 
const handleDeleteChat = async (sessionId) => {
  DELETE /api/user/chat/{sessionId}
  
  // Remove from list
  setChatHistory(prev => prev.filter(c => c.sessionId !== sessionId))
  
  // Clear active chat if deleted
  if (sessionId === activeSession) {
    setSessionId('')
    setMessages([])
  }
}

​
Conversation Flow

​
Starting a New Chat

Click ”+ New Chat” button: 
const startNewChat = () => {
  setMessages([])        // Clear message history
  setInput('')           // Clear input field
  setTyping(false)       // Reset typing state
  setSessionId('')       // New session will be created on first message
  setShowMobileHistory(false) // Close mobile drawer
}

​
Sending a Message

1

User Types

Input textarea auto-expands up to 120px height
2

Submit

Click Send or press Enter (Shift+Enter for new line)
3

Optimistic Update

User message immediately appears with timestamp ID
4

Show Typing

AI avatar with animated dots appears
5

API Call

POST /api/user/ai-chat
{
  content: userMessage,
  sessionId: currentSessionId || undefined
}

Response:
{
  response: aiMessage,
  activeSessionId: newOrExistingSession
}
6

Display Response

AI message appears with Markdown formatting

​
Message Display

Messages alternate between user and AI with distinct styling: 
<div className="flex flex-row-reverse"> {/* Right-aligned */}
  <div className="w-8 h-8 rounded-full bg-slate-600">
    <UserIcon /> {/* User avatar */}
  </div>
  <div className="bg-teal-600 text-white rounded-2xl px-4 py-2.5">
    {message.content}
  </div>
</div>
  • Right-aligned with reverse flex
  • Teal background, white text
  • Slate avatar icon
  • Max width 75%

​
AI Capabilities

​
What Students Can Ask

Example Prompts:
  • “Explain JavaScript closures in simple terms”
  • “What’s the difference between SQL and NoSQL?”
  • “How do HTTP requests work?”
AI provides clear, educational explanations tailored to the user’s level.
Example Prompts:
  • “Why is my Python function returning None?”
  • Paste code block + “What’s wrong with this code?”
  • “How do I add authentication to my React app?”
AI can debug code, suggest improvements, and explain best practices.
Example Prompts:
  • “How should I study for web development?”
  • “What topics should I learn after JavaScript?”
  • “Can you create a learning plan for data science?”
AI can provide personalized learning advice and roadmaps.

​
Markdown Rendering

AI responses support rich Markdown formatting:

​
Supported Elements

\`\`\`python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
\`\`\`

​
Code Syntax Highlighting

Code blocks automatically detect language and apply syntax highlighting: 
// JavaScript example
const greeting = (name) => {
  return `Hello, ${name}!`
}
AI response showing syntax-highlighted code block

​
Typing Indicator

While AI is generating a response, an animated indicator appears: 
{typing && (
  <div className="flex items-start gap-3">
    <div className="w-8 h-8 rounded-full bg-teal-500">
      <SparkIcon />
    </div>
    <div className="bg-gray-50 border rounded-2xl px-4 py-3">
      <div className="flex gap-1.5">
        <div className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" />
        <div className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" 
             style={{ animationDelay: '0.15s' }} />
        <div className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" 
             style={{ animationDelay: '0.3s' }} />
      </div>
    </div>
  </div>
)}
Three dots bounce in sequence to indicate processing.

​
Error Handling

When AI requests fail, a fallback message displays: 
catch (error) {
  setMessages(prev => [
    ...prev,
    {
      id: Date.now(),
      role: 'assistant',
      content: "Sorry, I'm having trouble connecting. Please try again."
    }
  ])
}
Don’t refresh the page or close the tab immediately after sending a message. Wait for the AI response to ensure your conversation is saved.

​
Session Management

​
Session Creation

Sessions are created automatically on first message: 
// First message in new chat
POST /api/user/ai-chat
{ content: "Hello", sessionId: undefined }

Response:
{
  response: "Hi! How can I help?",
  activeSessionId: "newly-generated-id"
}

// Store session ID for subsequent messages
setSessionId(data.activeSessionId)

​
Session Persistence

All messages in a session are saved to the database:
  • Reload page → Conversations persist
  • Switch devices → Access from chat history
  • Close browser → Resume later

​
Loading Previous Sessions

Click any chat in history to load it: 
const fetchConversation = async (sessionId) => {
  GET /api/user/chat/{sessionId}
  
  Response:
  {
    messages: [
      { role: 'user', content: '...' },
      { role: 'assistant', content: '...' }
    ]
  }
  
  setMessages(data.messages)
  setSessionId(sessionId)
}

​
Mobile Experience

​
Mobile Toolbar

Replaces desktop sidebar with compact controls: 
<div className="md:hidden px-4 py-3 border-b flex justify-between">
  <button onClick={() => setShowMobileHistory(true)}>
    <MenuIcon /> History
  </button>
  <button onClick={startNewChat}>
    + New Chat
  </button>
</div>

​
Touch Optimizations

  • Larger touch targets - Buttons 44px minimum
  • Swipe to dismiss - Drawer closes on swipe left
  • Keyboard handling - Input doesn’t hide behind virtual keyboard
  • Scroll behavior - Auto-scroll accounts for keyboard height

​
Performance Features

Messages scroll into view automatically:
useEffect(() => {
  messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
}, [messages])
Input grows with content up to 120px:
useEffect(() => {
  const textarea = textareaRef.current
  if (!textarea) return
  textarea.style.height = 'auto'
  textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'
}, [input])
User messages appear immediately while API call processes in background.
Chat history only loads previous chats on mount, not individual messages until selected.

​
Best Practices

Be specific in your questions. Instead of “Explain React,” ask “What are React hooks and when should I use them?” Specific questions get better answers.
Paste code when debugging. The AI can analyze actual code better than descriptions. Use code blocks for formatting: ```language your code here ```
Follow up for clarification. Don’t hesitate to ask “Can you explain that differently?” or “What does [term] mean?” The AI maintains conversation context.

​
Privacy & Security

All chat conversations are private and only visible to you. SkillRise AI does not share your conversations with other users or use them for marketing purposes.
Chat data storage:
  • Messages stored in your user account
  • Session IDs link conversations
  • No conversation history shared between users
  • Delete functionality permanently removes messages