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

feat: add bottom fade mask utility and enhance Playground layout

Browse Source
This commit is contained in:
n4ze3m
2025-02-07 23:49:40 +05:30
parent 1eae319d10
commit a46156847d
10 changed files with 624 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Common/Playground/Message.tsx
View File

@@ -52,8 +52,8 @@ export const PlaygroundMessage = (props: Props) => {
const { t } = useTranslation("common")
const { cancel, isSpeaking, speak } = useTTS()
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="group relative flex w-full max-w-3xl flex-col items-end justify-center pb-2 md:px-4 lg:w-4/5 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 p-4 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">
@@ -197,12 +197,12 @@ export const PlaygroundMessage = (props: Props) => {
<div
className={`space-x-2 gap-2 mt-3 flex ${
props.currentMessageIndex !== props.totalMessages - 1
// there is few style issue so i am commenting this out for v1.4.5 release
// next release we will fix this
// ? "invisible group-hover:visible"
? "hidden group-hover:flex"
// ""
: "flex"
? // there is few style issue so i am commenting this out for v1.4.5 release
// next release we will fix this
"invisible group-hover:visible"
: // ? "hidden group-hover:flex"
""
// : "flex"
}`}>
{props.isTTSEnabled && (
<Tooltip title={t("tts")}>
@@ -213,7 +213,7 @@ export const PlaygroundMessage = (props: Props) => {
cancel()
} else {
speak({
utterance: removeReasoning(props.message),
utterance: removeReasoning(props.message)
})
}
}}
@@ -292,7 +292,7 @@ export const PlaygroundMessage = (props: Props) => {
)}
</div>
</div>
</div>
{/* </div> */}
</div>
)
}