v2.50 - Fix Rendering, @ Function

Author: imjustinliao

frontend/src/components/app/ChatInput.tsx

@@ -15,7 +15,7 @@ import { FILE_INPUT_ACCEPT, isSupportedFile, isWithinSizeLimit } from "@/lib/fil
 import { attachedToMessageFormat } from "@/lib/attachFiles"
 import { usePreparedAttachments } from "@/hooks/usePreparedAttachments"
 import { useAuth } from "@/context/AuthContext"
-import ContentTypePicker, { ContentTypeChips } from "@/components/ui/ContentTypePicker"
+import ContentTypePicker, { InlineContentChips, type ContentTypePickerKeyHandler } from "@/components/ui/ContentTypePicker"
 import { readStoredModel, writeStoredModel } from "@/lib/models"
 import { readStoredContentTypes, writeStoredContentTypes, buildContentTypeAutoPrompt } from "@/lib/contentTypes"
 
@@ -73,6 +73,7 @@ const ChatInput = memo(function ChatInput() {
   const [micHover, setMicHover] = useState(false)
   const [sendHover, setSendHover] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const pickerKeyRef = useRef<ContentTypePickerKeyHandler | null>(null)
   const localSendInFlightRef = useRef(false)
   const {
     attachments,
@@ -277,95 +278,96 @@ const ChatInput = memo(function ChatInput() {
         </div>
       )}
 
-      {/* Content type chips */}
-      <ContentTypeChips
-        selected={inputFeatures.requestedContentTypes ?? []}
-        onRemove={(id) => {
-          const next = (inputFeatures.requestedContentTypes ?? []).filter((t) => t !== id)
-          setInputFeatures({ requestedContentTypes: next })
-          writeStoredContentTypes(next)
-        }}
-        isDark={isDark}
-      />
-
-      {/* Row 1: Input area + typewriter placeholder — fixed width, text wraps within box */}
-      <div style={{ position: "relative", height: `${inputHeight}px`, minHeight: `${ROW_HEIGHT}px`, width: "100%", minWidth: 0, overflow: "hidden" }}>
-        <textarea
-          ref={textareaRef}
-          value={inputValue}
-          onChange={handleChange}
-          onPaste={handlePaste}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault()
-              void handleSend()
-            }
-          }}
-          onFocus={() => setInputFocused(true)}
-          onBlur={() => setInputFocused(false)}
-          rows={1}
-          aria-label="Message input"
-          style={{
-            width: "100%",
-            maxWidth: "100%",
-            boxSizing: "border-box",
-            background: "transparent",
-            border: "none",
-            outline: "none",
-            resize: "none",
-            fontFamily: FONTS.sans,
-            fontSize: "16px",
-            fontWeight: 400,
-            color: COLORS.textPrimary,
-            lineHeight: `${ROW_HEIGHT}px`,
-            padding: 0,
-            margin: 0,
-            height: `${inputHeight}px`,
-            maxHeight: `${ROW_HEIGHT * 2}px`,
-            overflowX: "hidden",
-            overflowY: "hidden",
-            overflowWrap: "break-word",
-            wordBreak: "break-word",
-            whiteSpace: "pre-wrap",
-            position: "relative",
-            zIndex: 2,
+      {/* Row 1: inline content chips + input area + typewriter placeholder */}
+      <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "6px", minHeight: `${ROW_HEIGHT}px`, width: "100%", minWidth: 0 }}>
+        <InlineContentChips
+          selected={inputFeatures.requestedContentTypes ?? []}
+          onRemove={(id) => {
+            const next = (inputFeatures.requestedContentTypes ?? []).filter((t) => t !== id)
+            setInputFeatures({ requestedContentTypes: next })
+            writeStoredContentTypes(next)
           }}
+          isDark={isDark}
         />
