iod/page-assist
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance playground UI

Browse Source 
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
2024-10-20 17:45:56 +05:30
parent 7be993c057
commit a2f9002b81
5 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Option/Playground/PlaygroundChat.tsx
View File

@@ -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>

39
src/components/Option/Playground/PlaygroundForm.tsx
View File

@@ -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"