Skip to content

Conversation

@Simon-He95
Copy link
Collaborator

@Simon-He95 Simon-He95 commented Oct 21, 2025

Summary by CodeRabbit

  • Chores
    • Updated dependencies to improve code editor and markdown rendering capabilities.
    • Switched code editor library integration for enhanced functionality.
    • Bumped markdown renderer library to latest beta version for improved compatibility.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 21, 2025

Walkthrough

The pull request migrates Monaco editor integration from vue-use-monaco to stream-monaco across package dependencies and component imports. The vue-renderer-markdown dependency is bumped to version 0.0.58-beta.7, and a new getUseMonaco() initialization call is introduced in the MarkdownRenderer component.

Changes

Cohort / File(s) Summary
Dependency updates
package.json
Replaced vue-use-monaco with stream-monaco in both dependencies and devDependencies; bumped vue-renderer-markdown from 0.0.58-beta.5 to 0.0.58-beta.7.
Monaco integration refactoring
src/renderer/src/components/artifacts/CodeArtifact.vue, src/renderer/src/composables/useArtifactCodeEditor.ts
Updated import sources from vue-use-monaco to stream-monaco for useMonaco and detectLanguage exports; function usage and signatures unchanged.
Markdown renderer enhancement
src/renderer/src/components/markdown/MarkdownRenderer.vue
Added import of getUseMonaco from vue-renderer-markdown and invoked getUseMonaco() during component setup to initialize Monaco integration before worker initialization.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

  • #732 — Modifies Monaco integration via package dependency and import updates for useMonaco/detectLanguage.
  • #943 — Updates package.json dependencies for vue-renderer-markdown and vue-use-monaco.
  • #896 — Upgrades Monaco-related dependencies and modifies vue-renderer-markdown integration.

Suggested reviewers

  • zerob13
  • yyhhyyyyyy

Poem

🐰 A hop through Monaco's verdant streams,
From old vines to fresh, our editor dreams,
Stream-monaco flows where use once lay,
Renderers bloom with beta's new way,
Init calls echo—code shines bright today!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The PR title "perf: update dependencies to use stream-monaco and bump vue-renderer-markdown version" accurately reflects the main changes in the changeset. The title identifies the two primary modifications: replacing vue-use-monaco with stream-monaco as a dependency (reflected in package.json updates and component imports across CodeArtifact.vue and useArtifactCodeEditor.ts) and bumping the vue-renderer-markdown version from 0.0.58-beta.5 to 0.0.58-beta.7 (shown in package.json). The title is concise, specific, and free of vague language, clearly conveying the intent of the pull request to a developer scanning the commit history.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
src/renderer/src/components/artifacts/CodeArtifact.vue (1)

48-48: Ensure stream-monaco API compatibility.

This import change mirrors the migration in useArtifactCodeEditor.ts. The same verification applies: confirm that stream-monaco exports detectLanguage and useMonaco with compatible APIs.

🧹 Nitpick comments (1)
src/renderer/src/components/markdown/MarkdownRenderer.vue (1)

30-30: Add error handling for Monaco initialization.

getUseMonaco() is called at the top level without error handling. If initialization fails, it could break the entire component setup.

Consider wrapping the call in a try-catch block:

-getUseMonaco()
+try {
+  getUseMonaco()
+} catch (error) {
+  console.error('Failed to initialize Monaco:', error)
+}
 setKaTeXWorker(new KatexWorker())
 setMermaidWorker(new MermaidWorker())

Based on coding guidelines: "始终使用 try-catch 处理可能的错误" and "提供有意义的错误信息".

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c796f1f and 86867f8.

📒 Files selected for processing (4)
  • package.json (2 hunks)
  • src/renderer/src/components/artifacts/CodeArtifact.vue (1 hunks)
  • src/renderer/src/components/markdown/MarkdownRenderer.vue (2 hunks)
  • src/renderer/src/composables/useArtifactCodeEditor.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (19)
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/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

渲染进程代码放在 src/renderer

Files:

  • src/renderer/src/components/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.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/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.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/artifacts/CodeArtifact.vue
  • src/renderer/src/components/markdown/MarkdownRenderer.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/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.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/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.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/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.vue
