John Remillard
c78604de02
Sets up the basic project configuration for Cognitive Clarity. This includes: - Initializing `package.json` with necessary dependencies (React, Gemini API, Lucide React) and build scripts for Vite. - Creating a basic `index.html` with Tailwind CSS and Google Fonts integration. - Setting up `index.tsx` as the React application entry point. - Configuring `tsconfig.json` for TypeScript compilation with Vite. - Establishing `vite.config.ts` for development server setup and environment variable handling. - Adding a standard `.gitignore` file. - Updating `README.md` with local run instructions and AI Studio links. - Defining `metadata.json` for application details. - Creating core type definitions in `types.ts`. - Populating `constants.ts` with initial CBT glossary terms. - Adding utility functions for audio processing in `services/audioUtils.ts`.
41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
|
|
import React from 'react';
|
|
import { User, Bot } from 'lucide-react';
|
|
import { Message } from '../types';
|
|
|
|
interface ChatMessageProps {
|
|
message: Message;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const ChatMessage: React.FC<ChatMessageProps> = ({ message, isLoading }) => {
|
|
const isModel = message.role === 'model';
|
|
|
|
return (
|
|
<div className={`flex ${!isModel ? 'justify-end' : 'justify-start'}`}>
|
|
<div className={`flex max-w-[85%] gap-3 ${!isModel ? 'flex-row-reverse' : 'flex-row'}`}>
|
|
<div className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm border ${
|
|
!isModel ? 'bg-teal-50 text-teal-600 border-teal-100' : 'bg-slate-50 text-slate-600 border-slate-100'
|
|
}`}>
|
|
{!isModel ? <User size={18} /> : <Bot size={18} />}
|
|
</div>
|
|
<div className={`p-4 rounded-2xl text-sm leading-relaxed shadow-sm ${
|
|
!isModel
|
|
? 'bg-teal-600 text-white rounded-tr-none'
|
|
: 'bg-[#F9FAFB] text-slate-800 rounded-tl-none border border-slate-100'
|
|
}`}>
|
|
{message.text || (isModel && isLoading ? (
|
|
<div className="flex gap-1 items-center">
|
|
<span className="w-1 h-1 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
|
|
<span className="w-1 h-1 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
|
|
<span className="w-1 h-1 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
|
|
</div>
|
|
) : null)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ChatMessage);
|