@m6d/cortex-react 1.0.0

package/src/components/ThreadList.tsx

@@ -0,0 +1,219 @@
+import { relativeTimeLabel } from '@cortex/client';
+import type { ThreadSummary } from '@cortex/contracts/wire';
+import { useCortex } from '../context';
+import { cx } from '../cx';
+
+/** Rounded speech bubble with a tail, on the shared 16x16 icon grid. */
+const BUBBLE_PATH =
+  'M13.5 7.6c0 2.4-2.5 4.4-5.5 4.4-.6 0-1.2-.08-1.7-.23L3 13l.8-2.3C3 9.8 2.5 8.7 2.5 7.6 2.5 5.2 5 3.2 8 3.2s5.5 2 5.5 4.4Z';
+
+type ThreadListProps = {
+  className?: string;
+  onThreadSelected: (thread: ThreadSummary) => void;
+  onNewChatRequested: () => void;
+};
+
+/**
+ * The threads screen: header, list, loading skeleton and empty state.
+ *
+ * Carries the screen classes passed by the widget on its own root rather than
+ * adding a wrapper, so the sliding-panel layout sees the same DOM shape it did
+ * when this markup lived inline in the widget.
+ */
+export function ThreadList(props: ThreadListProps) {
+  const { config, t, threads, selectedThread, deleteThread } = useCortex();
+  const locale = config.locale ?? 'en';
+
+  return (
+    <div className={props.className}>
+      {/* Threads header */}
+      <div className="cortex-widget__threads-header">
+        <div>
+          <h2 className="cortex-widget__threads-title">{t('translate_threads')}</h2>
+          <p className="cortex-widget__threads-count">
+            {t(threads?.length === 1 ? 'translate_one_conversation' : 'translate_n_conversations', {
+              count: threads?.length ?? 0,
+            })}
+          </p>
+        </div>
+        <button onClick={() => props.onNewChatRequested()} className="cortex-widget__new-chat-btn">
+          <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M8 3v10M3 8h10"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+          {t('translate_new')}
+        </button>
+      </div>
+
+      {/* Threads list */}
+      <div className="cortex-widget__threads-list">
+        {threads === undefined ? (
+          // Threads loading skeleton
+          [1, 2, 3, 4].map((i) => (
+            <div key={i} className="cortex-widget__thread-skeleton">
+              <div className="cortex-skeleton cortex-widget__thread-skeleton-icon"></div>
+              <div className="cortex-widget__thread-skeleton-lines">
+                <div
+                  className="cortex-skeleton cortex-widget__thread-skeleton-line"
+                  style={{ width: `${40 + i * 12}%` }}
+                ></div>
+              </div>
+            </div>
+          ))
+        ) : (
+          <>
+            {threads.map((thread) => {
+              const isActive = thread.id === selectedThread?.id;
+              // Rendered once per paint: the label goes stale while the panel
+              // sits open, which is cheaper than a timer per row.
+              const time = relativeTimeLabel(thread.updatedAt, locale);
+              return (
+                <button
+                  key={thread.id}
+                  onClick={() => props.onThreadSelected(thread)}
+                  className={cx(
+                    'cortex-widget__thread-item',
+                    isActive && 'cortex-widget__thread-item--active',
+                  )}
+                >
+                  {/* Thread icon */}
+                  <div
+                    className={cx(
+                      'cortex-widget__thread-icon',
+                      isActive && 'cortex-widget__thread-icon--active',
+                    )}
+                  >
+                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+                      <path
+                        d={BUBBLE_PATH}
+                        stroke="currentColor"
+                        strokeWidth="1.3"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </div>
+
+                  {/* Thread info */}
+                  <div className="cortex-widget__thread-info">
+                    <div className="cortex-widget__thread-title-row">
+                      <p
+                        className={cx(
+                          'cortex-widget__thread-title',
+                          isActive && 'cortex-widget__thread-title--active',
+                        )}
+                      >
+                        {thread.title ?? t('translate_untitled')}
+                      </p>
+
+                      {thread.isRunning && (
+                        <span
+                          className={cx(
+                            'cortex-widget__thread-running',
+                            isActive && 'cortex-widget__thread-running--active',
+                          )}
+                        >
+                          <span className="cortex-widget__thread-running-dot"></span>
+                          {t('translate_running')}
+                        </span>
+                      )}
+                    </div>
+
+                    {time && <p className="cortex-widget__thread-time">{time}</p>}
+                  </div>
+
+                  {/* Delete button */}
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      void deleteThread(thread.id);
+                    }}
+                    onKeyDown={(event) => {
+                      if (event.key !== 'Enter' && event.key !== ' ') return;
+                      event.preventDefault();
+                      event.stopPropagation();
+                      void deleteThread(thread.id);
+                    }}
+                    className={cx(
+                      'cortex-widget__thread-delete',
+                      isActive && 'cortex-widget__thread-delete--active',
+                    )}
+                  >
+                    <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
+                      <path
+                        d="M4 4l8 8M12 4l-8 8"
+                        stroke="currentColor"
+                        strokeWidth="1.3"
+                        strokeLinecap="round"
+                      />
+                    </svg>
+                  </span>
+
+                  {/* Arrow */}
+                  <svg
+                    className={cx(
+                      'cortex-widget__thread-arrow',
+                      isActive && 'cortex-widget__thread-arrow--active',
+                    )}
+                    width="10"
+                    height="10"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M6 4l4 4-4 4"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </button>
+              );
+            })}
+
+            {!threads.length && (
+              <div className="cortex-widget__threads-empty">
+                <div className="cortex-widget__threads-empty-icon">
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    className="cortex-widget__threads-empty-svg"
+                  >
+                    <path
+                      d={BUBBLE_PATH}
+                      stroke="currentColor"
+                      strokeWidth="1.3"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
+                <p className="cortex-widget__threads-empty-title">
+                  {t('translate_no_threads_yet')}
+                </p>
+                <p className="cortex-widget__threads-empty-subtitle">
+                  {t('translate_start_a_new_conversation')}
+                </p>
+                <button
+                  onClick={() => props.onNewChatRequested()}
+                  className="cortex-widget__new-chat-btn cortex-widget__new-chat-btn--empty-state"
+                >
+                  {t('translate_new_chat')}
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ToolAnimation.tsx

@@ -0,0 +1,22 @@
+import type { ToolCallPart, UIMessage } from '@tanstack/ai';
+import { MessageToolCallAnimated } from './MessageToolCallAnimated';
+import { ToolExecuteCodeAnimated } from './ToolExecuteCodeAnimated';
+import { ToolQueryGraphAnimated } from './ToolQueryGraphAnimated';
+
+type ToolAnimationProps = {
+  message: UIMessage;
+  toolCallPart: ToolCallPart;
+};
+
+/**
+ * Which animation stands in for a tool call while the user is not in debug mode.
+ * Two tools have a bespoke animation and the rest share a generic one — a decision
+ * that belongs beside those components rather than nested inside the part that
+ * merely needs *an* animation.
+ */
+export function ToolAnimation({ message, toolCallPart }: ToolAnimationProps) {
+  if (toolCallPart.name === 'queryGraph') return <ToolQueryGraphAnimated />;
+  if (toolCallPart.name === 'executeCode') return <ToolExecuteCodeAnimated />;
+
+  return <MessageToolCallAnimated toolCallPart={toolCallPart} message={message} />;
+}

package/src/components/ToolExecuteCodeAnimated.tsx

@@ -0,0 +1,8 @@
+import { activityLabelKeys } from '@cortex/client';
+import { SubtleActivity } from './SubtleActivity';
+
+const LABELS = activityLabelKeys('code');
+
+export function ToolExecuteCodeAnimated() {
+  return <SubtleActivity labels={LABELS} />;
+}

package/src/components/ToolQueryGraphAnimated.tsx

@@ -0,0 +1,8 @@
+import { activityLabelKeys } from '@cortex/client';
+import { SubtleActivity } from './SubtleActivity';
+
+const LABELS = activityLabelKeys('graph');
+
+export function ToolQueryGraphAnimated() {
+  return <SubtleActivity labels={LABELS} />;
+}

package/src/config.ts

@@ -0,0 +1,14 @@
+import type { ComponentType } from 'react';
+import type { ToolCallPart, UIMessage } from '@tanstack/ai';
+import type { CortexConfig } from '@cortex/client';
+
+/** The props a consumer-supplied tool component receives from the widget. */
+export type CortexToolComponentProps = {
+  toolCallPart: ToolCallPart;
+  message: UIMessage;
+  setOutput: (output: unknown) => void;
+};
+
+export type CortexReactConfig = CortexConfig & {
+  toolComponents?: Record<string, ComponentType<CortexToolComponentProps>>;
+};

package/src/context.ts

@@ -0,0 +1,48 @@
+import { createContext, useContext } from 'react';
+import type { UIMessage } from '@tanstack/ai';
+import type { AttachmentQueue, CortexApiClient, QueuedAttachment } from '@cortex/client';
+import type { AttachmentSummary, MessageMetadata, ThreadSummary } from '@cortex/contracts/wire';
+import type { CortexReactConfig } from './config';
+
+/**
+ * What the widget's children read instead of Angular's injected services: the
+ * flat surface of CortexChatService/CortexThreadService plus the attachment
+ * queue and the api client, provided once by CortexChatWidget.
+ */
+export type CortexContextValue = {
+  config: CortexReactConfig;
+  t: (key: string, params?: Record<string, string | number>) => string;
+  api: CortexApiClient;
+  debugMode: boolean;
+
+  threads: ThreadSummary[] | undefined;
+  selectedThread: ThreadSummary | undefined;
+  deleteThread: (threadId: string) => Promise<void>;
+
+  messages: UIMessage[];
+  messageMetadata: ReadonlyMap<string, MessageMetadata>;
+  isAgentWorking: boolean;
+  isLoadingMessages: boolean;
+  hasPendingToolCalls: boolean;
+  send: (prompt: string, attachments?: AttachmentSummary[]) => Promise<void>;
+  abort: () => Promise<void>;
+  addToolResult: (toolCallId: string, toolName: string, output: unknown) => void;
+
+  queue: {
+    items: QueuedAttachment[];
+    uploading: boolean;
+    busy: boolean;
+    hasReady: boolean;
+    accept: (files: File[]) => void;
+    remove: (localId: string) => void;
+    consumeReady: AttachmentQueue['consumeReady'];
+  };
+};
+
+export const CortexContext = createContext<CortexContextValue | undefined>(undefined);
+
+export function useCortex() {
+  const value = useContext(CortexContext);
+  if (!value) throw new Error('useCortex must be used inside <CortexChatWidget>');
+  return value;
+}

package/src/cx.ts

@@ -0,0 +1,4 @@
+/** The one line of clsx this package needs: joins the truthy class names. */
+export function cx(...parts: (string | false | null | undefined)[]) {
+  return parts.filter(Boolean).join(' ');
+}

package/src/format.ts

@@ -0,0 +1,4 @@
+/** Token counts as Angular's DecimalPipe renders them. */
+export function num(value: number) {
+  return value.toLocaleString('en-US');
+}