fix: some element styling
Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei
parent
628a40a76d
commit
19d92cf57e
|
|
@ -152,7 +152,7 @@ export const ChatInput = memo(
|
|||
)
|
||||
|
||||
return (
|
||||
<div className={cn(chatInputVariants({ variant }))}>
|
||||
<div data-testid="chat-input" className={cn(chatInputVariants({ variant }))}>
|
||||
{/* Input Area */}
|
||||
<div className="relative z-10 flex items-end" onContextMenu={stopPropagation}>
|
||||
<ScrollArea rootClassName="mr-14 flex-1 overflow-auto" viewportClassName="px-5 py-3.5">
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ import { WelcomeScreen } from "./WelcomeScreen"
|
|||
const SCROLL_BOTTOM_THRESHOLD = 100
|
||||
|
||||
const draftMessages = new Map<string, EditorState>()
|
||||
const ChatInterfaceContent = ({ centerInputOnEmpty, visualOffsetY }: ChatInterfaceProps) => {
|
||||
const ChatInterfaceContent = ({ centerInputOnEmpty }: ChatInterfaceProps) => {
|
||||
const hasMessages = useHasMessages()
|
||||
const status = useChatStatus()
|
||||
const chatActions = useChatActions()
|
||||
|
|
@ -343,16 +343,7 @@ const ChatInterfaceContent = ({ centerInputOnEmpty, visualOffsetY }: ChatInterfa
|
|||
const rateLimitExtraHeight = hasRateLimitError ? 40 : 0
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex size-full flex-col @container"
|
||||
style={
|
||||
visualOffsetY
|
||||
? ({
|
||||
transform: `translateY(${typeof visualOffsetY === "number" ? `${visualOffsetY}px` : visualOffsetY})`,
|
||||
} as React.CSSProperties)
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<div className="flex size-full flex-col @container">
|
||||
<GlobalFileDropZone className="flex size-full flex-col @container">
|
||||
<div className="flex min-h-0 flex-1 flex-col" ref={scrollContainerParentRef}>
|
||||
<AnimatePresence>
|
||||
|
|
@ -424,6 +415,7 @@ const ChatInterfaceContent = ({ centerInputOnEmpty, visualOffsetY }: ChatInterfa
|
|||
|
||||
<div
|
||||
ref={bottomPanelRef}
|
||||
data-testid="chat-input-container"
|
||||
className={cn(
|
||||
"absolute z-10 mx-auto duration-500 ease-in-out",
|
||||
hasMessages && "inset-x-0 bottom-0 max-w-4xl px-4 pb-4",
|
||||
|
|
@ -496,7 +488,6 @@ const ChatInterfaceContent = ({ centerInputOnEmpty, visualOffsetY }: ChatInterfa
|
|||
|
||||
interface ChatInterfaceProps {
|
||||
centerInputOnEmpty?: boolean
|
||||
visualOffsetY?: string | number
|
||||
}
|
||||
export const ChatInterface = (props: ChatInterfaceProps) => (
|
||||
<ErrorBoundary fallback={AIErrorFallback}>
|
||||
|
|
|
|||
|
|
@ -94,11 +94,10 @@ export const ChatMoreDropdown = ({
|
|||
: "Switch to Fixed Panel"}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<DropdownMenuItem onClick={() => settingModalPresent("ai")}>
|
||||
<i className="i-mgc-settings-1-cute-re mr-2 size-4" />
|
||||
<span>AI Settings</span>
|
||||
|
|
|
|||
|
|
@ -62,15 +62,17 @@ const DefaultWelcomeHeader = ({ description }: { description: string }) => (
|
|||
animate={{ opacity: 1, y: 0 }}
|
||||
className="space-y-6 text-center"
|
||||
>
|
||||
<div className="center">
|
||||
<AISpline />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="flex items-center justify-center gap-2 text-2xl font-semibold text-text">
|
||||
<Folo className="size-11" /> AI
|
||||
</h1>
|
||||
<div data-testid="welcome-screen-header">
|
||||
<div className="center">
|
||||
<AISpline />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="flex items-center justify-center gap-2 text-2xl font-semibold text-text">
|
||||
<Folo className="size-11" /> AI
|
||||
</h1>
|
||||
|
||||
<p className="text-balance text-sm text-text-secondary">{description}</p>
|
||||
<p className="text-balance text-sm text-text-secondary">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</m.div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ function SubviewLayoutInner() {
|
|||
{/* Enhanced Header with smooth transitions */}
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-x-0 top-0 z-10 transition-all duration-300 ease-out",
|
||||
"absolute inset-x-0 top-0 z-10 overflow-hidden transition-all duration-300 ease-out",
|
||||
isHeaderElevated && isElectronWindows && "-top-5",
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { cn } from "@follow/utils"
|
||||
|
||||
import { AIChatRoot } from "~/modules/ai-chat/components/layouts/AIChatRoot"
|
||||
import { ChatPageHeader } from "~/modules/ai-chat/components/layouts/ChatHeader"
|
||||
import { ChatInterface } from "~/modules/ai-chat/components/layouts/ChatInterface"
|
||||
|
|
@ -5,12 +7,15 @@ import { ChatInterface } from "~/modules/ai-chat/components/layouts/ChatInterfac
|
|||
export const Component = () => {
|
||||
return (
|
||||
<div
|
||||
className="relative flex h-screen w-full flex-col"
|
||||
className={cn(
|
||||
"relative flex h-screen w-full flex-col",
|
||||
"[&_[data-testid=chat-input-container]]:translate-y-32 [&_[data-testid=welcome-screen-header]]:-translate-y-24",
|
||||
)}
|
||||
style={{ "--ai-chat-layout-width": "65rem" } as React.CSSProperties}
|
||||
>
|
||||
<AIChatRoot>
|
||||
<ChatPageHeader />
|
||||
<ChatInterface centerInputOnEmpty visualOffsetY="clamp(-10vh, -8vh, -6vh)" />
|
||||
<ChatInterface centerInputOnEmpty />
|
||||
</AIChatRoot>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -44,27 +44,13 @@ export function LinearBlur({
|
|||
...props.style,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
zIndex: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<div className="absolute z-0 size-full">
|
||||
{/* Full blur at 100-falloffPercentage% */}
|
||||
{actualSteps > 1 && (
|
||||
<div
|
||||
className="absolute inset-0 z-[2]"
|
||||
style={{
|
||||
position: "absolute",
|
||||
zIndex: 2,
|
||||
inset: 0,
|
||||
mask: `linear-gradient(
|
||||
to ${oppositeSide[side]},
|
||||
rgba(0, 0, 0, 1) ${mainPercentage}%,
|
||||
rgba(0, 0, 0, 1) ${mainPercentage + step}%,
|
||||
rgba(0, 0, 0, 0) ${mainPercentage + step * 2}%
|
||||
)`,
|
||||
mask: `linear-gradient(to ${oppositeSide[side]}, rgba(0, 0, 0, 1) ${mainPercentage}%, rgba(0, 0, 0, 1) ${mainPercentage + step}%, rgba(0, 0, 0, 0) ${mainPercentage + step * 2}%)`,
|
||||
backdropFilter: getBackdropFilter(1),
|
||||
WebkitBackdropFilter: getBackdropFilter(1),
|
||||
}}
|
||||
|
|
@ -74,31 +60,19 @@ export function LinearBlur({
|
|||
Array.from({ length: actualSteps - 2 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
position: "absolute",
|
||||
zIndex: i + 2,
|
||||
inset: 0,
|
||||
mask: `linear-gradient(
|
||||
to ${oppositeSide[side]},
|
||||
rgba(0, 0, 0, 0) ${mainPercentage + i * step}%,
|
||||
rgba(0, 0, 0, 1) ${mainPercentage + (i + 1) * step}%,
|
||||
rgba(0, 0, 0, 1) ${mainPercentage + (i + 2) * step}%,
|
||||
rgba(0, 0, 0, 0) ${mainPercentage + (i + 3) * step}%
|
||||
)`,
|
||||
|
||||
mask: `linear-gradient(to ${oppositeSide[side]},rgba(0, 0, 0, 0) ${mainPercentage + i * step}%,rgba(0, 0, 0, 1) ${mainPercentage + (i + 1) * step}%,rgba(0, 0, 0, 1) ${mainPercentage + (i + 2) * step}%,rgba(0, 0, 0, 0) ${mainPercentage + (i + 3) * step}%)`,
|
||||
backdropFilter: getBackdropFilter(i + 2),
|
||||
WebkitBackdropFilter: getBackdropFilter(i + 2),
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
top: "-100%",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
boxShadow: `0 0 60px ${tint}, 0 0 100px ${tint}`,
|
||||
}}
|
||||
className="absolute -top-full left-0 size-full"
|
||||
style={{ boxShadow: `0 0 60px ${tint}, 0 0 100px ${tint}` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue