crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/chat/MCPTools.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useMemo, useState } from 'react';
+import { classNames } from '~/utils/classNames';
+import { Dialog, DialogRoot, DialogClose, DialogTitle, DialogButton } from '~/components/ui/Dialog';
+import { IconButton } from '~/components/ui/IconButton';
+import { useMCPStore } from '~/lib/stores/mcp';
+import McpServerList from '~/components/@settings/tabs/mcp/McpServerList';
+
+export function McpTools() {
+  const isInitialized = useMCPStore((state) => state.isInitialized);
+  const serverTools = useMCPStore((state) => state.serverTools);
+  const initialize = useMCPStore((state) => state.initialize);
+  const checkServersAvailabilities = useMCPStore((state) => state.checkServersAvailabilities);
+
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isCheckingServers, setIsCheckingServers] = useState(false);
+  const [expandedServer, setExpandedServer] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isInitialized) {
+      initialize();
+    }
+  }, [isInitialized]);
+
+  const checkServerAvailability = async () => {
+    setIsCheckingServers(true);
+    setError(null);
+
+    try {
+      await checkServersAvailabilities();
+    } catch (e) {
+      setError(`Failed to check server availability: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setIsCheckingServers(false);
+    }
+  };
+
+  const toggleServerExpanded = (serverName: string) => {
+    setExpandedServer(expandedServer === serverName ? null : serverName);
+  };
+
+  const handleDialogOpen = (open: boolean) => {
+    setIsDialogOpen(open);
+  };
+
+  const serverEntries = useMemo(() => Object.entries(serverTools), [serverTools]);
+
+  return (
+    <div className="relative">
+      <div className="flex">
+        <IconButton
+          onClick={() => setIsDialogOpen(!isDialogOpen)}
+          title="MCP Tools Available"
+          disabled={!isInitialized}
+          className="transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {!isInitialized ? (
+            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
+          ) : (
+            <div className="i-bolt:mcp text-xl"></div>
+          )}
+        </IconButton>
+      </div>
+
+      <DialogRoot open={isDialogOpen} onOpenChange={handleDialogOpen}>
+        {isDialogOpen && (
+          <Dialog className="max-w-4xl w-full p-6">
+            <div className="space-y-4 max-h-[80vh] overflow-y-auto pr-2">
+              <DialogTitle>
+                <div className="i-bolt:mcp text-xl"></div>
+                MCP tools
+              </DialogTitle>
+
+              <div className="space-y-4">
+                <div>
+                  <div className="flex justify-end items-center mb-2">
+                    <button
+                      onClick={checkServerAvailability}
+                      disabled={isCheckingServers || serverEntries.length === 0}
+                      className={classNames(
+                        'px-3 py-1.5 rounded-lg text-sm',
+                        'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
+                        'text-bolt-elements-textPrimary',
+                        'transition-all duration-200',
+                        'flex items-center gap-2',
+                        'disabled:opacity-50 disabled:cursor-not-allowed',
+                      )}
+                    >
+                      {isCheckingServers ? (
+                        <div className="i-svg-spinners:90-ring-with-bg w-3 h-3 text-bolt-elements-loader-progress animate-spin" />
+                      ) : (
+                        <div className="i-ph:arrow-counter-clockwise w-3 h-3" />
+                      )}
+                      Check availability
+                    </button>
+                  </div>
+                  {serverEntries.length > 0 ? (
+                    <McpServerList
+                      checkingServers={isCheckingServers}
+                      expandedServer={expandedServer}
+                      serverEntries={serverEntries}
+                      onlyShowAvailableServers={true}
+                      toggleServerExpanded={toggleServerExpanded}
+                    />
+                  ) : (
+                    <div className="py-4 text-center text-bolt-elements-textSecondary">
+                      <p>No MCP servers configured</p>
+                      <p className="text-xs mt-1">Configure servers in Settings → MCP Servers</p>
+                    </div>
+                  )}
+                </div>
+
+                <div>{error && <p className="mt-2 text-sm text-bolt-elements-icon-error">{error}</p>}</div>
+              </div>
+
+              <div className="flex justify-end gap-2 mt-6">
+                <div className="flex gap-2">
+                  <DialogClose asChild>
+                    <DialogButton type="secondary">Close</DialogButton>
+                  </DialogClose>
+                </div>
+              </div>
+            </div>
+          </Dialog>
+        )}
+      </DialogRoot>
+    </div>
+  );
+}

tools/bolt.diy/app/components/chat/Markdown.module.scss

@@ -0,0 +1,171 @@
+$font-mono: ui-monospace, 'Fira Code', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+$code-font-size: 13px;
+
+@mixin not-inside-actions {
+  &:not(:has(:global(.actions)), :global(.actions *)) {
+    @content;
+  }
+}
+
+.MarkdownContent {
+  line-height: 1.6;
+  color: var(--bolt-elements-textPrimary);
+
+  > *:not(:last-child) {
+    margin-block-end: 16px;
+  }
+
+  :global(.artifact) {
+    margin: 1.5em 0;
+  }
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    @include not-inside-actions {
+      margin-block-start: 24px;
+      margin-block-end: 16px;
+      font-weight: 600;
+      line-height: 1.25;
+      color: var(--bolt-elements-textPrimary);
+    }
+  }
+
+  h1 {
+    font-size: 2em;
+    border-bottom: 1px solid var(--bolt-elements-borderColor);
+    padding-bottom: 0.3em;
+  }
+
+  h2 {
+    font-size: 1.5em;
+    border-bottom: 1px solid var(--bolt-elements-borderColor);
+    padding-bottom: 0.3em;
+  }
+
+  h3 {
+    font-size: 1.25em;
+  }
+
+  h4 {
+    font-size: 1em;
+  }
+
+  h5 {
+    font-size: 0.875em;
+  }
+
+  h6 {
+    font-size: 0.85em;
+    color: #6a737d;
+  }
+
+  p {
+    white-space: pre-wrap;
+
+    &:not(:last-of-type) {
+      margin-block-start: 0;
+      margin-block-end: 16px;
+    }
+  }
+
+  a {
+    color: var(--bolt-elements-messages-linkColor);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  :not(pre) > code {
+    font-family: $font-mono;
+    font-size: $code-font-size;
+
+    @include not-inside-actions {
+      border-radius: 6px;
+      padding: 0.2em 0.4em;
+      background-color: var(--bolt-elements-messages-inlineCode-background);
+      color: var(--bolt-elements-messages-inlineCode-text);
+    }
+  }
+
+  pre {
+    padding: 20px 16px;
+    border-radius: 6px;
+  }
+
+  pre:has(> code) {
+    font-family: $font-mono;
+    font-size: $code-font-size;
+    background: transparent;
+    overflow-x: auto;
+    min-width: 0;
+  }
+
+  blockquote {
+    margin: 0;
+    padding: 0 1em;
+    color: var(--bolt-elements-textTertiary);
+    border-left: 0.25em solid var(--bolt-elements-borderColor);
+  }
+
+  :is(ul, ol) {
+    @include not-inside-actions {
+      padding-left: 2em;
+      margin-block-start: 0;
+      margin-block-end: 16px;
+    }
+  }
+
+  ul {
+    @include not-inside-actions {
+      list-style-type: disc;
+    }
+  }
+
+  ol {
+    @include not-inside-actions {
+      list-style-type: decimal;
+    }
+  }
+
+  li {
+    @include not-inside-actions {
+      & + li {
+        margin-block-start: 8px;
+      }
+
+      > *:not(:last-child) {
+        margin-block-end: 16px;
+      }
+    }
+  }
+
+  img {
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  hr {
+    height: 0.25em;
+    padding: 0;
+    margin: 24px 0;
+    background-color: var(--bolt-elements-borderColor);
+    border: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-block-end: 16px;
+
+    :is(th, td) {
+      padding: 6px 13px;
+      border: 1px solid #dfe2e5;
+    }
+
+    tr:nth-child(2n) {
+      background-color: #f6f8fa;
+    }
+  }
+}

tools/bolt.diy/app/components/chat/Markdown.spec.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { stripCodeFenceFromArtifact } from './Markdown';
+
+describe('stripCodeFenceFromArtifact', () => {
+  it('should remove code fences around artifact element', () => {
+    const input = "```xml\n<div class='__boltArtifact__'></div>\n```";
+    const expected = "\n<div class='__boltArtifact__'></div>\n";
+    expect(stripCodeFenceFromArtifact(input)).toBe(expected);
+  });
+
+  it('should handle code fence with language specification', () => {
+    const input = "```typescript\n<div class='__boltArtifact__'></div>\n```";
+    const expected = "\n<div class='__boltArtifact__'></div>\n";
+    expect(stripCodeFenceFromArtifact(input)).toBe(expected);
+  });
+
+  it('should not modify content without artifacts', () => {
+    const input = '```\nregular code block\n```';
+    expect(stripCodeFenceFromArtifact(input)).toBe(input);
+  });
+
+  it('should handle empty input', () => {
+    expect(stripCodeFenceFromArtifact('')).toBe('');
+  });
+
+  it('should handle artifact without code fences', () => {
+    const input = "<div class='__boltArtifact__'></div>";
+    expect(stripCodeFenceFromArtifact(input)).toBe(input);
+  });
+
+  it('should handle multiple artifacts but only remove fences around them', () => {
+    const input = [
+      'Some text',
+      '```typescript',
+      "<div class='__boltArtifact__'></div>",
+      '```',
+      '```',
+      'regular code',
+      '```',
+    ].join('\n');
+
+    const expected = ['Some text', '', "<div class='__boltArtifact__'></div>", '', '```', 'regular code', '```'].join(
+      '\n',
+    );
+
+    expect(stripCodeFenceFromArtifact(input)).toBe(expected);
+  });
+});

