aa61ef868a
Replaces the Gemini service integration with support for Open WebUI. This change simplifies the AI backend by leveraging an existing solution, allowing for more flexible API connections and reducing direct dependency on specific AI models. Updated dependencies, including React, to their latest versions to incorporate performance improvements and bug fixes. Refactored color schemes and typography in the HTML to better align with the application's theme. Adjusted type definitions for improved clarity and compatibility with the new backend integration.
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import { Role, Message, Language } from '../types';
|
|
import { formatConversationalTime, detectLanguage } from '../utils';
|
|
import { MessageActions } from './MessageActions';
|
|
|
|
interface Props {
|
|
message: Message;
|
|
onDelete: (id: string) => void;
|
|
}
|
|
|
|
export function ChatMessage({ message, onDelete }: Props) {
|
|
const isUser = message.role === Role.USER;
|
|
const language = detectLanguage(message.content);
|
|
const fontClass = language === Language.ES ? 'font-spanish' : 'font-english';
|
|
|
|
return (
|
|
<div className={`group flex w-full mb-6 ${isUser ? 'justify-end' : 'justify-start'} animate-slide-up`}>
|
|
<div className={`relative max-w-[85%] md:max-w-[70%] flex flex-col ${isUser ? 'items-end' : 'items-start'}`}>
|
|
|
|
{/* Message Bubble */}
|
|
<div className={`
|
|
relative px-6 py-4 rounded-message shadow-sm text-base leading-relaxed
|
|
transition-all duration-200 hover:shadow-md
|
|
${isUser
|
|
? 'bg-sergio-200 text-sergio-900 rounded-tr-sm'
|
|
: 'bg-sergio-300 text-sergio-900 rounded-tl-sm'
|
|
}
|
|
`}>
|
|
<div className={`prose prose-sm max-w-none prose-p:my-2 prose-headings:text-sergio-800 ${fontClass}`}>
|
|
<ReactMarkdown>{message.content}</ReactMarkdown>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Meta Info & Actions */}
|
|
<div className="flex items-center gap-3 mt-1.5 px-2 h-6">
|
|
<time className="text-xs text-sergio-500 font-english">
|
|
{formatConversationalTime(message.timestamp)}
|
|
</time>
|
|
|
|
<MessageActions messageId={message.id} onDelete={onDelete} />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|