feat(chat): 支持展示 grok 回复图片

app/services/grok/services/chat.py

@@ -1078,14 +1078,24 @@ class StreamProcessor(proc_base.BaseProcessor):
                             image = card_data.get("image") or {}
                             original = image.get("original")
                             title = image.get("title") or ""
+                            if not original and "image_chunk" in card_data:
+                                original = card_data["image_chunk"].get("imageUrl")
+                                if not title:
+                                    title = card_data["image_chunk"].get("imageTitle") or "Generated Image"
                             if original:
                                 async for chunk in self._close_think_block():
                                     yield chunk
                                 title_safe = title.replace("\n", " ").strip()
-                                if title_safe:
-                                    yield self._sse(f"![{title_safe}]({original})\n")
+                                dl_service = getattr(self, "_get_dl", lambda: None)()
+                                if dl_service:
+                                    img_id = title_safe if title_safe else "image"
+                                    rendered = await dl_service.render_image(original, self.token, img_id)
+                                    yield self._sse(f"{rendered}\n")
                                 else:
-                                    yield self._sse(f"![image]({original})\n")
+                                    if not original.startswith("http"):
+                                        original = f"https://assets.grok.com/{original.lstrip('/')}"
+                                    img_id = title_safe if title_safe else "image"
+                                    yield self._sse(f"![{img_id}]({original})\n")
                     continue
 
                 if tool_card := resp.get("toolUsageCard"):

app/static/public/css/chat.css

@@ -584,38 +584,6 @@ body {
 .message-content.rendered > :first-child {
   margin-top: 0;
 }
-
-.message-content.rendered > :last-child {
-  margin-bottom: 0;
-}
-
-.message-content.rendered .message-image-card {
-  display: block;
-  width: 100%;
-  max-width: min(680px, 100%);
-  margin: 18px 0 20px;
-}
-
-.message-content.rendered .message-image-card img {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  max-height: none;
-  margin: 0;
-  border-radius: 16px;
-  border: 1px solid var(--chat-border);
-  background: var(--chat-surface);
-  cursor: zoom-in;
-}
-
-.message-content.rendered .message-image-caption {
-  margin-top: 8px;
-  padding: 0 2px;
-  font-size: 13px;
-  line-height: 1.45;
-  color: var(--accents-4);
-}
-
 .message-content.rendered .table-wrap {
   overflow-x: auto;
   margin: 10px 0;
@@ -1886,3 +1854,36 @@ html[data-theme='dark'] .chat-sidebar {
     display: inline-flex;
   }
 }
+
+
+.message-content.rendered > :last-child {
+  margin-bottom: 0;
+}
+
+.message-content.rendered .message-image-card {
+  display: block;
+  width: 100%;
+  max-width: min(680px, 100%);
+  margin: 18px 0 20px;
+}
+
+.message-content.rendered .message-image-card img {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  max-height: 480px;
+  margin: 0;
+  border-radius: 16px;
+  border: 1px solid var(--chat-border);
+  background: var(--chat-surface);
+  cursor: zoom-in;
+  object-fit: contain;
+}
+
+.message-content.rendered .message-image-caption {
+  margin-top: 8px;
+  padding: 0 2px;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--accents-4);
+}

config.defaults.toml

@@ -25,7 +25,7 @@ thinking = true
 # 是否动态生成 Statsig 指纹
 dynamic_statsig = true
 # 过滤的特殊标签列表
-filter_tags = ["xaiartifact","xai:tool_usage_card","grok:render"]
+filter_tags = ["xaiartifact","xai:tool_usage_card"]
 
 
 # ==================== 代理配置 ====================