Fix font e grafica
This commit is contained in:
Samuele E. Locatelli
+1
-1
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Egalware's LM Studio Chat App</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
+49
-2
@@ -7,12 +7,59 @@ html, body, #root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden; /* lo scroll è gestito dal main della chat */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bs-body-bg);
|
||||
font-family: sans-serif;
|
||||
font-family: 'Roboto', sans-serif; /* Font principale */
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
TITOLI & ELEMENTI EVIDENZIATI
|
||||
========================= */
|
||||
h1, h2, /*h3, h4, h5, h6,*/
|
||||
label,
|
||||
button,
|
||||
.send-button,
|
||||
.offcanvas-title,
|
||||
.session-table th {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
BOTTONI
|
||||
========================= */
|
||||
button,
|
||||
.send-button {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
CHAT TITLES / HEADER
|
||||
========================= */
|
||||
.chat-header,
|
||||
.chat-layout header,
|
||||
.offcanvas-header {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
LABELS & PICCOLI ELEMENTI
|
||||
========================= */
|
||||
label,
|
||||
.badge,
|
||||
.nav-link {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
|
||||
@@ -155,7 +155,7 @@ function CodeWithCopy({ inline, className = "", children, ...props }) {
|
||||
background: "transparent",
|
||||
cursor: "pointer"
|
||||
}}
|
||||
className="btn-copy"
|
||||
className="btn btn-copy shadow"
|
||||
title="Copy to clipboard"
|
||||
>
|
||||
📋
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
/* MessageContent.css */
|
||||
.table {
|
||||
width: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 0.25rem 0.5rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.md-pre-wrapper {
|
||||
min-height: 5rem; /* adjust to taste */
|
||||
}
|
||||
|
||||
.md-pre-wrapper pre,
|
||||
.md-pre-wrapper > div { /* syntax highlighter wrapper */
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
// MessageContent.jsx
|
||||
import React, { useCallback } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkMath from 'remark-math';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import './MessageContent.css';
|
||||
|
||||
export default function MessageContent({ content }) {
|
||||
const handleCopy = useCallback(async (text) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
} catch {
|
||||
/* you could add a toast here if desired */
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkMath, remarkGfm]}
|
||||
rehypePlugins={[rehypeKatex]}
|
||||
components={{
|
||||
table: (props) => <table className="table table-bordered table-sm" {...props} />,
|
||||
thead: (props) => <thead className="table-light" {...props} />,
|
||||
code({ inline, className, children, ...props }) {
|
||||
const codeText = String(children).replace(/\n$/, '');
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
const isMultiLine = codeText.includes('\n');
|
||||
|
||||
if (inline || !isMultiLine) {
|
||||
// Inline or single-line — render plainly
|
||||
return (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
// Multi-line fenced code block → highlight + copy button
|
||||
return (
|
||||
<div className="position-relative md-pre-wrapper">
|
||||
<SyntaxHighlighter
|
||||
style={oneDark}
|
||||
language={match ? match[1] : null}
|
||||
PreTag="div"
|
||||
customStyle={{ margin: 0, borderRadius: '0.25rem', minHeight: '5rem' }}
|
||||
>
|
||||
{codeText || ' '} {/* keep at least a space to hold height */}
|
||||
</SyntaxHighlighter>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-outline-secondary position-absolute top-0 end-0 m-1 d-flex align-items-center gap-1"
|
||||
onClick={() => handleCopy(codeText)}
|
||||
>
|
||||
<span role="img" aria-label="Copy">
|
||||
📋
|
||||
</span>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
);
|
||||
}
|
||||
|
||||
Generated
-1
@@ -216,7 +216,6 @@
|
||||
"version": "1.30.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
|
||||
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user