openaxies 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openaxies",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": false,
   "type": "module",
   "bin": {

package/src/App.js

@@ -56,6 +56,8 @@ function AppRoot() {
   const [streamText, setStreamText] = React.useState('');
   const [streamingActive, setStreamingActive] = React.useState(false);
   const [scrollOffset, setScrollOffset] = React.useState(0);
+  const [isThinking, setIsThinking] = React.useState(false);
+  const [spinnerChar, setSpinnerChar] = React.useState('');
 
   const commands = getCommands();
 
@@ -73,6 +75,33 @@ function AppRoot() {
 
   const abortRef = React.useRef(null);
   const connectingRef = React.useRef(null);
+  const spinnerRef = React.useRef(null);
+  const thinkingAccumRef = React.useRef('');
+
+  const SPINNER_FRAMES = ['◐', '◓', '◑', '◒'];
+
+  React.useEffect(function () {
+    if (isThinking === false) {
+      if (spinnerRef.current !== null) {
+        clearInterval(spinnerRef.current);
+        spinnerRef.current = null;
+      }
+      setSpinnerChar('');
+      return;
+    }
+    let idx = 0;
+    setSpinnerChar(SPINNER_FRAMES[0]);
+    spinnerRef.current = setInterval(function () {
+      idx = (idx + 1) % SPINNER_FRAMES.length;
+      setSpinnerChar(SPINNER_FRAMES[idx]);
+    }, 120);
+    return function cleanup() {
+      if (spinnerRef.current !== null) {
+        clearInterval(spinnerRef.current);
+        spinnerRef.current = null;
+      }
+    };
+  }, [isThinking]);
 
   // ---------------------------------------------------------------------------
   // Input handlers
@@ -118,10 +147,10 @@ function AppRoot() {
     if (trigger === '/model') {
       // Toggle between the two local models
       setActiveModel(function (prev) {
-        if (prev === 'openaxis/openaxis-mixtral') {
+        if (prev === 'openaxis/openaxis-flash') {
           return 'openaxis/openaxis-heavy';
         }
-          return 'openaxis/openaxis-mixtral';
+          return 'openaxis/openaxis-flash';
       });
     }
 
@@ -134,7 +163,7 @@ function AppRoot() {
             '**Available commands:**\n' +
             '- `/help`  — Show this help\n' +
             '- `/clear` — Clear the conversation\n' +
-            '- `/model` — Toggle between Mixtral and Heavy\n' +
+            '- `/model` — Toggle between Flash and Heavy\n' +
             '- `/exit`  — Quit the application\n\n' +
             'Type your message and press **Enter** to chat.',
           id: 'help-' + Date.now(),
@@ -197,6 +226,18 @@ function AppRoot() {
     abortRef.current = abortController;
 
     try {
+      function checkThinkState(text) {
+        const openIdx = text.lastIndexOf('<think>');
+        const closeIdx = text.lastIndexOf('</think>');
+        if (openIdx === -1 && closeIdx === -1) {
+          return false;
+        }
+        if (openIdx > closeIdx) {
+          return true;
+        }
+        return false;
+      }
+
       const gen = callModel(modelInfo, history, abortController.signal);
       let accumulated = '';
       let firstEvent = true;
@@ -216,8 +257,13 @@ function AppRoot() {
           const content = typeof event.content === 'string' ? event.content : '';
           for (let i = 0; i < content.length; i++) {
             accumulated = accumulated + content[i];
+            const isInsideThink = checkThinkState(accumulated);
             setScrollOffset(0);
             setStreamText(accumulated);
+            setIsThinking(isInsideThink);
+            if (isInsideThink === true) {
+              thinkingAccumRef.current = accumulated;
+            }
             await new Promise(function (resolve) {
               setTimeout(resolve, 0);
             });
@@ -239,6 +285,8 @@ function AppRoot() {
         clearInterval(connectingRef.current);
         connectingRef.current = null;
       }
+      setIsThinking(false);
+      thinkingAccumRef.current = '';
       setStreamingActive(false);
       setStreamText('');
 
@@ -256,6 +304,8 @@ function AppRoot() {
         clearInterval(connectingRef.current);
         connectingRef.current = null;
       }
+      setIsThinking(false);
+      thinkingAccumRef.current = '';
       setStreamingActive(false);
       setStreamText('');
       setScrollOffset(0);
@@ -363,7 +413,7 @@ function AppRoot() {
 
   const header = createBrandHeader(cols);
   const routerBar = createRouterBar(activeModel, cols);
-  const viewport = createChatViewport(messages, streamText, availLines, cols, scrollOffset);
+  const viewport = createChatViewport(messages, streamText, availLines, cols, scrollOffset, isThinking, spinnerChar);
   const slashOverlay = showOverlay === true
     ? createSlashOverlay(commands, overlayIndex)
     : null;

package/src/components/ChatViewport.js

@@ -4,6 +4,9 @@ import { hex } from '../config/theme.js';
 
 const h = React.createElement;
 
+const THINK_OPEN = '<think>';
+const THINK_CLOSE = '</think>';
+
 function checkArray(arr) {
   if (Array.isArray(arr) === false) {
     return [];
@@ -61,6 +64,39 @@ function pushWrapped(lines, text, width, color, bold) {
   }
 }
 
+function stripThinkTags(text) {
+  if (typeof text !== 'string') {
+    return '';
+  }
+  return text.split(THINK_OPEN).join('').split(THINK_CLOSE).join('');
+}
+
+function extractThinkContent(text) {
+  if (typeof text !== 'string') {
+    return '';
+  }
+  const openIdx = text.indexOf(THINK_OPEN);
+  if (openIdx === -1) {
+    return '';
+  }
+  const closeIdx = text.indexOf(THINK_CLOSE, openIdx + THINK_OPEN.length);
+  if (closeIdx === -1) {
+    return text.slice(openIdx + THINK_OPEN.length);
+  }
+  return text.slice(openIdx + THINK_OPEN.length, closeIdx);
+}
+
+function extractAfterThink(text) {
+  if (typeof text !== 'string') {
+    return '';
+  }
+  const closeIdx = text.lastIndexOf(THINK_CLOSE);
+  if (closeIdx === -1) {
+    return '';
+  }
+  return text.slice(closeIdx + THINK_CLOSE.length);
+}
+
 function pushRawMessage(lines, msg, safeCols) {
   if (msg === null || msg === undefined || typeof msg !== 'object') {
     return;
@@ -71,15 +107,27 @@ function pushRawMessage(lines, msg, safeCols) {
     return;
   }
 
+  const clean = stripThinkTags(content);
+  if (clean.length === 0) {
+    return;
+  }
+
   if (msg.role === 'user') {
-    pushWrapped(lines, content, safeCols, hex.neonBlue, false);
+    pushWrapped(lines, clean, safeCols, hex.neonBlue, false);
     return;
   }
 
-  pushWrapped(lines, content, safeCols, hex.primary, false);
+  pushWrapped(lines, clean, safeCols, hex.primary, false);
 }
 
-export function createChatViewport(messages, streamText, availLines, cols, scrollOffset) {
+function pushSpinnerLine(lines, spinnerChar, safeCols) {
+  const safeChar = typeof spinnerChar === 'string' && spinnerChar.length > 0
+    ? spinnerChar
+    : '◐';
+  pushLine(lines, ' ' + safeChar + ' thinking', '#FF9F43', true);
+}
+
+export function createChatViewport(messages, streamText, availLines, cols, scrollOffset, isThinking, spinnerChar) {
   const safeMessages = checkArray(messages);
   const safeAvail = typeof availLines === 'number' && availLines > 0 ? availLines : 1;
   const safeCols = clampWidth(cols);
@@ -87,6 +135,7 @@ export function createChatViewport(messages, streamText, availLines, cols, scrol
     ? Math.floor(scrollOffset)
     : 0;
   const hasStream = typeof streamText === 'string' && streamText.length > 0;
+  const isStreamingThink = isThinking === true && hasStream === true;
   const transcriptLines = [];
 
   for (let i = 0; i < safeMessages.length; i++) {
@@ -94,7 +143,18 @@ export function createChatViewport(messages, streamText, availLines, cols, scrol
   }
 
   if (hasStream === true) {
-    pushWrapped(transcriptLines, streamText, safeCols, hex.primary, false);
+    if (isStreamingThink === true) {
+      pushSpinnerLine(transcriptLines, spinnerChar, safeCols);
+      const thinkContent = extractThinkContent(streamText);
+      if (thinkContent.length > 0) {
+        pushWrapped(transcriptLines, thinkContent, safeCols, '#FF9F43', false);
+      }
+    } else {
+      const clean = stripThinkTags(streamText);
+      if (clean.length > 0) {
+        pushWrapped(transcriptLines, clean, safeCols, hex.primary, false);
+      }
+    }
   }
 
   if (transcriptLines.length === 0) {

package/src/components/RouterBar.js

@@ -8,7 +8,7 @@ export const ROUTER_HEIGHT = 2;
 
 function checkActiveModel(modelId) {
   if (typeof modelId !== 'string') {
-    return 'openaxis/openaxis-mixtral';
+    return 'openaxis/openaxis-flash';
   }
   return modelId;
 }
@@ -34,7 +34,7 @@ function buildSeparator(cols) {
 //   Row 2: full-width separator line
 export function createRouterBar(activeModel, cols) {
   const modelStr = checkActiveModel(activeModel);
-  const isMixtral = modelStr === 'openaxis/openaxis-mixtral';
+  const isFlash = modelStr === 'openaxis/openaxis-flash';
   const sepLine = buildSeparator(cols);
 
   return h(Box, {
@@ -54,40 +54,40 @@ export function createRouterBar(activeModel, cols) {
 
       // ── Mixtral slot ──
       h(Text, {
-        color: isMixtral ? hex.neonBlue : '#333355',
-        bold: isMixtral,
-      }, isMixtral ? '\u25B6 ' : '\u25B7 '),
+        color: isFlash ? hex.neonBlue : '#333355',
+        bold: isFlash,
+      }, isFlash ? '\u25B6 ' : '\u25B7 '),
       h(Text, {
-        color: isMixtral ? hex.primary : '#444466',
-        bold: isMixtral,
-      }, 'Mixtral'),
+        color: isFlash ? hex.primary : '#444466',
+        bold: isFlash,
+      }, 'Flash'),
       h(Text, {
-        color: isMixtral ? hex.greenOnline : '#2A3A2A',
+        color: isFlash ? hex.greenOnline : '#2A3A2A',
       }, '  \u25CF '),
       h(Text, {
-        color: isMixtral ? hex.greenOnline : '#2A3A2A',
-        dimColor: !isMixtral,
-      }, isMixtral ? 'ACTIVE' : 'STANDBY'),
+        color: isFlash ? hex.greenOnline : '#2A3A2A',
+        dimColor: !isFlash,
+      }, isFlash ? 'ACTIVE' : 'STANDBY'),
 
       // ── Divider ──
       h(Text, { color: '#1E1E2E' }, '    \u2502    '),
 
       // ── Heavy slot ──
       h(Text, {
-        color: !isMixtral ? hex.neonBlue : '#333355',
-        bold: !isMixtral,
-      }, !isMixtral ? '\u25B6 ' : '\u25B7 '),
+        color: !isFlash ? hex.neonBlue : '#333355',
+        bold: !isFlash,
+      }, !isFlash ? '\u25B6 ' : '\u25B7 '),
       h(Text, {
-        color: !isMixtral ? hex.primary : '#444466',
-        bold: !isMixtral,
+        color: !isFlash ? hex.primary : '#444466',
+        bold: !isFlash,
       }, 'Heavy'),
       h(Text, {
-        color: !isMixtral ? hex.greenOnline : '#2A3A2A',
+        color: !isFlash ? hex.greenOnline : '#2A3A2A',
       }, '  \u25CF '),
       h(Text, {
-        color: !isMixtral ? hex.greenOnline : '#2A3A2A',
-        dimColor: isMixtral,
-      }, !isMixtral ? 'ACTIVE' : 'STANDBY'),
+        color: !isFlash ? hex.greenOnline : '#2A3A2A',
+        dimColor: isFlash,
+      }, !isFlash ? 'ACTIVE' : 'STANDBY'),
 
       // ── Right-side hint ──
       h(Text, { color: '#1E1E2E' }, '    \u2502    '),

package/src/config/commands.js

@@ -34,7 +34,7 @@ function checkCommands(arr) {
 const COMMAND_DEFS = Object.freeze([
   { trigger: '/help', description: 'Show available commands' },
   { trigger: '/clear', description: 'Clear the conversation' },
-  { trigger: '/model', description: 'Switch between Mixtral and Heavy' },
+  { trigger: '/model', description: 'Switch between Flash and Heavy' },
   { trigger: '/exit', description: 'Quit the application' },
 ]);
 

package/src/config/models.js

@@ -33,12 +33,11 @@ function checkModels(arr) {
   return arr;
 }
 
-// Mixtral (fast/light) and Heavy (quality).
 const MODELS = Object.freeze([
   {
-    id: 'openaxis/openaxis-mixtral',
+    id: 'openaxis/openaxis-flash',
     provider: 'openaxis',
-    label: 'OpenAxies Mixtral',
+    label: 'OpenAxies Flash',
     badge: 'Fast',
   },
   {

package/src/providers/index.js

@@ -5,7 +5,7 @@ import { runWebSearchGraph, shouldUseWebSearch } from './websearch.js';
 // HF Spaces cold-start on first request (30–120 s model download).
 // If the primary is waking up, we fall through to the next Space.
 const MODEL_ROUTES = Object.freeze({
-  'openaxis/openaxis-mixtral': Object.freeze([
+  'openaxis/openaxis-flash': Object.freeze([
     'https://universal-618-clarity-main.hf.space/v1/chat/completions',
     'https://universal-618-clarity-2.hf.space/v1/chat/completions',
     'https://universal-618-clarity-3.hf.space/v1/chat/completions',