feat: enhance playground UI
Refine the Playground's UI to improve user experience: - Streamline chat window layout for better message readability - Introduce a knowledge selection dropdown for easier context setting - Improve image upload integration for a smoother workflow - Optimize spacing and styling for a more polished visual appearance
This commit is contained in:
n4ze3m
parent
7be993c057
commit
a2f9002b81
@ -90,7 +90,11 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
|
||||
width="80%"
|
||||
zIndex={999999}
|
||||
centered
|
||||
bodyStyle={{ padding: 0 }}>
|
||||
styles={{
|
||||
body: {
|
||||
padding: 0
|
||||
}
|
||||
}}>
|
||||
<div className="relative w-full h-[80vh]">
|
||||
<iframe
|
||||
srcDoc={value}
|
||||
|
||||
@ -49,7 +49,7 @@ export const PlaygroundMessage = (props: Props) => {
|
||||
return (
|
||||
<div className="group w-full text-gray-800 dark:text-gray-100">
|
||||
<div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
|
||||
<div className="flex flex-row gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 lg:px-0 m-auto w-full">
|
||||
<div className="flex flex-row gap-4 md:gap-6 p-4 md:py-6 lg:px-0 m-auto w-full">
|
||||
<div className="w-8 flex flex-col relative items-end">
|
||||
<div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center text-opacity-100r">
|
||||
{props.isBot ? (
|
||||
|
||||
@ -12,7 +12,7 @@ export const FireworksMonoIcon = React.forwardRef<
|
||||
ref={ref}
|
||||
{...props}>
|
||||
<path
|
||||
fill="#fff"
|
||||
fill="#6720FF"
|
||||
d="M318.563 221.755c-17.7 0-33.584-10.508-40.357-26.777L196.549 0h47.793l74.5 178.361L393.273 0h47.793L358.92 195.048c-6.808 16.199-22.657 26.707-40.357 26.707zM425.111 314.933c-17.63 0-33.444-10.439-40.287-26.567-6.877-16.269-3.317-34.842 9.112-47.445l148.721-150.64 18.572 43.813-136.153 137.654 194.071-1.082 18.573 43.813-212.574.524-.07-.07h.035zM0 314.408l18.573-43.813 194.07 1.082L76.525 133.988l18.573-43.813 148.721 150.641c12.428 12.568 16.024 31.21 9.111 47.444-6.842 16.164-22.727 26.567-40.287 26.567L.07 314.339l-.07.069z"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
@ -27,7 +27,7 @@ export const PlaygroundChat = () => {
|
||||
<>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="custom-scrollbar grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out overflow-y-auto h-[calc(100vh-200px)]">
|
||||
className="custom-scrollbar grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out overflow-y-auto h-[calc(100vh-160px)]">
|
||||
{messages.length === 0 && (
|
||||
<div className="mt-32">
|
||||
<PlaygroundEmpty />
|
||||
@ -61,10 +61,10 @@ export const PlaygroundChat = () => {
|
||||
)}
|
||||
</div>
|
||||
{!isAtBottom && (
|
||||
<div className="fixed md:bottom-44 bottom-36 z-[99999] left-0 right-0 flex justify-center">
|
||||
<div className="fixed md:bottom-40 bottom-36 z-20 left-0 right-0 flex justify-center">
|
||||
<button
|
||||
onClick={scrollToBottom}
|
||||
className="bg-gray-100 dark:bg-gray-800 p-1 rounded-full shadow-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
|
||||
className="bg-gray-100 border dark:border-gray-700 dark:bg-gray-800 p-1 rounded-full shadow-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
|
||||
<ChevronDown className="size-4 text-gray-600 dark:text-gray-300" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -190,7 +190,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-3 pt-3 md:px-6 md:pt-6 bg-gray-50 dark:bg-[#262626] border rounded-t-xl dark:border-gray-600">
|
||||
<div className="px-3 pt-3 md:px-4 md:pt-4 bg-gray-100 dark:bg-[#262626] border rounded-t-xl dark:border-gray-600">
|
||||
<div
|
||||
className={`h-full rounded-md shadow relative ${
|
||||
form.values.image.length === 0 ? "hidden" : "block"
|
||||
@ -213,7 +213,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex bg-white dark:bg-transparent">
|
||||
<div className="flex rounded-t-xl bg-white dark:bg-transparent">
|
||||
<form
|
||||
onSubmit={form.onSubmit(async (value) => {
|
||||
stopListening()
|
||||
@ -264,7 +264,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
|
||||
required
|
||||
onPaste={handlePaste}
|
||||
rows={1}
|
||||
style={{ minHeight: "60px" }}
|
||||
style={{ minHeight: "40px" }}
|
||||
tabIndex={0}
|
||||
placeholder={t("form.textarea.placeholder")}
|
||||
{...form.getInputProps("message")}
|
||||
@ -286,7 +286,23 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
|
||||
)}
|
||||
</div>
|
||||
<div className="flex !justify-end gap-3">
|
||||
<KnowledgeSelect />
|
||||
|
||||
|
||||
{!selectedKnowledge && (
|
||||
<Tooltip title={t("tooltip.uploadImage")}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
inputRef.current?.click()
|
||||
}}
|
||||
className={`flex items-center justify-center dark:text-gray-300 ${
|
||||
chatMode === "rag" ? "hidden" : "block"
|
||||
}`}>
|
||||
<ImageIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{browserSupportsSpeechRecognition && (
|
||||
<Tooltip title={t("tooltip.speechToText")}>
|
||||
<button
|
||||
@ -314,21 +330,8 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
<KnowledgeSelect />
|
||||
|
||||
{!selectedKnowledge && (
|
||||
<Tooltip title={t("tooltip.uploadImage")}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
inputRef.current?.click()
|
||||
}}
|
||||
className={`flex items-center justify-center dark:text-gray-300 ${
|
||||
chatMode === "rag" ? "hidden" : "block"
|
||||
}`}>
|
||||
<ImageIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
{!isSending ? (
|
||||
<Dropdown.Button
|
||||
htmlType="submit"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user