property-match/src/components/team/AgentChatStickyBar.tsx

import { Box, IconButton, TextField, Typography } from '@mui/material'
import { SendHorizonal } from 'lucide-react'
import { AgentAvatar } from './AgentAvatar'
import { AGENT_CHAT_MARKER, useAgentChat } from './useAgentChat'
import { AGENT_CHAT_PROMPT_SHORT } from '../../lib/constants'
import { DS_BORDER, DS_TEXT } from '../../lib/ds'
import { useAgentChatStore } from '../../stores/agentChatStore'

/**
 * Kompakter Chatzustand im obersten globalen Balken (Runde 5, §5).
 *
 * Er erscheint, sobald der ausführliche Chatkopf der Agentenseite nach oben
 * weggescrollt ist, und zeigt nebeneinander Porträt, Name, Frage und
 * Eingabefeld. Er liegt im Balken zwischen Seitenmenü und Mandant/Konto und
 * nicht als Schwebeleiste über der Seite — so kann er Tabellen, Filter und
 * Seitennavigation gar nicht erst verdecken (§10).
 *
 * Ohne eigenen Eingabezustand: Text, Fokus und Agent kommen aus
 * `agentChatStore`, damit der Wechsel zwischen beiden Zuständen mitten im
 * Tippen nichts verliert.
 */
export function AgentChatStickyBar() {
  const compact = useAgentChatStore(s => s.compact)
  const agent = useAgentChatStore(s => s.agent)

  // Der Inhalt ist eine eigene Komponente, damit `useAgentChat` erst dann
  // montiert wird, wenn der kompakte Zustand tatsächlich sichtbar ist. Läge der
  // Aufruf hier, liefe sein Fokuseffekt schon beim Start der Anwendung ins Leere
  // und der Fokus bliebe beim Scrollen im weggescrollten Feld hängen.
  if (!agent || !compact) return null
  return <StickyChat />
}

function StickyChat() {
  const { agent, draft, inputRef, setDraft, send, handleKeyDown, onFocus, onBlur } = useAgentChat()
  if (!agent) return null

  return (
    <Box
      {...{ [AGENT_CHAT_MARKER]: '' }}
      sx={{
        flex: 1,
        minWidth: 0,
        display: 'flex',
        alignItems: 'center',
        gap: 1.25,
        // Abstand zu Mandant, Benachrichtigungen und Konto auf der rechten Seite.
        mr: { xs: 1, sm: 2 },
        maxWidth: 720,
      }}
    >
      <AgentAvatar agent={agent} size={34} loading="eager" />

      <Typography
        sx={{
          fontWeight: 700,
          fontSize: '0.875rem',
          color: DS_TEXT.primary,
          whiteSpace: 'nowrap',
          flexShrink: 0,
        }}
      >
        {agent.name}
      </Typography>

      {/*
        Bei engen Breiten verschwindet zuerst der Hilfstext, danach schrumpft das
        Eingabefeld (§10). Porträt und Name bleiben in jeder Breite stehen —
        ohne sie wüsste niemand mehr, mit wem er schreibt.
      */}
      <Typography
        sx={{
          fontSize: '0.8125rem',
          color: DS_TEXT.secondary,
          whiteSpace: 'nowrap',
          flexShrink: 0,
          display: { xs: 'none', lg: 'block' },
        }}
      >
        {AGENT_CHAT_PROMPT_SHORT}
      </Typography>

      <TextField
        size="small"
        value={draft}
        onChange={e => setDraft(e.target.value)}
        onKeyDown={handleKeyDown}
        onFocus={onFocus}
        onBlur={onBlur}
        inputRef={inputRef}
        placeholder={`Nachricht an ${agent.name}`}
        aria-label={`Nachricht an ${agent.name}`}
        sx={{
          flex: 1,
          minWidth: 120,
          '& .MuiOutlinedInput-root': {
            borderRadius: 5,
            bgcolor: 'white',
            fontSize: '0.8125rem',
            pr: 0.5,
            '& fieldset': { borderColor: DS_BORDER.default },
          },
        }}
        slotProps={{
          input: {
            endAdornment: (
              <IconButton
                size="small"
                onClick={send}
                disabled={!draft.trim()}
                aria-label={`Nachricht an ${agent.name} senden`}
                sx={{ color: DS_TEXT.primary }}
              >
                <SendHorizonal size={15} />
              </IconButton>
            ),
          },
        }}
      />
    </Box>
  )
}