feat(ui): adjust chat trigger and note input positioning

Author: ComputelessComputer

apps/desktop/src/components/chat/index.tsx

@@ -6,7 +6,11 @@ import { InteractiveContainer } from "./interactive";
 import { ChatTrigger } from "./trigger";
 import { ChatView } from "./view";
 
-export function ChatFloatingButton() {
+export function ChatFloatingButton({
+  isCaretNearBottom = false,
+}: {
+  isCaretNearBottom?: boolean;
+}) {
   const { chat } = useShell();
   const isOpen = chat.mode === "FloatingOpen";
 
@@ -20,7 +24,12 @@ export function ChatFloatingButton() {
   }, [chat]);
 
   if (!isOpen) {
-    return <ChatTrigger onClick={handleClickTrigger} />;
+    return (
+      <ChatTrigger
+        onClick={handleClickTrigger}
+        isCaretNearBottom={isCaretNearBottom}
+      />
+    );
   }
 
   return (

apps/desktop/src/components/chat/trigger.tsx

@@ -2,18 +2,25 @@ import { createPortal } from "react-dom";
 
 import { cn } from "@hypr/utils";
 
-export function ChatTrigger({ onClick }: { onClick: () => void }) {
+export function ChatTrigger({
+  onClick,
+  isCaretNearBottom = false,
+}: {
+  onClick: () => void;
+  isCaretNearBottom?: boolean;
+}) {
   return createPortal(
     <button
       onClick={onClick}
       className={cn([
-        "fixed bottom-4 right-4 z-[100]",
+        "fixed right-4 z-[100]",
         "w-14 h-14 rounded-full",
         "bg-white shadow-lg hover:shadow-xl",
         "border border-neutral-200",
         "flex items-center justify-center",
-        "transition-all duration-200",
+        "transition-all duration-200 ease-out",
         "hover:scale-105",
+        isCaretNearBottom ? "bottom-0 translate-y-[85%]" : "bottom-4",
       ])}
     >
       <img

apps/desktop/src/components/main/body/index.tsx

@@ -43,6 +43,7 @@ import { TabContentHuman, TabItemHuman } from "./humans";
 import { TabContentPrompt, TabItemPrompt } from "./prompts";
 import { Search } from "./search";
 import { TabContentNote, TabItemNote } from "./sessions";
+import { useCaretPosition } from "./sessions/caret-position-context";
 import { TabContentSettings, TabItemSettings } from "./settings";
 import { TabContentTemplate, TabItemTemplate } from "./templates";
 import { Update } from "./update";
@@ -496,7 +497,11 @@ function ContentWrapper({ tab }: { tab: Tab }) {
   return null;
 }
 
-function TabChatButton() {
+function TabChatButton({
+  isCaretNearBottom = false,
+}: {
+  isCaretNearBottom?: boolean;
+}) {
   const { chat } = useShell();
   const currentTab = useTabs((state) => state.currentTab);
 
@@ -512,7 +517,7 @@ function TabChatButton() {
     return null;
   }
 
-  return <ChatFloatingButton />;
+  return <ChatFloatingButton isCaretNearBottom={isCaretNearBottom} />;
 }
 
 export function StandardTabWrapper({
@@ -529,13 +534,20 @@ export function StandardTabWrapper({
       <div className="flex flex-col rounded-xl border border-neutral-200 flex-1 overflow-hidden relative">
         {children}
         {floatingButton}
-        <TabChatButton />
+        <StandardTabChatButton />
       </div>
       {afterBorder}
     </div>
   );
 }
 
+function StandardTabChatButton() {
+  const caretPosition = useCaretPosition();
+  const isCaretNearBottom = caretPosition?.isCaretNearBottom ?? false;
+
+  return <TabChatButton isCaretNearBottom={isCaretNearBottom} />;
+}
+
 function useHasSpaceForSearch() {
   const ref = useRef<HTMLDivElement>(null);
   const { width = 0 } = useResizeObserver({

apps/desktop/src/components/main/body/sessions/caret-position-context.tsx

@@ -0,0 +1,36 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+
+interface CaretPositionContextValue {
+  isCaretNearBottom: boolean;
+  setCaretNearBottom: (value: boolean) => void;
+}
+
+const CaretPositionContext = createContext<CaretPositionContextValue | null>(
+  null,
+);
+
+export function CaretPositionProvider({ children }: { children: ReactNode }) {
+  const [isCaretNearBottom, setIsCaretNearBottom] = useState(false);
+
+  const setCaretNearBottom = useCallback((value: boolean) => {
+    setIsCaretNearBottom(value);
+  }, []);
+
+  return (
+    <CaretPositionContext.Provider
+      value={{ isCaretNearBottom, setCaretNearBottom }}
+    >
+      {children}
+    </CaretPositionContext.Provider>
+  );
+}
+
+export function useCaretPosition() {
+  return useContext(CaretPositionContext);
+}

apps/desktop/src/components/main/body/sessions/floating/index.tsx

@@ -1,9 +1,17 @@
-import { type ReactNode } from "react";
+import { type ReactNode, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
+import { cn } from "@hypr/utils";
+
+import { useShell } from "../../../../../contexts/shell";
 import type { Tab } from "../../../../../store/zustand/tabs/schema";
+import { useCaretPosition } from "../caret-position-context";
 import { useCurrentNoteTab, useHasTranscript } from "../shared";
 import { ListenButton } from "./listen";
 
+const SIDEBAR_WIDTH = 280;
+const LAYOUT_PADDING = 4;
+
 export function FloatingActionButton({
   tab,
 }: {
@@ -24,9 +32,59 @@ export function FloatingActionButton({
 }
 
 function FloatingButtonContainer({ children }: { children: ReactNode }) {
-  return (
-    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3">
+  const caretPosition = useCaretPosition();
+  const { leftsidebar, chat } = useShell();
+  const isCaretNearBottom = caretPosition?.isCaretNearBottom ?? false;
+  const [chatPanelWidth, setChatPanelWidth] = useState(0);
+
+  const isChatPanelOpen = chat.mode === "RightPanelOpen";
+
+  useEffect(() => {
+    if (!isChatPanelOpen) {
+      setChatPanelWidth(0);
+      return;
+    }
+
+    const updateChatWidth = () => {
+      const chatPanel = document.querySelector("[data-panel-id]");
+      if (chatPanel) {
+        const panels = document.querySelectorAll("[data-panel-id]");
+        const lastPanel = panels[panels.length - 1];
+        if (lastPanel) {
+          setChatPanelWidth(lastPanel.getBoundingClientRect().width);
+        }
+      }
+    };
+
+    updateChatWidth();
+    window.addEventListener("resize", updateChatWidth);
+
+    const observer = new MutationObserver(updateChatWidth);
+    observer.observe(document.body, { subtree: true, attributes: true });
+
+    return () => {
+      window.removeEventListener("resize", updateChatWidth);
+      observer.disconnect();
+    };
+  }, [isChatPanelOpen]);
+
+  const leftOffset = leftsidebar.expanded
+    ? (SIDEBAR_WIDTH + LAYOUT_PADDING) / 2
+    : 0;
+  const rightOffset = chatPanelWidth / 2;
+  const totalOffset = leftOffset - rightOffset;
+
+  return createPortal(
+    <div
+      style={{ left: `calc(50% + ${totalOffset}px)` }}
+      className={cn([
+        "fixed -translate-x-1/2 z-[100] flex items-center gap-3",
+        "transition-all duration-200 ease-out",
+        isCaretNearBottom ? "bottom-0 translate-y-[85%]" : "bottom-4",
+      ])}
+    >
       {children}
-    </div>
+    </div>,
+    document.body,
   );
 }

apps/desktop/src/components/main/body/sessions/index.tsx

@@ -10,6 +10,7 @@ import * as main from "../../../../store/tinybase/main";
 import { rowIdfromTab, type Tab } from "../../../../store/zustand/tabs";
 import { StandardTabWrapper } from "../index";
 import { type TabItem, TabItemBase } from "../shared";
+import { CaretPositionProvider } from "./caret-position-context";
 import { FloatingActionButton } from "./floating";
 import { NoteInput } from "./note-input";
 import { SearchBar } from "./note-input/transcript/search-bar";
@@ -77,11 +78,13 @@ export function TabContentNote({
     listenerStatus === "inactive";
 
   return (
-    <SearchProvider>
-      <AudioPlayer.Provider sessionId={tab.id} url={audioUrl ?? ""}>
-        <TabContentNoteInner tab={tab} showTimeline={showTimeline} />
-      </AudioPlayer.Provider>
-    </SearchProvider>
+    <CaretPositionProvider>
+      <SearchProvider>
+        <AudioPlayer.Provider sessionId={tab.id} url={audioUrl ?? ""}>
+          <TabContentNoteInner tab={tab} showTimeline={showTimeline} />
+        </AudioPlayer.Provider>
+      </SearchProvider>
+    </CaretPositionProvider>
   );
 }
 

apps/desktop/src/components/main/body/sessions/note-input/index.tsx

@@ -9,12 +9,15 @@ import { useAutoTitle } from "../../../../../hooks/useAutoTitle";
 import { useScrollPreservation } from "../../../../../hooks/useScrollPreservation";
 import { type Tab, useTabs } from "../../../../../store/zustand/tabs";
 import { type EditorView } from "../../../../../store/zustand/tabs/schema";
+import { useCaretPosition } from "../caret-position-context";
 import { useCurrentNoteTab } from "../shared";
 import { Enhanced } from "./enhanced";
 import { Header, useEditorTabs } from "./header";
 import { RawEditor } from "./raw";
 import { Transcript } from "./transcript";
 
+const BOTTOM_THRESHOLD = 112;
+
 export function NoteInput({
   tab,
 }: {
@@ -23,7 +26,9 @@ export function NoteInput({
   const editorTabs = useEditorTabs({ sessionId: tab.id });
   const updateSessionTabState = useTabs((state) => state.updateSessionTabState);
   const editorRef = useRef<{ editor: TiptapEditor | null }>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const [isEditing, setIsEditing] = useState(false);
+  const caretPosition = useCaretPosition();
 
   const sessionId = tab.id;
   useAutoEnhance(tab);
@@ -59,6 +64,50 @@ export function NoteInput({
     }
   }, [currentTab]);
 
+  useEffect(() => {
+    const editor = editorRef.current?.editor;
+    const container = containerRef.current;
+    if (
+      !editor ||
+      !caretPosition ||
+      !container ||
+      currentTab.type === "transcript"
+    ) {
+      caretPosition?.setCaretNearBottom(false);
+      return;
+    }
+
+    const checkCaretPosition = () => {
+      if (!containerRef.current || !editor.isFocused) return;
+
+      const { view } = editor;
+      const { from } = view.state.selection;
+      const coords = view.coordsAtPos(from);
+
+      const distanceFromViewportBottom = window.innerHeight - coords.bottom;
+
+      caretPosition.setCaretNearBottom(
+        distanceFromViewportBottom < BOTTOM_THRESHOLD,
+      );
+    };
+
+    const handleBlur = () => caretPosition.setCaretNearBottom(false);
+
+    editor.on("selectionUpdate", checkCaretPosition);
+    editor.on("focus", checkCaretPosition);
+    editor.on("blur", handleBlur);
+    container.addEventListener("scroll", checkCaretPosition);
+
+    checkCaretPosition();
+
+    return () => {
+      editor.off("selectionUpdate", checkCaretPosition);
+      editor.off("focus", checkCaretPosition);
+      editor.off("blur", handleBlur);
+      container.removeEventListener("scroll", checkCaretPosition);
+    };
+  }, [editorRef.current?.editor, caretPosition, currentTab.type]);
+
   const handleContainerClick = () => {
     if (currentTab.type !== "transcript") {
       editorRef.current?.editor?.commands.focus();
@@ -79,13 +128,14 @@ export function NoteInput({
       </div>
 
       <div
-        ref={
-          currentTab.type !== "transcript"
-            ? (node) => {
-                scrollRef.current = node;
-              }
-            : undefined
-        }
+        ref={(node) => {
+          if (currentTab.type !== "transcript") {
+            scrollRef.current = node;
+            containerRef.current = node;
+          } else {
+            containerRef.current = null;
+          }
+        }}
         onClick={handleContainerClick}
         className={cn([
           "flex-1 mt-2 px-3",