-
-        {/* Typewriter placeholder */}
-        {!inputValue && !inputFocused && (
-          <span
-            aria-hidden="true"
+        <div style={{ position: "relative", flex: 1, minWidth: "100px", height: `${inputHeight}px`, minHeight: `${ROW_HEIGHT}px`, overflow: "hidden" }}>
+          <textarea
+            ref={textareaRef}
+            value={inputValue}
+            onChange={handleChange}
+            onPaste={handlePaste}
+            onKeyDown={(e) => {
+              if (atMention && pickerKeyRef.current?.handleKeyDown(e.key)) { e.preventDefault(); return }
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault()
+                void handleSend()
+              }
+            }}
+            onFocus={() => setInputFocused(true)}
+            onBlur={() => setInputFocused(false)}
+            rows={1}
+            aria-label="Message input"
             style={{
-              position: "absolute",
-              left: 0,
-              top: 0,
+              width: "100%",
+              maxWidth: "100%",
+              boxSizing: "border-box",
+              background: "transparent",
+              border: "none",
+              outline: "none",
+              resize: "none",
               fontFamily: FONTS.sans,
               fontSize: "16px",
               fontWeight: 400,
-              color: COLORS.textDimmed,
+              color: COLORS.textPrimary,
               lineHeight: `${ROW_HEIGHT}px`,
-              height: `${ROW_HEIGHT}px`,
-              pointerEvents: "none",
-              zIndex: 1,
-              whiteSpace: "nowrap",
-              display: "flex",
-              alignItems: "center",
+              padding: 0,
+              margin: 0,
+              height: `${inputHeight}px`,
+              maxHeight: `${ROW_HEIGHT * 2}px`,
+              overflowX: "hidden",
+              overflowY: "hidden",
+              overflowWrap: "break-word",
+              wordBreak: "break-word",
+              whiteSpace: "pre-wrap",
+              position: "relative",
+              zIndex: 2,
             }}
-          >
-            {typedText}
+          />
+
+          {/* Typewriter placeholder */}
+          {!inputValue && !inputFocused && (inputFeatures.requestedContentTypes ?? []).length === 0 && (
             <span
+              aria-hidden="true"
               style={{
-                display: "inline-block",
-                width: "1.5px",
-                height: "22px",
-                background: COLORS.textDimmed,
-                marginLeft: "1px",
-                animation: "cursorBlink 0.8s step-end infinite",
+                position: "absolute",
+                left: 0,
+                top: 0,
+                fontFamily: FONTS.sans,
+                fontSize: "16px",
+                fontWeight: 400,
+                color: COLORS.textDimmed,
+                lineHeight: `${ROW_HEIGHT}px`,
+                height: `${ROW_HEIGHT}px`,
+                pointerEvents: "none",
+                zIndex: 1,
+                whiteSpace: "nowrap",
+                display: "flex",
+                alignItems: "center",
               }}
-            />
-          </span>
-        )}
+            >
+              {typedText}
+              <span
+                style={{
+                  display: "inline-block",
+                  width: "1.5px",
+                  height: "22px",
+                  background: COLORS.textDimmed,
+                  marginLeft: "1px",
+                  animation: "cursorBlink 0.8s step-end infinite",
+                }}
+              />
+            </span>
+          )}
+        </div>
       </div>
 
       {/* Row 2: Action buttons — preventDefault keeps focus on textarea when tapping icons */}
