@yancyyu/openhermit 1.5.8

package/src/renderer/components/chat/ChatHistoryEmptyState.tsx

@@ -0,0 +1,15 @@
+import type { JSX } from 'react';
+/**
+ * Empty state for ChatHistory when no conversation exists.
+ */
+export const ChatHistoryEmptyState = (): JSX.Element => {
+  return (
+    <div className="flex flex-1 items-center justify-center overflow-hidden bg-surface">
+      <div className="space-y-2 text-center text-text-muted">
+        <div className="mb-4 text-6xl">💬</div>
+        <div className="text-xl font-medium text-text-secondary">No conversation history</div>
+        <div className="text-sm">This session does not contain any messages yet.</div>
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/chat/ChatHistoryItem.tsx

@@ -0,0 +1,144 @@
+import React, { type JSX } from 'react';
+
+import {
+  getHighlightProps,
+  HIGHLIGHT_CLASSES,
+  isPresetColorKey,
+  type TriggerColor,
+} from '@shared/constants/triggerColors';
+
+import { AIChatGroup } from './AIChatGroup';
+import { CompactBoundary } from './CompactBoundary';
+import { SystemChatGroup } from './SystemChatGroup';
+import { UserChatGroup } from './UserChatGroup';
+
+import type { ChatItem } from '@renderer/types/groups';
+
+interface ChatHistoryItemProps {
+  readonly item: ChatItem;
+  readonly highlightedGroupId: string | null;
+  readonly highlightToolUseId?: string;
+  readonly isSearchHighlight: boolean;
+  readonly isNavigationHighlight: boolean;
+  readonly highlightColor?: TriggerColor;
+  /** Whether this item just appeared (triggers enter animation) */
+  readonly isNew?: boolean;
+  readonly registerChatItemRef: (groupId: string) => (el: HTMLElement | null) => void;
+  readonly registerAIGroupRef: (groupId: string) => (el: HTMLElement | null) => void;
+  /** Register ref for individual tool items (for precise scroll targeting) */
+  readonly registerToolRef: (toolId: string, el: HTMLElement | null) => void;
+}
+
+/**
+ * Get highlight class/style based on type: search (yellow), navigation (blue), error (custom color)
+ */
+function getHighlight(
+  isHighlighted: boolean,
+  isSearchHighlight: boolean,
+  isNavigationHighlight: boolean,
+  highlightColor?: TriggerColor
+): { className: string; style?: React.CSSProperties } {
+  if (!isHighlighted) return { className: 'ring-0 bg-transparent' };
+  if (isSearchHighlight) return { className: 'ring-2 ring-yellow-500/30 bg-yellow-500/5' };
+  if (isNavigationHighlight) return { className: 'ring-2 ring-blue-500/30 bg-blue-500/5' };
+  const key = highlightColor ?? 'red';
+  if (isPresetColorKey(key)) return { className: HIGHLIGHT_CLASSES[key] };
+  return getHighlightProps(key);
+}
+
+/**
+ * Renders a single chat history item (user, system, ai, or compact).
+ */
+const ChatHistoryItemInner = ({
+  item,
+  highlightedGroupId,
+  highlightToolUseId,
+  isSearchHighlight,
+  isNavigationHighlight,
+  highlightColor,
+  isNew,
+  registerChatItemRef,
+  registerAIGroupRef,
+  registerToolRef,
+}: ChatHistoryItemProps): JSX.Element | null => {
+  const enterClass = isNew ? 'chat-message-enter-animate' : '';
+  const transitionStyle: React.CSSProperties = { transitionDuration: '3000ms' };
+
+  switch (item.type) {
+    case 'user': {
+      const isHighlighted = highlightedGroupId === item.group.id;
+      const hl = getHighlight(
+        isHighlighted,
+        isSearchHighlight,
+        isNavigationHighlight,
+        highlightColor
+      );
+      return (
+        <div
+          ref={registerChatItemRef(item.group.id)}
+          className={`rounded-lg transition-[background-color,box-shadow] ease-out ${hl.className} ${enterClass}`}
+          style={{ ...transitionStyle, ...(hl.style ?? {}) }}
+        >
+          <UserChatGroup userGroup={item.group} />
+        </div>
+      );
+    }
+    case 'system': {
+      const isHighlighted = highlightedGroupId === item.group.id;
+      const hl = getHighlight(
+        isHighlighted,
+        isSearchHighlight,
+        isNavigationHighlight,
+        highlightColor
+      );
+      return (
+        <div
+          ref={registerChatItemRef(item.group.id)}
+          className={`rounded-lg transition-[background-color,box-shadow] ease-out ${hl.className} ${enterClass}`}
+          style={{ ...transitionStyle, ...(hl.style ?? {}) }}
+        >
+          <SystemChatGroup systemGroup={item.group} />
+        </div>
+      );
+    }
+    case 'ai': {
+      const isHighlighted = highlightedGroupId === item.group.id;
+      // Pass highlightToolUseId to ALL AI groups (when not search highlight)
+      // Each group will check if it contains the tool and expand accordingly
+      // Allowed during navigation highlights so context panel tool deep-linking works
+      const toolUseIdForGroup = !isSearchHighlight ? highlightToolUseId : undefined;
+      const hl = getHighlight(
+        isHighlighted,
+        isSearchHighlight,
+        isNavigationHighlight,
+        highlightColor
+      );
+      return (
+        <div
+          ref={registerAIGroupRef(item.group.id)}
+          className={`rounded-lg transition-[background-color,box-shadow] ease-out ${hl.className} ${enterClass}`}
+          style={{ ...transitionStyle, ...(hl.style ?? {}) }}
+        >
+          <AIChatGroup
+            aiGroup={item.group}
+            highlightToolUseId={toolUseIdForGroup}
+            highlightColor={highlightColor}
+            registerToolRef={registerToolRef}
+          />
+        </div>
+      );
+    }
+    case 'compact':
+      return isNew ? (
+        <div className={enterClass}>
+          <CompactBoundary compactGroup={item.group} />
+        </div>
+      ) : (
+        <CompactBoundary compactGroup={item.group} />
+      );
+    default:
+      return null;
+  }
+};
+
+export const ChatHistoryItem = React.memo(ChatHistoryItemInner);

package/src/renderer/components/chat/ChatHistoryLoadingState.tsx

@@ -0,0 +1,45 @@
+import type { JSX } from 'react';
+/**
+ * Loading skeleton for ChatHistory while conversation is loading.
+ * Industrial shimmer with organic line widths — no generic pulse.
+ */
+export const ChatHistoryLoadingState = (): JSX.Element => {
+  const rows = [
+    { user: ['85%', '60%'], ai: ['92%', '70%', '82%', '45%'] },
+    { user: ['75%', '92%', '40%'], ai: ['88%', '65%', '78%'] },
+    { user: ['95%', '55%'], ai: ['72%', '85%', '60%', '92%', '35%'] },
+  ];
+
+  return (
+    <div className="flex flex-1 items-center justify-center overflow-hidden bg-surface">
+      <div className="w-full max-w-5xl space-y-8 px-6">
+        {rows.map((row, i) => (
+          <div key={i} className="space-y-6">
+            {/* User message skeleton — right aligned */}
+            <div className="flex justify-end">
+              <div className="w-2/3 space-y-2">
+                {row.user.map((width, j) => (
+                  <div
+                    key={j}
+                    className="skeleton-shimmer ml-auto h-3 rounded-sm"
+                    style={{ width, backgroundColor: 'var(--skeleton-base)' }}
+                  />
+                ))}
+              </div>
+            </div>
+            {/* AI response skeleton — left aligned with border accent */}
+            <div className="space-y-2.5 border-l-2 border-border pl-3">
+              {row.ai.map((width, j) => (
+                <div
+                  key={j}
+                  className="skeleton-shimmer h-3 rounded-sm"
+                  style={{ width, backgroundColor: 'var(--skeleton-base)' }}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/chat/CompactBoundary.tsx

@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import {
+  CODE_BG,
+  CODE_BORDER,
+  COLOR_TEXT_MUTED,
+  COLOR_TEXT_SECONDARY,
+  TOOL_CALL_TEXT,
+} from '@renderer/constants/cssVariables';
+import { REHYPE_PLUGINS } from '@renderer/utils/markdownPlugins';
+import { formatTokensCompact as formatTokens } from '@shared/utils/tokenFormatting';
+import { format } from 'date-fns';
+import { ChevronRight, Layers } from 'lucide-react';
+import remarkGfm from 'remark-gfm';
+
+import { CopyButton } from '../common/CopyButton';
+
+import { markdownComponents } from './markdownComponents';
+
+import type { CompactGroup } from '@renderer/types/groups';
+
+interface CompactBoundaryProps {
+  compactGroup: CompactGroup;
+}
+
+/**
+ * CompactBoundary displays a horizontal divider indicating where
+ * the conversation was compacted. Click to expand the compacted summary.
+ */
+export const CompactBoundary = ({
+  compactGroup,
+}: Readonly<CompactBoundaryProps>): React.JSX.Element => {
+  const { timestamp, message } = compactGroup;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Extract content from message
+  const getCompactContent = (): string => {
+    if (!message?.content) return '';
+
+    if (typeof message.content === 'string') {
+      return message.content;
+    }
+
+    // If it's an array of content blocks, extract text
+    if (Array.isArray(message.content)) {
+      return message.content
+        .filter((block: { type: string; text?: string }) => block.type === 'text')
+        .map((block: { type: string; text?: string }) => block.text ?? '')
+        .join('\n\n');
+    }
+
+    return '';
+  };
+
+  const compactContent = getCompactContent();
+
+  return (
+    <div className="my-4">
+      {/* Divider with centered label */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="group flex w-full cursor-pointer items-center transition-opacity hover:opacity-90"
+        aria-expanded={isExpanded}
+        aria-label="Toggle compacted content"
+      >
+        {/* Left line */}
+        <div className="h-px flex-1" style={{ backgroundColor: TOOL_CALL_TEXT, opacity: 0.3 }} />
+
+        {/* Center content */}
+        <div className="flex shrink-0 items-center gap-2 px-3">
+          <ChevronRight
+            size={12}
+            className="transition-transform duration-200"
+            style={{
+              color: TOOL_CALL_TEXT,
+              transform: isExpanded ? 'rotate(90deg)' : undefined,
+            }}
+          />
+          <Layers size={12} style={{ color: TOOL_CALL_TEXT }} />
+          <span
+            className="whitespace-nowrap text-[11px] font-medium"
+            style={{ color: TOOL_CALL_TEXT }}
+          >
+            Context compacted
+          </span>
+
+          {/* Token delta */}
+          {compactGroup.tokenDelta && (
+            <span
+              className="whitespace-nowrap text-[10px] tabular-nums"
+              style={{ color: COLOR_TEXT_MUTED }}
+            >
+              {formatTokens(compactGroup.tokenDelta.preCompactionTokens)} →{' '}
+              {formatTokens(compactGroup.tokenDelta.postCompactionTokens)}
+              <span style={{ color: 'var(--diff-added-text)' }}>
+                {' '}
+                ({formatTokens(Math.abs(compactGroup.tokenDelta.delta))} freed)
+              </span>
+            </span>
+          )}
+
+          {/* Phase badge */}
+          {compactGroup.startingPhaseNumber && (
+            <span
+              className="whitespace-nowrap rounded px-1.5 py-0.5 text-[10px]"
+              style={{
+                backgroundColor: 'var(--compact-phase-bg)',
+                color: 'var(--compact-phase-text)',
+              }}
+            >
+              Phase {compactGroup.startingPhaseNumber}
+            </span>
+          )}
+
+          {/* Timestamp */}
+          <span className="whitespace-nowrap text-[10px]" style={{ color: COLOR_TEXT_MUTED }}>
+            {format(timestamp, 'h:mm:ss a')}
+          </span>
+        </div>
+
+        {/* Right line */}
+        <div className="h-px flex-1" style={{ backgroundColor: TOOL_CALL_TEXT, opacity: 0.3 }} />
+      </button>
+
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div
+          className="group relative mt-2 overflow-hidden rounded-lg"
+          style={{
+            backgroundColor: CODE_BG,
+            border: `1px solid ${CODE_BORDER}`,
+          }}
+        >
+          {compactContent && <CopyButton text={compactContent} />}
+
+          {/* Content - scrollable with left accent bar */}
+          <div
+            className="max-h-96 overflow-y-auto border-l-2 px-4 py-3"
+            style={{ borderColor: TOOL_CALL_TEXT }}
+          >
+            {compactContent ? (
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={REHYPE_PLUGINS}
+                components={markdownComponents}
+              >
+                {compactContent}
+              </ReactMarkdown>
+            ) : (
+              <div className="flex items-start gap-2">
+                <Layers size={14} className="mt-0.5 shrink-0" style={{ color: COLOR_TEXT_MUTED }} />
+                <div className="text-xs leading-relaxed" style={{ color: COLOR_TEXT_MUTED }}>
+                  <p className="mb-1 font-medium" style={{ color: COLOR_TEXT_SECONDARY }}>
+                    Conversation Compacted
+                  </p>
+                  <p>
+                    Previous messages were summarized to save context. The full conversation history
+                    is preserved in the session file.
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};