refactor: standardize image block data structure #1082
Conversation
…ibility Normalize image_data structure in ThreadPresenter to ensure consistent mimeType handling. Update MessageBlockImage component to support legacy data formats (content as object/string/data URI) while maintaining compatibility with new image_data field.
WalkthroughThreadPresenter now normalizes image payloads into an explicit Changes
Sequence Diagram(s)sequenceDiagram
participant Presenter
participant MessageStore
participant Renderer
rect rgb(240,248,255)
Presenter->>Presenter: receive agent response with image_data / content
Presenter->>Presenter: normalize image payload -> { data, mimeType }
Presenter->>MessageStore: emit block { content: "image", image_data: {data,mimeType} }
end
rect rgb(245,255,240)
MessageStore->>Renderer: deliver block
Renderer->>Renderer: compute resolvedImageData from image_data or legacy content
Renderer->>Renderer: inferMimeType / decode data URI if needed
Renderer->>Renderer: render inline or open fullscreen viewer
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
目前 nano-banana返回结果 2025-11-05_201312_265.mp4修复后 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
test/renderer/message/__snapshots__/messageBlockSnapshot.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (3)
src/main/presenter/threadPresenter/index.ts(1 hunks)src/renderer/src/components/message/MessageBlockImage.vue(4 hunks)test/renderer/message/messageBlockSnapshot.test.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (25)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写
Files:
test/renderer/message/messageBlockSnapshot.test.tssrc/main/presenter/threadPresenter/index.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-logging.mdc)
**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别
Files:
test/renderer/message/messageBlockSnapshot.test.tssrc/main/presenter/threadPresenter/index.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
test/renderer/message/messageBlockSnapshot.test.tssrc/renderer/src/components/message/MessageBlockImage.vuesrc/main/presenter/threadPresenter/index.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)
Use PascalCase for TypeScript types and classes
Files:
test/renderer/message/messageBlockSnapshot.test.tssrc/renderer/src/components/message/MessageBlockImage.vuesrc/main/presenter/threadPresenter/index.ts
test/**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Place unit and integration tests under the test/ directory mirroring project structure
Files:
test/renderer/message/messageBlockSnapshot.test.ts
test/{main,renderer}/**/*
📄 CodeRabbit inference engine (AGENTS.md)
Mirror source structure for tests under test/main/** and test/renderer/**
Files:
test/renderer/message/messageBlockSnapshot.test.ts
test/{main,renderer}/**/*.{test,spec}.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name test files with .test.ts or .spec.ts
Files:
test/renderer/message/messageBlockSnapshot.test.ts
**/*.{ts,tsx,js,jsx,vue,css,scss,md,json,yml,yaml}
📄 CodeRabbit inference engine (AGENTS.md)
Prettier style: single quotes, no semicolons, print width 100; run pnpm run format
Files:
test/renderer/message/messageBlockSnapshot.test.tssrc/renderer/src/components/message/MessageBlockImage.vuesrc/main/presenter/threadPresenter/index.ts
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx,vue}: Use OxLint for JS/TS code; keep lint clean
Use camelCase for variables and functions
Use SCREAMING_SNAKE_CASE for constants
Files:
test/renderer/message/messageBlockSnapshot.test.tssrc/renderer/src/components/message/MessageBlockImage.vuesrc/main/presenter/threadPresenter/index.ts
src/renderer/src/**/*
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
Use scoped styles to prevent CSS conflicts between components
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/**/*.{vue,ts}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/**/*.{ts,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.Use Pinia for frontend state management (do not introduce alternative state libraries)
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/{src,shell,floating}/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/{src,shell,floating}/**/*.vue: Use Vue 3 Composition API for all components
All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Use Tailwind CSS utilities and ensure styles are scoped in Vue components
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/src/components/**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Organize UI components by feature within src/renderer/src/
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/src/**
📄 CodeRabbit inference engine (AGENTS.md)
Place Vue 3 app source under src/renderer/src (components, stores, views, i18n, lib)
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/src/**/*.{vue,ts}
📄 CodeRabbit inference engine (AGENTS.md)
All user-facing strings must use vue-i18n ($t/keys) rather than hardcoded literals
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue component files in PascalCase (e.g., ChatInput.vue)
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/{main,renderer}/**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)
src/{main,renderer}/**/*.ts: Use context isolation for improved security
Implement proper inter-process communication (IPC) patterns
Optimize application startup time with lazy loading
Implement proper error handling and logging for debugging
Files:
src/main/presenter/threadPresenter/index.ts
src/main/**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)
Use Electron's built-in APIs for file system and native dialogs
Files:
src/main/presenter/threadPresenter/index.ts
src/main/**/*.{ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
主进程代码放在
src/main
Files:
src/main/presenter/threadPresenter/index.ts
src/main/presenter/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Place Electron main-process presenters under src/main/presenter/ (Window, Tab, Thread, Mcp, Config, LLMProvider)
Files:
src/main/presenter/threadPresenter/index.ts
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-14T08:02:59.495Z
Learning: For UI changes, include BEFORE/AFTER ASCII layout blocks in PRs to communicate structure
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/llm-agent-loop.mdc:0-0
Timestamp: 2025-07-21T01:46:52.880Z
Learning: Applies to src/main/presenter/llmProviderPresenter/providers/*.ts : Provider implementations should yield image data events in the standardized format when applicable.
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/provider-guidelines.mdc:0-0
Timestamp: 2025-09-04T11:03:30.184Z
Learning: image_data events must include data (Base64) and mimeType; control single-frame size and frequency to avoid blocking
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Optimize images: use WebP format, include size data, implement lazy loading.
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Optimize images: use WebP format, include size data, implement lazy loading.
Applied to files:
src/renderer/src/components/message/MessageBlockImage.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Iconify/Vue for icon implementation.
Applied to files:
src/renderer/src/components/message/MessageBlockImage.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Import Icon component from Iconify/Vue.
Applied to files:
src/renderer/src/components/message/MessageBlockImage.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Leverage ref, reactive, and computed for reactive state management.
Applied to files:
src/renderer/src/components/message/MessageBlockImage.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use the Icon component with lucide icons.
Applied to files:
src/renderer/src/components/message/MessageBlockImage.vue
📚 Learning: 2025-07-21T01:46:52.880Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/llm-agent-loop.mdc:0-0
Timestamp: 2025-07-21T01:46:52.880Z
Learning: Applies to src/main/presenter/llmProviderPresenter/providers/*.ts : Provider implementations should yield image data events in the standardized format when applicable.
Applied to files:
src/main/presenter/threadPresenter/index.ts
📚 Learning: 2025-07-21T01:46:52.880Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/llm-agent-loop.mdc:0-0
Timestamp: 2025-07-21T01:46:52.880Z
Learning: Applies to src/main/presenter/llmProviderPresenter/providers/*.ts : All provider implementations must parse provider-specific data chunks and yield standardized events for text, reasoning, tool calls, usage, errors, stop reasons, and image data.
Applied to files:
src/main/presenter/threadPresenter/index.ts
📚 Learning: 2025-07-21T01:46:52.880Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/llm-agent-loop.mdc:0-0
Timestamp: 2025-07-21T01:46:52.880Z
Learning: Applies to src/main/presenter/llmProviderPresenter/index.ts : The main Agent loop should buffer text content, handle tool call events, format tool results for the next LLM call, and manage conversation continuation logic.
Applied to files:
src/main/presenter/threadPresenter/index.ts
📚 Learning: 2025-09-04T11:03:30.184Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/provider-guidelines.mdc:0-0
Timestamp: 2025-09-04T11:03:30.184Z
Learning: image_data events must include data (Base64) and mimeType; control single-frame size and frequency to avoid blocking
Applied to files:
src/main/presenter/threadPresenter/index.ts
🧬 Code graph analysis (1)
src/main/presenter/threadPresenter/index.ts (2)
src/shared/chat.d.ts (1)
AssistantMessageBlock(84-138)src/shared/types/core/chat.ts (1)
AssistantMessageBlock(48-95)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-check (x64)
Extract base64 content and mime type from data URIs (data:image/jpeg;base64,...) to prevent double-encoding in renderer. This fixes image display errors where data:image/png;base64,data:image/jpeg;base64,... was being constructed. - Parse data URIs to extract real mime type and base64 content - Force URL schemes (http://, https://, imgcache://) to deepchat/image-url - Preserve provided mime types when available - Fallback to image/png only for raw base64 without metadata
Handle historical image_data records that may still contain full data:image/...;base64,... URIs. Extract base64 content and mime type before template binding to prevent constructing invalid data:image/png;base64,data:image/png;base64,... URIs. - Parse data URIs in both new image_data and legacy content formats - Always provide mimeType fallback for historical records - Ensure normalized data format before template consumption
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/main/presenter/threadPresenter/index.ts(1 hunks)src/renderer/src/components/message/MessageBlockImage.vue(4 hunks)
🧰 Additional context used
📓 Path-based instructions (22)
src/renderer/src/**/*
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
Use scoped styles to prevent CSS conflicts between components
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/**/*.{vue,ts}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/**/*.{ts,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.Use Pinia for frontend state management (do not introduce alternative state libraries)
Files:
src/renderer/src/components/message/MessageBlockImage.vue
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
src/renderer/src/components/message/MessageBlockImage.vuesrc/main/presenter/threadPresenter/index.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)
Use PascalCase for TypeScript types and classes
Files:
src/renderer/src/components/message/MessageBlockImage.vuesrc/main/presenter/threadPresenter/index.ts
src/renderer/{src,shell,floating}/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/{src,shell,floating}/**/*.vue: Use Vue 3 Composition API for all components
All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Use Tailwind CSS utilities and ensure styles are scoped in Vue components
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/src/components/**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Organize UI components by feature within src/renderer/src/
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/src/**
📄 CodeRabbit inference engine (AGENTS.md)
Place Vue 3 app source under src/renderer/src (components, stores, views, i18n, lib)
Files:
src/renderer/src/components/message/MessageBlockImage.vue
src/renderer/src/**/*.{vue,ts}
📄 CodeRabbit inference engine (AGENTS.md)
All user-facing strings must use vue-i18n ($t/keys) rather than hardcoded literals
Files:
src/renderer/src/components/message/MessageBlockImage.vue
**/*.{ts,tsx,js,jsx,vue,css,scss,md,json,yml,yaml}
📄 CodeRabbit inference engine (AGENTS.md)
Prettier style: single quotes, no semicolons, print width 100; run pnpm run format
Files:
src/renderer/src/components/message/MessageBlockImage.vuesrc/main/presenter/threadPresenter/index.ts
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx,vue}: Use OxLint for JS/TS code; keep lint clean
Use camelCase for variables and functions
Use SCREAMING_SNAKE_CASE for constants
Files:
src/renderer/src/components/message/MessageBlockImage.vuesrc/main/presenter/threadPresenter/index.ts
src/renderer/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue component files in PascalCase (e.g., ChatInput.vue)
Files:
src/renderer/src/components/message/MessageBlockImage.vue
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写
Files:
src/main/presenter/threadPresenter/index.ts
src/{main,renderer}/**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)
src/{main,renderer}/**/*.ts: Use context isolation for improved security
Implement proper inter-process communication (IPC) patterns
Optimize application startup time with lazy loading
Implement proper error handling and logging for debugging
Files:
src/main/presenter/threadPresenter/index.ts
src/main/**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)
Use Electron's built-in APIs for file system and native dialogs
Files:
src/main/presenter/threadPresenter/index.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-logging.mdc)
**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别
Files:
src/main/presenter/threadPresenter/index.ts
src/main/**/*.{ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
主进程代码放在
src/main
Files:
src/main/presenter/threadPresenter/index.ts
src/main/presenter/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Place Electron main-process presenters under src/main/presenter/ (Window, Tab, Thread, Mcp, Config, LLMProvider)
Files:
src/main/presenter/threadPresenter/index.ts
🧠 Learnings (9)
📓 Common learnings
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-14T08:02:59.495Z
Learning: For UI changes, include BEFORE/AFTER ASCII layout blocks in PRs to communicate structure
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/llm-agent-loop.mdc:0-0
Timestamp: 2025-07-21T01:46:52.880Z
Learning: Applies to src/main/presenter/llmProviderPresenter/providers/*.ts : Provider implementations should yield image data events in the standardized format when applicable.
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Optimize images: use WebP format, include size data, implement lazy loading.
Applied to files:
src/renderer/src/components/message/MessageBlockImage.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Iconify/Vue for icon implementation.
Applied to files:
src/renderer/src/components/message/MessageBlockImage.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Import Icon component from Iconify/Vue.
Applied to files:
src/renderer/src/components/message/MessageBlockImage.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Leverage ref, reactive, and computed for reactive state management.
Applied to files:
src/renderer/src/components/message/MessageBlockImage.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use the Icon component with lucide icons.
Applied to files:
src/renderer/src/components/message/MessageBlockImage.vue
📚 Learning: 2025-07-21T01:46:52.880Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/llm-agent-loop.mdc:0-0
Timestamp: 2025-07-21T01:46:52.880Z
Learning: Applies to src/main/presenter/llmProviderPresenter/providers/*.ts : Provider implementations should yield image data events in the standardized format when applicable.
Applied to files:
src/main/presenter/threadPresenter/index.ts
📚 Learning: 2025-07-21T01:46:52.880Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/llm-agent-loop.mdc:0-0
Timestamp: 2025-07-21T01:46:52.880Z
Learning: Applies to src/main/presenter/llmProviderPresenter/providers/*.ts : All provider implementations must parse provider-specific data chunks and yield standardized events for text, reasoning, tool calls, usage, errors, stop reasons, and image data.
Applied to files:
src/main/presenter/threadPresenter/index.ts
📚 Learning: 2025-09-04T11:03:30.184Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/provider-guidelines.mdc:0-0
Timestamp: 2025-09-04T11:03:30.184Z
Learning: image_data events must include data (Base64) and mimeType; control single-frame size and frequency to avoid blocking
Applied to files:
src/main/presenter/threadPresenter/index.ts
🧬 Code graph analysis (1)
src/main/presenter/threadPresenter/index.ts (2)
src/shared/chat.d.ts (1)
AssistantMessageBlock(84-138)src/shared/types/core/chat.ts (1)
AssistantMessageBlock(48-95)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-check (x64)
| // Handle URLs (imgcache://, http://, https://) | ||
| if ( | ||
| rawData.startsWith('imgcache://') || | ||
| rawData.startsWith('http://') || | ||
| rawData.startsWith('https://') | ||
| ) { | ||
| normalizedMimeType = 'deepchat/image-url' | ||
| } | ||
| // Handle data URIs: extract base64 content and mime type | ||
| else if (rawData.startsWith('data:image/')) { | ||
| const match = rawData.match(/^data:([^;]+);base64,(.*)$/) | ||
| if (match?.[1] && match?.[2]) { | ||
| normalizedMimeType = match[1] | ||
| normalizedData = match[2] | ||
| } | ||
| } | ||
| // Fallback to image/png if no mime type is provided | ||
| else if (!normalizedMimeType) { | ||
| normalizedMimeType = 'image/png' | ||
| } | ||
|
|
||
| const normalizedImageData = { | ||
| data: normalizedData, | ||
| mimeType: normalizedMimeType | ||
| } |
There was a problem hiding this comment.
Fix data URI normalization edge cases.
The regex only matches data:mime;base64,... with no extra parameters. Providers often emit data:image/png;charset=utf-8;base64,..., so we fail to strip the header, fall back to image/png, and persist the entire data URI. The renderer then builds data:image/png;base64,data:image/png;charset=utf-8;base64,..., which ships a broken image. Please widen the match to tolerate additional ;param segments (and keep the real mime type) before falling back to the default.
- else if (rawData.startsWith('data:image/')) {
- const match = rawData.match(/^data:([^;]+);base64,(.*)$/)
+ else if (rawData.startsWith('data:image/')) {
+ const match = rawData.match(/^data:([^;,]+)(?:;[^,]+)*;base64,(.*)$/i)
if (match?.[1] && match?.[2]) {
normalizedMimeType = match[1]
normalizedData = match[2]
}
}That ensures any extra parameters (charset, name, etc.) are handled and the payload stays in the expected raw/base64 form.
🤖 Prompt for AI Agents
In src/main/presenter/threadPresenter/index.ts around lines 583 to 607, the data
URI handling only matches headers of the exact form data:mime;base64,... which
breaks when extra parameters like ;charset=utf-8 appear; update the parsing to
accept optional semicolon-separated parameters before the final ;base64 token,
capture the actual mime type (first part after data:) and the base64 payload
(everything after the final comma), and then set normalizedMimeType to that
captured mime type and normalizedData to the base64 content so the header is
stripped correctly and fallback logic is only used when no mime type can be
determined.
| const inferMimeType = (data: string, mimeType?: string): string => { | ||
| if (mimeType && mimeType.trim().length > 0) { | ||
| return mimeType | ||
| } | ||
|
|
||
| if (data.startsWith('imgcache://') || data.startsWith('http://') || data.startsWith('https://')) { | ||
| return 'deepchat/image-url' | ||
| } | ||
|
|
||
| if (data.startsWith('data:image/')) { | ||
| const match = data.match(/^data:([^;]+);base64,(.*)$/) | ||
| if (match?.[1]) { | ||
| return match[1] | ||
| } | ||
| } | ||
|
|
||
| return 'image/png' | ||
| } | ||
|
|
||
| const resolvedImageData = computed(() => { | ||
| // Handle new format with image_data field | ||
| if (props.block.image_data?.data) { | ||
| const rawData = props.block.image_data.data | ||
|
|
||
| // Handle URLs | ||
| if ( | ||
| rawData.startsWith('imgcache://') || | ||
| rawData.startsWith('http://') || | ||
| rawData.startsWith('https://') | ||
| ) { | ||
| return { | ||
| data: rawData, | ||
| mimeType: 'deepchat/image-url' | ||
| } | ||
| } | ||
|
|
||
| let normalizedData = rawData | ||
| let normalizedMimeType = inferMimeType(rawData, props.block.image_data.mimeType) | ||
|
|
||
| // Handle legacy data URIs that may still exist in persisted data | ||
| if (rawData.startsWith('data:image/')) { | ||
| const match = rawData.match(/^data:([^;]+);base64,(.*)$/) | ||
| if (match?.[1] && match?.[2]) { | ||
| normalizedMimeType = match[1] | ||
| normalizedData = match[2] | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| data: normalizedData, | ||
| mimeType: normalizedMimeType | ||
| } | ||
| } | ||
|
|
||
| // Handle legacy formats (for backward compatibility) | ||
| const content = props.block.content | ||
|
|
||
| if (content && typeof content === 'object' && 'data' in (content as LegacyImageBlockContent)) { | ||
| const legacyContent = content as LegacyImageBlockContent | ||
| if (legacyContent.data) { | ||
| const rawData = legacyContent.data | ||
|
|
||
| // Handle URLs | ||
| if ( | ||
| rawData.startsWith('imgcache://') || | ||
| rawData.startsWith('http://') || | ||
| rawData.startsWith('https://') | ||
| ) { | ||
| return { | ||
| data: rawData, | ||
| mimeType: 'deepchat/image-url' | ||
| } | ||
| } | ||
|
|
||
| let normalizedData = rawData | ||
| let normalizedMimeType = inferMimeType(rawData, legacyContent.mimeType) | ||
|
|
||
| // Handle data URIs | ||
| if (rawData.startsWith('data:image/')) { | ||
| const match = rawData.match(/^data:([^;]+);base64,(.*)$/) | ||
| if (match?.[1] && match?.[2]) { | ||
| normalizedMimeType = match[1] | ||
| normalizedData = match[2] | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| data: normalizedData, | ||
| mimeType: normalizedMimeType | ||
| } | ||
| } | ||
| } | ||
|
|
||
| if (typeof content === 'string' && content.length > 0) { | ||
| if (content.startsWith('data:image/')) { | ||
| const match = content.match(/^data:([^;]+);base64,(.*)$/) | ||
| if (match?.[1] && match?.[2]) { | ||
| return { | ||
| data: match[2], | ||
| mimeType: match[1] | ||
| } | ||
| } | ||
| } | ||
|
|
||
| if ( | ||
| content.startsWith('imgcache://') || | ||
| content.startsWith('http://') || | ||
| content.startsWith('https://') | ||
| ) { | ||
| return { | ||
| data: content, | ||
| mimeType: 'deepchat/image-url' | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| data: content, | ||
| mimeType: inferMimeType(content) | ||
| } | ||
| } | ||
|
|
||
| return null |
There was a problem hiding this comment.
Normalize legacy data URIs before rendering.
inferMimeType and the downstream matches still demand data:mime;base64,... with no extra parameters. When a legacy block contains data:image/png;charset=utf-8;base64,..., inferMimeType defaults to image/png and we return the untouched data URI. The template then renders data:image/png;base64,data:image/png;charset=utf-8;base64,..., so the image breaks. Please generalize both the mime-type extraction and the normalization regex so we always strip the header (while grabbing the real mime), even when optional parameters are present.
const inferMimeType = (data: string, mimeType?: string): string => {
if (mimeType && mimeType.trim().length > 0) {
return mimeType
}
if (data.startsWith('imgcache://') || data.startsWith('http://') || data.startsWith('https://')) {
return 'deepchat/image-url'
}
- if (data.startsWith('data:image/')) {
- const match = data.match(/^data:([^;]+);base64,(.*)$/)
- if (match?.[1]) {
- return match[1]
- }
- }
+ if (data.startsWith('data:image/')) {
+ const header = data.slice(5, data.indexOf(',')) ?? ''
+ const mime = header.split(';')[0]?.trim()
+ if (mime) {
+ return mime
+ }
+ }
return 'image/png'
}
…
- if (rawData.startsWith('data:image/')) {
- const match = rawData.match(/^data:([^;]+);base64,(.*)$/)
+ if (rawData.startsWith('data:image/')) {
+ const match = rawData.match(/^data:([^;,]+)(?:;[^,]+)*;base64,(.*)$/i)
if (match?.[1] && match?.[2]) {
normalizedMimeType = match[1]
normalizedData = match[2]
}
}Apply the same regex tweak in the legacy branches below so every data URI path uses the sanitized payload.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/renderer/src/components/message/MessageBlockImage.vue around lines 101 to
222, the data URI regex only matches headers without optional parameters,
causing duplicated headers when params like ;charset=utf-8 are present; update
the regex used in inferMimeType and in all data-URI normalization branches to
match optional parameters before ;base64 and capture the real mime and payload
(for example use a pattern that captures the mime-type as the first group and
the base64 payload as the second by allowing optional semicolon-prefixed params
before ;base64), then return the captured mime as the mimeType and replace the
data with the captured payload (ensure you apply this same regex change in
inferMimeType, the new image_data branch, the legacy content branch, and the
string content branch so every path strips the full header and keeps only the
base64 payload).
* Merge pull request #1079 from ThinkInAIXYZ/bugfix/refresh-model fix: custom provider add refresh-model * fix: add tool call context for better conv (#1081) * fix: update `tag_name` for release artifact urls (#1084) Signed-off-by: Rui Chen <rui@chenrui.dev> * refactor: standardize image block data structure (#1082) * refactor: standardize image block data structure with backward compatibility Normalize image_data structure in ThreadPresenter to ensure consistent mimeType handling. Update MessageBlockImage component to support legacy data formats (content as object/string/data URI) while maintaining compatibility with new image_data field. * fix: properly normalize image data URIs before persistence Extract base64 content and mime type from data URIs (data:image/jpeg;base64,...) to prevent double-encoding in renderer. This fixes image display errors where data:image/png;base64,data:image/jpeg;base64,... was being constructed. - Parse data URIs to extract real mime type and base64 content - Force URL schemes (http://, https://, imgcache://) to deepchat/image-url - Preserve provided mime types when available - Fallback to image/png only for raw base64 without metadata * fix: normalize legacy data URIs in renderer to prevent double-encoding Handle historical image_data records that may still contain full data:image/...;base64,... URIs. Extract base64 content and mime type before template binding to prevent constructing invalid data:image/png;base64,data:image/png;base64,... URIs. - Parse data URIs in both new image_data and legacy content formats - Always provide mimeType fallback for historical records - Ensure normalized data format before template consumption * feat: add request trace for llm (#1085) * feat: add trace support wip * feat: add trace dialog with monaco * feat: add i18n for trace dialog * feat: add config for trace params * fix: prevent stale previews when messageId changes * fix: toggle model config refresh (#1086) * release: 0.4.5 --------- Signed-off-by: Rui Chen <rui@chenrui.dev> Co-authored-by: Rui Chen <rui@chenrui.dev> Co-authored-by: 韦伟 <xweimvp@gmail.com>
2 participants
Normalize image_data structure in ThreadPresenter to ensure consistent mimeType handling. Update MessageBlockImage component to support legacy data formats (content as object/string/data URI) while maintaining compatibility with new image_data field.
Summary by CodeRabbit
Improvements
Breaking Changes
Tests