-
{children}
+
+
+
+
+
+
+
+ <>
+ {children}
+
+
+
-
diff --git a/packages/epics/src/common/ai-left-panel-layout.tsx b/packages/epics/src/common/ai-left-panel-layout.tsx
new file mode 100644
index 000000000..172651440
--- /dev/null
+++ b/packages/epics/src/common/ai-left-panel-layout.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import { useCallback, useRef, useState } from 'react';
+import { Bot, ChevronsLeftRight, PanelLeftOpen } from 'lucide-react';
+
+import { AiLeftPanel } from './ai-left-panel';
+import { useIsMobile } from '../hooks';
+import { Drawer, DrawerContent } from '@hypha-platform/ui';
+import { cn } from '@hypha-platform/ui-utils';
+
+const MIN_WIDTH = 240;
+const MAX_WIDTH = 600;
+const DEFAULT_WIDTH = 320;
+
+type AiLeftPanelLayoutProps = {
+ children: React.ReactNode;
+};
+
+export function AiLeftPanelLayout({ children }: AiLeftPanelLayoutProps) {
+ const isMobile = useIsMobile();
+ const [panelOpen, setPanelOpen] = useState(true);
+ const [panelWidth, setPanelWidth] = useState(DEFAULT_WIDTH);
+ const [isDragging, setIsDragging] = useState(false);
+ const dragStartX = useRef(0);
+ const dragStartWidth = useRef(DEFAULT_WIDTH);
+
+ const onResizeMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ e.preventDefault();
+ dragStartX.current = e.clientX;
+ dragStartWidth.current = panelWidth;
+ setIsDragging(true);
+
+ const onMouseMove = (e: MouseEvent) => {
+ const delta = e.clientX - dragStartX.current;
+ const newWidth = Math.min(
+ MAX_WIDTH,
+ Math.max(MIN_WIDTH, dragStartWidth.current + delta),
+ );
+ setPanelWidth(newWidth);
+ };
+
+ const onMouseUp = () => {
+ setIsDragging(false);
+ window.removeEventListener('mousemove', onMouseMove);
+ window.removeEventListener('mouseup', onMouseUp);
+ };
+
+ window.addEventListener('mousemove', onMouseMove);
+ window.addEventListener('mouseup', onMouseUp);
+ },
+ [panelWidth],
+ );
+
+ return (
+
+ {!isMobile && (
+ <>
+
+
setPanelOpen(false)} />
+
+ {panelOpen && (
+
+ )}
+
+
+ )}
+
+ {!panelOpen && (
+
+ )}
+
+ {isMobile && (
+
+
+
+
setPanelOpen(false)} />
+
+ )}
+
+
+ {children}
+
+
+ );
+}
diff --git a/packages/epics/src/common/ai-left-panel.tsx b/packages/epics/src/common/ai-left-panel.tsx
new file mode 100644
index 000000000..73f094de9
--- /dev/null
+++ b/packages/epics/src/common/ai-left-panel.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { useState } from 'react';
+
+import { cn } from '@hypha-platform/ui-utils';
+
+import {
+ AiPanelHeader,
+ AiPanelMessages,
+ AiPanelChatBar,
+ MOCK_MODEL_OPTIONS,
+ MOCK_SUGGESTIONS,
+ MOCK_WELCOME_MESSAGE,
+} from './ai-panel';
+
+type AiLeftPanelProps = {
+ onClose: () => void;
+ className?: string;
+};
+
+export function AiLeftPanel({ onClose, className }: AiLeftPanelProps) {
+ const [input, setInput] = useState('');
+ const [selectedModel, setSelectedModel] = useState(MOCK_MODEL_OPTIONS[0]!);
+ const [messages, setMessages] = useState([MOCK_WELCOME_MESSAGE]);
+ const [showSuggestions, setShowSuggestions] = useState(true);
+ const [isStreaming, setIsStreaming] = useState(false);
+
+ const handleSend = () => {
+ // Placeholder - no business logic
+ };
+
+ const handleSuggestionSelect = (text: string) => {
+ setShowSuggestions(false);
+ setInput(text);
+ };
+
+ return (
+
+ );
+}
diff --git a/packages/epics/src/common/ai-panel/ai-panel-chat-bar.tsx b/packages/epics/src/common/ai-panel/ai-panel-chat-bar.tsx
new file mode 100644
index 000000000..95a64e065
--- /dev/null
+++ b/packages/epics/src/common/ai-panel/ai-panel-chat-bar.tsx
@@ -0,0 +1,154 @@
+'use client';
+
+import { useRef } from 'react';
+import {
+ Code2,
+ Image,
+ Mic,
+ Paperclip,
+ Search,
+ Send,
+ Square,
+} from 'lucide-react';
+
+import { cn } from '@hypha-platform/ui-utils';
+
+type AiPanelChatBarProps = {
+ value: string;
+ onChange: (value: string) => void;
+ onSend: () => void;
+ isStreaming?: boolean;
+ placeholder?: string;
+};
+
+export function AiPanelChatBar({
+ value,
+ onChange,
+ onSend,
+ isStreaming = false,
+ placeholder = 'Ask Hypha AI anything...',
+}: AiPanelChatBarProps) {
+ const textareaRef = useRef
(null);
+
+ const autoResize = () => {
+ if (textareaRef.current) {
+ textareaRef.current.style.height = 'auto';
+ textareaRef.current.style.height =
+ Math.min(textareaRef.current.scrollHeight, 160) + 'px';
+ }
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ onSend();
+ }
+ };
+
+ const canSend = value.trim().length > 0 && !isStreaming;
+
+ return (
+
+
+ {/* Toolbar */}
+
+
+
+
+
+
+
+
+
+ {/* Textarea — full width */}
+