Skip to content

Commit fc53906

Browse files
Ark2307Ark2307
authored
Merge pull request #3666 from akto-api-security/feature/add_new_fields
Feature/add new fields
2 parents df683b6 + 9617e83 commit fc53906

File tree

9 files changed

+279
-210
lines changed

9 files changed

+279
-210
lines changed

‎apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/AIMessage.jsx‎

Lines changed: 4 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Box } from '@shopify/polaris'
2-
import ReactMarkdown from 'react-markdown'
32
import { useState, useEffect } from 'react'
43
import EventStreamComponent from './EventStreamComponent'
4+
import { MarkdownRenderer, markdownStyles } from './MarkdownComponents'
55

66
// Function to separate event stream content from regular content
77
const separateContent = (msg) => {
@@ -129,33 +129,9 @@ function AIMessage({ message, isStreaming = false }) {
129129
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
130130
{regularContent && (
131131
<div className="markdown-content">
132-
<ReactMarkdown
133-
components={{
134-
h1: ({ children }) => <h1 className="markdown-h1">{children}</h1>,
135-
h2: ({ children }) => <h2 className="markdown-h2">{children}</h2>,
136-
h3: ({ children }) => <h3 className="markdown-h3">{children}</h3>,
137-
h4: ({ children }) => <h4 className="markdown-h4">{children}</h4>,
138-
p: ({ children }) => <p className="markdown-p">{children}</p>,
139-
ul: ({ children }) => <ul className="markdown-ul">{children}</ul>,
140-
ol: ({ children }) => <ol className="markdown-ol">{children}</ol>,
141-
li: ({ children }) => <li className="markdown-li">{children}</li>,
142-
code: ({ children, className }) => {
143-
const isInline = !className;
144-
return isInline ? (
145-
<code className="markdown-inline-code">{children}</code>
146-
) : (
147-
<code className="markdown-code-block">{children}</code>
148-
);
149-
},
150-
pre: ({ children }) => <pre className="markdown-pre">{children}</pre>,
151-
blockquote: ({ children }) => <blockquote className="markdown-blockquote">{children}</blockquote>,
152-
strong: ({ children }) => <strong className="markdown-strong">{children}</strong>,
153-
em: ({ children }) => <em className="markdown-em">{children}</em>,
154-
a: ({ children, href }) => <a href={href} className="markdown-link" target="_blank" rel="noopener noreferrer">{children}</a>
155-
}}
156-
>
132+
<MarkdownRenderer>
157133
{isStreaming ? displayedMessage : regularContent}
158-
</ReactMarkdown>
134+
</MarkdownRenderer>
159135
</div>
160136
)}
161137

@@ -182,173 +158,7 @@ function AIMessage({ message, isStreaming = false }) {
182158
0%, 50% { opacity: 1; }
183159
51%, 100% { opacity: 0; }
184160
}
185-
186-
.markdown-content {
187-
line-height: 1.6;
188-
color: #333;
189-
width: 100%;
190-
max-width: 100%;
191-
overflow-wrap: break-word;
192-
word-wrap: break-word;
193-
word-break: break-word;
194-
hyphens: auto;
195-
}
196-
197-
.markdown-content .markdown-h1 {
198-
font-size: 1.5em;
199-
font-weight: 700;
200-
margin: 1em 0 0.5em 0;
201-
color: #1a1a1a;
202-
border-bottom: 2px solid #e1e5e9;
203-
padding-bottom: 0.3em;
204-
}
205-
206-
.markdown-content .markdown-h2 {
207-
font-size: 1.3em;
208-
font-weight: 600;
209-
margin: 1em 0 0.5em 0;
210-
color: #2c3e50;
211-
}
212-
213-
.markdown-content .markdown-h3 {
214-
font-size: 1.1em;
215-
font-weight: 600;
216-
margin: 0.8em 0 0.4em 0;
217-
color: #34495e;
218-
}
219-
220-
.markdown-content .markdown-h4 {
221-
font-size: 1em;
222-
font-weight: 600;
223-
margin: 0.6em 0 0.3em 0;
224-
color: #34495e;
225-
}
226-
227-
.markdown-content .markdown-p {
228-
margin: 0.5em 0;
229-
line-height: 1.6;
230-
}
231-
232-
.markdown-content .markdown-ul,
233-
.markdown-content .markdown-ol {
234-
margin: 0.5em 0;
235-
padding-left: 1.5em;
236-
}
237-
238-
.markdown-content .markdown-li {
239-
margin: 0.2em 0;
240-
line-height: 1.5;
241-
}
242-
243-
.markdown-content .markdown-inline-code {
244-
background-color: #f1f3f4;
245-
color: #d63384;
246-
padding: 0.2em 0.4em;
247-
border-radius: 3px;
248-
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
249-
font-size: 0.9em;
250-
border: 1px solid #e1e5e9;
251-
overflow-wrap: break-word;
252-
word-wrap: break-word;
253-
word-break: break-all;
254-
}
255-
256-
.markdown-content .markdown-pre {
257-
background-color: #f8f9fa;
258-
border: 1px solid #e1e5e9;
259-
border-radius: 6px;
260-
padding: 1em;
261-
margin: 1em 0;
262-
overflow-x: auto;
263-
overflow-wrap: break-word;
264-
word-wrap: break-word;
265-
word-break: break-all;
266-
white-space: pre-wrap;
267-
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
268-
font-size: 0.9em;
269-
line-height: 1.4;
270-
max-width: 100%;
271-
}
272-
273-
.markdown-content .markdown-code-block {
274-
background-color: #f8f9fa;
275-
color: #333;
276-
padding: 0.2em 0.4em;
277-
border-radius: 3px;
278-
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
279-
font-size: 0.9em;
280-
}
281-
282-
.markdown-content .markdown-blockquote {
283-
border-left: 4px solid #10a37f;
284-
margin: 1em 0;
285-
padding: 0.5em 1em;
286-
background-color: #f8f9fa;
287-
color: #555;
288-
font-style: italic;
289-
}
290-
291-
.markdown-content .markdown-strong {
292-
font-weight: 700;
293-
color: #1a1a1a;
294-
}
295-
296-
.markdown-content .markdown-em {
297-
font-style: italic;
298-
color: #555;
299-
}
300-
301-
.markdown-content .markdown-link {
302-
color: #10a37f;
303-
text-decoration: none;
304-
border-bottom: 1px solid transparent;
305-
transition: border-bottom-color 0.2s ease;
306-
}
307-
308-
.markdown-content .markdown-link:hover {
309-
border-bottom-color: #10a37f;
310-
text-decoration: none;
311-
}
312-
313-
/* Emoji styling */
314-
.markdown-content .emoji {
315-
font-size: 1.2em;
316-
margin: 0 0.1em;
317-
}
318-
319-
/* Task list styling */
320-
.markdown-content input[type="checkbox"] {
321-
margin-right: 0.5em;
322-
}
323-
324-
/* Table styling */
325-
.markdown-content table {
326-
border-collapse: collapse;
327-
width: 100%;
328-
max-width: 100%;
329-
margin: 1em 0;
330-
table-layout: fixed;
331-
overflow-wrap: break-word;
332-
}
333-
334-
.markdown-content th,
335-
.markdown-content td {
336-
border: 1px solid #e1e5e9;
337-
padding: 0.5em;
338-
text-align: left;
339-
word-wrap: break-word;
340-
overflow-wrap: break-word;
341-
word-break: break-word;
342-
}
343-
344-
.markdown-content th {
345-
background-color: #f8f9fa;
346-
font-weight: 600;
347-
}
348-
349-
.markdown-content tr:nth-child(even) {
350-
background-color: #f8f9fa;
351-
}
161+
${markdownStyles}
352162
`}</style>
353163
</Box>
354164
)

0 commit comments

Comments
 (0)