github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2025-12-26 05:48:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

feature(frontend): improve chat overflow handling and syntax highlighting (#1402)

Browse Source 
* improve overflow handling and syntax highlighting

* add reference to gh page
This commit is contained in:
sp.wack 2024-04-27 15:21:29 +03:00 committed by GitHub
parent ca73ecb499
commit d8386366d9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/ChatInterface.tsx
View File

@ -12,6 +12,7 @@ import {
import { Message } from "#/state/chatSlice";
import { RootState } from "#/store";
import ChatInput from "./ChatInput";
import { code } from "./markdown/code";
interface IChatBubbleProps {
msg: Message;
@ -57,10 +58,10 @@ function ChatBubble({ msg }: IChatBubbleProps): JSX.Element {
className={`flex mb-0 min-w-0 ${msg?.sender === "user" && "flex-row-reverse ml-auto"}`}
>
<div
className={`${msg?.sender === "user" ? "bg-neutral-700" : "bg-neutral-500"} rounded-lg`}
className={`overflow-y-auto ${msg?.sender === "user" ? "bg-neutral-700" : "bg-neutral-500"} rounded-lg`}
>
<div className="p-3 prose prose-invert text-white">
<Markdown>{msg?.content}</Markdown>
<Markdown components={{ code }}>{msg?.content}</Markdown>
</div>
</div>
</div>
@ -102,7 +103,7 @@ function MessageList(): JSX.Element {
return (
<div className="flex-1 flex flex-col gap-3 pt-3 px-3 relative min-h-0">
<div className="overflow-y-auto flex flex-col h-full gap-3">
<div className="flex overflow-x-auto flex-col h-full gap-3">
{newChatSequence.map((msg, index) => (
<ChatBubble key={index} msg={msg} />
))}

28
frontend/src/components/markdown/code.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import { ExtraProps } from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
// See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight
/**
* Component to render code blocks in markdown.
*/
export function code({
children,
className,
}: React.ClassAttributes<HTMLElement> &
React.HTMLAttributes<HTMLElement> &
ExtraProps) {
const match = /language-(\w+)/.exec(className || ""); // get the language
if (!match) {
return <code className={className}>{children}</code>;
}
return (
<SyntaxHighlighter style={vscDarkPlus} language={match?.[1]} PreTag="div">
{String(children).replace(/\n$/, "")}
</SyntaxHighlighter>
);
}