baic/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

BAIC (Barclays AI Chat) is a web-based chat interface that allows users to interact with different AI assistants using various tone of voices. The application features a sidebar for conversation management and a main chat area with assistant/tone selection dropdowns.

Architecture

Core Structure

• Single Page Application: Built with vanilla JavaScript, HTML, and CSS
• Authentication: Microsoft OAuth 2.0 integration for Barclays tenant
• API Communication: Uses gcp_fetch() wrapper for all backend calls
• State Management: Global variables in js/variables.js manage application state

Key Components

• Sidebar: Conversation list with create/delete functionality
• Chat Interface: Message display with markdown rendering via Showdown.js
• Assistant Selection: Dropdown to choose different AI assistants
• Tone of Voice: Predefined tone options (Barclays, Barclaycard)
• Data Masking: Automatic masking of sensitive UK banking information

File Organization

• /js/script.js - Main application logic and UI interactions
• /js/variables.js - Configuration variables and global state
• /js/authorization.js - Microsoft OAuth authentication flow
• /js/html.js - HTML template strings for dynamic content
• /style.css - Complete styling with Barclays branding
• /fonts/ - Barclays Effra font family

Development Workflow

Local Development

• Serve files using a local web server (port 5500 is configured for localhost)
• No build process required - direct file serving
• Authentication redirects to localhost:5500 in development

Testing Changes

• Open index.html in a web server
• Test authentication flow with Microsoft login
• Verify conversation creation and messaging functionality
• Check responsive design and sidebar toggle behavior

Key Features

Data Security

• Automatic masking of UK bank details (sort codes, account numbers)
• Email address masking in user messages
• Cybersecurity term filtering
• No sensitive data logging

Error Handling

• Retry logic for all API calls (1 automatic retry)
• User-friendly error messages in chat interface
• Graceful degradation when services are unavailable

UI/UX Patterns

• Loading states with animated dots and spinners
• Smooth animations for message appearance
• Responsive sidebar that can be toggled
• Disabled send button during message processing

API Integration

All backend communication goes through gcp_fetch() which handles:

• Authentication token management
• CORS and credentials
• Error handling and logging
• Base64 encoding for message content

Main API endpoints:

• ?CheckAuth=True - Verify authentication
• ?GetConversations=True - Fetch conversation list
• ?GetAssistants=True - Fetch available assistants
• ?GetMessages=True&ConversationID=X - Load conversation history
• ?ConversationID=X&AssistantKey=Y&TOV_Key=Z&Message=BASE64 - Send message

Configuration

Environment Variables (js/variables.js)

• make_url - Backend API endpoint
• tenant_id - Microsoft tenant ID
• client_id - OAuth application ID

Tone of Voice Options

Hardcoded in tone_of_voices array:

• "standard" → "Barclays"
• "pep" → "Barclaycard"