npm - @tanstack/ai-devtools-core - Versions diffs - 0.0.3 → 0.1.1 - Mend

@tanstack/ai-devtools-core 0.0.3 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/src/store/ai-context.tsx CHANGED Viewed

@@ -86,15 +86,6 @@ export interface Chunk {
   chunkCount: number
 }
-export interface EmbeddingOperation {
-  id: string
-  model: string
-  inputCount: number
-  duration: number
-  timestamp: number
-  status: 'started' | 'completed'
-}
 export interface SummarizeOperation {
   id: string
   model: string
@@ -123,10 +114,7 @@ export interface Conversation {
   providerOptions?: Record<string, unknown>
   /** Flags for which operation types this conversation has */
   hasChat?: boolean
-  hasEmbedding?: boolean
   hasSummarize?: boolean
-  /** Embedding operations in this conversation */
-  embeddings?: Array<EmbeddingOperation>
   /** Summarize operations in this conversation */
   summaries?: Array<SummarizeOperation>
 }
@@ -1309,7 +1297,7 @@ export const AIProvider: ParentComponent = (props) => {
     // ============= Chat Events (for usage tracking) =============
     cleanupFns.push(
-      aiEventClient.on('chat:started', (e) => {
+      aiEventClient.on('text:started', (e) => {
         const streamId = e.payload.streamId
         const model = e.payload.model
         const provider = e.payload.provider
@@ -1350,7 +1338,7 @@ export const AIProvider: ParentComponent = (props) => {
     )
     cleanupFns.push(
-      aiEventClient.on('chat:completed', (e) => {
+      aiEventClient.on('text:completed', (e) => {
         const { requestId, usage } = e.payload
         const conversationId = requestToConversation.get(requestId)
@@ -1371,7 +1359,7 @@ export const AIProvider: ParentComponent = (props) => {
     )
     cleanupFns.push(
-      aiEventClient.on('chat:iteration', (e) => {
+      aiEventClient.on('text:iteration', (e) => {
         const { requestId, iterationNumber } = e.payload
         const conversationId = requestToConversation.get(requestId)
@@ -1466,85 +1454,6 @@ export const AIProvider: ParentComponent = (props) => {
       }),
     )
-    // ============= Embedding Events =============
-    cleanupFns.push(
-      aiEventClient.on('embedding:started', (e) => {
-        const { requestId, model, inputCount, timestamp, clientId } = e.payload
-        // Try to find an active conversation to attach to, or create a new one
-        let conversationId = clientId
-        if (!conversationId || !state.conversations[conversationId]) {
-          // Find most recent active client conversation
-          const activeClients = Object.values(state.conversations)
-            .filter((c) => c.type === 'client' && c.status === 'active')
-            .sort((a, b) => b.startedAt - a.startedAt)
-          if (activeClients.length > 0 && activeClients[0]) {
-            conversationId = activeClients[0].id
-          } else {
-            // Create a new conversation for embeddings
-            conversationId = `embedding-${requestId}`
-            getOrCreateConversation(
-              conversationId,
-              'server',
-              `Embedding (${model})`,
-            )
-            updateConversation(conversationId, { model })
-          }
-        }
-        requestToConversation.set(requestId, conversationId)
-        const embeddingOp: EmbeddingOperation = {
-          id: requestId,
-          model,
-          inputCount,
-          duration: 0,
-          timestamp,
-          status: 'started',
-        }
-        const conv = state.conversations[conversationId]
-        if (conv) {
-          const embeddings = conv.embeddings || []
-          setState('conversations', conversationId, 'embeddings', [
-            ...embeddings,
-            embeddingOp,
-          ])
-          setState('conversations', conversationId, 'hasEmbedding', true)
-        }
-      }),
-    )
-    cleanupFns.push(
-      aiEventClient.on('embedding:completed', (e) => {
-        const { requestId, duration } = e.payload
-        const conversationId = requestToConversation.get(requestId)
-        if (!conversationId || !state.conversations[conversationId]) return
-        const conv = state.conversations[conversationId]
-        if (!conv.embeddings) return
-        const embeddingIndex = conv.embeddings.findIndex(
-          (op) => op.id === requestId,
-        )
-        if (embeddingIndex >= 0) {
-          setState(
-            'conversations',
-            conversationId,
-            'embeddings',
-            embeddingIndex,
-            produce((op: EmbeddingOperation) => {
-              op.duration = duration
-              op.status = 'completed'
-            }),
-          )
-        }
-      }),
-    )
     // ============= Summarize Events =============
     cleanupFns.push(

package/dist/esm/components/conversation/EmbeddingsTab.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-import { Component } from 'solid-js';
-import { EmbeddingOperation } from '../../store/ai-context.js';
-interface EmbeddingsTabProps {
-    embeddings: Array<EmbeddingOperation>;
-}
-export declare const EmbeddingsTab: Component<EmbeddingsTabProps>;
-export {};

package/dist/esm/components/conversation/EmbeddingsTab.js DELETED Viewed

@@ -1,90 +0,0 @@
-import { createComponent, template, insert, effect, className } from "solid-js/web";
-import { Show, For } from "solid-js";
-import { useStyles } from "../../styles/use-styles.js";
-import { formatDuration } from "../utils/format.js";
-var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div>No embedding operations yet`), _tmpl$3 = /* @__PURE__ */ template(`<div>⏱️ `), _tmpl$4 = /* @__PURE__ */ template(`<div><div><div>🔢</div><div>Embedding</div><div></div></div><div><div><span>Model:</span><span></span></div><div><span>Inputs:</span><span> item</span></div><div><span>Started:</span><span>`);
-const EmbeddingsTab = (props) => {
-  const styles = useStyles();
-  return createComponent(Show, {
-    get when() {
-      return props.embeddings.length > 0;
-    },
-    get fallback() {
-      return (() => {
-        var _el$2 = _tmpl$2();
-        effect(() => className(_el$2, styles().conversationDetails.emptyMessages));
-        return _el$2;
-      })();
-    },
-    get children() {
-      var _el$ = _tmpl$();
-      insert(_el$, createComponent(For, {
-        get each() {
-          return props.embeddings;
-        },
-        children: (embedding) => (() => {
-          var _el$3 = _tmpl$4(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$0 = _el$4.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$1.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$12.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling;
-          insert(_el$7, () => embedding.status);
-          insert(_el$4, createComponent(Show, {
-            get when() {
-              return embedding.duration > 0;
-            },
-            get children() {
-              var _el$8 = _tmpl$3();
-              _el$8.firstChild;
-              insert(_el$8, () => formatDuration(embedding.duration), null);
-              effect(() => className(_el$8, styles().conversationDetails.durationBadge));
-              return _el$8;
-            }
-          }), null);
-          insert(_el$11, () => embedding.model);
-          insert(_el$14, () => embedding.inputCount, _el$15);
-          insert(_el$14, () => embedding.inputCount !== 1 ? "s" : "", null);
-          insert(_el$18, () => new Date(embedding.timestamp).toLocaleTimeString());
-          effect((_p$) => {
-            var _v$ = styles().conversationDetails.operationCard, _v$2 = styles().conversationDetails.operationHeader, _v$3 = styles().conversationDetails.operationIcon, _v$4 = styles().conversationDetails.operationTitle, _v$5 = `${styles().conversationDetails.operationStatus} ${embedding.status === "completed" ? styles().conversationDetails.operationStatusCompleted : styles().conversationDetails.operationStatusPending}`, _v$6 = styles().conversationDetails.operationDetails, _v$7 = styles().conversationDetails.operationDetail, _v$8 = styles().conversationDetails.operationLabel, _v$9 = styles().conversationDetails.operationValue, _v$0 = styles().conversationDetails.operationDetail, _v$1 = styles().conversationDetails.operationLabel, _v$10 = styles().conversationDetails.operationValue, _v$11 = styles().conversationDetails.operationDetail, _v$12 = styles().conversationDetails.operationLabel, _v$13 = styles().conversationDetails.operationValue;
-            _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-            _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
-            _v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
-            _v$4 !== _p$.o && className(_el$6, _p$.o = _v$4);
-            _v$5 !== _p$.i && className(_el$7, _p$.i = _v$5);
-            _v$6 !== _p$.n && className(_el$0, _p$.n = _v$6);
-            _v$7 !== _p$.s && className(_el$1, _p$.s = _v$7);
-            _v$8 !== _p$.h && className(_el$10, _p$.h = _v$8);
-            _v$9 !== _p$.r && className(_el$11, _p$.r = _v$9);
-            _v$0 !== _p$.d && className(_el$12, _p$.d = _v$0);
-            _v$1 !== _p$.l && className(_el$13, _p$.l = _v$1);
-            _v$10 !== _p$.u && className(_el$14, _p$.u = _v$10);
-            _v$11 !== _p$.c && className(_el$16, _p$.c = _v$11);
-            _v$12 !== _p$.w && className(_el$17, _p$.w = _v$12);
-            _v$13 !== _p$.m && className(_el$18, _p$.m = _v$13);
-            return _p$;
-          }, {
-            e: void 0,
-            t: void 0,
-            a: void 0,
-            o: void 0,
-            i: void 0,
-            n: void 0,
-            s: void 0,
-            h: void 0,
-            r: void 0,
-            d: void 0,
-            l: void 0,
-            u: void 0,
-            c: void 0,
-            w: void 0,
-            m: void 0
-          });
-          return _el$3;
-        })()
-      }));
-      effect(() => className(_el$, styles().conversationDetails.messagesList));
-      return _el$;
-    }
-  });
-};
-export {
-  EmbeddingsTab
-};
-//# sourceMappingURL=EmbeddingsTab.js.map

package/dist/esm/components/conversation/EmbeddingsTab.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"EmbeddingsTab.js","sources":["../../../../src/components/conversation/EmbeddingsTab.tsx"],"sourcesContent":["import { For, Show } from 'solid-js'\nimport { useStyles } from '../../styles/use-styles'\nimport { formatDuration } from '../utils'\nimport type { Component } from 'solid-js'\nimport type { EmbeddingOperation } from '../../store/ai-context'\n\ninterface EmbeddingsTabProps {\n embeddings: Array<EmbeddingOperation>\n}\n\nexport const EmbeddingsTab: Component<EmbeddingsTabProps> = (props) => {\n const styles = useStyles()\n\n return (\n <Show\n when={props.embeddings.length > 0}\n fallback={\n <div class={styles().conversationDetails.emptyMessages}>\n No embedding operations yet\n </div>\n }\n >\n <div class={styles().conversationDetails.messagesList}>\n <For each={props.embeddings}>\n {(embedding) => (\n <div class={styles().conversationDetails.operationCard}>\n <div class={styles().conversationDetails.operationHeader}>\n <div class={styles().conversationDetails.operationIcon}>🔢</div>\n <div class={styles().conversationDetails.operationTitle}>\n Embedding\n </div>\n <div\n class={`${styles().conversationDetails.operationStatus} ${\n embedding.status === 'completed'\n ? styles().conversationDetails.operationStatusCompleted\n : styles().conversationDetails.operationStatusPending\n }`}\n >\n {embedding.status}\n </div>\n <Show when={embedding.duration > 0}>\n <div class={styles().conversationDetails.durationBadge}>\n ⏱️ {formatDuration(embedding.duration)}\n </div>\n </Show>\n </div>\n <div class={styles().conversationDetails.operationDetails}>\n <div class={styles().conversationDetails.operationDetail}>\n <span class={styles().conversationDetails.operationLabel}>\n Model:\n </span>\n <span class={styles().conversationDetails.operationValue}>\n {embedding.model}\n </span>\n </div>\n <div class={styles().conversationDetails.operationDetail}>\n <span class={styles().conversationDetails.operationLabel}>\n Inputs:\n </span>\n <span class={styles().conversationDetails.operationValue}>\n {embedding.inputCount} item\n {embedding.inputCount !== 1 ? 's' : ''}\n </span>\n </div>\n <div class={styles().conversationDetails.operationDetail}>\n <span class={styles().conversationDetails.operationLabel}>\n Started:\n </span>\n <span class={styles().conversationDetails.operationValue}>\n {new Date(embedding.timestamp).toLocaleTimeString()}\n </span>\n </div>\n </div>\n </div>\n )}\n </For>\n </div>\n </Show>\n )\n}\n"],"names":["EmbeddingsTab","props","styles","useStyles","_$createComponent","Show","when","embeddings","length","fallback","_el$2","_tmpl$2","_$effect","_$className","conversationDetails","emptyMessages","children","_el$","_tmpl$","_$insert","For","each","embedding","_el$3","_tmpl$4","_el$4","firstChild","_el$5","_el$6","nextSibling","_el$7","_el$0","_el$1","_el$10","_el$11","_el$12","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","status","duration","_el$8","_tmpl$3","formatDuration","durationBadge","model","inputCount","Date","timestamp","toLocaleTimeString","_p$","_v$","operationCard","_v$2","operationHeader","_v$3","operationIcon","_v$4","operationTitle","_v$5","operationStatus","operationStatusCompleted","operationStatusPending","_v$6","operationDetails","_v$7","operationDetail","_v$8","operationLabel","_v$9","operationValue","_v$0","_v$1","_v$10","_v$11","_v$12","_v$13","e","t","a","o","i","n","s","h","r","d","l","u","c","w","m","undefined","messagesList"],"mappings":"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"}

package/src/components/conversation/EmbeddingsTab.tsx DELETED Viewed

@@ -1,80 +0,0 @@
-import { For, Show } from 'solid-js'
-import { useStyles } from '../../styles/use-styles'
-import { formatDuration } from '../utils'
-import type { Component } from 'solid-js'
-import type { EmbeddingOperation } from '../../store/ai-context'
-interface EmbeddingsTabProps {
-  embeddings: Array<EmbeddingOperation>
-}
-export const EmbeddingsTab: Component<EmbeddingsTabProps> = (props) => {
-  const styles = useStyles()
-  return (
-    <Show
-      when={props.embeddings.length > 0}
-      fallback={
-        <div class={styles().conversationDetails.emptyMessages}>
-          No embedding operations yet
-        </div>
-      }
-    >
-      <div class={styles().conversationDetails.messagesList}>
-        <For each={props.embeddings}>
-          {(embedding) => (
-            <div class={styles().conversationDetails.operationCard}>
-              <div class={styles().conversationDetails.operationHeader}>
-                <div class={styles().conversationDetails.operationIcon}>🔢</div>
-                <div class={styles().conversationDetails.operationTitle}>
-                  Embedding
-                </div>
-                <div
-                  class={`${styles().conversationDetails.operationStatus} ${
-                    embedding.status === 'completed'
-                      ? styles().conversationDetails.operationStatusCompleted
-                      : styles().conversationDetails.operationStatusPending
-                  }`}
-                >
-                  {embedding.status}
-                </div>
-                <Show when={embedding.duration > 0}>
-                  <div class={styles().conversationDetails.durationBadge}>
-                    ⏱️ {formatDuration(embedding.duration)}
-                  </div>
-                </Show>
-              </div>
-              <div class={styles().conversationDetails.operationDetails}>
-                <div class={styles().conversationDetails.operationDetail}>
-                  <span class={styles().conversationDetails.operationLabel}>
-                    Model:
-                  </span>
-                  <span class={styles().conversationDetails.operationValue}>
-                    {embedding.model}
-                  </span>
-                </div>
-                <div class={styles().conversationDetails.operationDetail}>
-                  <span class={styles().conversationDetails.operationLabel}>
-                    Inputs:
-                  </span>
-                  <span class={styles().conversationDetails.operationValue}>
-                    {embedding.inputCount} item
-                    {embedding.inputCount !== 1 ? 's' : ''}
-                  </span>
-                </div>
-                <div class={styles().conversationDetails.operationDetail}>
-                  <span class={styles().conversationDetails.operationLabel}>
-                    Started:
-                  </span>
-                  <span class={styles().conversationDetails.operationValue}>
-                    {new Date(embedding.timestamp).toLocaleTimeString()}
-                  </span>
-                </div>
-              </div>
-            </div>
-          )}
-        </For>
-      </div>
-    </Show>
-  )
-}