hint option arrows on first prompt recall

Author: charlesvien

packages/ui/src/features/message-editor/tiptap/useTiptapEditor.ts

@@ -18,6 +18,10 @@ import {
   isUrlOnly,
   shouldAutoConvertLongText,
 } from "@posthog/core/message-editor/paste";
+import {
+  formatHotkey,
+  SHORTCUTS,
+} from "@posthog/ui/features/command/keyboard-shortcuts";
 import type { PromptRecallHandler } from "@posthog/ui/features/sessions/components/chat-thread/composerPromptRecall";
 import { sessionStoreSetters } from "@posthog/ui/features/sessions/sessionStore";
 import { useSettingsStore as useFeatureSettingsStore } from "@posthog/ui/features/settings/settingsStore";
@@ -180,6 +184,16 @@ function hasVisibleSuggestionPopup(sessionId: string): boolean {
   );
 }
 
+function showMessageNavHint(): void {
+  const store = useFeatureSettingsStore.getState();
+  if (!store.shouldShowHint("recall-message-nav")) return;
+  store.recordHintShown("recall-message-nav");
+  toast.info(
+    "Recalled a sent prompt",
+    `Use ${formatHotkey(SHORTCUTS.MESSAGE_PREV)} and ${formatHotkey(SHORTCUTS.MESSAGE_NEXT)} to jump between your messages in the conversation.`,
+  );
+}
+
 function showPasteHint(message: string, description: string): void {
   const store = useFeatureSettingsStore.getState();
   const key =
@@ -394,6 +408,7 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
               if (result.kind === "recall") {
                 if (result.fresh) {
                   promptRecallDraftRef.current = view.state.doc;
+                  showMessageNavHint();
                 }
                 const tr = view.state.tr
                   .delete(1, view.state.doc.content.size - 1)

packages/ui/src/features/sessions/components/ConversationView.tsx

@@ -282,6 +282,7 @@ export function ConversationView({
 
   const handleNavigateMessage = useCallback(
     (direction: -1 | 1) => {
+      useSettingsStore.getState().markHintLearned("recall-message-nav");
       if (userMessages.length === 0) return;
 
       const currentIndex = keyboardFocusedMessageId

packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx

@@ -854,6 +854,7 @@ function ThreadKeyboardNav({
 
   const handleNavigateMessage = useCallback(
     (direction: -1 | 1) => {
+      useSettingsStore.getState().markHintLearned("recall-message-nav");
       if (userMessageIds.length === 0) return;
 
       const currentIndex = keyboardFocusedMessageId