Merge pull request #1060 from MahtabBukhari/Ticket-Editor-to-include-…

…Hive-Chain-of-Thought-Relevant-to-Specific-Run

ticket editor to include hive chain of thought relevant to specific run

src/components/common/TicketEditor/TicketEditor.tsx

@@ -44,6 +44,20 @@ interface TicketEditorProps {
   workspaceUUID: string;
 }
 
+interface LogEntry {
+  timestamp: string;
+  projectId: string;
+  ticketUUID: string;
+  message: string;
+}
+
+interface Connection {
+  projectId: string;
+  ticketUUID: string;
+  websocket: WebSocket;
+  status: 'disconnected' | 'connected' | 'error';
+}
+
 const SwitcherContainer = styled.div`
   display: flex;
   background-color: white;
@@ -127,6 +141,16 @@ const EditorWrapper = styled.div`
   background-color: white;
 `;
 
+const ChainOfThought = styled.div`
+  max-width: 100%;
+  margin: 12px auto 8px 5px;
+  padding: 10px 20px 0px 20px;
+  border-radius: 16px;
+  word-wrap: break-word;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background-color: white;
+`;
+
 const TicketEditor = observer(
   ({
     ticketData,
@@ -149,6 +173,9 @@ const TicketEditor = observer(
     const { main } = useStores();
     const [isCreatingBounty, setIsCreatingBounty] = useState(false);
     const [isOptionsMenuVisible, setIsOptionsMenuVisible] = useState(false);
+    const [logs, setLogs] = useState<LogEntry[]>([]);
+    const [connections, setConnections] = useState<Connection[]>([]);
+    const [lastLogLine, setLastLogLine] = useState('');
     const ui = uiStore;
     const { openDeleteConfirmation } = useDeleteConfirmationModal();
 
@@ -193,6 +220,86 @@ const TicketEditor = observer(
       setIsButtonDisabled(!isChanged);
     }, [ticketData, versionTicketData]);
 
+    useEffect(() => {
+      const connectToLogWebSocket = (projectId: string, ticketUUID: string) => {
+        const ws = new WebSocket('wss://jobs.stakwork.com/cable?channel=ProjectLogChannel');
+
+        ws.onopen = () => {
+          const command = {
+            command: 'subscribe',
+            identifier: JSON.stringify({ channel: 'ProjectLogChannel', id: projectId })
+          };
+          ws.send(JSON.stringify(command));
+        };
+
+        ws.onmessage = (event: any) => {
+          const data = JSON.parse(event.data);
+          if (data.type === 'ping') return;
+
+          const messageData = data?.message;
+          if (
+            messageData &&
+            (messageData.type === 'on_step_start' || messageData.type === 'on_step_complete')
+          ) {
+            setLogs((prev: LogEntry[]) => [
+              {
+                timestamp: new Date().toISOString(),
+                projectId,
+                ticketUUID,
+                message: messageData.message
+              },
+              ...prev
+            ]);
+          }
+        };
+
+        ws.onerror = () => {
+          setConnections((prev: Connection[]) =>
+            prev.map((conn: Connection) =>
+              conn.projectId === projectId ? { ...conn, status: 'error' } : conn
+            )
+          );
+        };
+
+        ws.onclose = () => {
+          setConnections((prev: Connection[]) =>
+            prev.map((conn: Connection) =>
+              conn.projectId === projectId ? { ...conn, status: 'disconnected' } : conn
+            )
+          );
+        };
+
+        setConnections((prev: Connection[]) => [
+          ...prev,
+          { projectId, ticketUUID, websocket: ws, status: 'connected' }
+        ]);
+      };
+
+      if (
+        ticketData.ticketUUID &&
+        swwfLink &&
+        !connections.some((conn: Connection) => conn.projectId === swwfLink)
+      ) {
+        connectToLogWebSocket(swwfLink, ticketData.ticketUUID);
+      }
+
+      return () => {
+        connections.forEach((conn: Connection) => {
+          if (conn.projectId !== swwfLink) {
+            conn.websocket.close();
+          }
+        });
+      };
+    }, [connections, swwfLink, ticketData.ticketUUID]);
+
+    useEffect(() => {
+      if (logs.length > 0) {
+        setLastLogLine(logs[logs.length - 1]?.message || '');
+      } else {
+        setLastLogLine('');
+      }
+    }, [logs]);
+
     const addUpdateSuccessToast = () => {
       setToasts([
         {
@@ -563,6 +670,16 @@ const TicketEditor = observer(
               )}
             </EditorWrapper>
             <TicketButtonGroup>
+              {swwfLink && (
+                <ChainOfThought>
+                  <h6>Hive - Chain of Thought</h6>
+                  <p>
+                    {lastLogLine
+                      ? lastLogLine
+                      : `Hi ${ui.meInfo?.owner_alias}, let me see if I can improve this ticket.`}
+                  </p>
+                </ChainOfThought>
+              )}
               {swwfLink && (
                 <ActionButton
                   as="a"