@jonsoc/ui 1.1.34

package/src/components/session-turn.tsx

@@ -0,0 +1,732 @@
+import {
+  AssistantMessage,
+  FilePart,
+  Message as MessageType,
+  Part as PartType,
+  type PermissionRequest,
+  TextPart,
+  ToolPart,
+} from "@jonsoc/sdk/v2/client"
+import { type FileDiff } from "@jonsoc/sdk/v2"
+import { useData } from "../context"
+import { useDiffComponent } from "../context/diff"
+import { type UiI18nKey, type UiI18nParams, useI18n } from "../context/i18n"
+import { getDirectory, getFilename } from "@jonsoc/util/path"
+
+import { Binary } from "@jonsoc/util/binary"
+import { createEffect, createMemo, createSignal, For, Match, on, onCleanup, ParentProps, Show, Switch } from "solid-js"
+import { DiffChanges } from "./diff-changes"
+import { Message, Part } from "./message-part"
+import { Markdown } from "./markdown"
+import { Accordion } from "./accordion"
+import { StickyAccordionHeader } from "./sticky-accordion-header"
+import { FileIcon } from "./file-icon"
+import { Icon } from "./icon"
+import { IconButton } from "./icon-button"
+import { Card } from "./card"
+import { Dynamic } from "solid-js/web"
+import { Button } from "./button"
+import { Spinner } from "./spinner"
+import { Tooltip } from "./tooltip"
+import { createStore } from "solid-js/store"
+import { DateTime, DurationUnit, Interval } from "luxon"
+import { createAutoScroll } from "../hooks"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
+
+type Translator = (key: UiI18nKey, params?: UiI18nParams) => string
+
+function computeStatusFromPart(part: PartType | undefined, t: Translator): string | undefined {
+  if (!part) return undefined
+
+  if (part.type === "tool") {
+    switch (part.tool) {
+      case "task":
+        return t("ui.sessionTurn.status.delegating")
+      case "todowrite":
+      case "todoread":
+        return t("ui.sessionTurn.status.planning")
+      case "read":
+        return t("ui.sessionTurn.status.gatheringContext")
+      case "list":
+      case "grep":
+      case "glob":
+        return t("ui.sessionTurn.status.searchingCodebase")
+      case "webfetch":
+        return t("ui.sessionTurn.status.searchingWeb")
+      case "edit":
+      case "write":
+        return t("ui.sessionTurn.status.makingEdits")
+      case "bash":
+        return t("ui.sessionTurn.status.runningCommands")
+      default:
+        return undefined
+    }
+  }
+  if (part.type === "reasoning") {
+    const text = part.text ?? ""
+    const match = text.trimStart().match(/^\*\*(.+?)\*\*/)
+    if (match) return t("ui.sessionTurn.status.thinkingWithTopic", { topic: match[1].trim() })
+    return t("ui.sessionTurn.status.thinking")
+  }
+  if (part.type === "text") {
+    return t("ui.sessionTurn.status.gatheringThoughts")
+  }
+  return undefined
+}
+
+function same<T>(a: readonly T[], b: readonly T[]) {
+  if (a === b) return true
+  if (a.length !== b.length) return false
+  return a.every((x, i) => x === b[i])
+}
+
+function isAttachment(part: PartType | undefined) {
+  if (part?.type !== "file") return false
+  const mime = (part as FilePart).mime ?? ""
+  return mime.startsWith("image/") || mime === "application/pdf"
+}
+
+function AssistantMessageItem(props: {
+  message: AssistantMessage
+  responsePartId: string | undefined
+  hideResponsePart: boolean
+  hideReasoning: boolean
+}) {
+  const data = useData()
+  const emptyParts: PartType[] = []
+  const msgParts = createMemo(() => data.store.part[props.message.id] ?? emptyParts)
+  const lastTextPart = createMemo(() => {
+    const parts = msgParts()
+    for (let i = parts.length - 1; i >= 0; i--) {
+      const part = parts[i]
+      if (part?.type === "text") return part as TextPart
+    }
+    return undefined
+  })
+
+  const filteredParts = createMemo(() => {
+    let parts = msgParts()
+
+    if (props.hideReasoning) {
+      parts = parts.filter((part) => part?.type !== "reasoning")
+    }
+
+    if (!props.hideResponsePart) return parts
+
+    const responsePartId = props.responsePartId
+    if (!responsePartId) return parts
+    if (responsePartId !== lastTextPart()?.id) return parts
+
+    return parts.filter((part) => part?.id !== responsePartId)
+  })
+
+  return <Message message={props.message} parts={filteredParts()} />
+}
+
+export function SessionTurn(
+  props: ParentProps<{
+    sessionID: string
+    sessionTitle?: string
+    messageID: string
+    lastUserMessageID?: string
+    stepsExpanded?: boolean
+    onStepsExpandedToggle?: () => void
+    onUserInteracted?: () => void
+    classes?: {
+      root?: string
+      content?: string
+      container?: string
+    }
+  }>,
+) {
+  const i18n = useI18n()
+  const data = useData()
+  const diffComponent = useDiffComponent()
+
+  const emptyMessages: MessageType[] = []
+  const emptyParts: PartType[] = []
+  const emptyFiles: FilePart[] = []
+  const emptyAssistant: AssistantMessage[] = []
+  const emptyPermissions: PermissionRequest[] = []
+  const emptyPermissionParts: { part: ToolPart; message: AssistantMessage }[] = []
+  const emptyDiffs: FileDiff[] = []
+  const idle = { type: "idle" as const }
+
+  const allMessages = createMemo(() => data.store.message[props.sessionID] ?? emptyMessages)
+
+  const messageIndex = createMemo(() => {
+    const messages = allMessages()
+    const result = Binary.search(messages, props.messageID, (m) => m.id)
+    if (!result.found) return -1
+
+    const msg = messages[result.index]
+    if (msg.role !== "user") return -1
+
+    return result.index
+  })
+
+  const message = createMemo(() => {
+    const index = messageIndex()
+    if (index < 0) return undefined
+
+    const msg = allMessages()[index]
+    if (!msg || msg.role !== "user") return undefined
+
+    return msg
+  })
+
+  const lastUserMessageID = createMemo(() => {
+    if (props.lastUserMessageID) return props.lastUserMessageID
+
+    const messages = allMessages()
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const msg = messages[i]
+      if (msg?.role === "user") return msg.id
+    }
+    return undefined
+  })
+
+  const isLastUserMessage = createMemo(() => props.messageID === lastUserMessageID())
+
+  const parts = createMemo(() => {
+    const msg = message()
+    if (!msg) return emptyParts
+    return data.store.part[msg.id] ?? emptyParts
+  })
+
+  const attachmentParts = createMemo(() => {
+    const msgParts = parts()
+    if (msgParts.length === 0) return emptyFiles
+    return msgParts.filter((part) => isAttachment(part)) as FilePart[]
+  })
+
+  const stickyParts = createMemo(() => {
+    const msgParts = parts()
+    if (msgParts.length === 0) return emptyParts
+    if (attachmentParts().length === 0) return msgParts
+    return msgParts.filter((part) => !isAttachment(part))
+  })
+
+  const assistantMessages = createMemo(
+    () => {
+      const msg = message()
+      if (!msg) return emptyAssistant
+
+      const messages = allMessages()
+      const index = messageIndex()
+      if (index < 0) return emptyAssistant
+
+      const result: AssistantMessage[] = []
+      for (let i = index + 1; i < messages.length; i++) {
+        const item = messages[i]
+        if (!item) continue
+        if (item.role === "user") break
+        if (item.role === "assistant" && item.parentID === msg.id) result.push(item as AssistantMessage)
+      }
+      return result
+    },
+    emptyAssistant,
+    { equals: same },
+  )
+
+  const lastAssistantMessage = createMemo(() => assistantMessages().at(-1))
+
+  const error = createMemo(() => assistantMessages().find((m) => m.error)?.error)
+
+  const lastTextPart = createMemo(() => {
+    const msgs = assistantMessages()
+    for (let mi = msgs.length - 1; mi >= 0; mi--) {
+      const msgParts = data.store.part[msgs[mi].id] ?? emptyParts
+      for (let pi = msgParts.length - 1; pi >= 0; pi--) {
+        const part = msgParts[pi]
+        if (part?.type === "text") return part as TextPart
+      }
+    }
+    return undefined
+  })
+
+  const hasSteps = createMemo(() => {
+    for (const m of assistantMessages()) {
+      const msgParts = data.store.part[m.id]
+      if (!msgParts) continue
+      for (const p of msgParts) {
+        if (p?.type === "tool") return true
+      }
+    }
+    return false
+  })
+
+  const permissions = createMemo(() => data.store.permission?.[props.sessionID] ?? emptyPermissions)
+  const permissionCount = createMemo(() => permissions().length)
+  const nextPermission = createMemo(() => permissions()[0])
+
+  const permissionParts = createMemo(() => {
+    if (props.stepsExpanded) return emptyPermissionParts
+
+    const next = nextPermission()
+    if (!next || !next.tool) return emptyPermissionParts
+
+    const message = assistantMessages().findLast((m) => m.id === next.tool!.messageID)
+    if (!message) return emptyPermissionParts
+
+    const parts = data.store.part[message.id] ?? emptyParts
+    for (const part of parts) {
+      if (part?.type !== "tool") continue
+      const tool = part as ToolPart
+      if (tool.callID === next.tool?.callID) return [{ part: tool, message }]
+    }
+
+    return emptyPermissionParts
+  })
+
+  const shellModePart = createMemo(() => {
+    const p = parts()
+    if (!p.every((part) => part?.type === "text" && part?.synthetic)) return
+
+    const msgs = assistantMessages()
+    if (msgs.length !== 1) return
+
+    const msgParts = data.store.part[msgs[0].id] ?? emptyParts
+    if (msgParts.length !== 1) return
+
+    const assistantPart = msgParts[0]
+    if (assistantPart?.type === "tool" && assistantPart.tool === "bash") return assistantPart
+  })
+
+  const isShellMode = createMemo(() => !!shellModePart())
+
+  const rawStatus = createMemo(() => {
+    const msgs = assistantMessages()
+    let last: PartType | undefined
+    let currentTask: ToolPart | undefined
+
+    for (let mi = msgs.length - 1; mi >= 0; mi--) {
+      const msgParts = data.store.part[msgs[mi].id] ?? emptyParts
+      for (let pi = msgParts.length - 1; pi >= 0; pi--) {
+        const part = msgParts[pi]
+        if (!part) continue
+        if (!last) last = part
+
+        if (
+          part.type === "tool" &&
+          part.tool === "task" &&
+          part.state &&
+          "metadata" in part.state &&
+          part.state.metadata?.sessionId &&
+          part.state.status === "running"
+        ) {
+          currentTask = part as ToolPart
+          break
+        }
+      }
+      if (currentTask) break
+    }
+
+    const taskSessionId =
+      currentTask?.state && "metadata" in currentTask.state
+        ? (currentTask.state.metadata?.sessionId as string | undefined)
+        : undefined
+
+    if (taskSessionId) {
+      const taskMessages = data.store.message[taskSessionId] ?? emptyMessages
+      for (let mi = taskMessages.length - 1; mi >= 0; mi--) {
+        const msg = taskMessages[mi]
+        if (!msg || msg.role !== "assistant") continue
+
+        const msgParts = data.store.part[msg.id] ?? emptyParts
+        for (let pi = msgParts.length - 1; pi >= 0; pi--) {
+          const part = msgParts[pi]
+          if (part) return computeStatusFromPart(part, i18n.t)
+        }
+      }
+    }
+
+    return computeStatusFromPart(last, i18n.t)
+  })
+
+  const status = createMemo(() => data.store.session_status[props.sessionID] ?? idle)
+  const working = createMemo(() => status().type !== "idle" && isLastUserMessage())
+  const retry = createMemo(() => {
+    const s = status()
+    if (s.type !== "retry") return
+    return s
+  })
+
+  const response = createMemo(() => lastTextPart()?.text)
+  const responsePartId = createMemo(() => lastTextPart()?.id)
+  const messageDiffs = createMemo(() => message()?.summary?.diffs ?? emptyDiffs)
+  const hasDiffs = createMemo(() => messageDiffs().length > 0)
+  const hideResponsePart = createMemo(() => !working() && !!responsePartId())
+
+  const [copied, setCopied] = createSignal(false)
+
+  const handleCopy = async () => {
+    const content = response() ?? ""
+    if (!content) return
+    await navigator.clipboard.writeText(content)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const [rootRef, setRootRef] = createSignal<HTMLDivElement | undefined>()
+  const [stickyRef, setStickyRef] = createSignal<HTMLDivElement | undefined>()
+
+  const updateStickyHeight = (height: number) => {
+    const root = rootRef()
+    if (!root) return
+    const next = Math.ceil(height)
+    root.style.setProperty("--session-turn-sticky-height", `${next}px`)
+  }
+
+  function duration() {
+    const msg = message()
+    if (!msg) return ""
+    const completed = lastAssistantMessage()?.time.completed
+    const from = DateTime.fromMillis(msg.time.created)
+    const to = completed ? DateTime.fromMillis(completed) : DateTime.now()
+    const interval = Interval.fromDateTimes(from, to)
+    const unit: DurationUnit[] = interval.length("seconds") > 60 ? ["minutes", "seconds"] : ["seconds"]
+
+    return interval.toDuration(unit).normalize().reconfigure({ locale: i18n.locale() }).toHuman({
+      notation: "compact",
+      unitDisplay: "narrow",
+      compactDisplay: "short",
+      showZeros: false,
+    })
+  }
+
+  const autoScroll = createAutoScroll({
+    working,
+    onUserInteracted: props.onUserInteracted,
+    overflowAnchor: "auto",
+  })
+
+  createResizeObserver(
+    () => stickyRef(),
+    ({ height }) => {
+      updateStickyHeight(height)
+    },
+  )
+
+  createEffect(() => {
+    const root = rootRef()
+    if (!root) return
+    const sticky = stickyRef()
+    if (!sticky) {
+      root.style.setProperty("--session-turn-sticky-height", "0px")
+      return
+    }
+    updateStickyHeight(sticky.getBoundingClientRect().height)
+  })
+
+  const diffInit = 20
+  const diffBatch = 20
+
+  const [store, setStore] = createStore({
+    retrySeconds: 0,
+    diffsOpen: [] as string[],
+    diffLimit: diffInit,
+    status: rawStatus(),
+    duration: duration(),
+  })
+
+  createEffect(
+    on(
+      () => message()?.id,
+      () => {
+        setStore("diffsOpen", [])
+        setStore("diffLimit", diffInit)
+      },
+      { defer: true },
+    ),
+  )
+
+  createEffect(() => {
+    const r = retry()
+    if (!r) {
+      setStore("retrySeconds", 0)
+      return
+    }
+    const updateSeconds = () => {
+      const next = r.next
+      if (next) setStore("retrySeconds", Math.max(0, Math.round((next - Date.now()) / 1000)))
+    }
+    updateSeconds()
+    const timer = setInterval(updateSeconds, 1000)
+    onCleanup(() => clearInterval(timer))
+  })
+
+  createEffect(() => {
+    const timer = setInterval(() => {
+      setStore("duration", duration())
+    }, 1000)
+    onCleanup(() => clearInterval(timer))
+  })
+
+  createEffect(
+    on(permissionCount, (count, prev) => {
+      if (!count) return
+      if (prev !== undefined && count <= prev) return
+      autoScroll.forceScrollToBottom()
+    }),
+  )
+
+  let lastStatusChange = Date.now()
+  let statusTimeout: number | undefined
+  createEffect(() => {
+    const newStatus = rawStatus()
+    if (newStatus === store.status || !newStatus) return
+
+    const timeSinceLastChange = Date.now() - lastStatusChange
+    if (timeSinceLastChange >= 2500) {
+      setStore("status", newStatus)
+      lastStatusChange = Date.now()
+      if (statusTimeout) {
+        clearTimeout(statusTimeout)
+        statusTimeout = undefined
+      }
+    } else {
+      if (statusTimeout) clearTimeout(statusTimeout)
+      statusTimeout = setTimeout(() => {
+        setStore("status", rawStatus())
+        lastStatusChange = Date.now()
+        statusTimeout = undefined
+      }, 2500 - timeSinceLastChange) as unknown as number
+    }
+  })
+
+  return (
+    <div data-component="session-turn" class={props.classes?.root} ref={setRootRef}>
+      <div
+        ref={autoScroll.scrollRef}
+        onScroll={autoScroll.handleScroll}
+        data-slot="session-turn-content"
+        class={props.classes?.content}
+      >
+        <div onClick={autoScroll.handleInteraction}>
+          <Show when={message()}>
+            {(msg) => (
+              <div
+                ref={autoScroll.contentRef}
+                data-message={msg().id}
+                data-slot="session-turn-message-container"
+                class={props.classes?.container}
+              >
+                <Switch>
+                  <Match when={isShellMode()}>
+                    <Part part={shellModePart()!} message={msg()} defaultOpen />
+                  </Match>
+                  <Match when={true}>
+                    <Show when={attachmentParts().length > 0}>
+                      <div data-slot="session-turn-attachments" aria-live="off">
+                        <Message message={msg()} parts={attachmentParts()} />
+                      </div>
+                    </Show>
+                    <div data-slot="session-turn-sticky" ref={setStickyRef}>
+                      {/* User Message */}
+                      <div data-slot="session-turn-message-content" aria-live="off">
+                        <Message message={msg()} parts={stickyParts()} />
+                      </div>
+
+                      {/* Trigger (sticky) */}
+                      <Show when={working() || hasSteps()}>
+                        <div data-slot="session-turn-response-trigger">
+                          <Button
+                            data-expandable={assistantMessages().length > 0}
+                            data-slot="session-turn-collapsible-trigger-content"
+                            variant="ghost"
+                            size="small"
+                            onClick={props.onStepsExpandedToggle ?? (() => {})}
+                            aria-expanded={props.stepsExpanded}
+                          >
+                            <Show when={working()}>
+                              <Spinner />
+                            </Show>
+                            <Switch>
+                              <Match when={retry()}>
+                                <span data-slot="session-turn-retry-message">
+                                  {(() => {
+                                    const r = retry()
+                                    if (!r) return ""
+                                    return r.message.length > 60 ? r.message.slice(0, 60) + "..." : r.message
+                                  })()}
+                                </span>
+                                <span data-slot="session-turn-retry-seconds">
+                                  · {i18n.t("ui.sessionTurn.retry.retrying")}
+                                  {store.retrySeconds > 0
+                                    ? " " + i18n.t("ui.sessionTurn.retry.inSeconds", { seconds: store.retrySeconds })
+                                    : ""}
+                                </span>
+                                <span data-slot="session-turn-retry-attempt">(#{retry()?.attempt})</span>
+                              </Match>
+                              <Match when={working()}>
+                                {store.status ?? i18n.t("ui.sessionTurn.status.consideringNextSteps")}
+                              </Match>
+                              <Match when={props.stepsExpanded}>{i18n.t("ui.sessionTurn.steps.hide")}</Match>
+                              <Match when={!props.stepsExpanded}>{i18n.t("ui.sessionTurn.steps.show")}</Match>
+                            </Switch>
+                            <span aria-hidden="true">·</span>
+                            <span aria-live="off">{store.duration}</span>
+                            <Show when={assistantMessages().length > 0}>
+                              <Icon name="chevron-grabber-vertical" size="small" />
+                            </Show>
+                          </Button>
+                        </div>
+                      </Show>
+                    </div>
+                    {/* Response */}
+                    <Show when={props.stepsExpanded && assistantMessages().length > 0}>
+                      <div data-slot="session-turn-collapsible-content-inner" aria-hidden={working()}>
+                        <For each={assistantMessages()}>
+                          {(assistantMessage) => (
+                            <AssistantMessageItem
+                              message={assistantMessage}
+                              responsePartId={responsePartId()}
+                              hideResponsePart={hideResponsePart()}
+                              hideReasoning={!working()}
+                            />
+                          )}
+                        </For>
+                        <Show when={error()}>
+                          <Card variant="error" class="error-card">
+                            {error()?.data?.message as string}
+                          </Card>
+                        </Show>
+                      </div>
+                    </Show>
+                    <Show when={!props.stepsExpanded && permissionParts().length > 0}>
+                      <div data-slot="session-turn-permission-parts">
+                        <For each={permissionParts()}>
+                          {({ part, message }) => <Part part={part} message={message} />}
+                        </For>
+                      </div>
+                    </Show>
+                    {/* Response */}
+                    <div class="sr-only" aria-live="polite">
+                      {!working() && response() ? response() : ""}
+                    </div>
+                    <Show when={!working() && (response() || hasDiffs())}>
+                      <div data-slot="session-turn-summary-section">
+                        <div data-slot="session-turn-summary-header">
+                          <h2 data-slot="session-turn-summary-title">{i18n.t("ui.sessionTurn.summary.response")}</h2>
+                          <div data-slot="session-turn-response">
+                            <Markdown
+                              data-slot="session-turn-markdown"
+                              data-diffs={hasDiffs()}
+                              text={response() ?? ""}
+                              cacheKey={responsePartId()}
+                            />
+                            <Show when={response()}>
+                              <div data-slot="session-turn-response-copy-wrapper">
+                                <Tooltip
+                                  value={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copy")}
+                                  placement="top"
+                                  gutter={8}
+                                >
+                                  <IconButton
+                                    icon={copied() ? "check" : "copy"}
+                                    variant="secondary"
+                                    onMouseDown={(e) => e.preventDefault()}
+                                    onClick={(event) => {
+                                      event.stopPropagation()
+                                      handleCopy()
+                                    }}
+                                    aria-label={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copy")}
+                                  />
+                                </Tooltip>
+                              </div>
+                            </Show>
+                          </div>
+                        </div>
+                        <Accordion
+                          data-slot="session-turn-accordion"
+                          multiple
+                          value={store.diffsOpen}
+                          onChange={(value) => {
+                            if (!Array.isArray(value)) return
+                            setStore("diffsOpen", value)
+                          }}
+                        >
+                          <For each={messageDiffs().slice(0, store.diffLimit)}>
+                            {(diff) => (
+                              <Accordion.Item value={diff.file}>
+                                <StickyAccordionHeader>
+                                  <Accordion.Trigger>
+                                    <div data-slot="session-turn-accordion-trigger-content">
+                                      <div data-slot="session-turn-file-info">
+                                        <FileIcon
+                                          node={{ path: diff.file, type: "file" }}
+                                          data-slot="session-turn-file-icon"
+                                        />
+                                        <div data-slot="session-turn-file-path">
+                                          <Show when={diff.file.includes("/")}>
+                                            <span data-slot="session-turn-directory">
+                                              {`\u202A${getDirectory(diff.file)}\u202C`}
+                                            </span>
+                                          </Show>
+                                          <span data-slot="session-turn-filename">{getFilename(diff.file)}</span>
+                                        </div>
+                                      </div>
+                                      <div data-slot="session-turn-accordion-actions">
+                                        <DiffChanges changes={diff} />
+                                        <Icon name="chevron-grabber-vertical" size="small" />
+                                      </div>
+                                    </div>
+                                  </Accordion.Trigger>
+                                </StickyAccordionHeader>
+                                <Accordion.Content data-slot="session-turn-accordion-content">
+                                  <Show when={store.diffsOpen.includes(diff.file!)}>
+                                    <Dynamic
+                                      component={diffComponent}
+                                      before={{
+                                        name: diff.file!,
+                                        contents: diff.before!,
+                                      }}
+                                      after={{
+                                        name: diff.file!,
+                                        contents: diff.after!,
+                                      }}
+                                    />
+                                  </Show>
+                                </Accordion.Content>
+                              </Accordion.Item>
+                            )}
+                          </For>
+                        </Accordion>
+                        <Show when={messageDiffs().length > store.diffLimit}>
+                          <Button
+                            data-slot="session-turn-accordion-more"
+                            variant="ghost"
+                            size="small"
+                            onClick={() => {
+                              const total = messageDiffs().length
+                              setStore("diffLimit", (limit) => {
+                                const next = limit + diffBatch
+                                if (next > total) return total
+                                return next
+                              })
+                            }}
+                          >
+                            {i18n.t("ui.sessionTurn.diff.showMore", {
+                              count: messageDiffs().length - store.diffLimit,
+                            })}
+                          </Button>
+                        </Show>
+                      </div>
+                    </Show>
+                    <Show when={error() && !props.stepsExpanded}>
+                      <Card variant="error" class="error-card">
+                        {error()?.data?.message as string}
+                      </Card>
+                    </Show>
+                  </Match>
+                </Switch>
+              </div>
+            )}
+          </Show>
+          {props.children}
+        </div>
+      </div>
+    </div>
+  )
+}