Adam 2 месяцев назад
Родитель
Сommit
d6ba6af6f3
1 измененных файлов с 9 добавлено и 15 удалено
  1. 9 15
      packages/ui/src/components/session-turn.tsx

+ 9 - 15
packages/ui/src/components/session-turn.tsx

@@ -60,8 +60,8 @@ export function SessionTurn(
   const working = createMemo(() => status()?.type !== "idle")
 
   let scrollRef: HTMLDivElement | undefined
-  let contentRef: HTMLDivElement | undefined
-  let stickyHeaderRef: HTMLDivElement | undefined
+  const [contentRef, setContentRef] = createSignal<HTMLDivElement>()
+  const [stickyHeaderRef, setStickyHeaderRef] = createSignal<HTMLDivElement>()
   const [userScrolled, setUserScrolled] = createSignal(false)
   const [stickyHeaderHeight, setStickyHeaderHeight] = createSignal(0)
 
@@ -86,25 +86,19 @@ export function SessionTurn(
     }
   })
 
-  onMount(() => {
-    if (!contentRef) return
-    createResizeObserver(contentRef, () => {
-      if (!scrollRef || userScrolled() || !working()) return
-      scrollRef.scrollTop = scrollRef.scrollHeight
-    })
+  createResizeObserver(contentRef, () => {
+    if (!scrollRef || userScrolled() || !working()) return
+    scrollRef.scrollTop = scrollRef.scrollHeight
   })
 
-  onMount(() => {
-    if (!stickyHeaderRef) return
-    createResizeObserver(stickyHeaderRef, ({ height }) => {
-      setStickyHeaderHeight(height + 8)
-    })
+  createResizeObserver(stickyHeaderRef, ({ height }) => {
+    setStickyHeaderHeight(height + 8)
   })
 
   return (
     <div data-component="session-turn" class={props.classes?.root}>
       <div ref={scrollRef} onScroll={handleScroll} data-slot="session-turn-content" class={props.classes?.content}>
-        <div ref={contentRef} onClick={handleInteraction}>
+        <div ref={setContentRef} onClick={handleInteraction}>
           <Show when={message()}>
             {(message) => {
               const assistantMessages = createMemo(() => {
@@ -257,7 +251,7 @@ export function SessionTurn(
                   style={{ "--sticky-header-height": `${stickyHeaderHeight()}px` }}
                 >
                   {/* Sticky Header */}
-                  <div ref={stickyHeaderRef} data-slot="session-turn-sticky-header">
+                  <div ref={setStickyHeaderRef} data-slot="session-turn-sticky-header">
                     <div data-slot="session-turn-message-header">
                       <div data-slot="session-turn-message-title">
                         <Switch>