tools/bolt.diy/app/components/chat/Markdown.tsx

@@ -0,0 +1,252 @@
+import { memo, useMemo } from 'react';
+import ReactMarkdown, { type Components } from 'react-markdown';
+import type { BundledLanguage } from 'shiki';
+import { createScopedLogger } from '~/utils/logger';
+import { rehypePlugins, remarkPlugins, allowedHTMLElements } from '~/utils/markdown';
+import { Artifact, openArtifactInWorkbench } from './Artifact';
+import { CodeBlock } from './CodeBlock';
+import type { Message } from 'ai';
+import styles from './Markdown.module.scss';
+import ThoughtBox from './ThoughtBox';
+import type { ProviderInfo } from '~/types/model';
+
+const logger = createScopedLogger('MarkdownComponent');
+
+interface MarkdownProps {
+  children: string;
+  html?: boolean;
+  limitedMarkdown?: boolean;
+  append?: (message: Message) => void;
+  chatMode?: 'discuss' | 'build';
+  setChatMode?: (mode: 'discuss' | 'build') => void;
+  model?: string;
+  provider?: ProviderInfo;
+}
+
+export const Markdown = memo(
+  ({ children, html = false, limitedMarkdown = false, append, setChatMode, model, provider }: MarkdownProps) => {
+    logger.trace('Render');
+
+    const components = useMemo(() => {
+      return {
+        div: ({ className, children, node, ...props }) => {
+          const dataProps = node?.properties as Record<string, unknown>;
+
+          if (className?.includes('__boltArtifact__')) {
+            const messageId = node?.properties.dataMessageId as string;
+            const artifactId = node?.properties.dataArtifactId as string;
+
+            if (!messageId) {
+              logger.error(`Invalid message id ${messageId}`);
+            }
+
+            if (!artifactId) {
+              logger.error(`Invalid artifact id ${artifactId}`);
+            }
+
+            return <Artifact messageId={messageId} artifactId={artifactId} />;
+          }
+
+          if (className?.includes('__boltSelectedElement__')) {
+            const messageId = node?.properties.dataMessageId as string;
+            const elementDataAttr = node?.properties.dataElement as string;
+
+            // Parse the element data if it exists
+            let elementData: any = null;
+
+            if (elementDataAttr) {
+              try {
+                elementData = JSON.parse(elementDataAttr);
+              } catch (e) {
+                console.error('Failed to parse element data:', e);
+              }
+            }
+
+            if (!messageId) {
+              logger.error(`Invalid message id ${messageId}`);
+            }
+
+            return (
+              <div className="bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor rounded-lg p-3 my-2">
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-xs font-mono bg-bolt-elements-background-depth-2 px-2 py-1 rounded text-bolt-elements-textTer">
+                    {elementData?.tagName}
+                  </span>
+                  {elementData?.className && (
+                    <span className="text-xs text-bolt-elements-textSecondary">.{elementData.className}</span>
+                  )}
+                </div>
+                <code className="block text-sm !text-bolt-elements-textSecondary !bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor p-2 rounded">
+                  {elementData?.displayText}
+                </code>
+              </div>
+            );
+          }
+
+          if (className?.includes('__boltThought__')) {
+            return <ThoughtBox title="Thought process">{children}</ThoughtBox>;
+          }
+
+          if (className?.includes('__boltQuickAction__') || dataProps?.dataBoltQuickAction) {
+            return <div className="flex items-center gap-2 flex-wrap mt-3.5">{children}</div>;
+          }
+
+          return (
+            <div className={className} {...props}>
+              {children}
+            </div>
+          );
+        },
+        pre: (props) => {
+          const { children, node, ...rest } = props;
+
+          const [firstChild] = node?.children ?? [];
+
+          if (
+            firstChild &&
+            firstChild.type === 'element' &&
+            firstChild.tagName === 'code' &&
+            firstChild.children[0].type === 'text'
+          ) {
+            const { className, ...rest } = firstChild.properties;
+            const [, language = 'plaintext'] = /language-(\w+)/.exec(String(className) || '') ?? [];
+
+            return <CodeBlock code={firstChild.children[0].value} language={language as BundledLanguage} {...rest} />;
+          }
+
+          return <pre {...rest}>{children}</pre>;
+        },
+        button: ({ node, children, ...props }) => {
+          const dataProps = node?.properties as Record<string, unknown>;
+
+          if (
+            dataProps?.class?.toString().includes('__boltQuickAction__') ||
+            dataProps?.dataBoltQuickAction === 'true'
+          ) {
+            const type = dataProps['data-type'] || dataProps.dataType;
+            const message = dataProps['data-message'] || dataProps.dataMessage;
+            const path = dataProps['data-path'] || dataProps.dataPath;
+            const href = dataProps['data-href'] || dataProps.dataHref;
+
+            const iconClassMap: Record<string, string> = {
+              file: 'i-ph:file',
+              message: 'i-ph:chats',
+              implement: 'i-ph:code',
+              link: 'i-ph:link',
+            };
+
+            const safeType = typeof type === 'string' ? type : '';
+            const iconClass = iconClassMap[safeType] ?? 'i-ph:question';
+
+            return (
+              <button
+                className="rounded-md justify-center px-3 py-1.5 text-xs bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent opacity-90 hover:opacity-100 flex items-center gap-2 cursor-pointer"
+                data-type={type}
+                data-message={message}
+                data-path={path}
+                data-href={href}
+                onClick={() => {
+                  if (type === 'file') {
+                    openArtifactInWorkbench(path);
+                  } else if (type === 'message' && append) {
+                    append({
+                      id: `quick-action-message-${Date.now()}`,
+                      content: [
+                        {
+                          type: 'text',
+                          text: `[Model: ${model}]\n\n[Provider: ${provider?.name}]\n\n${message}`,
+                        },
+                      ] as any,
+                      role: 'user',
+                    });
+                    console.log('Message appended:', message);
+                  } else if (type === 'implement' && append && setChatMode) {
+                    setChatMode('build');
+                    append({
+                      id: `quick-action-implement-${Date.now()}`,
+                      content: [
+                        {
+                          type: 'text',
+                          text: `[Model: ${model}]\n\n[Provider: ${provider?.name}]\n\n${message}`,
+                        },
+                      ] as any,
+                      role: 'user',
+                    });
+                  } else if (type === 'link' && typeof href === 'string') {
+                    try {
+                      const url = new URL(href, window.location.origin);
+                      window.open(url.toString(), '_blank', 'noopener,noreferrer');
+                    } catch (error) {
+                      console.error('Invalid URL:', href, error);
+                    }
+                  }
+                }}
+              >
+                <div className={`text-lg ${iconClass}`} />
+                {children}
+              </button>
+            );
+          }
+
+          return <button {...props}>{children}</button>;
+        },
+      } satisfies Components;
+    }, []);
+
+    return (
+      <ReactMarkdown
+        allowedElements={allowedHTMLElements}
+        className={styles.MarkdownContent}
+        components={components}
+        remarkPlugins={remarkPlugins(limitedMarkdown)}
+        rehypePlugins={rehypePlugins(html)}
+      >
+        {stripCodeFenceFromArtifact(children)}
+      </ReactMarkdown>
+    );
+  },
+);
+
+/**
+ * Removes code fence markers (```) surrounding an artifact element while preserving the artifact content.
+ * This is necessary because artifacts should not be wrapped in code blocks when rendered for rendering action list.
+ *
+ * @param content - The markdown content to process
+ * @returns The processed content with code fence markers removed around artifacts
+ *
+ * @example
+ * // Removes code fences around artifact
+ * const input = "```xml\n<div class='__boltArtifact__'></div>\n```";
+ * stripCodeFenceFromArtifact(input);
+ * // Returns: "\n<div class='__boltArtifact__'></div>\n"
+ *
+ * @remarks
+ * - Only removes code fences that directly wrap an artifact (marked with __boltArtifact__ class)
+ * - Handles code fences with optional language specifications (e.g. ```xml, ```typescript)
+ * - Preserves original content if no artifact is found
+ * - Safely handles edge cases like empty input or artifacts at start/end of content
+ */
+export const stripCodeFenceFromArtifact = (content: string) => {
+  if (!content || !content.includes('__boltArtifact__')) {
+    return content;
+  }
+
+  const lines = content.split('\n');
+  const artifactLineIndex = lines.findIndex((line) => line.includes('__boltArtifact__'));
+
+  // Return original content if artifact line not found
+  if (artifactLineIndex === -1) {
+    return content;
+  }
+
+  // Check previous line for code fence
+  if (artifactLineIndex > 0 && lines[artifactLineIndex - 1]?.trim().match(/^```\w*$/)) {
+    lines[artifactLineIndex - 1] = '';
+  }
+
+  if (artifactLineIndex < lines.length - 1 && lines[artifactLineIndex + 1]?.trim().match(/^```$/)) {
+    lines[artifactLineIndex + 1] = '';
+  }
+
+  return lines.join('\n');
+};

