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

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

@@ -0,0 +1,244 @@
+import type { Node } from 'reactflow';
+import {
+  AlignHorizontalCenters,
+  AlignHorizontalCentersSolid,
+  AlignVerticalCenters,
+  AlignVerticalCentersSolid,
+  CompAlignBottom,
+  CompAlignBottomSolid,
+  CompAlignLeft,
+  CompAlignLeftSolid,
+  CompAlignRight,
+  CompAlignRightSolid,
+  CompAlignTop,
+  CompAlignTopSolid
+} from 'iconoir-react';
+import { VscodeButton } from '@vscode-elements/react-elements';
+import { useSystem } from '@/system/provider';
+import type { System } from '@/system';
+import styles from './index.module.css';
+import { BasePanel } from '../base';
+
+const partitionSelectedNodes = (nodes: Node[]) => {
+  return nodes.reduce(
+    (acc, node) => {
+      if (node.selected) {
+        acc.selectedNodes.push(node);
+      } else {
+        acc.unselectedNodes.push(node);
+      }
+
+      return acc;
+    },
+    {
+      selectedNodes: [] as Node[],
+      unselectedNodes: [] as Node[]
+    }
+  );
+};
+
+const handleChange =
+  (system: System) => (updater: (selectedNodes: Node[]) => void) => {
+    const { nodes, setNodes } = system.nodeStore.getState();
+
+    const { selectedNodes, unselectedNodes } = partitionSelectedNodes(nodes);
+    //Assume it changes it directly
+    updater(selectedNodes);
+    //Make sure unselected nodes are processed first for cases like groups
+    setNodes([...unselectedNodes, ...selectedNodes]);
+  };
+
+export const ALIGNMENT = {
+  START: 0,
+  CENTER: 1,
+  END: 2
+} as const;
+
+export type Alignment = (typeof ALIGNMENT)[keyof typeof ALIGNMENT];
+
+export const align =
+  (align: Alignment, prop: 'x' | 'y' = 'x') =>
+  (selectedNodes: Node[]) => {
+    // Align selected nodes to the left
+    let v = 0;
+    switch (align) {
+      case ALIGNMENT.START:
+        v = Math.min(...selectedNodes.map((node) => node.position[prop]));
+        break;
+      case ALIGNMENT.CENTER: {
+        const vmin = Math.min(
+          ...selectedNodes.map((node) => node.position[prop])
+        );
+        const vmax = Math.max(
+          ...selectedNodes.map((node) => node.position[prop])
+        );
+        v = (vmin + vmax) / 2;
+        break;
+      }
+      default:
+        v = Math.max(...selectedNodes.map((node) => node.position[prop]));
+    }
+    selectedNodes.forEach((node) => {
+      node.position[prop] = v;
+    });
+  };
+
+export const distribute =
+  (align: Alignment, prop: 'x' | 'y' = 'x') =>
+  (selectedNodes: Node[]) => {
+    if (selectedNodes.length < 3) {
+      return;
+    }
+
+    //Sort the nodes by position
+    selectedNodes = [...selectedNodes].sort(
+      (a, b) => a.position[prop] - b.position[prop]
+    );
+
+    const getLength = (node: Node) => {
+      if (prop === 'x') {
+        return node.width ?? 0;
+      }
+      return node.height ?? 0;
+    };
+
+    const getPos = (node: Node) => {
+      switch (align) {
+        case ALIGNMENT.START:
+          return node.position[prop];
+        case ALIGNMENT.CENTER:
+          return node.position[prop] + getLength(node) / 2;
+        default:
+          return node.position[prop] + getLength(node);
+      }
+    };
+
+    const startNode = selectedNodes.reduce((acc, node) => {
+      return getPos(node) < getPos(acc) ? node : acc;
+    }, selectedNodes[0] as Node);
+
+    const endNode = selectedNodes.reduce((acc, node) => {
+      return getPos(node) > getPos(acc) ? node : acc;
+    }, selectedNodes[0] as Node);
+    //Get the total length
+    const incrementLength =
+      (getPos(endNode) - getPos(startNode)) / (selectedNodes.length - 1);
+
+    selectedNodes.forEach((node, i) => {
+      node.position[prop] = startNode.position[prop] + i * incrementLength;
+    });
+  };
+
+export function AlignmentPanel() {
+  const graphEditor = useSystem();
+  const updateNodes = handleChange(graphEditor);
+
+  return (
+    <BasePanel>
+      <div className={styles.content}>
+        <span>Align</span>
+        <div className={styles.row}>
+          <VscodeButton
+            secondary
+            title="Align X Left"
+            onClick={() => updateNodes(align(ALIGNMENT.START))}
+            icon-only
+          >
+            <CompAlignLeft />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Align X Center"
+            onClick={() => updateNodes(align(ALIGNMENT.CENTER))}
+            icon-only
+          >
+            <AlignHorizontalCenters />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Align X Right"
+            onClick={() => updateNodes(align(ALIGNMENT.END))}
+            icon-only
+          >
+            <CompAlignRight />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Align Y Top"
+            onClick={() => updateNodes(align(ALIGNMENT.START, 'y'))}
+            icon-only
+          >
+            <CompAlignTop />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Align Y Middle"
+            onClick={() => updateNodes(align(ALIGNMENT.CENTER, 'y'))}
+            icon-only
+          >
+            <AlignVerticalCenters />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Align Y Bottom"
+            onClick={() => updateNodes(align(ALIGNMENT.END, 'y'))}
+            icon-only
+          >
+            <CompAlignBottom />
+          </VscodeButton>
+        </div>
+        <span>Distribute</span>
+        <div className={styles.row}>
+          <VscodeButton
+            secondary
+            title="Distribute horizontally left"
+            icon-only
+            onClick={() => updateNodes(distribute(ALIGNMENT.START))}
+          >
+            <CompAlignLeftSolid />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Distribute horizontally center"
+            onClick={() => updateNodes(distribute(ALIGNMENT.CENTER))}
+            icon-only
+          >
+            <AlignHorizontalCentersSolid />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Distribute horizontally right"
+            icon-only
+            onClick={() => updateNodes(distribute(ALIGNMENT.END))}
+          >
+            <CompAlignRightSolid />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Distribute vertically top"
+            onClick={() => updateNodes(distribute(ALIGNMENT.START, 'y'))}
+            icon-only
+          >
+            <CompAlignTopSolid />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Distribute vertically center"
+            onClick={() => updateNodes(distribute(ALIGNMENT.CENTER, 'y'))}
+            icon-only
+          >
+            <AlignVerticalCentersSolid />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Distribute vertically bottom"
+            onClick={() => updateNodes(distribute(ALIGNMENT.END, 'y'))}
+            icon-only
+          >
+            <CompAlignBottomSolid />
+          </VscodeButton>
+        </div>
+      </div>
+    </BasePanel>
+  );
+}

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

@@ -0,0 +1,5 @@
+import styles from './styles.module.css';
+
+export const BasePanel = ({ children }: { children: React.ReactNode }) => {
+  return <div className={styles.root}>{children}</div>;
+};

package/src/components/panels/base/styles.module.css

@@ -0,0 +1,12 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    padding: 0.5rem;
+    gap: 0.25rem;
+    overflow: auto;
+    background-color: var(--vscode-tab-inactiveBackground,#181818);
+    color: var(--vscode-editor-foreground);
+}

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

@@ -0,0 +1,151 @@
+.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

@@ -0,0 +1,162 @@
+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>
+  );
+}