@kiberon-labs/behave-graph-flow 2.0.0 → 3.0.0

package/src/components/nodes/comment/FormatToolbar.tsx

@@ -1,118 +0,0 @@
-import styles from './styles.module.css';
-import type { Editor } from '@tiptap/react';
-import { Code, List, NumberedListLeft, Quote } from 'iconoir-react';
-
-interface FormatToolbarProps {
-  editor: Editor;
-}
-
-export const FormatToolbar = ({ editor }: FormatToolbarProps) => {
-  return (
-    <div className={styles.bubbleMenu}>
-      <div className={styles.menuBar}>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().toggleBold().run()}
-          className={editor.isActive('bold') ? styles.isActive : ''}
-          title="Bold"
-        >
-          <strong>B</strong>
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-          className={editor.isActive('italic') ? styles.isActive : ''}
-          title="Italic"
-        >
-          <em>I</em>
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().toggleStrike().run()}
-          className={editor.isActive('strike') ? styles.isActive : ''}
-          title="Strikethrough"
-        >
-          <s>S</s>
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().toggleCode().run()}
-          className={editor.isActive('code') ? styles.isActive : ''}
-          title="Code"
-        >
-          <Code />
-        </button>
-        <div className={styles.separator} />
-        <button
-          type="button"
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 1 }).run()
-          }
-          className={
-            editor.isActive('heading', { level: 1 }) ? styles.isActive : ''
-          }
-          title="Heading 1"
-        >
-          H1
-        </button>
-        <button
-          type="button"
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 2 }).run()
-          }
-          className={
-            editor.isActive('heading', { level: 2 }) ? styles.isActive : ''
-          }
-          title="Heading 2"
-        >
-          H2
-        </button>
-        <button
-          type="button"
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 3 }).run()
-          }
-          className={
-            editor.isActive('heading', { level: 3 }) ? styles.isActive : ''
-          }
-          title="Heading 3"
-        >
-          H3
-        </button>
-        <div className={styles.separator} />
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().toggleBulletList().run()}
-          className={editor.isActive('bulletList') ? styles.isActive : ''}
-          title="Bullet List"
-        >
-          <List />
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().toggleOrderedList().run()}
-          className={editor.isActive('orderedList') ? styles.isActive : ''}
-          title="Numbered List"
-        >
-          <NumberedListLeft />
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-          className={editor.isActive('codeBlock') ? styles.isActive : ''}
-          title="Code Block"
-        >
-          <Code />
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.chain().focus().toggleBlockquote().run()}
-          className={editor.isActive('blockquote') ? styles.isActive : ''}
-          title="Quote"
-        >
-          <Quote />
-        </button>
-      </div>
-    </div>
-  );
-};

package/src/components/nodes/comment/comment.tsx