tools/bolt.diy/app/components/chat/Messages.client.tsx

@@ -0,0 +1,102 @@
+import type { Message } from 'ai';
+import { Fragment } from 'react';
+import { classNames } from '~/utils/classNames';
+import { AssistantMessage } from './AssistantMessage';
+import { UserMessage } from './UserMessage';
+import { useLocation } from '@remix-run/react';
+import { db, chatId } from '~/lib/persistence/useChatHistory';
+import { forkChat } from '~/lib/persistence/db';
+import { toast } from 'react-toastify';
+import { forwardRef } from 'react';
+import type { ForwardedRef } from 'react';
+import type { ProviderInfo } from '~/types/model';
+
+interface MessagesProps {
+  id?: string;
+  className?: string;
+  isStreaming?: boolean;
+  messages?: Message[];
+  append?: (message: Message) => void;
+  chatMode?: 'discuss' | 'build';
+  setChatMode?: (mode: 'discuss' | 'build') => void;
+  model?: string;
+  provider?: ProviderInfo;
+  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
+}
+
+export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
+  (props: MessagesProps, ref: ForwardedRef<HTMLDivElement> | undefined) => {
+    const { id, isStreaming = false, messages = [] } = props;
+    const location = useLocation();
+
+    const handleRewind = (messageId: string) => {
+      const searchParams = new URLSearchParams(location.search);
+      searchParams.set('rewindTo', messageId);
+      window.location.search = searchParams.toString();
+    };
+
+    const handleFork = async (messageId: string) => {
+      try {
+        if (!db || !chatId.get()) {
+          toast.error('Chat persistence is not available');
+          return;
+        }
+
+        const urlId = await forkChat(db, chatId.get()!, messageId);
+        window.location.href = `/chat/${urlId}`;
+      } catch (error) {
+        toast.error('Failed to fork chat: ' + (error as Error).message);
+      }
+    };
+
+    return (
+      <div id={id} className={props.className} ref={ref}>
+        {messages.length > 0
+          ? messages.map((message, index) => {
+              const { role, content, id: messageId, annotations, parts } = message;
+              const isUserMessage = role === 'user';
+              const isFirst = index === 0;
+              const isHidden = annotations?.includes('hidden');
+
+              if (isHidden) {
+                return <Fragment key={index} />;
+              }
+
+              return (
+                <div
+                  key={index}
+                  className={classNames('flex gap-4 py-3 w-full rounded-lg', {
+                    'mt-4': !isFirst,
+                  })}
+                >
+                  <div className="grid grid-col-1 w-full">
+                    {isUserMessage ? (
+                      <UserMessage content={content} parts={parts} />
+                    ) : (
+                      <AssistantMessage
+                        content={content}
+                        annotations={message.annotations}
+                        messageId={messageId}
+                        onRewind={handleRewind}
+                        onFork={handleFork}
+                        append={props.append}
+                        chatMode={props.chatMode}
+                        setChatMode={props.setChatMode}
+                        model={props.model}
+                        provider={props.provider}
+                        parts={parts}
+                        addToolResult={props.addToolResult}
+                      />
+                    )}
+                  </div>
+                </div>
+              );
+            })
+          : null}
+        {isStreaming && (
+          <div className="text-center w-full  text-bolt-elements-item-contentAccent i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
+        )}
+      </div>
+    );
+  },
+);