From d81a9ce25cc12cd06bca1bbc04f91b1ad2e2e4d9 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Thu, 19 Sep 2024 19:30:22 -0700
Subject: [PATCH 01/14] mentions

---
 src/components/Squeak/components/RichText.tsx | 423 +++++++++++-------
 1 file changed, 271 insertions(+), 152 deletions(-)

diff --git a/src/components/Squeak/components/RichText.tsx b/src/components/Squeak/components/RichText.tsx
index a50093bc6679..ed0868011e43 100644
--- a/src/components/Squeak/components/RichText.tsx
+++ b/src/components/Squeak/components/RichText.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useEffect, useRef, useState, useCallback } from 'react'
+import React, { ChangeEvent, useEffect, useRef, useState, useCallback, useContext } from 'react'
 import MarkdownLogo from './MarkdownLogo'
 import { useDropzone } from 'react-dropzone'
 import Spinner from 'components/Spinner'
@@ -7,6 +7,9 @@ import slugify from 'slugify'
 import { Edit } from 'components/Icons'
 import Tooltip from 'components/Tooltip'
 import { isURL } from 'lib/utils'
+import { CurrentQuestionContext } from './Question'
+import Avatar from './Avatar'
+import { AnimatePresence, motion } from 'framer-motion'
 
 const buttons = [
     {
@@ -78,6 +81,77 @@ const buttons = [
     },
 ]
 
+const MentionProfiles = ({ onSelect }) => {
+    const currentQuestion = useContext(CurrentQuestionContext) ?? {}
+    const replies = currentQuestion?.question?.replies
+    const mentionProfiles = [
+        { attributes: { profile: { data: currentQuestion?.question?.profile?.data } } },
+        ...replies?.data,
+    ]
+        .map((reply) => reply?.attributes?.profile?.data)
+        .filter((profile, index, self) => profile && self.findIndex((p) => p?.id === profile.id) === index)
+    const listRef = useRef<HTMLUListElement>(null)
+    const [focused, setFocused] = useState(0)
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault()
+                setFocused((prev) => (prev + 1) % mentionProfiles.length)
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault()
+                setFocused((prev) => (prev - 1 + mentionProfiles.length) % mentionProfiles.length)
+            }
+            if (e.key === 'Tab' || e.key === 'Enter') {
+                e.preventDefault()
+                onSelect?.(mentionProfiles[focused])
+            }
+        }
+
+        window.addEventListener('keydown', handleKeyDown)
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown)
+        }
+    }, [focused])
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, translateX: '100%' }}
+            animate={{ opacity: 1, translateX: 0, transition: { type: 'tween', duration: 0.1 } }}
+            exit={{ opacity: 0, translateX: '100%' }}
+            className="w-[200px] h-full overflow-auto bg-tan dark:bg-dark absolute right-0 top-0 z-50 border-l border-border dark:border-dark"
+        >
+            <ul ref={listRef} className="m-0 p-0 list-none">
+                {mentionProfiles.map((profile, index) => {
+                    const { firstName, lastName, avatar } = profile.attributes
+                    const name = [firstName, lastName].filter(Boolean).join(' ')
+                    return (
+                        <li className="border-b border-border dark:border-dark p-1" key={index}>
+                            <button
+                                onClick={() => onSelect?.(profile)}
+                                type="button"
+                                className={`text-left flex space-x-2 font-bold px-3 py-1 items-center rounded-sm hover:bg-accent hover:dark:bg-accent-dark w-full outline-none ${
+                                    focused === index ? 'bg-accent dark:bg-accent-dark' : ''
+                                }`}
+                            >
+                                <div className="size-6 overflow-hidden rounded-full">
+                                    <Avatar className="w-full" image={avatar?.data?.attributes?.url} />
+                                </div>
+                                <div>
+                                    <p className="m-0 text-xs font-semibold opacity-50 leading-none">#{profile.id}</p>
+                                    <p className="m-0 leading-none text-sm">{name}</p>
+                                </div>
+                            </button>
+                        </li>
+                    )
+                })}
+            </ul>
+        </motion.div>
+    )
+}
+
 export default function RichText({
     initialValue = '',
     setFieldValue,
@@ -93,6 +167,8 @@ export default function RichText({
     const [cursor, setCursor] = useState<number | null>(null)
     const [imageLoading, setImageLoading] = useState(false)
     const [showPreview, setShowPreview] = useState(false)
+    const [showMentionProfiles, setShowMentionProfiles] = useState(false)
+    const mentionProfilesRef = useRef<HTMLDivElement>(null)
 
     const onDrop = useCallback(
         async (acceptedFiles) => {
@@ -188,167 +264,210 @@ export default function RichText({
         if (e.key === 'Enter' && (e.ctrlKey || e.metaKey) && onSubmit) {
             onSubmit()
         }
+        if (e.key === '@' && e.shiftKey) {
+            setShowMentionProfiles(true)
+        }
+    }
+
+    const handleContainerClick = (e) => {
+        if (!e.target.contains(mentionProfilesRef.current)) {
+            setShowMentionProfiles(false)
+        }
+    }
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' || e.key === 'Backspace') {
+                setShowMentionProfiles(false)
+            }
+        }
+
+        window.addEventListener('keydown', handleKeyDown)
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown)
+        }
+    }, [])
+
+    const handleProfileSelect = (profile) => {
+        setValue((prevValue) => prevValue + `${profile.id} `)
+        setShowMentionProfiles(false)
     }
 
     return (
         <div className="relative" {...getRootProps()}>
-            <input className="hidden" {...getInputProps()} />
-            {showPreview ? (
-                <div className="bg-white dark:bg-accent-dark dark:text-primary-dark border-none text-base h-[200px] py-3 px-4 resize-none w-full text-black outline-none focus:ring-0 overflow-auto">
-                    <Markdown
-                        transformImageUri={(fakeImagePath) => {
-                            const objectURL = values.images.find(
-                                (image) => image.fakeImagePath === fakeImagePath
-                            )?.objectURL
-                            return objectURL || fakeImagePath
-                        }}
-                    >
-                        {value}
-                    </Markdown>
-                </div>
-            ) : (
-                <div className="relative">
-                    <label htmlFor="body" className="py-3 px-4 pb-8 block">
-                        {label && !!value && <span className="text-sm opacity-60 block">{label}</span>}
-                        <textarea
-                            onPaste={handlePaste}
-                            disabled={imageLoading}
-                            autoFocus={autoFocus}
-                            className="bg-white dark:bg-accent-dark dark:text-primary-dark border-none text-base h-[200px] resize-none w-full text-black outline-none focus:ring-0 p-0"
-                            onBlur={(e) => e.preventDefault()}
-                            name="body"
-                            value={value}
-                            onChange={handleChange}
-                            ref={textarea}
-                            required
-                            id="body"
-                            placeholder={'Type more details...'}
-                            maxLength={maxLength}
-                            onKeyDown={handleKeyDown}
-                        />
-                    </label>
-                    {isDragActive && (
-                        <div className="bg-white dark:bg-accent-dark z-10 rounded-md flex items-center justify-center absolute w-full h-full inset-0 p-2 after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:w-[calc(100%-2rem)] after:h-[calc(100%-2rem)] after:border after:border-dashed after:border-gray-accent-light after:dark:border-gray-accent-dark after:rounded-md">
-                            <p className="m-0 font-semibold">Drop image here</p>
+            <div onClick={handleContainerClick}>
+                <AnimatePresence>
+                    {showMentionProfiles && (
+                        <div ref={mentionProfilesRef} onClick={(e) => e.stopPropagation()}>
+                            <MentionProfiles onSelect={handleProfileSelect} />
                         </div>
                     )}
-                    <span className="bg-white dark:bg-accent-dark absolute right-4 bottom-2 px-1 rounded-sm">
-                        <span className="text-xs opacity-70">
-                            {values.body.length} / {maxLength}
+                </AnimatePresence>
+
+                <input className="hidden" {...getInputProps()} />
+                {showPreview ? (
+                    <div className="bg-white dark:bg-accent-dark dark:text-primary-dark border-none text-base h-[200px] py-3 px-4 resize-none w-full text-black outline-none focus:ring-0 overflow-auto">
+                        <Markdown
+                            transformImageUri={(fakeImagePath) => {
+                                const objectURL = values.images.find(
+                                    (image) => image.fakeImagePath === fakeImagePath
+                                )?.objectURL
+                                return objectURL || fakeImagePath
+                            }}
+                        >
+                            {value}
+                        </Markdown>
+                    </div>
+                ) : (
+                    <div className="relative">
+                        <label htmlFor="body" className="py-3 px-4 pb-8 block">
+                            {label && !!value && <span className="text-sm opacity-60 block">{label}</span>}
+                            <textarea
+                                onPaste={handlePaste}
+                                disabled={imageLoading}
+                                autoFocus={autoFocus}
+                                className="bg-white dark:bg-accent-dark dark:text-primary-dark border-none text-base h-[200px] resize-none w-full text-black outline-none focus:ring-0 p-0"
+                                onBlur={(e) => e.preventDefault()}
+                                name="body"
+                                value={value}
+                                onChange={handleChange}
+                                ref={textarea}
+                                required
+                                id="body"
+                                placeholder={'Type more details...'}
+                                maxLength={maxLength}
+                                onKeyDown={handleKeyDown}
+                            />
+                        </label>
+                        {isDragActive && (
+                            <div className="bg-white dark:bg-accent-dark z-10 rounded-md flex items-center justify-center absolute w-full h-full inset-0 p-2 after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:w-[calc(100%-2rem)] after:h-[calc(100%-2rem)] after:border after:border-dashed after:border-gray-accent-light after:dark:border-gray-accent-dark after:rounded-md">
+                                <p className="m-0 font-semibold">Drop image here</p>
+                            </div>
+                        )}
+                        <span className="bg-white dark:bg-accent-dark absolute right-4 bottom-2 px-1 rounded-sm">
+                            <span className="text-xs opacity-70">
+                                {values.body.length} / {maxLength}
+                            </span>
                         </span>
-                    </span>
-                </div>
-            )}
-            <div className="flex items-center justify-between py-1">
-                <ul className="flex items-center list-none p-0 mx-2 space-x-1 w-full !mb-0">
-                    {buttons.map((button, index) => {
-                        return (
-                            <li key={index}>
-                                <Tooltip content={button.tooltipContent} placement="top">
-                                    <button
-                                        className="flex items-center bg-none border-none rounded-sm text-black/50 dark:text-primary-dark/50 justify-center w-[32px] h-[32px] hover:bg-black/[.15] hover:text-black/75 dark:hover:bg-primary-dark/[.15] dark:hover:text-primary-dark/75 relative"
-                                        onClick={(e) => handleClick(e, button.replaceWith, button.cursor)}
-                                    >
-                                        {button.icon}
-                                    </button>
-                                </Tooltip>
-                            </li>
-                        )
-                    })}
-                    <li>
-                        <Tooltip content="Image">
-                            <button
-                                className="flex items-center bg-none border-none rounded-sm text-primary/50 dark:text-primary-dark/50 justify-center w-[32px] h-[32px] relative hover:border hover:border-light dark:hover:border-dark hover:bg-light dark:hover:bg-dark hover:bg-black/[.15] dark:hover:bg-primary-dark/[.15]"
-                                onClick={(e) => {
-                                    e.preventDefault()
-                                    open()
-                                }}
-                            >
-                                <svg className="w-4" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14">
-                                    <path
-                                        d="M12 5.714a1.715 1.715 0 1 0 0-3.43 1.715 1.715 0 0 0 0 3.43Z"
-                                        fill="currentColor"
-                                    />
-                                    <path
-                                        d="M15 0H1C.443 0 0 .454 0 1.01v11.694c0 .557.443 1.01 1 1.01h14c.557 0 1-.453 1-1.01V1.01C16 .454 15.557 0 15 0Zm-3.682 7.06a.614.614 0 0 0-.457-.22c-.183 0-.311.085-.458.203l-.667.564c-.14.1-.25.168-.411.168a.59.59 0 0 1-.393-.146 4.668 4.668 0 0 1-.154-.147L6.857 5.404a.788.788 0 0 0-.596-.268c-.24 0-.461.118-.6.278l-4.518 5.45V1.561a.47.47 0 0 1 .468-.418h12.775c.246 0 .446.182.46.428l.011 9.3-3.54-3.81Z"
-                                        fill="currentColor"
-                                    />
-                                </svg>
-                            </button>
-                        </Tooltip>
-                    </li>
-                    {preview && (
-                        <>
-                            <li className="!ml-auto">
-                                <Tooltip content="Edit">
-                                    <button
-                                        onClick={() => setShowPreview(false)}
-                                        type="button"
-                                        className={`flex items-center bg-none border-none rounded-sm text-black/50 dark:text-primary-dark/50 dark:hover:text-primary-dark/75 justify-center w-[32px] h-[32px] hover:bg-black/[.15] dark:hover:bg-primary-dark/[.15] relative ${
-                                            showPreview
-                                                ? ''
-                                                : '!border border-light dark:border-dark bg-light dark:bg-dark'
-                                        }`}
-                                    >
-                                        <Edit />
-                                    </button>
-                                </Tooltip>
-                            </li>
-                            <li>
-                                <Tooltip content="Preview">
-                                    <button
-                                        onClick={() => setShowPreview(true)}
-                                        type="button"
-                                        className={`flex items-center bg-none border-none rounded-sm text-black/50 dark:text-primary-dark/50 justify-center w-[32px] h-[32px] hover:bg-black/[.15] hover:text-black/75 dark:hover:bg-primary-dark/[.15] dark:hover:text-primary-dark/75 relative ${
-                                            showPreview
-                                                ? 'border border-light dark:border-dark bg-light dark:bg-dark'
-                                                : ''
-                                        }`}
+                    </div>
+                )}
+                <div className="flex items-center justify-between py-1">
+                    <ul className="flex items-center list-none p-0 mx-2 space-x-1 w-full !mb-0">
+                        {buttons.map((button, index) => {
+                            return (
+                                <li key={index}>
+                                    <Tooltip content={button.tooltipContent} placement="top">
+                                        <button
+                                            className="flex items-center bg-none border-none rounded-sm text-black/50 dark:text-primary-dark/50 justify-center w-[32px] h-[32px] hover:bg-black/[.15] hover:text-black/75 dark:hover:bg-primary-dark/[.15] dark:hover:text-primary-dark/75 relative"
+                                            onClick={(e) => handleClick(e, button.replaceWith, button.cursor)}
+                                        >
+                                            {button.icon}
+                                        </button>
+                                    </Tooltip>
+                                </li>
+                            )
+                        })}
+                        <li>
+                            <Tooltip content="Image" placement="top">
+                                <button
+                                    className="flex items-center bg-none border-none rounded-sm text-primary/50 dark:text-primary-dark/50 justify-center w-[32px] h-[32px] relative hover:border hover:border-light dark:hover:border-dark hover:bg-light dark:hover:bg-dark hover:bg-black/[.15] dark:hover:bg-primary-dark/[.15]"
+                                    onClick={(e) => {
+                                        e.preventDefault()
+                                        open()
+                                    }}
+                                >
+                                    <svg
+                                        className="w-4"
+                                        fill="none"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 16 14"
                                     >
-                                        <svg
-                                            xmlns="http://www.w3.org/2000/svg"
-                                            fill="none"
-                                            viewBox="0 0 24 24"
-                                            strokeWidth={1.5}
-                                            stroke="currentColor"
-                                            className="w-5 h-5"
+                                        <path
+                                            d="M12 5.714a1.715 1.715 0 1 0 0-3.43 1.715 1.715 0 0 0 0 3.43Z"
+                                            fill="currentColor"
+                                        />
+                                        <path
+                                            d="M15 0H1C.443 0 0 .454 0 1.01v11.694c0 .557.443 1.01 1 1.01h14c.557 0 1-.453 1-1.01V1.01C16 .454 15.557 0 15 0Zm-3.682 7.06a.614.614 0 0 0-.457-.22c-.183 0-.311.085-.458.203l-.667.564c-.14.1-.25.168-.411.168a.59.59 0 0 1-.393-.146 4.668 4.668 0 0 1-.154-.147L6.857 5.404a.788.788 0 0 0-.596-.268c-.24 0-.461.118-.6.278l-4.518 5.45V1.561a.47.47 0 0 1 .468-.418h12.775c.246 0 .446.182.46.428l.011 9.3-3.54-3.81Z"
+                                            fill="currentColor"
+                                        />
+                                    </svg>
+                                </button>
+                            </Tooltip>
+                        </li>
+                        {preview && (
+                            <>
+                                <li className="!ml-auto">
+                                    <Tooltip content="Edit">
+                                        <button
+                                            onClick={() => setShowPreview(false)}
+                                            type="button"
+                                            className={`flex items-center bg-none border-none rounded-sm text-black/50 dark:text-primary-dark/50 dark:hover:text-primary-dark/75 justify-center w-[32px] h-[32px] hover:bg-black/[.15] dark:hover:bg-primary-dark/[.15] relative ${
+                                                showPreview
+                                                    ? ''
+                                                    : '!border border-light dark:border-dark bg-light dark:bg-dark'
+                                            }`}
                                         >
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-                                            />
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                                            />
-                                        </svg>
-                                    </button>
-                                </Tooltip>
-                            </li>
-                        </>
-                    )}
-                </ul>
-            </div>
-            {imageLoading && (
-                <div className="w-full h-full inset-0 bg-white/50 dark:bg-black/50 absolute flex justify-center items-center">
-                    <Spinner className="w-10 h-10" />
-                </div>
-            )}
-            {!value && (
-                <div className="absolute top-4 right-4">
-                    <a
-                        className="!text-primary/30 hover:!text-primary/50 dark:!text-primary-dark/30 dark:hover:!text-primary-dark/50"
-                        href="https://www.markdownguide.org/cheat-sheet/"
-                        target="_blank"
-                        rel="noreferrer"
-                        title="Supports Markdown syntax"
-                    >
-                        <MarkdownLogo />
-                    </a>
+                                            <Edit />
+                                        </button>
+                                    </Tooltip>
+                                </li>
+                                <li>
+                                    <Tooltip content="Preview">
+                                        <button
+                                            onClick={() => setShowPreview(true)}
+                                            type="button"
+                                            className={`flex items-center bg-none border-none rounded-sm text-black/50 dark:text-primary-dark/50 justify-center w-[32px] h-[32px] hover:bg-black/[.15] hover:text-black/75 dark:hover:bg-primary-dark/[.15] dark:hover:text-primary-dark/75 relative ${
+                                                showPreview
+                                                    ? 'border border-light dark:border-dark bg-light dark:bg-dark'
+                                                    : ''
+                                            }`}
+                                        >
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                                strokeWidth={1.5}
+                                                stroke="currentColor"
+                                                className="w-5 h-5"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+                                                />
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                                                />
+                                            </svg>
+                                        </button>
+                                    </Tooltip>
+                                </li>
+                            </>
+                        )}
+                    </ul>
                 </div>
-            )}
+                {imageLoading && (
+                    <div className="w-full h-full inset-0 bg-white/50 dark:bg-black/50 absolute flex justify-center items-center">
+                        <Spinner className="w-10 h-10" />
+                    </div>
+                )}
+                {!value && (
+                    <div className="absolute top-4 right-4">
+                        <a
+                            className="!text-primary/30 hover:!text-primary/50 dark:!text-primary-dark/30 dark:hover:!text-primary-dark/50"
+                            href="https://www.markdownguide.org/cheat-sheet/"
+                            target="_blank"
+                            rel="noreferrer"
+                            title="Supports Markdown syntax"
+                        >
+                            <MarkdownLogo />
+                        </a>
+                    </div>
+                )}
+            </div>
         </div>
     )
 }

From c54046c9845d31c6443de3fac060339eedf65062 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Thu, 19 Sep 2024 19:55:19 -0700
Subject: [PATCH 02/14] add name to mention

---
 src/components/Squeak/components/RichText.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Squeak/components/RichText.tsx b/src/components/Squeak/components/RichText.tsx
index ed0868011e43..d57df3361b8b 100644
--- a/src/components/Squeak/components/RichText.tsx
+++ b/src/components/Squeak/components/RichText.tsx
@@ -290,7 +290,7 @@ export default function RichText({
     }, [])
 
     const handleProfileSelect = (profile) => {
-        setValue((prevValue) => prevValue + `${profile.id} `)
+        setValue((prevValue) => prevValue + `${profile.attributes.firstName.toLowerCase()}/${profile.id} `)
         setShowMentionProfiles(false)
     }
 

From f917eb4a806926455b8e9fca3d45e3b8312bf402 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Fri, 20 Sep 2024 06:59:41 -0700
Subject: [PATCH 03/14] some fixes

---
 .../Squeak/components/QuestionForm.tsx        |  5 +-
 src/components/Squeak/components/RichText.tsx | 59 ++++++++++++++-----
 2 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/src/components/Squeak/components/QuestionForm.tsx b/src/components/Squeak/components/QuestionForm.tsx
index 4e4064c941a7..a25f7edcf49f 100644
--- a/src/components/Squeak/components/QuestionForm.tsx
+++ b/src/components/Squeak/components/QuestionForm.tsx
@@ -128,6 +128,7 @@ function QuestionFormMain({
     initialValues,
     showTopicSelector,
     disclaimer = true,
+    formType,
 }: QuestionFormMainProps) {
     const posthog = usePostHog()
     const { user, logout } = useUser()
@@ -213,6 +214,7 @@ function QuestionFormMain({
                                         setFieldValue={setFieldValue}
                                         initialValue={initialValues?.body}
                                         values={values}
+                                        mentions={formType === 'reply'}
                                     />
                                 </div>
                                 <Field
@@ -251,7 +253,7 @@ function QuestionFormMain({
 
 type QuestionFormProps = {
     slug?: string
-    formType: string
+    formType?: 'question' | 'reply'
     questionId?: number
     reply: (body: string) => Promise<void>
     onSubmit?: (values: any, formType: string) => void
@@ -428,6 +430,7 @@ export const QuestionForm = ({
                             loading={loading}
                             onSubmit={handleMessageSubmit}
                             showTopicSelector={showTopicSelector}
+                            formType={formType}
                         />
                     ),
                     auth: (
diff --git a/src/components/Squeak/components/RichText.tsx b/src/components/Squeak/components/RichText.tsx
index d57df3361b8b..cc21f90372a4 100644
--- a/src/components/Squeak/components/RichText.tsx
+++ b/src/components/Squeak/components/RichText.tsx
@@ -10,6 +10,7 @@ import { isURL } from 'lib/utils'
 import { CurrentQuestionContext } from './Question'
 import Avatar from './Avatar'
 import { AnimatePresence, motion } from 'framer-motion'
+import { IconX } from '@posthog/icons'
 
 const buttons = [
     {
@@ -81,7 +82,7 @@ const buttons = [
     },
 ]
 
-const MentionProfiles = ({ onSelect }) => {
+const MentionProfiles = ({ onSelect, onClose }) => {
     const currentQuestion = useContext(CurrentQuestionContext) ?? {}
     const replies = currentQuestion?.question?.replies
     const mentionProfiles = [
@@ -121,9 +122,19 @@ const MentionProfiles = ({ onSelect }) => {
             initial={{ opacity: 0, translateX: '100%' }}
             animate={{ opacity: 1, translateX: 0, transition: { type: 'tween', duration: 0.1 } }}
             exit={{ opacity: 0, translateX: '100%' }}
-            className="w-[200px] h-full overflow-auto bg-tan dark:bg-dark absolute right-0 top-0 z-50 border-l border-border dark:border-dark"
+            className="w-[200px] h-full absolute right-0 top-0 z-50 pt-2.5 pr-2"
         >
-            <ul ref={listRef} className="m-0 p-0 list-none">
+            <button
+                type="button"
+                className="p-1 rounded-full bg-white dark:bg-dark border border-border dark:border-dark absolute top-0.5 -left-2 z-10"
+                onClick={onClose}
+            >
+                <IconX className="w-3" />
+            </button>
+            <ul
+                ref={listRef}
+                className="m-0 p-0 list-none border border-border dark:border-dark bg-light dark:bg-dark h-full rounded-md overflow-auto "
+            >
                 {mentionProfiles.map((profile, index) => {
                     const { firstName, lastName, avatar } = profile.attributes
                     const name = [firstName, lastName].filter(Boolean).join(' ')
@@ -132,7 +143,7 @@ const MentionProfiles = ({ onSelect }) => {
                             <button
                                 onClick={() => onSelect?.(profile)}
                                 type="button"
-                                className={`text-left flex space-x-2 font-bold px-3 py-1 items-center rounded-sm hover:bg-accent hover:dark:bg-accent-dark w-full outline-none ${
+                                className={`click text-left flex space-x-2 font-bold px-3 py-1 items-center rounded-sm hover:bg-accent hover:dark:bg-accent-dark w-full outline-none ${
                                     focused === index ? 'bg-accent dark:bg-accent-dark' : ''
                                 }`}
                             >
@@ -140,7 +151,7 @@ const MentionProfiles = ({ onSelect }) => {
                                     <Avatar className="w-full" image={avatar?.data?.attributes?.url} />
                                 </div>
                                 <div>
-                                    <p className="m-0 text-xs font-semibold opacity-50 leading-none">#{profile.id}</p>
+                                    <p className="m-0 text-xs font-semibold opacity-50 leading-none">{profile.id}</p>
                                     <p className="m-0 leading-none text-sm">{name}</p>
                                 </div>
                             </button>
@@ -161,6 +172,7 @@ export default function RichText({
     maxLength = 2000,
     preview = true,
     label = '',
+    mentions = false,
 }: any) {
     const textarea = useRef<HTMLTextAreaElement>(null)
     const [value, setValue] = useState(initialValue)
@@ -290,21 +302,25 @@ export default function RichText({
     }, [])
 
     const handleProfileSelect = (profile) => {
-        setValue((prevValue) => prevValue + `${profile.attributes.firstName.toLowerCase()}/${profile.id} `)
+        const { selectionStart, selectionEnd } = getTextSelection()
+        setValue((prevValue) => {
+            const mention = `${profile.attributes.firstName.trim().toLowerCase()}/${profile.id} `
+            if (selectionStart === 1) {
+                return prevValue + mention
+            }
+            return replaceSelection(
+                selectionStart,
+                selectionEnd,
+                `${profile.attributes.firstName.trim().toLowerCase()}/${profile.id} `
+            )
+        })
         setShowMentionProfiles(false)
+        textarea.current?.focus()
     }
 
     return (
         <div className="relative" {...getRootProps()}>
             <div onClick={handleContainerClick}>
-                <AnimatePresence>
-                    {showMentionProfiles && (
-                        <div ref={mentionProfilesRef} onClick={(e) => e.stopPropagation()}>
-                            <MentionProfiles onSelect={handleProfileSelect} />
-                        </div>
-                    )}
-                </AnimatePresence>
-
                 <input className="hidden" {...getInputProps()} />
                 {showPreview ? (
                     <div className="bg-white dark:bg-accent-dark dark:text-primary-dark border-none text-base h-[200px] py-3 px-4 resize-none w-full text-black outline-none focus:ring-0 overflow-auto">
@@ -321,6 +337,21 @@ export default function RichText({
                     </div>
                 ) : (
                     <div className="relative">
+                        {mentions && (
+                            <AnimatePresence>
+                                {showMentionProfiles && (
+                                    <div ref={mentionProfilesRef} onClick={(e) => e.stopPropagation()}>
+                                        <MentionProfiles
+                                            onClose={() => {
+                                                setShowMentionProfiles(false)
+                                                textarea.current?.focus()
+                                            }}
+                                            onSelect={handleProfileSelect}
+                                        />
+                                    </div>
+                                )}
+                            </AnimatePresence>
+                        )}
                         <label htmlFor="body" className="py-3 px-4 pb-8 block">
                             {label && !!value && <span className="text-sm opacity-60 block">{label}</span>}
                             <textarea

From 6d1ca56b45e152536b1b52ecbd618e849920cef5 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Fri, 20 Sep 2024 10:14:48 -0700
Subject: [PATCH 04/14] replace mentions

---
 src/components/Squeak/components/RichText.tsx | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/Squeak/components/RichText.tsx b/src/components/Squeak/components/RichText.tsx
index cc21f90372a4..58a05dc64f55 100644
--- a/src/components/Squeak/components/RichText.tsx
+++ b/src/components/Squeak/components/RichText.tsx
@@ -163,6 +163,12 @@ const MentionProfiles = ({ onSelect, onClose }) => {
     )
 }
 
+const replaceMentions = (body: string) => {
+    return body.replace(/@([a-zA-Z0-9-]+\/[0-9]+)/g, (match, username) => {
+        return `[${match}](/community/profiles/${username.split('/')[1]})`
+    })
+}
+
 export default function RichText({
     initialValue = '',
     setFieldValue,
@@ -207,7 +213,7 @@ export default function RichText({
         accept: { 'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg'], 'image/gif': ['.gif'] },
     })
 
-    const replaceSelection = (selectionStart?: number, selectionEnd?: number, text = '') => {
+    const replaceSelection = (selectionStart?: number, selectionEnd?: number, text = '', value: string) => {
         return value.substring(0, selectionStart) + text + value.substring(selectionEnd, value.length)
     }
 
@@ -227,7 +233,7 @@ export default function RichText({
 
         const { selectionStart, selectionEnd, selectedText } = getTextSelection()
         textarea?.current?.focus()
-        setValue(replaceSelection(selectionStart, selectionEnd, replaceWith(selectedText)))
+        setValue((prevValue) => replaceSelection(selectionStart, selectionEnd, replaceWith(selectedText), prevValue))
         setCursor(cursor)
     }
 
@@ -239,7 +245,9 @@ export default function RichText({
         const { selectionStart, selectionEnd, selectedText } = getTextSelection()
         if (selectedText) {
             textarea?.current?.focus()
-            setValue(replaceSelection(selectionStart, selectionEnd, `[${selectedText}](${url})`))
+            setValue((prevValue) =>
+                replaceSelection(selectionStart, selectionEnd, `[${selectedText}](${url})`, prevValue)
+            )
         }
     }
 
@@ -303,17 +311,8 @@ export default function RichText({
 
     const handleProfileSelect = (profile) => {
         const { selectionStart, selectionEnd } = getTextSelection()
-        setValue((prevValue) => {
-            const mention = `${profile.attributes.firstName.trim().toLowerCase()}/${profile.id} `
-            if (selectionStart === 1) {
-                return prevValue + mention
-            }
-            return replaceSelection(
-                selectionStart,
-                selectionEnd,
-                `${profile.attributes.firstName.trim().toLowerCase()}/${profile.id} `
-            )
-        })
+        const mention = `${profile.attributes.firstName.trim().toLowerCase()}/${profile.id} `
+        setValue((prevValue) => replaceSelection(selectionStart, selectionEnd, mention, prevValue))
         setShowMentionProfiles(false)
         textarea.current?.focus()
     }
@@ -332,7 +331,7 @@ export default function RichText({
                                 return objectURL || fakeImagePath
                             }}
                         >
-                            {value}
+                            {replaceMentions(value)}
                         </Markdown>
                     </div>
                 ) : (

From 7efd3a8a46d702889e3559eba566b753d280ae50 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Sat, 21 Sep 2024 14:30:21 -0700
Subject: [PATCH 05/14] add staff to mentions

---
 src/components/Squeak/components/RichText.tsx | 126 +++++++++++++-----
 1 file changed, 94 insertions(+), 32 deletions(-)

diff --git a/src/components/Squeak/components/RichText.tsx b/src/components/Squeak/components/RichText.tsx
index 58a05dc64f55..660acbc79751 100644
--- a/src/components/Squeak/components/RichText.tsx
+++ b/src/components/Squeak/components/RichText.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useEffect, useRef, useState, useCallback, useContext } from 'react'
+import React, { ChangeEvent, useEffect, useRef, useState, useCallback, useContext, useMemo } from 'react'
 import MarkdownLogo from './MarkdownLogo'
 import { useDropzone } from 'react-dropzone'
 import Spinner from 'components/Spinner'
@@ -11,6 +11,8 @@ import { CurrentQuestionContext } from './Question'
 import Avatar from './Avatar'
 import { AnimatePresence, motion } from 'framer-motion'
 import { IconX } from '@posthog/icons'
+import { graphql, useStaticQuery } from 'gatsby'
+import groupBy from 'lodash.groupby'
 
 const buttons = [
     {
@@ -82,15 +84,77 @@ const buttons = [
     },
 ]
 
-const MentionProfiles = ({ onSelect, onClose }) => {
+const MentionProfile = ({ profile, onSelect, selectionStart, index, focused }) => {
+    const { firstName, lastName, avatar } = profile.attributes
+    const name = [firstName, lastName].filter(Boolean).join(' ')
+
+    return (
+        <li className="border-b border-border dark:border-dark p-1">
+            <button
+                onClick={() => onSelect?.(profile, selectionStart)}
+                type="button"
+                className={`click text-left flex space-x-2 font-bold px-3 py-1 items-center rounded-sm hover:bg-accent hover:dark:bg-accent-dark w-full outline-none ${
+                    focused === index ? 'bg-accent dark:bg-accent-dark' : ''
+                }`}
+            >
+                <div className="size-6 overflow-hidden rounded-full">
+                    <Avatar className="w-full" image={avatar?.data?.attributes?.url} />
+                </div>
+                <div>
+                    <p className="m-0 text-xs font-semibold opacity-50 leading-none">{profile.id}</p>
+                    <p className="m-0 leading-none text-sm line-clamp-1">{name}</p>
+                </div>
+            </button>
+        </li>
+    )
+}
+
+const MentionProfiles = ({ onSelect, onClose, body, ...other }) => {
+    const { staffProfiles } = useStaticQuery(graphql`
+        {
+            staffProfiles: allSqueakProfile(sort: { fields: firstName }) {
+                nodes {
+                    avatar {
+                        url
+                    }
+                    firstName
+                    lastName
+                    squeakId
+                }
+            }
+        }
+    `)
     const currentQuestion = useContext(CurrentQuestionContext) ?? {}
     const replies = currentQuestion?.question?.replies
+    const selectionStart = useMemo(() => other.selectionStart, [])
+    const search = body.substring(selectionStart).split(' ')[0].replace('@', '')
     const mentionProfiles = [
         { attributes: { profile: { data: currentQuestion?.question?.profile?.data } } },
         ...replies?.data,
+        ...staffProfiles.nodes.map((node) => ({
+            attributes: {
+                profile: {
+                    data: {
+                        id: node.squeakId,
+                        attributes: { ...node, avatar: { data: { attributes: { url: node.avatar?.url } } } },
+                    },
+                },
+            },
+        })),
     ]
         .map((reply) => reply?.attributes?.profile?.data)
-        .filter((profile, index, self) => profile && self.findIndex((p) => p?.id === profile.id) === index)
+        .filter((profile, index, self) => {
+            const { firstName, lastName } = profile.attributes
+            const name = [firstName, lastName].filter(Boolean).join(' ')
+            return (
+                profile &&
+                self.findIndex((p) => p?.id === profile.id) === index &&
+                name.toLowerCase().includes(search.toLowerCase())
+            )
+        })
+    const grouped = groupBy(mentionProfiles, (profile) =>
+        staffProfiles.nodes.some((node) => node.squeakId === profile.id) ? 'Staff' : 'In this thread'
+    )
     const listRef = useRef<HTMLUListElement>(null)
     const [focused, setFocused] = useState(0)
 
@@ -106,7 +170,7 @@ const MentionProfiles = ({ onSelect, onClose }) => {
             }
             if (e.key === 'Tab' || e.key === 'Enter') {
                 e.preventDefault()
-                onSelect?.(mentionProfiles[focused])
+                onSelect?.(mentionProfiles[focused], selectionStart)
             }
         }
 
@@ -115,47 +179,43 @@ const MentionProfiles = ({ onSelect, onClose }) => {
         return () => {
             window.removeEventListener('keydown', handleKeyDown)
         }
-    }, [focused])
+    }, [focused, search])
 
     return (
         <motion.div
             initial={{ opacity: 0, translateX: '100%' }}
             animate={{ opacity: 1, translateX: 0, transition: { type: 'tween', duration: 0.1 } }}
             exit={{ opacity: 0, translateX: '100%' }}
-            className="w-[200px] h-full absolute right-0 top-0 z-50 pt-2.5 pr-2"
+            className="w-[200px] h-full absolute right-0 top-0 z-50 pt-2.5 pr-2.5"
         >
             <button
                 type="button"
-                className="p-1 rounded-full bg-white dark:bg-dark border border-border dark:border-dark absolute top-0.5 -left-2 z-10"
+                className="p-1 rounded-full bg-white dark:bg-dark border border-border dark:border-dark absolute top-0.5 right-0.5 z-20"
                 onClick={onClose}
             >
                 <IconX className="w-3" />
             </button>
             <ul
                 ref={listRef}
-                className="m-0 p-0 list-none border border-border dark:border-dark bg-light dark:bg-dark h-full rounded-md overflow-auto "
+                className="m-0 p-0 list-none border border-border dark:border-dark bg-light dark:bg-dark h-full rounded-md overflow-auto"
             >
-                {mentionProfiles.map((profile, index) => {
-                    const { firstName, lastName, avatar } = profile.attributes
-                    const name = [firstName, lastName].filter(Boolean).join(' ')
+                {Object.entries(grouped).map(([key, profiles], index) => {
                     return (
-                        <li className="border-b border-border dark:border-dark p-1" key={index}>
-                            <button
-                                onClick={() => onSelect?.(profile)}
-                                type="button"
-                                className={`click text-left flex space-x-2 font-bold px-3 py-1 items-center rounded-sm hover:bg-accent hover:dark:bg-accent-dark w-full outline-none ${
-                                    focused === index ? 'bg-accent dark:bg-accent-dark' : ''
-                                }`}
-                            >
-                                <div className="size-6 overflow-hidden rounded-full">
-                                    <Avatar className="w-full" image={avatar?.data?.attributes?.url} />
-                                </div>
-                                <div>
-                                    <p className="m-0 text-xs font-semibold opacity-50 leading-none">{profile.id}</p>
-                                    <p className="m-0 leading-none text-sm">{name}</p>
-                                </div>
-                            </button>
-                        </li>
+                        <>
+                            <li className="p-1 text-xs font-semibold sticky top-0 bg-light dark:bg-dark z-10">
+                                <span className="opacity-50">{key}</span>
+                            </li>
+                            {profiles.map((profile, index) => (
+                                <MentionProfile
+                                    focused={focused}
+                                    index={index}
+                                    onSelect={onSelect}
+                                    profile={profile}
+                                    selectionStart={selectionStart}
+                                    key={profile.id}
+                                />
+                            ))}
+                        </>
                     )
                 })}
             </ul>
@@ -297,7 +357,7 @@ export default function RichText({
 
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'Escape' || e.key === 'Backspace') {
+            if (e.key === 'Escape' || e.key === 'Backspace' || e.key === ' ') {
                 setShowMentionProfiles(false)
             }
         }
@@ -309,9 +369,9 @@ export default function RichText({
         }
     }, [])
 
-    const handleProfileSelect = (profile) => {
-        const { selectionStart, selectionEnd } = getTextSelection()
-        const mention = `${profile.attributes.firstName.trim().toLowerCase()}/${profile.id} `
+    const handleProfileSelect = (profile, selectionStart) => {
+        const { selectionEnd } = getTextSelection()
+        const mention = `@${profile.attributes.firstName.trim().toLowerCase()}/${profile.id} `
         setValue((prevValue) => replaceSelection(selectionStart, selectionEnd, mention, prevValue))
         setShowMentionProfiles(false)
         textarea.current?.focus()
@@ -341,6 +401,8 @@ export default function RichText({
                                 {showMentionProfiles && (
                                     <div ref={mentionProfilesRef} onClick={(e) => e.stopPropagation()}>
                                         <MentionProfiles
+                                            body={value}
+                                            selectionStart={textarea.current?.selectionStart}
                                             onClose={() => {
                                                 setShowMentionProfiles(false)
                                                 textarea.current?.focus()

From 1f0f160d44577d86bd5ef318b23be94c5d640562 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Sat, 21 Sep 2024 14:33:56 -0700
Subject: [PATCH 06/14] allow updating search

---
 src/components/Squeak/components/RichText.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Squeak/components/RichText.tsx b/src/components/Squeak/components/RichText.tsx
index 660acbc79751..f162362107df 100644
--- a/src/components/Squeak/components/RichText.tsx
+++ b/src/components/Squeak/components/RichText.tsx
@@ -357,7 +357,7 @@ export default function RichText({
 
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'Escape' || e.key === 'Backspace' || e.key === ' ') {
+            if (e.key === 'Escape' || e.key === ' ') {
                 setShowMentionProfiles(false)
             }
         }

From ea6f9ef66d1a911267135565e707a1ac66da66f5 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Mon, 23 Sep 2024 17:51:07 -0700
Subject: [PATCH 07/14] move mention replace

---
 src/components/Squeak/components/Markdown.tsx | 12 ++++++++++--
 src/components/Squeak/components/RichText.tsx |  8 +-------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/Squeak/components/Markdown.tsx b/src/components/Squeak/components/Markdown.tsx
index 5defc6d95cd6..476722ae5163 100644
--- a/src/components/Squeak/components/Markdown.tsx
+++ b/src/components/Squeak/components/Markdown.tsx
@@ -6,6 +6,12 @@ import { ZoomImage } from 'components/ZoomImage'
 import { TransformImage } from 'react-markdown/lib/ast-to-react'
 import remarkGfm from 'remark-gfm'
 
+const replaceMentions = (body: string) => {
+    return body.replace(/@([a-zA-Z0-9-]+\/[0-9]+)/g, (match, username) => {
+        return `[${match}](/community/profiles/${username.split('/')[1]})`
+    })
+}
+
 export const Markdown = ({
     children,
     transformImageUri,
@@ -23,7 +29,9 @@ export const Markdown = ({
             remarkPlugins={[remarkGfm]}
             transformImageUri={transformImageUri}
             rehypePlugins={[rehypeSanitize]}
-            className={`flex-1 !text-sm overflow-hidden text-ellipsis mr-1 !pb-0 text-primary/75 dark:text-primary-dark/75 font-normal ${regularText ? '' : 'question-content community-post-markdown'}`}
+            className={`flex-1 !text-sm overflow-hidden text-ellipsis mr-1 !pb-0 text-primary/75 dark:text-primary-dark/75 font-normal ${
+                regularText ? '' : 'question-content community-post-markdown'
+            }`}
             components={{
                 pre: ({ children }) => {
                     return (
@@ -57,7 +65,7 @@ export const Markdown = ({
                 img: ZoomImage,
             }}
         >
-            {children}
+            {replaceMentions(children)}
         </ReactMarkdown>
     )
 }
diff --git a/src/components/Squeak/components/RichText.tsx b/src/components/Squeak/components/RichText.tsx
index f162362107df..75c9d40c8b6b 100644
--- a/src/components/Squeak/components/RichText.tsx
+++ b/src/components/Squeak/components/RichText.tsx
@@ -223,12 +223,6 @@ const MentionProfiles = ({ onSelect, onClose, body, ...other }) => {
     )
 }
 
-const replaceMentions = (body: string) => {
-    return body.replace(/@([a-zA-Z0-9-]+\/[0-9]+)/g, (match, username) => {
-        return `[${match}](/community/profiles/${username.split('/')[1]})`
-    })
-}
-
 export default function RichText({
     initialValue = '',
     setFieldValue,
@@ -391,7 +385,7 @@ export default function RichText({
                                 return objectURL || fakeImagePath
                             }}
                         >
-                            {replaceMentions(value)}
+                            {value}
                         </Markdown>
                     </div>
                 ) : (

From 7549c4b38c63da0b7e45db03202e774260450bb4 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Fri, 27 Sep 2024 20:47:22 -0700
Subject: [PATCH 08/14] allow max followups

---
 .env.development                              |   4 +-
 src/components/Squeak/components/Question.tsx | 239 ++++++++++--------
 .../Squeak/components/QuestionForm.tsx        |   2 +-
 src/components/Squeak/components/Replies.tsx  |  11 +-
 src/components/Squeak/components/Reply.tsx    |  56 ++--
 src/components/Squeak/components/RichText.tsx |   2 +-
 src/components/Squeak/hooks/useQuestion.tsx   |   6 +-
 7 files changed, 173 insertions(+), 147 deletions(-)

diff --git a/.env.development b/.env.development
index 0338fd5cfc35..07a27f26034b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,4 @@
-GATSBY_SQUEAK_API_HOST=https://better-animal-d658c56969.strapiapp.com
+GATSBY_SQUEAK_API_HOST=http://127.0.0.1:1337
 
 GATSBY_ALGOLIA_APP_ID=7VNQB5W0TX
 GATSBY_ALGOLIA_SEARCH_API_KEY=e9ff9279dc8771a35a26d586c73c20a8
@@ -15,4 +15,4 @@ GATBSY_SHOPIFY_SALES_CHANNEL="Headless PostHog Merch Shop"
 GATSBY_SHOPIFY_ADMIN_API_VERSION="2024-01"
 GATSBY_SHOPIFY_STOREFRONT_API_VERSION="2024-01"
 GATSBY_CLOUDINARY_CLOUD_NAME=dmukukwp6
-GATSBY_AI_PROFILE_ID=28378
\ No newline at end of file
+GATSBY_AI_PROFILE_ID=9697
\ No newline at end of file
diff --git a/src/components/Squeak/components/Question.tsx b/src/components/Squeak/components/Question.tsx
index 8fead51cb0e1..0e5ee99f632c 100644
--- a/src/components/Squeak/components/Question.tsx
+++ b/src/components/Squeak/components/Question.tsx
@@ -228,36 +228,38 @@ const DeleteButton = ({ questionID }: { questionID: number }) => {
 
 const MaxReply = ({ children }: { children: React.ReactNode }) => {
     return (
-        <li
-            className={`pr-[5px] pl-[30px] pb-2 !mb-0 border-l border-solid border-light dark:border-dark squeak-left-border relative before:border-l-0`}
-        >
-            <Tooltip
-                content={() => (
-                    <div className="text-sm max-w-64">
-                        Max AI is our resident AI assistant. Double-check responses for accuracy.
-                    </div>
-                )}
-                placement="top"
+        <ul className="ml-5 !mb-0 p-0 list-none">
+            <li
+                className={`pr-[5px] pl-[30px] pb-2 !mb-0 border-l border-solid border-light dark:border-dark squeak-left-border relative before:border-l-0`}
             >
-                <div className="relative inline-block">
-                    <div className="flex items-center !text-black dark:!text-white">
-                        <div className="mr-2 relative">
-                            <Avatar
-                                className="w-[25px] h-[25px] rounded-full"
-                                image="https://res.cloudinary.com/dmukukwp6/image/upload/v1688579513/thumbnail_max_c5dd553db8.png"
-                            />
-                            <span className="absolute -right-1.5 -bottom-2 h-[20px] w-[20px] flex items-center justify-center rounded-full bg-white dark:bg-gray-accent-dark text-primary dark:text-primary-dark">
-                                <Logomark className="w-[16px]" />
-                            </span>
+                <Tooltip
+                    content={() => (
+                        <div className="text-sm max-w-64">
+                            Max AI is our resident AI assistant. Double-check responses for accuracy.
+                        </div>
+                    )}
+                    placement="top"
+                >
+                    <div className="relative inline-block">
+                        <div className="flex items-center !text-black dark:!text-white">
+                            <div className="mr-2 relative">
+                                <Avatar
+                                    className="w-[25px] h-[25px] rounded-full"
+                                    image="https://res.cloudinary.com/dmukukwp6/image/upload/v1688579513/thumbnail_max_c5dd553db8.png"
+                                />
+                                <span className="absolute -right-1.5 -bottom-2 h-[20px] w-[20px] flex items-center justify-center rounded-full bg-white dark:bg-gray-accent-dark text-primary dark:text-primary-dark">
+                                    <Logomark className="w-[16px]" />
+                                </span>
+                            </div>
+                            <strong>Max AI</strong>
                         </div>
-                        <strong>Max AI</strong>
                     </div>
+                </Tooltip>
+                <div className="ml-[33px] mt-1 py-2 px-4 bg-accent dark:bg-accent-dark rounded-md border border-light dark:border-dark">
+                    {children}
                 </div>
-            </Tooltip>
-            <div className="ml-[33px] mt-1 py-2 px-4 bg-accent dark:bg-accent-dark rounded-md border border-light dark:border-dark">
-                {children}
-            </div>
-        </li>
+            </li>
+        </ul>
     )
 }
 
@@ -270,12 +272,7 @@ const Loading = () => {
     )
 }
 
-const AskMax = ({ question, refresh, manual }: { question: any; refresh: () => void; manual?: boolean }) => {
-    const [confident, setConfident] = useState(false)
-    const [loading, setLoading] = useState(true)
-    const alreadyAsked = useMemo(() => question?.attributes?.askedMax, [])
-    const { getJwt } = useUser()
-
+const AskMaxLoading = () => {
     const messages = [
         'This usually takes less than 30 seconds.',
         'Searching docs, tutorials, GitHub issues, blogs, community answers...',
@@ -288,76 +285,38 @@ const AskMax = ({ question, refresh, manual }: { question: any; refresh: () => v
     const [fadeState, setFadeState] = useState('in')
 
     useEffect(() => {
-        if (loading) {
-            const intervalId = setInterval(() => {
-                setFadeState('out')
-                setTimeout(() => {
-                    setCurrentMessageIndex((prevIndex) => (prevIndex + 1) % messages.length)
-                    setFadeState('in')
-                }, 500) // Wait for fade out before changing message
-            }, 5000)
-
-            return () => clearInterval(intervalId)
-        }
-    }, [loading])
-
-    useEffect(() => {
-        const askMax = async () => {
-            try {
-                const response = await fetch(`${process.env.GATSBY_SQUEAK_API_HOST}/api/ask-max`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        Authorization: `Bearer ${await getJwt()}`,
-                    },
-                    body: JSON.stringify({
-                        question,
-                        manual,
-                    }),
-                }).then((res) => res.json())
-                setConfident(response.confident)
-                setLoading(false)
-                refresh()
-            } catch (error) {
-                console.error(error)
-            }
-        }
-        if (!alreadyAsked) {
-            askMax()
-        }
+        const intervalId = setInterval(() => {
+            setFadeState('out')
+            setTimeout(() => {
+                setCurrentMessageIndex((prevIndex) => (prevIndex + 1) % messages.length)
+                setFadeState('in')
+            }, 500) // Wait for fade out before changing message
+        }, 5000)
+
+        return () => clearInterval(intervalId)
     }, [])
 
-    return !alreadyAsked && (loading || !confident) ? (
-        <ul className="ml-5 !mb-0 p-0 list-none">
-            <MaxReply>
-                {loading ? (
-                    <div className="flex gap-1">
-                        <div>
-                            <Loading />
-                        </div>
-                        <div className="flex-1 font-normal question-content community-post-markdown !p-0">
-                            <p className="!mt-1 !mb-0 !pb-0">
-                                <strong>Hang tight, checking to see if we can find an answer for you...</strong>
-                            </p>
-                            <p
-                                className={`text-primary/75 dark:text-primary-dark/75 !mb-0 !pb-1 transition-opacity duration-500 ${
-                                    fadeState === 'out' ? 'opacity-0' : 'opacity-100'
-                                }`}
-                            >
-                                {messages[currentMessageIndex]}
-                            </p>
-                        </div>
-                    </div>
-                ) : (
-                    <div className="text-primary/75 dark:text-primary-dark/75 font-normal question-content community-post-markdown !p-0">
-                        <p>
-                            Dang, we couldn’t find anything this time. A community member will hopefully respond soon!
-                        </p>
-                    </div>
-                )}
-            </MaxReply>
-        </ul>
-    ) : null
+    return (
+        <MaxReply>
+            <div className="flex gap-1">
+                <div>
+                    <Loading />
+                </div>
+                <div className="flex-1 font-normal question-content community-post-markdown !p-0">
+                    <p className="!mt-1 !mb-0 !pb-0">
+                        <strong>Hang tight, checking to see if we can find an answer for you...</strong>
+                    </p>
+                    <p
+                        className={`text-primary/75 dark:text-primary-dark/75 !mb-0 !pb-1 transition-opacity duration-500 ${
+                            fadeState === 'out' ? 'opacity-0' : 'opacity-100'
+                        }`}
+                    >
+                        {messages[currentMessageIndex]}
+                    </p>
+                </div>
+            </div>
+        </MaxReply>
+    )
 }
 
 const AskMaxButton = ({ onClick, askedMax }: { askedMax: boolean; onClick: () => void }) => {
@@ -383,11 +342,62 @@ const AskMaxButton = ({ onClick, askedMax }: { askedMax: boolean; onClick: () =>
     )
 }
 
+const AskMax = ({
+    question,
+    refresh,
+    manual = false,
+    withContext = false,
+}: {
+    question: any
+    refresh: () => void
+    manual?: boolean
+    withContext?: boolean
+}) => {
+    const [loading, setLoading] = useState(true)
+    const [confident, setConfident] = useState(false)
+    const { getJwt } = useUser()
+
+    useEffect(() => {
+        const askMax = async () => {
+            try {
+                const response = await fetch(`${process.env.GATSBY_SQUEAK_API_HOST}/api/ask-max`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        Authorization: `Bearer ${await getJwt()}`,
+                    },
+                    body: JSON.stringify({
+                        question,
+                        manual,
+                        withContext,
+                    }),
+                }).then((res) => res.json())
+                setConfident(response.confident)
+                setLoading(false)
+                refresh()
+            } catch (error) {
+                console.error(error)
+            }
+        }
+        askMax()
+    }, [])
+
+    return loading ? (
+        <AskMaxLoading />
+    ) : !confident ? (
+        <MaxReply>
+            <div className="text-primary/75 dark:text-primary-dark/75 font-normal question-content community-post-markdown !p-0">
+                <p>Dang, we couldn’t find anything this time. A community member will hopefully respond soon!</p>
+            </div>
+        </MaxReply>
+    ) : null
+}
+
 export const Question = (props: QuestionProps) => {
-    const { id, question, showSlug, buttonText, showActions = true, askMax } = props
+    const { id, question, showSlug, buttonText, showActions = true, ...other } = props
     const [expanded, setExpanded] = useState(props.expanded || false)
     const { user, notifications, setNotifications } = useUser()
-    const [manualAskMax, setManualAskMax] = useState(false)
+    const [maxQuestions, setMaxQuestions] = useState(other.askMax ? [{ manual: false, withContext: false }] : [])
 
     useEffect(() => {
         if (
@@ -431,6 +441,12 @@ export const Question = (props: QuestionProps) => {
         return <div>Question not found</div>
     }
 
+    const handleReply = async (_values, _formData, data) => {
+        if (data.askMax) {
+            setMaxQuestions([...maxQuestions, { manual: false, withContext: true }])
+        }
+    }
+
     const archived = questionData?.attributes.archived
     const slugs = questionData?.attributes?.slugs
     const escalated = questionData?.attributes.escalated
@@ -494,7 +510,9 @@ export const Question = (props: QuestionProps) => {
                                     </button>
                                     <DeleteButton questionID={questionData.id} />
                                     <AskMaxButton
-                                        onClick={() => setManualAskMax(true)}
+                                        onClick={() =>
+                                            setMaxQuestions([...maxQuestions, { manual: true, withContext: true }])
+                                        }
                                         askedMax={questionData?.attributes.askedMax}
                                     />
                                 </>
@@ -532,10 +550,18 @@ export const Question = (props: QuestionProps) => {
                                 </p>
                             )}
                         </div>
-                        {(askMax || manualAskMax) && (
-                            <AskMax question={questionData} refresh={mutate} manual={manualAskMax} />
-                        )}
                         <Replies expanded={expanded} setExpanded={setExpanded} />
+                        {maxQuestions.map((question, index) => {
+                            return (
+                                <AskMax
+                                    key={`ask-max-${index}`}
+                                    question={questionData}
+                                    refresh={mutate}
+                                    manual={question.manual}
+                                    withContext={question.withContext}
+                                />
+                            )
+                        })}
                     </div>
                     <div
                         className={`ml-5 pr-5 pb-1 pl-8 relative w-full squeak-left-border ${
@@ -548,6 +574,7 @@ export const Question = (props: QuestionProps) => {
                             buttonText={buttonText}
                             formType="reply"
                             reply={reply}
+                            onSubmit={handleReply}
                         />
                     </div>
                 </div>
diff --git a/src/components/Squeak/components/QuestionForm.tsx b/src/components/Squeak/components/QuestionForm.tsx
index a25f7edcf49f..8012e4f691cb 100644
--- a/src/components/Squeak/components/QuestionForm.tsx
+++ b/src/components/Squeak/components/QuestionForm.tsx
@@ -391,7 +391,7 @@ export const QuestionForm = ({
             }
 
             if (formType === 'reply' && questionId) {
-                await reply(transformedValues.body)
+                data = await reply(transformedValues.body)
             }
 
             setLoading(false)
diff --git a/src/components/Squeak/components/Replies.tsx b/src/components/Squeak/components/Replies.tsx
index ad15e3357d5f..279f78b1f13c 100644
--- a/src/components/Squeak/components/Replies.tsx
+++ b/src/components/Squeak/components/Replies.tsx
@@ -20,19 +20,12 @@ type RepliesProps = {
 }
 
 export const Replies = ({ expanded, setExpanded }: RepliesProps) => {
-    const { user, isModerator } = useUser()
+    const { user } = useUser()
     const {
-        question: { replies: initialReplies, resolvedBy, profile },
+        question: { replies, resolvedBy, profile },
     } = useContext(CurrentQuestionContext)
 
     const isOP = profile?.data?.id === user?.profile?.id
-    const replies = {
-        data: initialReplies?.data?.filter((reply) =>
-            reply.attributes.profile?.data?.id === Number(process.env.GATSBY_AI_PROFILE_ID)
-                ? isModerator || reply.attributes.helpful || isOP
-                : true
-        ),
-    }
 
     return replies && replies.data.length > 0 ? (
         <ul className="ml-5 !mb-0 p-0 list-none">
diff --git a/src/components/Squeak/components/Reply.tsx b/src/components/Squeak/components/Reply.tsx
index 5a06050a2baa..30f57ac13566 100644
--- a/src/components/Squeak/components/Reply.tsx
+++ b/src/components/Squeak/components/Reply.tsx
@@ -71,30 +71,7 @@ const AIDisclaimerMod = ({ opName, replyID, mutate }) => {
     )
 }
 
-const feedbackOptions = [
-    {
-        label: 'Yes, mark as solution',
-        helpful: true,
-    },
-    {
-        label: "Not the answer I'm looking for",
-        helpful: false,
-    },
-    {
-        label: 'I think this is a bug',
-        helpful: false,
-    },
-    {
-        label: 'My question is more nuanced',
-        helpful: false,
-    },
-    {
-        label: 'Answer is wrong',
-        helpful: false,
-    },
-]
-
-const AIDisclaimer = ({ replyID, mutate, topic, isAuthor, confidence }) => {
+const AIDisclaimer = ({ replyID, mutate, topic, isAuthor, confidence, resolvable }) => {
     const posthog = usePostHog()
     const { getJwt } = useUser()
     const { handleResolve } = useContext(CurrentQuestionContext)
@@ -127,7 +104,9 @@ const AIDisclaimer = ({ replyID, mutate, topic, isAuthor, confidence }) => {
                 },
             })
 
-            await handleResolve(helpful, replyID)
+            if (resolvable) {
+                await handleResolve(helpful, replyID)
+            }
 
             mutate()
         } catch (error) {
@@ -135,6 +114,29 @@ const AIDisclaimer = ({ replyID, mutate, topic, isAuthor, confidence }) => {
         }
     }
 
+    const feedbackOptions = [
+        {
+            label: resolvable ? 'Yes, mark as solution' : 'Yes, this was helpful',
+            helpful: true,
+        },
+        {
+            label: "Not the answer I'm looking for",
+            helpful: false,
+        },
+        {
+            label: 'I think this is a bug',
+            helpful: false,
+        },
+        {
+            label: 'My question is more nuanced',
+            helpful: false,
+        },
+        {
+            label: 'Answer is wrong',
+            helpful: false,
+        },
+    ]
+
     return (
         <div className="p-4 border border-light dark:border-dark rounded bg-accent dark:bg-accent-dark mt-1 mb-3">
             {helpful === null ? (
@@ -145,7 +147,7 @@ const AIDisclaimer = ({ replyID, mutate, topic, isAuthor, confidence }) => {
             ) : helpful ? (
                 <>
                     <p className="mb-0 -mt-1 text-[15px]">
-                        <strong>Great to hear!</strong> This answer has been marked as the solution.
+                        <strong>Great to hear!</strong> Thanks for helping us improve.
                     </p>
                     <div className="text-sm border-t border-light dark:border-dark pt-2 mt-2 -mb-1">
                         Response generated by{' '}
@@ -302,6 +304,7 @@ export default function Reply({ reply, badgeText }: ReplyProps) {
             <div className="border-l-0 ml-[33px] pl-0 pb-1">
                 {profile.data.id === Number(process.env.GATSBY_AI_PROFILE_ID) &&
                     helpful === null &&
+                    (isModerator || isAuthor) &&
                     (isModerator && !publishedAt ? (
                         <AIDisclaimerMod
                             opName={questionProfile.data.attributes.firstName || 'OP'}
@@ -315,6 +318,7 @@ export default function Reply({ reply, badgeText }: ReplyProps) {
                             replyID={id}
                             mutate={mutate}
                             confidence={meta?.confidence}
+                            resolvable={resolvable}
                         />
                     ))}
                 <div className={reply?.attributes?.helpful === false || !publishedAt ? 'opacity-70' : ''}>
diff --git a/src/components/Squeak/components/RichText.tsx b/src/components/Squeak/components/RichText.tsx
index 75c9d40c8b6b..5da79c20556c 100644
--- a/src/components/Squeak/components/RichText.tsx
+++ b/src/components/Squeak/components/RichText.tsx
@@ -202,7 +202,7 @@ const MentionProfiles = ({ onSelect, onClose, body, ...other }) => {
                 {Object.entries(grouped).map(([key, profiles], index) => {
                     return (
                         <>
-                            <li className="p-1 text-xs font-semibold sticky top-0 bg-light dark:bg-dark z-10">
+                            <li className="p-1 text-xs font-semibold sticky top-0 bg-light dark:bg-dark z-10 shadow-sm">
                                 <span className="opacity-50">{key}</span>
                             </li>
                             {profiles.map((profile, index) => (
diff --git a/src/components/Squeak/hooks/useQuestion.tsx b/src/components/Squeak/hooks/useQuestion.tsx
index 008d7b8eacf7..f4a7de4d6038 100644
--- a/src/components/Squeak/hooks/useQuestion.tsx
+++ b/src/components/Squeak/hooks/useQuestion.tsx
@@ -117,7 +117,7 @@ export const useQuestion = (id: number | string, options?: UseQuestionOptions) =
 
             const token = await getJwt()
 
-            await fetch(`${process.env.GATSBY_SQUEAK_API_HOST}/api/replies`, {
+            const data = await fetch(`${process.env.GATSBY_SQUEAK_API_HOST}/api/replies`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -139,7 +139,7 @@ export const useQuestion = (id: number | string, options?: UseQuestionOptions) =
                         },
                     },
                 }),
-            })
+            }).then((res) => res.json())
 
             posthog?.capture('squeak reply', {
                 questionId: questionID,
@@ -148,6 +148,8 @@ export const useQuestion = (id: number | string, options?: UseQuestionOptions) =
             await fetchUser()
 
             await mutate()
+
+            return data
         } catch (error) {
             posthog?.capture('squeak error', {
                 source: 'useQuestion.reply',

From b785ab685d2e8f2a22c0a40b06f0d1d2ff3ae5f9 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Fri, 27 Sep 2024 20:58:31 -0700
Subject: [PATCH 09/14] small ux fix

---
 src/components/Squeak/components/RichText.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Squeak/components/RichText.tsx b/src/components/Squeak/components/RichText.tsx
index 5da79c20556c..bb49257fb01b 100644
--- a/src/components/Squeak/components/RichText.tsx
+++ b/src/components/Squeak/components/RichText.tsx
@@ -200,6 +200,7 @@ const MentionProfiles = ({ onSelect, onClose, body, ...other }) => {
                 className="m-0 p-0 list-none border border-border dark:border-dark bg-light dark:bg-dark h-full rounded-md overflow-auto"
             >
                 {Object.entries(grouped).map(([key, profiles], index) => {
+                    const prev = Object.entries(grouped)[index - 1]
                     return (
                         <>
                             <li className="p-1 text-xs font-semibold sticky top-0 bg-light dark:bg-dark z-10 shadow-sm">
@@ -208,7 +209,7 @@ const MentionProfiles = ({ onSelect, onClose, body, ...other }) => {
                             {profiles.map((profile, index) => (
                                 <MentionProfile
                                     focused={focused}
-                                    index={index}
+                                    index={index + (prev ? prev.length - 1 : 0)}
                                     onSelect={onSelect}
                                     profile={profile}
                                     selectionStart={selectionStart}

From 5cf6f1f6e0fef88e69d3a26c996519eab1c42bf3 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Fri, 27 Sep 2024 21:14:50 -0700
Subject: [PATCH 10/14] simplify

---
 src/components/Squeak/components/RichText.tsx | 52 ++++++++-----------
 1 file changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/components/Squeak/components/RichText.tsx b/src/components/Squeak/components/RichText.tsx
index bb49257fb01b..97a882720c83 100644
--- a/src/components/Squeak/components/RichText.tsx
+++ b/src/components/Squeak/components/RichText.tsx
@@ -85,7 +85,7 @@ const buttons = [
 ]
 
 const MentionProfile = ({ profile, onSelect, selectionStart, index, focused }) => {
-    const { firstName, lastName, avatar } = profile.attributes
+    const { firstName, lastName, avatar, gravatarURL } = profile.attributes
     const name = [firstName, lastName].filter(Boolean).join(' ')
 
     return (
@@ -98,7 +98,7 @@ const MentionProfile = ({ profile, onSelect, selectionStart, index, focused }) =
                 }`}
             >
                 <div className="size-6 overflow-hidden rounded-full">
-                    <Avatar className="w-full" image={avatar?.data?.attributes?.url} />
+                    <Avatar className="w-full" image={avatar?.data?.attributes?.url || gravatarURL} />
                 </div>
                 <div>
                     <p className="m-0 text-xs font-semibold opacity-50 leading-none">{profile.id}</p>
@@ -131,16 +131,18 @@ const MentionProfiles = ({ onSelect, onClose, body, ...other }) => {
     const mentionProfiles = [
         { attributes: { profile: { data: currentQuestion?.question?.profile?.data } } },
         ...replies?.data,
-        ...staffProfiles.nodes.map((node) => ({
-            attributes: {
-                profile: {
-                    data: {
-                        id: node.squeakId,
-                        attributes: { ...node, avatar: { data: { attributes: { url: node.avatar?.url } } } },
+        ...staffProfiles.nodes
+            .filter((node) => node.squeakId === Number(process.env.GATSBY_AI_PROFILE_ID))
+            .map((node) => ({
+                attributes: {
+                    profile: {
+                        data: {
+                            id: node.squeakId,
+                            attributes: { ...node, avatar: { data: { attributes: { url: node.avatar?.url } } } },
+                        },
                     },
                 },
-            },
-        })),
+            })),
     ]
         .map((reply) => reply?.attributes?.profile?.data)
         .filter((profile, index, self) => {
@@ -199,26 +201,16 @@ const MentionProfiles = ({ onSelect, onClose, body, ...other }) => {
                 ref={listRef}
                 className="m-0 p-0 list-none border border-border dark:border-dark bg-light dark:bg-dark h-full rounded-md overflow-auto"
             >
-                {Object.entries(grouped).map(([key, profiles], index) => {
-                    const prev = Object.entries(grouped)[index - 1]
-                    return (
-                        <>
-                            <li className="p-1 text-xs font-semibold sticky top-0 bg-light dark:bg-dark z-10 shadow-sm">
-                                <span className="opacity-50">{key}</span>
-                            </li>
-                            {profiles.map((profile, index) => (
-                                <MentionProfile
-                                    focused={focused}
-                                    index={index + (prev ? prev.length - 1 : 0)}
-                                    onSelect={onSelect}
-                                    profile={profile}
-                                    selectionStart={selectionStart}
-                                    key={profile.id}
-                                />
-                            ))}
-                        </>
-                    )
-                })}
+                {mentionProfiles.map((profile, index) => (
+                    <MentionProfile
+                        focused={focused}
+                        index={index}
+                        onSelect={onSelect}
+                        profile={profile}
+                        selectionStart={selectionStart}
+                        key={profile.id}
+                    />
+                ))}
             </ul>
         </motion.div>
     )

From 46bdc747f94f32100303a54ca3cf776bfa118290 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Sat, 28 Sep 2024 08:25:25 -0700
Subject: [PATCH 11/14] update numreplies

---
 src/components/Questions/QuestionsTable.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/Questions/QuestionsTable.tsx b/src/components/Questions/QuestionsTable.tsx
index d02bc3c99bb2..813a9137bf1b 100644
--- a/src/components/Questions/QuestionsTable.tsx
+++ b/src/components/Questions/QuestionsTable.tsx
@@ -104,13 +104,7 @@ const Row = ({
     } = question
 
     const latestAuthor = replies?.data?.[replies.data.length - 1]?.attributes?.profile || profile
-    const isOP = profile?.data?.id === user?.profile?.id
-    const numReplies =
-        replies?.data?.filter((reply) =>
-            reply.attributes.profile?.data?.id === Number(process.env.GATSBY_AI_PROFILE_ID)
-                ? isModerator || reply.attributes.helpful || isOP
-                : true
-        ).length || 0
+    const numReplies = replies?.data?.length || 0
 
     const { ref, inView } = useInView({
         threshold: 0,

From edb1020ef5ea7fa686f307840b605c779eeacd27 Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Sat, 28 Sep 2024 09:02:28 -0700
Subject: [PATCH 12/14] max specific

---
 src/components/Squeak/components/Markdown.tsx |  5 ++++-
 src/components/Squeak/components/RichText.tsx | 15 +++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/Squeak/components/Markdown.tsx b/src/components/Squeak/components/Markdown.tsx
index 476722ae5163..627a63d90682 100644
--- a/src/components/Squeak/components/Markdown.tsx
+++ b/src/components/Squeak/components/Markdown.tsx
@@ -7,7 +7,10 @@ import { TransformImage } from 'react-markdown/lib/ast-to-react'
 import remarkGfm from 'remark-gfm'
 
 const replaceMentions = (body: string) => {
-    return body.replace(/@([a-zA-Z0-9-]+\/[0-9]+)/g, (match, username) => {
+    return body.replace(/@([a-zA-Z0-9-]+\/[0-9]+|max)/g, (match, username) => {
+        if (username === 'max') {
+            return `[${match}](/community/profiles/${process.env.GATSBY_AI_PROFILE_ID})`
+        }
         return `[${match}](/community/profiles/${username.split('/')[1]})`
     })
 }
diff --git a/src/components/Squeak/components/RichText.tsx b/src/components/Squeak/components/RichText.tsx
index 97a882720c83..efc50f3afc0a 100644
--- a/src/components/Squeak/components/RichText.tsx
+++ b/src/components/Squeak/components/RichText.tsx
@@ -10,7 +10,7 @@ import { isURL } from 'lib/utils'
 import { CurrentQuestionContext } from './Question'
 import Avatar from './Avatar'
 import { AnimatePresence, motion } from 'framer-motion'
-import { IconX } from '@posthog/icons'
+import { IconFeatures, IconX } from '@posthog/icons'
 import { graphql, useStaticQuery } from 'gatsby'
 import groupBy from 'lodash.groupby'
 
@@ -87,6 +87,7 @@ const buttons = [
 const MentionProfile = ({ profile, onSelect, selectionStart, index, focused }) => {
     const { firstName, lastName, avatar, gravatarURL } = profile.attributes
     const name = [firstName, lastName].filter(Boolean).join(' ')
+    const isAI = profile.id === Number(process.env.GATSBY_AI_PROFILE_ID)
 
     return (
         <li className="border-b border-border dark:border-dark p-1">
@@ -101,8 +102,11 @@ const MentionProfile = ({ profile, onSelect, selectionStart, index, focused }) =
                     <Avatar className="w-full" image={avatar?.data?.attributes?.url || gravatarURL} />
                 </div>
                 <div>
-                    <p className="m-0 text-xs font-semibold opacity-50 leading-none">{profile.id}</p>
-                    <p className="m-0 leading-none text-sm line-clamp-1">{name}</p>
+                    {!isAI && <p className="m-0 text-xs font-semibold opacity-50 leading-none">{profile.id}</p>}
+                    <div className="flex space-x-1 items-center">
+                        <p className="m-0 leading-none text-sm line-clamp-1">{name}</p>
+                        {isAI && <IconFeatures className="size-4 text-primary dark:text-primary-dark opacity-50" />}
+                    </div>
                 </div>
             </button>
         </li>
@@ -358,7 +362,10 @@ export default function RichText({
 
     const handleProfileSelect = (profile, selectionStart) => {
         const { selectionEnd } = getTextSelection()
-        const mention = `@${profile.attributes.firstName.trim().toLowerCase()}/${profile.id} `
+        const mention =
+            profile.id === Number(process.env.GATSBY_AI_PROFILE_ID)
+                ? `@max `
+                : `@${profile.attributes.firstName.trim().toLowerCase()}/${profile.id} `
         setValue((prevValue) => replaceSelection(selectionStart, selectionEnd, mention, prevValue))
         setShowMentionProfiles(false)
         textarea.current?.focus()

From 914bfd7ac30ac1d8ae9db2b7b3ba4fb28eb9860c Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Sun, 29 Sep 2024 10:23:17 -0700
Subject: [PATCH 13/14] words

---
 .env.development                           | 4 ++--
 src/components/Squeak/components/Reply.tsx | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/.env.development b/.env.development
index 07a27f26034b..0338fd5cfc35 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,4 @@
-GATSBY_SQUEAK_API_HOST=http://127.0.0.1:1337
+GATSBY_SQUEAK_API_HOST=https://better-animal-d658c56969.strapiapp.com
 
 GATSBY_ALGOLIA_APP_ID=7VNQB5W0TX
 GATSBY_ALGOLIA_SEARCH_API_KEY=e9ff9279dc8771a35a26d586c73c20a8
@@ -15,4 +15,4 @@ GATBSY_SHOPIFY_SALES_CHANNEL="Headless PostHog Merch Shop"
 GATSBY_SHOPIFY_ADMIN_API_VERSION="2024-01"
 GATSBY_SHOPIFY_STOREFRONT_API_VERSION="2024-01"
 GATSBY_CLOUDINARY_CLOUD_NAME=dmukukwp6
-GATSBY_AI_PROFILE_ID=9697
\ No newline at end of file
+GATSBY_AI_PROFILE_ID=28378
\ No newline at end of file
diff --git a/src/components/Squeak/components/Reply.tsx b/src/components/Squeak/components/Reply.tsx
index 30f57ac13566..4d0a2fdfccdb 100644
--- a/src/components/Squeak/components/Reply.tsx
+++ b/src/components/Squeak/components/Reply.tsx
@@ -71,7 +71,7 @@ const AIDisclaimerMod = ({ opName, replyID, mutate }) => {
     )
 }
 
-const AIDisclaimer = ({ replyID, mutate, topic, isAuthor, confidence, resolvable }) => {
+const AIDisclaimer = ({ replyID, mutate, topic, confidence, resolvable }) => {
     const posthog = usePostHog()
     const { getJwt } = useUser()
     const { handleResolve } = useContext(CurrentQuestionContext)
@@ -324,8 +324,7 @@ export default function Reply({ reply, badgeText }: ReplyProps) {
                 <div className={reply?.attributes?.helpful === false || !publishedAt ? 'opacity-70' : ''}>
                     {reply?.attributes?.helpful === false && (
                         <div className="p-2 rounded border border-light dark:border-dark mb-2 text-sm bg-accent dark:bg-accent-dark">
-                            <IconInfo className="size-5 inline-block" /> This answer was marked as unhelpful and is only
-                            visible to you.
+                            <IconInfo className="size-5 inline-block" /> This answer was marked as unhelpful.
                         </div>
                     )}
                     <Markdown>{body}</Markdown>

From aecd17735ac8a8e712c71127f71debecf95b6fae Mon Sep 17 00:00:00 2001
From: Eli Kinsey <eli@ekinsey.dev>
Date: Mon, 30 Sep 2024 14:26:07 -0700
Subject: [PATCH 14/14] disable ask max after asked

---
 src/components/Squeak/components/Question.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Squeak/components/Question.tsx b/src/components/Squeak/components/Question.tsx
index 0e5ee99f632c..fe431fa9ab99 100644
--- a/src/components/Squeak/components/Question.tsx
+++ b/src/components/Squeak/components/Question.tsx
@@ -380,6 +380,7 @@ const AskMax = ({
             }
         }
         askMax()
+        window.history.replaceState({ ...window.history.state, askMax: false }, '')
     }, [])
 
     return loading ? (