@@ -1,103 +0,0 @@
-import styles from './styles.module.css';
-import { memo, useEffect, useRef, useState } from 'react';
-import { NodeResizer, type OnResize } from 'reactflow';
-import { useEditor, EditorContent } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import { useChangeNodeData } from '@/hooks/useChangeNodeData';
-import { BaseNodeWrapper } from '../wrapper';
-import { Markdown } from 'tiptap-markdown';
-import type { ICommentNode } from '@/types/nodes';
-import { FormatToolbar } from './FormatToolbar';
-import type { NodeProps } from 'reactflow';
-
-const CommentNodeRaw = ({
-  data,
-  selected,
-  id
-}: NodeProps<ICommentNode['data']>) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const handleNodeChange = useChangeNodeData(id);
-
-  const editor = useEditor({
-    extensions: [StarterKit, Markdown],
-    content: data.text || '> Comment',
-    editable: isEditing,
-    editorProps: {
-      attributes: {
-        class: 'prose prose-sm focus:outline-none w-full h-full nodrag',
-        style: `font-size: ${data.fontSize || 'medium'}; padding: 0.5rem;`
-      }
-    },
-    onUpdate: ({ editor }) => {
-      const markdown = (
-        editor.storage as { markdown?: { getMarkdown(): string } }
-      ).markdown;
-      if (markdown) {
-        handleNodeChange('text', markdown.getMarkdown());
-      }
-    }
-  });
-
-  useEffect(() => {
-    if (editor) {
-      editor.setEditable(isEditing);
-    }
-  }, [isEditing, editor]);
-
-  useEffect(() => {
-    if (editor && data.fontSize) {
-      const editorElement = editor.view.dom as HTMLElement;
-      editorElement.style.fontSize = data.fontSize;
-    }
-  }, [data.fontSize, editor]);
-
-  const onResize: OnResize = (event, params) => {
-    if (!containerRef.current) return;
-    containerRef.current.style.height = `${params.height}px`;
-    containerRef.current.style.width = `${params.width}px`;
-  };
-
-  const handleDoubleClick = () => {
-    setIsEditing(true);
-    setTimeout(() => {
-      editor?.commands.focus();
-    }, 0);
-  };
-
-  const handleBlur = (e: React.FocusEvent) => {
-    // Check if the new focus target is within the editor
-    const relatedTarget = e.relatedTarget as Node;
-    if (containerRef.current?.contains(relatedTarget)) {
-      return; // Don't close if focus is moving within the editor
-    }
-
-    setTimeout(() => {
-      setIsEditing(false);
-    }, 200);
-  };
-
-  return (
-    <BaseNodeWrapper metadata={data.annotations}>
-      <div className={styles.commentNode}>
-        <NodeResizer
-          onResize={onResize}
-          color="#ff0071"
-          isVisible={selected || false}
-        />
-
-        <div
-          ref={containerRef}
-          className={styles.editorContainer}
-          onDoubleClick={handleDoubleClick}
-          onBlur={handleBlur}
-        >
-          {editor && isEditing && <FormatToolbar editor={editor} />}
-          <EditorContent editor={editor} className={styles.editorContent} />
-        </div>
-      </div>
-    </BaseNodeWrapper>
-  );
-};
-
-export const CommentNode = memo(CommentNodeRaw);

package/src/components/nodes/comment/styles.module.css

@@ -1,150 +0,0 @@
-.commentNode {
-    background: var(--colors-bgSurface);
-    color: white;
-    border-radius: 2px;
-    border: 1px solid var(--vscode-textBlockQuote-border);
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.editorContainer {
-    background: var(--vscode-editor-background);
-    padding: 10px;
-    width: 100%;
-    height: 100%;
-    position: relative;
-}
-
-.editorContent {
-    width: 100%;
-    height: 100%;
-    min-height: 100px;
-    cursor: text;
-    overflow: auto;
-}
-
-.editorContent :global(.ProseMirror) {
-    outline: none;
-    width: 100%;
-    height: 100%;
-    color: var(--vscode-editor-foreground);
-}
-
-.editorContent :global(.ProseMirror p) {
-    margin: 0.5em 0;
-}
-
-.editorContent :global(.ProseMirror h1) {
-    font-size: 2em;
-    font-weight: bold;
-    margin: 0.67em 0;
-}
-
-.editorContent :global(.ProseMirror h2) {
-    font-size: 1.5em;
-    font-weight: bold;
-    margin: 0.75em 0;
-}
-
-.editorContent :global(.ProseMirror h3) {
-    font-size: 1.17em;
-    font-weight: bold;
-    margin: 0.83em 0;
-}
-
-.editorContent :global(.ProseMirror ul),
-.editorContent :global(.ProseMirror ol) {
-    padding-left: 1.5em;
-    margin: 0.5em 0;
-}
-
-.editorContent :global(.ProseMirror code) {
-    background: var(--vscode-textCodeBlock-background);
-    padding: 0.125em 0.25em;
-    border-radius: 3px;
-    font-family: var(--vscode-editor-font-family);
-}
-
-.editorContent :global(.ProseMirror pre) {
-    background: var(--vscode-textCodeBlock-background);
-    padding: 0.75em;
-    border-radius: 4px;
-    overflow-x: auto;
-    margin: 0.5em 0;
-}
-
-.editorContent :global(.ProseMirror pre code) {
-    background: none;
-    padding: 0;
-}
-
-.editorContent :global(.ProseMirror blockquote) {
-    border-left: 3px solid var(--vscode-textBlockQuote-border);
-    padding-left: 1em;
-    margin: 0.5em 0;
-    font-style: italic;
-}
-
-.bubbleMenu {
-    position: absolute;
-    top: -45px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--vscode-editorWidget-background);
-    border: 1px solid var(--vscode-editorWidget-border);
-    border-radius: 4px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    padding: 4px;
-    z-index: 1000;
-    animation: fadeIn 0.15s ease;
-    pointer-events: auto;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateX(-50%) translateY(-5px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateX(-50%) translateY(0);
-    }
-}
-
-.menuBar {
-    display: flex;
-    gap: 2px;
-    align-items: center;
-}
-
-.menuBar button {
-    background: transparent;
-    border: none;
-    color: var(--vscode-foreground);
-    padding: 4px 8px;
-    cursor: pointer;
-    border-radius: 3px;
-    font-size: 13px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.15s;
-}
-
-.menuBar button:hover {
-    background: var(--vscode-list-hoverBackground);
-}
-
-.menuBar button.isActive {
-    background: var(--vscode-list-activeSelectionBackground);
-    color: var(--vscode-list-activeSelectionForeground);
-}
-
-.separator {
-    width: 1px;
-    height: 20px;
-    background: var(--vscode-editorWidget-border);
-    margin: 0 4px;
-}

