Merge pull request #593 from refly-ai/feat/optimize-skill-artifact-optimization

Feat/optimize skill artifact optimization

Author: pftom

packages/ai-workspace-common/src/components/canvas/index.tsx

@@ -821,7 +821,7 @@ const Flow = memo(({ canvasId }: { canvasId: string }) => {
             }}
             onScroll={(e) => updateIndicators(e.currentTarget)}
           >
-            <div className="relative h-full">
+            <div className="relative h-full overflow-y-hidden">
               <div className="flex gap-2 h-full">
                 {nodePreviews?.filter(Boolean)?.map((node) => (
                   <NodePreview key={node?.id} node={node} canvasId={canvasId} />

packages/ai-workspace-common/src/components/sider/layout.scss

@@ -0,0 +1,3 @@
+.ant-layout-sider {
+  border: 0;
+}

packages/ai-workspace-common/src/components/sider/layout.tsx

@@ -41,6 +41,8 @@ import { useCanvasTemplateModal } from '@refly-packages/ai-workspace-common/stor
 import { subscriptionEnabled } from '@refly-packages/ai-workspace-common/utils/env';
 import { CanvasTemplateModal } from '@refly-packages/ai-workspace-common/components/canvas-template';
 import { SiderLoggedOut } from './sider-logged-out';
+import './layout.scss';
+
 const Sider = Layout.Sider;
 const MenuItem = Menu.Item;
 const SubMenu = Menu.SubMenu;

packages/skill-template/src/scheduler/module/common/format.ts

@@ -12,8 +12,10 @@ export const buildFormatDisplayInstruction = () => {
      - Keep content well-structured
      - Ensure consistent indentation
      - Follow heading level hierarchy strictly
+     - Always specify language identifiers in code blocks (e.g. \`\`\`js, \`\`\`ts, \`\`\`svg, \`\`\`mermaid)
 
    3. Mermaid Diagram Rules:
+     - Use \`\`\`mermaid code block for all Mermaid diagrams
      - Mermaid renderer version is 10.9.0, please follow this version's syntax.
   `;
 };
@@ -30,10 +32,10 @@ export const buildVisualExamplesInstruction = () => {
 
   ### Visual Examples Generation Guidelines:
   1. Types of Visual Content to Generate:
-     - SVG: Use for simple illustrations, icons, charts, and diagrams
-     - HTML (with Tailwind CSS): Use for interactive UI components and layouts
-     - Mermaid: Use for flowcharts, sequence diagrams, entity relationships, etc.
-     - React Components: Use for more complex interactive examples
+     - SVG: Use \`\`\`svg blocks for simple illustrations, icons, charts, and diagrams
+     - HTML: Use \`\`\`html blocks for interactive UI components and layouts with Tailwind CSS
+     - Mermaid: Use \`\`\`mermaid blocks for flowcharts, sequence diagrams, entity relationships, etc.
+     - React Components: Use \`\`\`tsx or \`\`\`jsx blocks for more complex interactive examples
 
   2. When to Generate Visual Content:
      - Explanations of complex concepts that benefit from visualization
@@ -48,5 +50,6 @@ export const buildVisualExamplesInstruction = () => {
      - Include variations that address different use cases
      - Combine different visualization types when they complement each other
      - Ensure each example has clear explanatory text
+     - Always use appropriate language identifiers in code blocks
   `;
 };