@@ -401,6 +403,7 @@ const ChatInput = memo(function ChatInput() {
             COLORS={COLORS}
             triggerSearch={atMention?.search}
             onTriggerConsumed={handleTriggerConsumed}
+            keyHandlerRef={pickerKeyRef}
           />
           {/* Web search toggle */}
           <button

frontend/src/components/block-types/Image.tsx

@@ -14,7 +14,7 @@ interface ImageBlockProps {
   onAnalyze?: () => void
 }
 
-/** Image block — media + optional title/caption + popup/lightbox on click. */
+/** Image block — card style: image + title + "Open" link, with lightbox on click. */
 export const ImageBlock = React.memo(function ImageBlock({
   src,
   alt = "",
@@ -26,6 +26,8 @@ export const ImageBlock = React.memo(function ImageBlock({
   const [failed, setFailed] = useState(false)
   const [popupOpen, setPopupOpen] = useState(false)
   const margin = variant === "card" ? "8px 0" : "16px 0"
+  const isDark = (COLORS.bg ?? "#000").startsWith("#0") || (COLORS.bg ?? "#000") === "rgb(0,0,0)" || (COLORS.bg ?? "#000").includes("0A0A0A")
+  const label = caption || alt || ""
 
   const closePopup = useCallback(() => setPopupOpen(false), [])
   useEffect(() => {
@@ -44,96 +46,85 @@ export const ImageBlock = React.memo(function ImageBlock({
 
   if (failed) {
     return (
-      <figure style={{ margin }}>
-        <div
-          style={{
-            padding: "24px",
-            background: "rgba(128,128,128,0.1)",
-            borderRadius: "12px",
-            color: COLORS.textTertiary,
-            fontFamily: FONTS.sans,
-            fontSize: "13px",
-          }}
-        >
+      <div style={{
+        margin,
+        borderRadius: "12px",
+        background: isDark ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.02)",
+        border: `1px solid ${COLORS.border}`,
+        overflow: "hidden",
+      }}>
+        <div style={{
+          display: "flex", alignItems: "center", gap: "8px",
+          padding: "10px 12px",
+          borderBottom: `1px solid ${COLORS.border}`,
+        }}>
+          <span style={{ fontFamily: FONTS.mono, fontSize: "10px", textTransform: "uppercase", letterSpacing: "0.05em", color: COLORS.textTertiary }}>
+            IMAGE
+          </span>
+          {label && (
+            <span style={{ fontFamily: FONTS.sans, fontSize: "12px", color: COLORS.textSecondary, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, minWidth: 0 }}>
+              {label}
+            </span>
+          )}
+        </div>
+        <div style={{ padding: "24px 12px", fontFamily: FONTS.sans, fontSize: "13px", color: COLORS.textTertiary }}>
           Image failed to load
         </div>
-        {caption && (
-          <figcaption
-            style={{
-              fontFamily: FONTS.sans,
-              fontSize: "13px",
-              color: COLORS.textTertiary,
-              marginTop: "6px",
-              fontStyle: "italic",
-            }}
-          >
-            {caption}
-          </figcaption>
-        )}
-      </figure>
+      </div>
     )
   }
 
   return (
     <>
-      <figure style={{ margin }}>
-        {onAnalyze && variant !== "card" ? (
-          <div style={{ marginBottom: "8px", display: "flex", justifyContent: "flex-end" }}>
-            <button
-              type="button"
-              onClick={onAnalyze}
-              style={{
-                fontFamily: FONTS.sans,
-                fontSize: "12px",
-                fontWeight: 500,
-                padding: "6px 12px",
-                borderRadius: "6px",
-                border: `1px solid ${COLORS.border}`,
-                background: "rgba(255,255,255,0.04)",
-                color: COLORS.accent,
-                cursor: "pointer",
-              }}
-            >
-              Analyze image
-            </button>
-          </div>
-        ) : null}
-        <button
-          type="button"
-          onClick={() => setPopupOpen(true)}
-          style={{
-            padding: 0,
-            border: "none",
-            background: "none",
-            cursor: "pointer",
-            display: "block",
-            width: "100%",
-            textAlign: "left",
-          }}
-          aria-label="View image full size"
-        >
-          <img
-            src={src}
-            alt={alt}
-            onError={() => setFailed(true)}
-            style={{ maxWidth: "100%", borderRadius: "12px", display: "block" }}
-            loading="lazy"
-          />
-        </button>
-        {(caption || alt) && (
-          <figcaption
-            style={{
-              fontFamily: FONTS.sans,
-              fontSize: "13px",
-              color: COLORS.textTertiary,
-              marginTop: "6px",
-              fontStyle: "italic",
-            }}
+      <div style={{
+        margin,
+        borderRadius: "12px",
+        background: isDark ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.02)",
+        border: `1px solid ${COLORS.border}`,
+        overflow: "hidden",
+      }}>
+        {/* Header: type label + title + Open link */}
+        <div style={{
+          display: "flex", alignItems: "center", gap: "8px",
+          padding: "10px 12px",
+          borderBottom: `1px solid ${COLORS.border}`,
+          background: isDark ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.02)",
+        }}>
+          <span style={{ fontFamily: FONTS.mono, fontSize: "10px", textTransform: "uppercase", letterSpacing: "0.05em", color: COLORS.textTertiary }}>
+            IMAGE
+          </span>
+          {label && (
+            <span style={{ fontFamily: FONTS.sans, fontSize: "12px", color: COLORS.textSecondary, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, minWidth: 0 }}>
+              {label}
+            </span>
+          )}
+          <a
+            href={src}
+            target="_blank"
+            rel="noreferrer"
+            style={{ marginLeft: "auto", fontFamily: FONTS.sans, fontSize: "11px", color: COLORS.accent, textDecoration: "none", flexShrink: 0 }}
           >
-            {caption || alt}
-          </figcaption>
-        )}
-      </figure>
+            Open
+          </a>
+        </div>
+        {/* Image body */}
+        <div style={{ padding: "10px 12px" }}>
+          <button
+            type="button"
+            onClick={() => setPopupOpen(true)}
+            style={{ padding: 0, border: "none", background: "none", cursor: "pointer", display: "block", width: "100%", textAlign: "left" }}
+            aria-label="View image full size"
+          >
+            <img
+              src={src}
+              alt={alt}
+              onError={() => setFailed(true)}
+              style={{ width: "100%", maxHeight: "420px", objectFit: "contain", borderRadius: "8px", display: "block", background: isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.05)" }}
+              loading="lazy"
+            />
+          </button>
+        </div>
+      </div>
 
       {popupOpen && (
         <div