package/src/components/panels/conversation/index.module.css

@@ -1,151 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--component-spacing-xs) var(--component-spacing-sm);
-  border-bottom: 1px solid var(--vscode-panel-border);
-  flex-shrink: 0;
-}
-
-.title {
-  font-size: 0.95em;
-  font-weight: 600;
-  margin: 0;
-}
-
-.headerActions {
-  display: flex;
-  gap: var(--component-spacing-xs);
-}
-
-.noAgent {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  gap: var(--component-spacing-sm);
-  opacity: 0.6;
-  font-size: 0.9em;
-  text-align: center;
-  padding: var(--component-spacing-md);
-}
-
-.messageList {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--component-spacing-sm);
-  display: flex;
-  flex-direction: column;
-  gap: var(--component-spacing-sm);
-}
-
-.message {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  max-width: 85%;
-  animation: fadeIn 0.15s ease-in;
-}
-
-.userMessage {
-  align-self: flex-end;
-}
-
-.assistantMessage {
-  align-self: flex-start;
-}
-
-.systemMessage {
-  align-self: center;
-  opacity: 0.6;
-  font-style: italic;
-  font-size: 0.85em;
-}
-
-.roleLabel {
-  font-size: 0.7em;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  opacity: 0.6;
-  padding: 0 var(--component-spacing-xs);
-}
-
-.bubble {
-  padding: var(--component-spacing-xs) var(--component-spacing-sm);
-  border-radius: 8px;
-  font-size: 0.9em;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.userBubble {
-  background-color: var(--vscode-button-background);
-  color: var(--vscode-button-foreground);
-  border-bottom-right-radius: 2px;
-}
-
-.assistantBubble {
-  background-color: var(--vscode-editor-inactiveSelectionBackground, #2a2d2e);
-  color: var(--vscode-editor-foreground);
-  border-bottom-left-radius: 2px;
-}
-
-.systemBubble {
-  background-color: transparent;
-}
-
-.streamingIndicator {
-  display: inline-block;
-  width: 6px;
-  height: 14px;
-  background-color: var(--vscode-editor-foreground);
-  opacity: 0.6;
-  margin-left: 2px;
-  animation: blink 0.8s step-end infinite;
-  vertical-align: text-bottom;
-}
-
-.timestamp {
-  font-size: 0.65em;
-  opacity: 0.4;
-  padding: 0 var(--component-spacing-xs);
-}
-
-.inputArea {
-  display: flex;
-  gap: var(--component-spacing-xs);
-  padding: var(--component-spacing-sm);
-  border-top: 1px solid var(--vscode-panel-border);
-  flex-shrink: 0;
-}
-
-.textInput {
-  flex: 1;
-}
-
-@keyframes blink {
-  50% {
-    opacity: 0;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

package/src/components/panels/conversation/index.tsx

@@ -1,162 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { VscodeButton, VscodeTextfield } from '@vscode-elements/react-elements';
-import { Trash, SendDiagonal } from 'iconoir-react';
-import { useSystem } from '@/system/provider';
-import { useStore } from 'zustand';
-import { BasePanel } from '../base';
-import { Icon } from '@/components/primitives/icon';
-import type { ChatMessage } from '@/store/chat';
-import styles from './index.module.css';
-
-function formatTime(date: Date): string {
-  return date.toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit'
-  });
-}
-
-function MessageBubble({ message }: { message: ChatMessage }) {
-  const roleClass =
-    message.role === 'user'
-      ? styles.userMessage
-      : message.role === 'assistant'
-        ? styles.assistantMessage
-        : styles.systemMessage;
-
-  const bubbleClass =
-    message.role === 'user'
-      ? styles.userBubble
-      : message.role === 'assistant'
-        ? styles.assistantBubble
-        : styles.systemBubble;
-
-  return (
-    <div className={`${styles.message} ${roleClass}`}>
-      <span className={styles.roleLabel}>{message.role}</span>
-      <div className={`${styles.bubble} ${bubbleClass}`}>
-        {message.content}
-        {message.isStreaming && <span className={styles.streamingIndicator} />}
-      </div>
-      <span className={styles.timestamp}>{formatTime(message.timestamp)}</span>
-    </div>
-  );
-}
-
-export function ConversationPanel() {
-  const system = useSystem();
-  const messages = useStore(system.chatStore, (s) => s.messages);
-  const agent = useStore(system.chatStore, (s) => s.agent);
-  const isStreaming = useStore(system.chatStore, (s) => s.isStreaming);
-  const inputValue = useStore(system.chatStore, (s) => s.inputValue);
-  const setInputValue = useStore(system.chatStore, (s) => s.setInputValue);
-  const clearMessages = useStore(system.chatStore, (s) => s.clearMessages);
-
-  const messagesEndRef = useRef<HTMLDivElement | null>(null);
-
-  const scrollToBottom = useCallback(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, []);
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages, scrollToBottom]);
-
-  const handleSend = useCallback(() => {
-    const trimmed = inputValue.trim();
-    if (!trimmed || !agent || isStreaming) {
-      return;
-    }
-
-    system.chatStore.getState().setInputValue('');
-
-    // Publish the user message — the AI subsystem adds it to
-    // memory which fires listeners that sync to the chat store.
-    system.pubsub.publish('chat:userMessage', {
-      content: trimmed
-    });
-  }, [inputValue, agent, isStreaming, system]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        handleSend();
-      }
-    },
-    [handleSend]
-  );
-
-  const handleInputChange = useCallback(
-    (e: Event) => {
-      const target = e.target as HTMLInputElement;
-      setInputValue(target.value);
-    },
-    [setInputValue]
-  );
-
-  if (!agent) {
-    return (
-      <BasePanel>
-        <div className={styles.container}>
-          <div className={styles.noAgent}>
-            <p>No agent connected.</p>
-            <p>
-              Use the <strong>Setup UI</strong> node to connect an agent to this
-              panel.
-            </p>
-          </div>
-        </div>
-      </BasePanel>
-    );
-  }
-
-  return (
-    <BasePanel>
-      <div className={styles.container}>
-        <div className={styles.header}>
-          <h3 className={styles.title}>Conversation</h3>
-          <div className={styles.headerActions}>
-            <VscodeButton
-              secondary
-              onClick={clearMessages}
-              title="Clear messages"
-            >
-              <Icon slot="start">
-                <Trash />
-              </Icon>
-            </VscodeButton>
-          </div>
-        </div>
-
-        <div className={styles.messageList}>
-          {messages.map((msg) => (
-            <MessageBubble key={msg.id} message={msg} />
-          ))}
-          <div ref={messagesEndRef} />
-        </div>
-
-        <div className={styles.inputArea}>
-          <VscodeTextfield
-            className={styles.textInput}
-            placeholder={
-              isStreaming ? 'Waiting for response...' : 'Type a message...'
-            }
-            value={inputValue}
-            onInput={handleInputChange}
-            onKeyDown={handleKeyDown}
-            disabled={isStreaming}
-          />
-          <VscodeButton
-            onClick={handleSend}
-            disabled={isStreaming || !inputValue.trim()}
-            title="Send"
-          >
-            <Icon slot="start">
-              <SendDiagonal />
-            </Icon>
-          </VscodeButton>
-        </div>
-      </div>
-    </BasePanel>
-  );
-}