fcarra/omnisupport-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update ClientPortal.tsx

Browse Source
This commit is contained in:
fcarraUniSa
2026-02-18 10:30:03 +01:00
committed by GitHub
parent c4b13bea21
commit 85eaebfb9b
1 changed files with 23 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/ClientPortal.tsx
View File

@@ -41,20 +41,21 @@ interface ClientPortalProps {
} }
// Configurazione stili per ReactMarkdown // Configurazione stili per ReactMarkdown
// Estraiamo 'node' dai props per non passarlo al componente DOM, evitando warning di React
const MarkdownComponents = { const MarkdownComponents = {
h1: (props: any) => <h1 className="text-2xl font-bold text-gray-900 mb-4 mt-6 border-b border-gray-100 pb-2" {...props} />, h1: ({node, ...props}: any) => <h1 className="text-2xl font-bold text-gray-900 mb-4 mt-6 border-b border-gray-100 pb-2" {...props} />,
h2: (props: any) => <h2 className="text-xl font-bold text-gray-800 mb-3 mt-5" {...props} />, h2: ({node, ...props}: any) => <h2 className="text-xl font-bold text-gray-800 mb-3 mt-5" {...props} />,
h3: (props: any) => <h3 className="text-lg font-semibold text-gray-800 mb-2 mt-4" {...props} />, h3: ({node, ...props}: any) => <h3 className="text-lg font-semibold text-gray-800 mb-2 mt-4" {...props} />,
p: (props: any) => <p className="text-gray-600 mb-4 leading-relaxed" {...props} />, p: ({node, ...props}: any) => <p className="text-gray-600 mb-4 leading-relaxed" {...props} />,
ul: (props: any) => <ul className="list-disc pl-5 mb-4 space-y-2 text-gray-600" {...props} />, ul: ({node, ...props}: any) => <ul className="list-disc pl-5 mb-4 space-y-2 text-gray-600" {...props} />,
ol: (props: any) => <ol className="list-decimal pl-5 mb-4 space-y-2 text-gray-600" {...props} />, ol: ({node, ...props}: any) => <ol className="list-decimal pl-5 mb-4 space-y-2 text-gray-600" {...props} />,
li: (props: any) => <li className="pl-1" {...props} />, li: ({node, ...props}: any) => <li className="pl-1" {...props} />,
strong: (props: any) => <strong className="font-bold text-gray-900" {...props} />, strong: ({node, ...props}: any) => <strong className="font-bold text-gray-900" {...props} />,
blockquote: (props: any) => <blockquote className="border-l-4 border-brand-200 pl-4 italic text-gray-500 my-4 bg-gray-50 py-2 pr-2 rounded-r" {...props} />, blockquote: ({node, ...props}: any) => <blockquote className="border-l-4 border-brand-200 pl-4 italic text-gray-500 my-4 bg-gray-50 py-2 pr-2 rounded-r" {...props} />,
a: (props: any) => <a className="text-brand-600 underline hover:text-brand-800 transition-colors" target="_blank" rel="noopener noreferrer" {...props} />, a: ({node, ...props}: any) => <a className="text-brand-600 underline hover:text-brand-800 transition-colors" target="_blank" rel="noopener noreferrer" {...props} />,
code: (props: any) => <code className="bg-gray-100 text-pink-600 px-1.5 py-0.5 rounded text-sm font-mono border border-gray-200" {...props} />, code: ({node, ...props}: any) => <code className="bg-gray-100 text-pink-600 px-1.5 py-0.5 rounded text-sm font-mono border border-gray-200" {...props} />,
pre: (props: any) => <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4 text-sm" {...props} />, pre: ({node, ...props}: any) => <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4 text-sm" {...props} />,
hr: (props: any) => <hr className="my-6 border-gray-200" {...props} />, hr: ({node, ...props}: any) => <hr className="my-6 border-gray-200" {...props} />,
}; };
export const ClientPortal: React.FC<ClientPortalProps> = ({ export const ClientPortal: React.FC<ClientPortalProps> = ({
@@ -544,10 +545,10 @@ export const ClientPortal: React.FC<ClientPortalProps> = ({
<h3 className="text-lg font-bold text-gray-800 my-2">{article.title}</h3> <h3 className="text-lg font-bold text-gray-800 my-2">{article.title}</h3>
<div className="text-gray-600 text-sm line-clamp-3"> <div className="text-gray-600 text-sm line-clamp-3">
<ReactMarkdown components={{ <ReactMarkdown components={{
h1: ({node, ...props}) => <span className="font-bold" {...props} />, h1: ({node, ...props}: any) => <span className="font-bold" {...props} />,
h2: ({node, ...props}) => <span className="font-bold" {...props} />, h2: ({node, ...props}: any) => <span className="font-bold" {...props} />,
p: ({node, ...props}) => <span {...props} />, p: ({node, ...props}: any) => <span {...props} />,
li: ({node, ...props}) => <span className="mr-1" {...props} />, li: ({node, ...props}: any) => <span className="mr-1" {...props} />,
}}> }}>
{article.content} {article.content}
</ReactMarkdown> </ReactMarkdown>
@@ -626,11 +627,11 @@ export const ClientPortal: React.FC<ClientPortalProps> = ({
{/* Render Markdown in chat messages too for consistency if assistant */} {/* Render Markdown in chat messages too for consistency if assistant */}
{msg.role === 'assistant' ? ( {msg.role === 'assistant' ? (
<ReactMarkdown components={{ <ReactMarkdown components={{
p: ({node, ...props}) => <p className="mb-1 last:mb-0" {...props} />, p: ({node, ...props}: any) => <p className="mb-1 last:mb-0" {...props} />,
ul: ({node, ...props}) => <ul className="list-disc pl-4 mb-2" {...props} />, ul: ({node, ...props}: any) => <ul className="list-disc pl-4 mb-2" {...props} />,
li: ({node, ...props}) => <li className="mb-0.5" {...props} />, li: ({node, ...props}: any) => <li className="mb-0.5" {...props} />,
a: ({node, ...props}) => <a className="underline font-semibold" target="_blank" {...props} />, a: ({node, ...props}: any) => <a className="underline font-semibold" target="_blank" {...props} />,
strong: ({node, ...props}) => <strong className="font-bold" {...props} /> strong: ({node, ...props}: any) => <strong className="font-bold" {...props} />
}}>{msg.content}</ReactMarkdown> }}>{msg.content}</ReactMarkdown>
) : ( ) : (
msg.content msg.content