**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for all logs and comments

Files:

  • src/renderer/src/components/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.vue
**/*.{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/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.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/artifacts/CodeArtifact.vue
  • src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/src/components/**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Organize UI components by feature within src/renderer/src/

Files:

  • src/renderer/src/components/artifacts/CodeArtifact.vue
  • src/renderer/src/components/markdown/MarkdownRenderer.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/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.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/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.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/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.vue
  • package.json
**/*.{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/artifacts/CodeArtifact.vue
  • src/renderer/src/composables/useArtifactCodeEditor.ts
  • src/renderer/src/components/markdown/MarkdownRenderer.vue
src/renderer/**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

Name Vue component files in PascalCase (e.g., ChatInput.vue)

Files:

  • src/renderer/src/components/artifacts/CodeArtifact.vue
  • src/renderer/src/components/markdown/MarkdownRenderer.vue
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)

**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写

Files:

  • src/renderer/src/composables/useArtifactCodeEditor.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/renderer/src/composables/useArtifactCodeEditor.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/error-logging.mdc)

**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪(如适用)、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别

Files:

  • src/renderer/src/composables/useArtifactCodeEditor.ts
🧠 Learnings (3)
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/{composables,utils}/**/*.ts : Use VueUse for common composables and utility functions.

Applied to files:

  • src/renderer/src/composables/useArtifactCodeEditor.ts
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#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/composables/useArtifactCodeEditor.ts
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Shadcn Vue, Radix Vue, and Tailwind for components and styling.

Applied to files:

  • package.json
⏰ 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)
🔇 Additional comments (3)
package.json (2)

154-154: Move stream-monaco to dependencies section.

stream-monaco is imported in production renderer code but incorrectly listed in devDependencies:

  • src/renderer/src/components/artifacts/CodeArtifact.vue (line 48)
  • src/renderer/src/composables/useArtifactCodeEditor.ts (line 9)

Move it to the dependencies section:

   "dependencies": {
     "@anthropic-ai/sdk": "^0.53.0",
+    "stream-monaco": "^0.0.2",
     ...
   },
   "devDependencies": {
     ...
-    "stream-monaco": "^0.0.2",
     ...
   }

Likely an incorrect or invalid review comment.


171-171: Consider whether beta version is necessary or if stable 0.0.57 is preferred.

The getUseMonaco() export in version 0.0.58-beta.7 is confirmed and documented—it preloads Monaco editor workers for editable code blocks. However, this is a beta release; stable version 0.0.57 is available. Evaluate whether the beta version is needed or if the stable release better suits your project's stability requirements.

src/renderer/src/components/markdown/MarkdownRenderer.vue (1)

20-22: Verification of getUseMonaco API could not be conclusively confirmed.

The code in MarkdownRenderer.vue does import and call getUseMonaco() from vue-renderer-markdown@0.0.58-beta.7 (lines 20-22, line 28). However, web search found no public documentation for this API—sources indicate vue-renderer-markdown integrates Monaco through the separate vue-use-monaco package with different API names (useMonaco / useMonacoEditor).

The import exists in the codebase, suggesting the API may be valid in this beta version, but documentation could not be verified externally. Ensure this build succeeds and test Monaco functionality before merging.


// === Composables ===
import { useMonaco, detectLanguage } from 'vue-use-monaco'
import { useMonaco, detectLanguage } from 'stream-monaco'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify API compatibility with stream-monaco.

The import source has changed from vue-use-monaco to stream-monaco. Ensure that stream-monaco exports useMonaco and detectLanguage with identical signatures and behavior.


🏁 Script executed:

#!/bin/bash
# Search for stream-monaco usage patterns and type definitions
rg -n --type=ts -C3 'from ["\x27]stream-monaco["\x27]'

# Check if stream-monaco has TypeScript definitions
fd -e d.ts -e ts --full-path stream-monaco node_modules 2>/dev/null | head -20

Length of output: 576






🏁 Script executed:

#!/bin/bash
# Check package.json for stream-monaco and vue-use-monaco
echo "=== Checking package.json dependencies ==="
cat package.json | grep -A 50 '"dependencies"' | grep -E '(stream-monaco|vue-use-monaco)' || echo "Not found in dependencies"

echo -e "\n=== Checking package.json devDependencies ==="
cat package.json | grep -A 50 '"devDependencies"' | grep -E '(stream-monaco|vue-use-monaco)' || echo "Not found in devDependencies"

# Check actual usage of these functions in the composables file
echo -e "\n=== Usage of useMonaco and detectLanguage in the file ==="
rg -n --type=ts '(useMonaco|detectLanguage)' src/renderer/src/composables/useArtifactCodeEditor.ts

# Search for any remaining vue-use-monaco references
echo -e "\n=== Searching for any remaining vue-use-monaco references ==="
rg -n 'vue-use-monaco' src/renderer/src/ || echo "No vue-use-monaco references found"

Length of output: 499


🏁 Script executed:

#!/bin/bash
# Since node_modules may not be available, let's check what stream-monaco is
# This is a sanity check to see if the package exists
echo "Checking if stream-monaco exists as an npm package..."
# We cannot directly query npm in the sandbox, so we'll note this for web search
echo "Note: Need to verify stream-monaco package details via web search"

Length of output: 119


🌐 Web query:

stream-monaco npm package useMonaco detectLanguage exports

💡 Result:

I can't find a package named "stream-monaco" on npm or GitHub. Do you mean a different package (for example use-monaco, @monaco-editor/react, or a Stream (GetStream.io) package that integrates Monaco)? If you share the exact npm package name or a link, I can look up the exports (useMonaco, detectLanguage) and show their signatures.


🏁 Script executed:

#!/bin/bash
# Check for any monaco-related packages in package.json
echo "=== Checking for all monaco-related packages in package.json ==="
grep -i monaco package.json

echo -e "\n=== Checking all dependencies and devDependencies ==="
cat package.json | grep -A 100 '"dependencies"' | head -40

echo -e "\n=== Checking for use-monaco or @monaco-editor references in code ==="
rg -n 'use-monaco|@monaco-editor|monaco-editor' src/renderer/src/composables/useArtifactCodeEditor.ts

# Check if there are other monaco imports in the codebase
echo -e "\n=== All monaco-related imports in src/renderer ==="
rg -n 'from.*monaco' src/renderer/src/

Length of output: 1840



---

🌐 Web query:

