mirror of
https://github.com/eigent-ai/eigent.git
synced 2026-05-29 19:15:39 +00:00
css bug fix (#1413)
This commit is contained in:
Douglas Lai
GitHub
parent
4fb2e5db9a
commit
26625927ff
2 changed files with 29 additions and 30 deletions
|
|
@ -976,7 +976,7 @@ export default function ChatBox(): JSX.Element {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="h-full w-full flex-none items-center justify-center overflow-hidden rounded-2xl border-solid border-border-tertiary bg-surface-secondary">
|
||||
<div className="rounded-2xl border-border-tertiary bg-surface-secondary h-full w-full flex-none items-center justify-center overflow-hidden border-solid">
|
||||
{/* Unified ChatBox Structure */}
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
{/* Header Box - Always visible */}
|
||||
|
|
@ -993,10 +993,10 @@ export default function ChatBox(): JSX.Element {
|
|||
<div className="relative flex flex-1 flex-col overflow-hidden">
|
||||
{/* Project Chat Container - Show when has messages (absolute, full height) */}
|
||||
<div
|
||||
className={`absolute inset-0 flex h-full flex-col transition-all duration-300 ease-in-out ${
|
||||
className={`inset-0 ease-in-out absolute flex h-full flex-col transition-all duration-300 ${
|
||||
hasAnyMessages
|
||||
? 'pointer-events-auto translate-y-0 opacity-100'
|
||||
: 'pointer-events-none -translate-y-4 opacity-0'
|
||||
? 'translate-y-0 pointer-events-auto opacity-100'
|
||||
: '-translate-y-4 pointer-events-none opacity-0'
|
||||
}`}
|
||||
>
|
||||
<ProjectChatContainer
|
||||
|
|
@ -1007,15 +1007,15 @@ export default function ChatBox(): JSX.Element {
|
|||
|
||||
{/* Init State Container - Welcome + BottomBox + Suggestions (vertically centered) */}
|
||||
<div
|
||||
className={`flex flex-1 flex-col transition-all duration-300 ease-in-out ${
|
||||
className={`ease-in-out flex flex-1 flex-col transition-all duration-300 ${
|
||||
hasAnyMessages
|
||||
? 'pointer-events-none absolute inset-0 opacity-0'
|
||||
? 'inset-0 pointer-events-none absolute opacity-0'
|
||||
: 'pointer-events-auto opacity-100'
|
||||
}`}
|
||||
>
|
||||
{/* Welcome Message - Top area, flex-1 to push content down */}
|
||||
<div className="flex flex-1 flex-col items-center justify-end gap-1 pb-4">
|
||||
<div className="text-center text-body-lg font-bold text-text-heading">
|
||||
<div className="gap-1 pb-4 flex flex-1 flex-col items-center justify-end">
|
||||
<div className="text-body-lg font-bold text-text-heading text-center">
|
||||
{t('layout.welcome-to-eigent')}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1054,24 +1054,24 @@ export default function ChatBox(): JSX.Element {
|
|||
)}
|
||||
|
||||
{/* Suggestion Area - Bottom area, flex-1 to push content up */}
|
||||
<div className="mt-3 flex h-[210px] items-start justify-center gap-2 pr-2">
|
||||
<div className="mt-3 gap-2 flex h-[210px] flex-1 items-start justify-center">
|
||||
{!hasModel ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="gap-2 flex items-center">
|
||||
<div
|
||||
onClick={() => {
|
||||
navigate('/history?tab=agents');
|
||||
}}
|
||||
className="flex cursor-pointer items-center gap-2 rounded-md bg-surface-warning px-sm py-xs"
|
||||
className="gap-2 rounded-md bg-surface-warning px-sm py-xs flex cursor-pointer items-center"
|
||||
>
|
||||
<TriangleAlert size={20} className="text-icon-warning" />
|
||||
<span className="flex-1 text-xs font-medium leading-[20px] text-text-warning">
|
||||
<span className="text-xs font-medium text-text-warning flex-1 leading-[20px]">
|
||||
{t('layout.please-select-model')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{hasModel && !privacy ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="gap-2 flex items-center">
|
||||
<div
|
||||
onClick={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
|
|
@ -1093,13 +1093,13 @@ export default function ChatBox(): JSX.Element {
|
|||
proxyFetchPut('/api/user/privacy', requestData);
|
||||
setPrivacy(true);
|
||||
}}
|
||||
className="flex cursor-pointer items-center gap-1 rounded-md bg-surface-information px-sm py-xs"
|
||||
className="gap-1 rounded-md bg-surface-information px-sm py-xs flex cursor-pointer items-center"
|
||||
>
|
||||
<TriangleAlert
|
||||
size={20}
|
||||
className="text-icon-information"
|
||||
/>
|
||||
<span className="flex-1 text-xs font-medium leading-[20px] text-text-information">
|
||||
<span className="text-xs font-medium text-text-information flex-1 leading-[20px]">
|
||||
{t('layout.by-messaging-eigent')}{' '}
|
||||
<a
|
||||
href="https://www.eigent.ai/terms-of-use"
|
||||
|
|
@ -1125,7 +1125,7 @@ export default function ChatBox(): JSX.Element {
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mr-2 flex flex-col items-center gap-2">
|
||||
<div className="mr-2 gap-2 flex flex-col items-center">
|
||||
{[
|
||||
{
|
||||
label: t('layout.it-ticket-creation'),
|
||||
|
|
@ -1142,7 +1142,7 @@ export default function ChatBox(): JSX.Element {
|
|||
].map(({ label, message }) => (
|
||||
<div
|
||||
key={label}
|
||||
className="cursor-pointer rounded-md bg-surface-tertiary px-sm py-xs text-xs font-medium leading-none text-button-tertiery-text-default opacity-70 transition-all duration-300 hover:opacity-100"
|
||||
className="rounded-md bg-surface-tertiary px-sm py-xs text-xs font-medium text-button-tertiery-text-default cursor-pointer leading-none opacity-70 transition-all duration-300 hover:opacity-100"
|
||||
onClick={() => {
|
||||
setMessage(message);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@ function HeaderWin() {
|
|||
const { chatStore, projectStore } = useChatStoreAdapter();
|
||||
const { toggle } = useSidebarStore();
|
||||
const { chatPanelPosition, setChatPanelPosition } = usePageTabStore();
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const appearance = useAuthStore((state) => state.appearance);
|
||||
const [endDialogOpen, setEndDialogOpen] = useState(false);
|
||||
const [endProjectLoading, setEndProjectLoading] = useState(false);
|
||||
|
|
@ -205,7 +204,7 @@ function HeaderWin() {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`drag absolute left-0 right-0 top-0 z-50 flex !h-9 items-center justify-between py-1 ${
|
||||
className={`drag left-0 right-0 top-0 !h-9 py-1 absolute z-50 flex items-center justify-between ${
|
||||
platform === 'darwin' ? 'pl-20' : 'pl-2'
|
||||
}`}
|
||||
id="titlebar"
|
||||
|
|
@ -214,7 +213,7 @@ function HeaderWin() {
|
|||
{/* left */}
|
||||
<div
|
||||
className={`${
|
||||
platform === 'darwin' && isFullscreen ? 'w-0' : 'w-[70px]'
|
||||
platform === 'darwin' ? 'w-0' : 'w-[70px]'
|
||||
} no-drag flex items-center justify-center`}
|
||||
>
|
||||
{platform !== 'darwin' && (
|
||||
|
|
@ -225,7 +224,7 @@ function HeaderWin() {
|
|||
</div>
|
||||
|
||||
{/* center */}
|
||||
<div className="drag flex h-full flex-1 items-center justify-between pr-2">
|
||||
<div className="drag pr-2 flex h-full flex-1 items-center justify-between">
|
||||
<div className="relative z-50 flex h-full items-center">
|
||||
{location.pathname === '/history' && (
|
||||
<div className="mr-1 flex items-center">
|
||||
|
|
@ -286,7 +285,7 @@ function HeaderWin() {
|
|||
onClick={toggle}
|
||||
size="sm"
|
||||
>
|
||||
<span className="inline-block max-w-[300px] overflow-hidden text-ellipsis whitespace-nowrap align-middle">
|
||||
<span className="inline-block max-w-[300px] overflow-hidden align-middle text-ellipsis whitespace-nowrap">
|
||||
{t('layout.new-project')}
|
||||
</span>
|
||||
<ChevronDown />
|
||||
|
|
@ -305,7 +304,7 @@ function HeaderWin() {
|
|||
className="no-drag text-base font-bold"
|
||||
onClick={toggle}
|
||||
>
|
||||
<span className="inline-block max-w-[300px] overflow-hidden text-ellipsis whitespace-nowrap align-middle">
|
||||
<span className="inline-block max-w-[300px] overflow-hidden align-middle text-ellipsis whitespace-nowrap">
|
||||
{activeTaskTitle}
|
||||
</span>
|
||||
<ChevronDown />
|
||||
|
|
@ -321,7 +320,7 @@ function HeaderWin() {
|
|||
<div
|
||||
className={`${
|
||||
platform === 'darwin' && 'pr-2'
|
||||
} no-drag relative z-50 flex h-full items-center gap-1`}
|
||||
} no-drag gap-1 relative z-50 flex h-full items-center`}
|
||||
>
|
||||
{chatStore.activeTaskId &&
|
||||
chatStore.tasks[chatStore.activeTaskId as string] &&
|
||||
|
|
@ -340,7 +339,7 @@ function HeaderWin() {
|
|||
onClick={() => setEndDialogOpen(true)}
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
className="no-drag justify-center rounded-full bg-surface-cuation !text-text-cuation"
|
||||
className="no-drag bg-surface-cuation !text-text-cuation justify-center rounded-full"
|
||||
>
|
||||
<Power />
|
||||
{t('layout.end-project')}
|
||||
|
|
@ -361,7 +360,7 @@ function HeaderWin() {
|
|||
}
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
className="no-drag bg-button-fill-information !text-button-fill-information-foreground"
|
||||
className="no-drag bg-surface-information !text-text-information rounded-full"
|
||||
>
|
||||
{t('layout.share')}
|
||||
</Button>
|
||||
|
|
@ -422,7 +421,7 @@ function HeaderWin() {
|
|||
<div
|
||||
className={`${
|
||||
platform === 'darwin' && 'pr-2'
|
||||
} no-drag relative z-50 flex h-full items-center gap-1`}
|
||||
} no-drag gap-1 relative z-50 flex h-full items-center`}
|
||||
></div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -434,19 +433,19 @@ function HeaderWin() {
|
|||
ref={controlsRef}
|
||||
>
|
||||
<div
|
||||
className="flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center leading-5 hover:bg-surface-hover-subtle"
|
||||
className="leading-5 hover:bg-surface-hover-subtle flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
|
||||
onClick={() => window.electronAPI.minimizeWindow()}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</div>
|
||||
<div
|
||||
className="flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center leading-5 hover:bg-surface-hover-subtle"
|
||||
className="leading-5 hover:bg-surface-hover-subtle flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
|
||||
onClick={() => window.electronAPI.toggleMaximizeWindow()}
|
||||
>
|
||||
<Square className="h-4 w-4" />
|
||||
</div>
|
||||
<div
|
||||
className="flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center leading-5 hover:bg-surface-hover-subtle"
|
||||
className="leading-5 hover:bg-surface-hover-subtle flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
|
||||
onClick={() => window.electronAPI.closeWindow()}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue