Add z.ai provider

- open image modal at end of images
- fix card glow behavior on theme change
- add zai provider
- handle zai reasoning responses

Author: sceuick

common/providers.ts

@@ -85,6 +85,20 @@ export const KNOWN_PROVIDERS: Record<string, ProviderDefinition> = {
       { type: 'format', value: 'openai' },
     ],
   },
+  zai: {
+    name: 'Z.ai',
+    url: `https://api.z.ai/api/paas/v4`,
+    formats: [
+      {
+        type: 'format',
+        value: 'openai-chatv2',
+        subs: [
+          { name: 'Standard', value: '' },
+          { name: 'Reasoning', value: 'reasoning' },
+        ],
+      },
+    ],
+  },
 }
 
 export const KNOWN_SELF_HOST: Record<string, ProviderDefinition> = {

common/requests/stream.ts

@@ -327,12 +327,8 @@ export async function* fetchStream(
               return
             }
           } else {
-            const reasoning = getChoiceProp(json, 'reasoning') || getChoiceProp(json, 'thought')
-            const token: string =
-              getChoiceProp(json, 'content') ||
-              getChoiceProp(json, 'text') ||
-              json.token ||
-              json.response
+            const reasoning = getNextThoughts(json) || json.reasoning_content
+            const token: string = getNextTokens(json) || json.token || json.response
 
             const index = +(getChoiceProp<string>(json, 'index') || '0')
 
@@ -401,7 +397,7 @@ export async function* fetchStream(
               yield { token: suffix + token }
             }
 
-            if (DEBUG) {
+            if (DEBUG || true) {
               const choice = json.choices?.[0]
               if (choice) console.log(`#${type} `, inline(choice))
               else console.log(`#${type} `, inline(json))
@@ -521,6 +517,53 @@ function getChoiceProp<T = any>(json: any, prop: string, assign?: any) {
   return value as T
 }
 
+function getNextTokens(json: any) {
+  const props = ['content', 'text']
+
+  const choice = json?.choices?.[0]
+  let value: any = undefined
+
+  for (const prop of props) {
+    const match = choice?.delta?.[prop] || choice?.[prop] || json?.[prop]
+    if (!match) continue
+
+    value = match
+    break
+  }
+
+  return value
+}
+
+function getNextThoughts(json: any) {
+  const props = ['reasoning', 'thought', 'reasoning_content']
+  const choice = json?.choices?.[0]
+
+  let value: any = undefined
+  for (const prop of props) {
+    const match = choice?.delta?.[prop] || choice?.[prop] || json?.[prop]
+    if (!match) continue
+
+    value = match
+    break
+  }
+
+  if (!value) return
+
+  if (typeof value === 'string') return value
+
+  // Mistral returns thoughts in an array for some reason string
+  if (Array.isArray(value)) {
+    const first = value[0]
+    if (!first) return
+
+    if (first.type !== 'thinking') return
+    if (!first.thinking?.[0]) return
+    return first.thinking?.[0]?.text
+  }
+
+  return
+}
+
 function tryParse(value: any) {
   try {
     const obj = JSON.parse(value)

srv/adapter/openai.ts

@@ -104,14 +104,18 @@ export const handleOAI: ModelAdapter = async function* (opts) {
   // }
 
   if (gen.reasoning?.enabled) {
-    body.reasoning = {
-      exclude: !!gen.reasoning.exclude,
-    }
-
-    if (gen.reasoning.effort === 'custom') {
-      body.reasoning.max_tokens = gen.reasoning.maxTokens
+    if (opts.conn.provider?.provider === 'known-zai') {
+      body.thinking = { type: 'enabled' }
     } else {
-      body.reasoning.effort = gen.reasoning.effort || 'low'
+      body.reasoning = {
+        exclude: !!gen.reasoning.exclude,
+      }
+
+      if (gen.reasoning.effort === 'custom') {
+        body.reasoning.max_tokens = gen.reasoning.maxTokens
+      } else {
+        body.reasoning.effort = gen.reasoning.effort || 'low'
+      }
     }
   }
 

web/pages/Chat/ChatMenu.tsx

@@ -94,7 +94,7 @@ const ChatNav: Component<NavProps> = (props) => {
       return
     }
 
-    imageStore.showMessageImages({ id: last._id, position: 0 })
+    imageStore.showMessageImages({ id: last._id, position: -1 })
   }
 
   return (

web/pages/Image/ImageModal.tsx

@@ -426,7 +426,9 @@ const PromptSettings: Component<{
     <div class="image-modal">
       <section class="flex flex-col gap-1" style={{ 'grid-area': 'options' }}>
         <Show when={props.messageId}>
-          <Show when={window.flags.debug}>{props.messageId?.slice(0, 4)}</Show>
+          <Show when={window.flags.debug}>
+            <span class="text-500 text-xs italic">{props.messageId}</span>
+          </Show>
           <TextInput
             placeholder="Caption Hint: What to focus on when generating the caption?"
             class="!text-sm"

web/shared/hooks.ts

@@ -282,7 +282,11 @@ export function useImageCache(opts: ImageCacheOpts = {}) {
     const imageIds = await reel.getImageIds()
     const images = imageIds.map(cleanIds)
 
-    const current = clamp(col.pos !== undefined ? col.pos : images.length - 1, images.length - 1, 0)
+    const current = clamp(
+      col.pos !== undefined && col.pos >= 0 ? col.pos : images.length - 1,
+      images.length - 1,
+      0
+    )
 
     const image = await reel.getImage(images[current])
     setState({ pos: current, image, images, imageId: images[current] })