```web
stream-monaco 0.0.2 package npm

💡 Result:

I couldn't find a package named "stream-monaco" (any version) on the public npm registry. To verify locally, run:

  • npm view stream-monaco versions
  • npm info stream-monaco@0.0.2

(If the package doesn't exist you'll get a 404 / "not in the npm registry" error). See npm CLI docs for npm view/info usage. [1]

Sources:

  • npm CLI docs — npm view / info. [1]

🏁 Script executed:

#!/bin/bash
# Check the exact format of stream-monaco declaration in package.json
echo "=== Exact stream-monaco declaration in package.json ==="
grep -A 1 -B 1 'stream-monaco' package.json

# Check if there's any mention of stream-monaco elsewhere (README, build config, etc)
echo -e "\n=== Searching for stream-monaco references in repo ==="
rg -n 'stream-monaco' . -t json -t md -t js -t ts --max-count=5

# Check if there's a GitHub packages or private registry configured
echo -e "\n=== Checking for .npmrc or pnpm config ==="
cat .npmrc 2>/dev/null || echo ".npmrc not found"
cat pnpm-workspace.yaml 2>/dev/null || echo "pnpm-workspace.yaml not found"

Length of output: 619


Remove invalid dependency and restore functional package.

The import has been changed to stream-monaco, which does not exist on the npm public registry. The package.json declares it as "stream-monaco": "^0.0.2", but this version (and no other version) exists publicly. This will cause a module resolution failure at runtime.

Either restore vue-use-monaco or identify and use the correct replacement package in:

  • package.json (line 154)
  • src/renderer/src/composables/useArtifactCodeEditor.ts (line 9)
  • src/renderer/src/components/artifacts/CodeArtifact.vue (line 48)
🤖 Prompt for AI Agents
In src/renderer/src/composables/useArtifactCodeEditor.ts around line 9, the
import was changed to a non-existent package "stream-monaco"; replace it with
the correct package (restore "vue-use-monaco" or the confirmed replacement) and
update the same import in src/renderer/src/components/artifacts/CodeArtifact.vue
(around line 48) so both files import from the valid module; also update
package.json (around line 154) to declare the matching, published package
version (remove the invalid "stream-monaco" entry and add the correct package
and version) so module resolution succeeds at runtime.

@zerob13 zerob13 merged commit f7527c1 into ThinkInAIXYZ:dev Oct 22, 2025
2 checks passed
zerob13 added a commit that referenced this pull request Oct 22, 2025
* style(settings): format about page link handler (#1016)

* style(ollama): format model config handlers (#1018)

* fix: think content scroll issue (#1023)

* fix: remove shimmer for think content

* chore: update screen shot and fix scroll issue

* chore: update markdown renderer

* fix: import button bug and prevent backup overwriting during import (#1024)

* fix(sync): fix import button bug and prevent backup overwriting during import

* fix(sync): fix import button bug and prevent backup overwriting during import

* fix(sync): fix import button bug and prevent backup overwriting during import

* refactor(messageList): refactor message list ui components (#1026)

* feat: remove new thread button, add clean button.

* refactor(messageList): refactor message list ui components

* feat: add configurable fields for chat settings

- Introduced ConfigFieldHeader component for consistent field headers.
- Added ConfigInputField, ConfigSelectField, ConfigSliderField, and ConfigSwitchField components for various input types.
- Created types for field configurations in types.ts to standardize field definitions.
- Implemented useChatConfigFields composable to manage field configurations dynamically.
- Added useModelCapabilities and useModelTypeDetection composables for handling model-specific capabilities and requirements.
- Developed useSearchConfig and useThinkingBudget composables for managing search and budget configurations.

* feat: implement input history management in prompt input

- Added `useInputHistory` composable for managing input history and navigation.
- Implemented methods for setting, clearing, and confirming history placeholders.
- Integrated arrow key navigation for browsing through input history.

feat: enhance mention data handling in prompt input

- Created `useMentionData` composable to aggregate mention data from selected files and MCP resources.
- Implemented watchers to update mention data based on selected files, MCP resources, tools, and prompts.

feat: manage prompt input configuration with store synchronization

- Developed `usePromptInputConfig` composable for managing model configuration.
- Implemented bidirectional sync between local config and chat store.
- Added debounced watcher to reduce updates and improve performance.

feat: streamline TipTap editor operations in prompt input

- Introduced `usePromptInputEditor` composable for managing TipTap editor lifecycle and content transformation.
- Implemented methods for handling mentions, pasting content, and clearing editor content.

feat: handle file operations in prompt input

- Created `usePromptInputFiles` composable for managing file selection, paste, and drag-drop operations.
- Implemented methods for processing files, handling dropped files, and clearing selected files.

feat: manage rate limit status in prompt input

- Developed `useRateLimitStatus` composable for displaying and polling rate limit status.
- Implemented methods for handling rate limit events and computing status icons, classes, and tooltips.

* refactor(artifacts): migrate component logic to composables and update documentation

- Refactor ArtifactDialog.vue to use composables for view mode, viewport size, code editor, and export functionality
- Simplify HTMLArtifact.vue by removing drag-resize logic and using fixed viewport dimensions
- Clean up MermaidArtifact.vue styling and structure
- Update component refactoring guide to reflect new patterns and best practices
- Adjust prompt input composable to allow delayed editor initialization
- Update internationalization files for new responsive label

* fix(lint): unused variables

* fix(format): format code

* CodeRabbit Generated Unit Tests: Add renderer unit tests for components and composables

* feat: implement input history management in chat input component

- Added `useInputHistory` composable for managing input history and placeholder navigation.
- Implemented methods for setting, clearing, and confirming history placeholders.
- Integrated arrow key navigation for cycling through input history.

feat: enhance mention data handling in chat input

- Created `useMentionData` composable to manage mention data aggregation.
- Implemented watchers for selected files and MCP resources/tools/prompts to update mention data.

feat: manage prompt input configuration and synchronization

- Developed `usePromptInputConfig` composable for managing model configuration.
- Implemented bidirectional sync between local config refs and chat store.
- Added debounced watcher to reduce updates to the store.

feat: manage prompt input editor operations

- Introduced `usePromptInputEditor` composable for handling TipTap editor operations.
- Implemented content transformation, mention insertion, and paste handling.
- Added methods for handling editor updates and restoring focus.

feat: handle prompt input files management

- Created `usePromptInputFiles` composable for managing file operations in prompt input.
- Implemented file selection, paste, drag-drop, and prompt files integration.

feat: implement rate limit status management

- Developed `useRateLimitStatus` composable for managing rate limit status display and polling.
- Added methods for retrieving rate limit status icon, class, tooltip, and wait time formatting.

* feat: enhance chat input component with context length management and settings integration

* feat: update model configuration and enhance error handling in providers

* feat: add MCP tools list component and integrate with chat settings
feat: enhance artifact dialog with improved error handling and localization
fix: update Mermaid artifact rendering error handling and localization
fix: improve input settings error handling and state management
fix: update drag and drop composable to handle drag events correctly
fix: update Vitest configuration for better project structure and alias resolution

* fix(i18n): add unknownError translation

---------

Co-authored-by: deepinsect <deepinsect@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* feat: add Poe provider integration and icon support  (#1028)

* feat: add Poe provider integration and icon support

* chore: format and lint

---------

Co-authored-by: zerob13 <zerob13@gmail.com>

* fix: make auto scroll works (#1030)

* fix: allow settings window links to open externally (#1029)

* fix(settings): allow target blank links

* fix: harden settings window link handling

* feat: enhance GitHub Copilot Device Flow with OAuth token management and API token retrieval (#1021)

* feat: enhance GitHub Copilot Device Flow with OAuth token management and API token retrieval

- Fixed request header for managing OAuth tokens and retrieving API tokens.
- Enhanced model definitions and added new models for better compatibility.

* fix: remove privacy related log

* fix: OAuth 2.0 for slow_down response

* fix: handle lint errors

* fix: provider fetched from publicdb

* fix(githubCopilotProvider): update request body logging format for clarity

* fix(githubCopilotProvider): improve error handling and logging in device flow

* feat(theme): fix message paragraph gap and toolcall block (#1031)

Co-authored-by: deepinsect <deepinsect@github.com>

* fix: scroll to bottom (#1034)

* fix: add debounce for renderer

* feat: add max wait for renderer

* chore(deps): upgrade markdown renderer add worker support

* chore: bump markdown version

* fix(build): use es module worker format (#1037)

* feat: remove function deleteOllamaModel (#1036)

* feat: remove function deleteOllamaModel

* fix(build): use es module worker format (#1037)

---------

Co-authored-by: duskzhen <zerob13@gmail.com>

* perf: update dependencies to use stream-monaco and bump vue-renderer-markdown version (#1038)

* feat(theme): add markdown layout style and table style (#1039)

* feat(theme): add markdown layout style and table style

* fix(lint): remove props

---------

Co-authored-by: deepinsect <deepinsect@github.com>

* feat: support effort and verbosity (#1040)

* chore: bump up version

* feat: add jiekou.ai as LLM provider (#1041)

* feat: add jiekou.ai as LLM provider

* fix: change api type to jiekou

---------

Co-authored-by: zerob13 <zerob13@gmail.com>

* chore: update provider db

---------

Co-authored-by: 韦伟 <xweimvp@gmail.com>
Co-authored-by: Happer <ericted8810us@gmail.com>
Co-authored-by: deepinsect <deepinsect@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: cp90 <153345481+cp90-pixel@users.noreply.github.com>
Co-authored-by: Cedric <14017092+douyixuan@users.noreply.github.com>
Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com>
Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Co-authored-by: cnJasonZ <gbdzxalbb@qq.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants