AI Gantt maker

import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";

import { Gantt } from "@dhx/trial-gantt";
import { io } from "socket.io-client";
import { initChat } from "./chat-widget.ts";
import initZoom from "./gantt-utils/zoom.ts";
import fitTaskText from "./gantt-utils/fit-text.ts";
import createCommandRunner from "./command-runner.ts";

const gantt = Gantt.getGanttInstance();
gantt.config.columns = [
  { name: "wbs", label: "WBS", width: 60, resize: true, template: gantt.getWBSCode },
  { name: "text", label: "Task name", tree: true, width: 250, resize: true },
  { name: "start_date", align: "center", width: 100, resize: true },
  { name: "duration", align: "center", width: 80, resize: true },
  { name: "add", width: 40 },
];
gantt.plugins({
  auto_scheduling: true,
  undo: true,
  export_api: true,
  marker: true,
  tooltip: true,
  critical_path: true,
});

gantt.config.auto_scheduling = true;
gantt.config.open_tree_initially = true;
gantt.config.auto_types = true;
gantt.config.scale_height = 60;
gantt.config.open_split_tasks = true;
initZoom(gantt);
fitTaskText(gantt);

function parseSmartDate(str: string) {
  if (typeof str !== "string") return null;
  const p = str.trim().replace(/\//g, "-").split("-");
  if (p.length !== 3) return null;

  const [y, m, d] = p[0].length === 4 ? p : [p[2], p[1], p[0]];
  const dt = new Date(+y, +m - 1, +d);
  return isNaN(dt as any) ? null : dt;
}
gantt.templates.parse_date = (date: string): Date => {
  const parsed = parseSmartDate(date);
  return parsed ?? new Date();
};

gantt.init("gantt_here");

const runCommand = createCommandRunner(gantt);

const SOCKET_URL = import.meta.env.VITE_SOCKET_URL || `${window.location.origin}`;
const socket = io(SOCKET_URL);

initChat({
  socket,
  runCommand,
  getProject: () => gantt.serialize(),
});

import { marked } from "marked";
import DOMPurify from 'dompurify';
import MicroModal from "micromodal";
import type { Socket } from "socket.io-client";

interface InitChatOptions {
  socket: Socket;
  runCommand: (cmd: string, params: any) => void;
  getProject: () => any;
}

interface Task {
  text?: string;
  type?: string;
}

interface TaskNames {
  regular: string[];
  summaries: string[];
  any: string[];
}

export const initChat = ({ socket, runCommand, getProject }: InitChatOptions) => {
  (function () {
    const chatWidgetContainer = document.querySelector("#chat_panel") as HTMLElement;
    if (chatWidgetContainer) {
      chatWidgetContainer.dataset.id = "0";

      chatWidgetContainer.innerHTML = `
        <div id="chat-popup" class="relative left-0 bottom-0 w-full h-full bg-white rounded-md shadow-md flex flex-col transition-all">
          <div id="chat-header" class="flex justify-between items-center p-4 bg-gray-800 text-white rounded-t-md">
            <h3 class="m-0 text-lg">DHX Assistant</h3>
             <button data-micromodal-trigger="modal-1" class="help-btn">?</button>
          </div>
          <div id="chat-messages" class="flex-1 p-4 pb-1 overflow-y-auto text-base"></div>
          <div id="loader" class="hidden justify-start mb-3">
            <div class="spinner m-auto"></div>
          </div>
          <div id="chat-input-container" class="p-4 border-t border-gray-200">
            <div class="flex space-x-4 items-center">
           <input type="text" id="chat-input" class="flex-1 border border-gray-300 rounded-md px-4 py-2 outline-none w-3/4" placeholder="Type your message...">
           <button id="chat-submit" class="bg-gray-800 text-white rounded-md px-4 py-2 cursor-pointer">Send</button>
            </div>
          </div>
        </div>
      `;

      const chatInput = document.getElementById("chat-input") as HTMLInputElement;
      const chatSubmit = document.getElementById("chat-submit") as HTMLButtonElement;
      const chatMessages = document.getElementById("chat-messages") as HTMLElement;
      const loader = document.getElementById("loader") as HTMLElement;

      chatSubmit.addEventListener("click", () => {
        const message = chatInput.value.trim();
        if (!message) return;
        chatMessages.scrollTop = chatMessages.scrollHeight;
        chatInput.value = "";
        sendUserMessage(message);
      });

      chatMessages.addEventListener("click", (event: MouseEvent) => {
        const target = (event.target as Element)?.closest(".prompt-pill") as HTMLElement;
        if (target) {
          const pillText = target.innerText;
          sendUserMessage(pillText);
        }
      });

      chatInput.addEventListener("keyup", (event: KeyboardEvent) => {
        if (event.key === "Enter") {
          chatSubmit.click();
        }
      });

      function showLoader(): void {
        loader.classList.remove("hidden");
        chatMessages.scrollTop = chatMessages.scrollHeight;
      }

      function hideLoader(): void {
        loader.classList.add("hidden");
      }

      function sendUserMessage(message: string): void {
        if (!message) return;
        displayUserMsg(message);
        chatInput.value = "";
        chatSubmit.disabled = true;
        showLoader();
        socket.emit("user_msg", JSON.stringify({ message }));
      }

      function displayUserMsg(msg: string): void {
        const div = document.createElement("div");
        div.className = "flex justify-end mb-3";
        div.innerHTML = `<div class="bg-gray-800 text-white rounded-lg py-2 px-4 max-w-[70%]">${DOMPurify.sanitize(msg)}</div>`;
        chatMessages.appendChild(div);
        chatMessages.scrollTop = chatMessages.scrollHeight;
      }

      socket.on("assistant_msg", (txt: string) => {
        hideLoader();
        displayReply(txt);
        chatSubmit.disabled = false;
      });

      socket.on("tool_call", (payload: { cmd: string; params: any }, ack?: (response: any) => void) => {
        let handled = false;

        try {
          const { cmd, params } = payload;

          if (cmd && cmd !== "none") {
            runCommand(cmd, params);
            onCallback(cmd, params);

            if (typeof ack === "function") {
              ack({
                ok: true,
                cmd,
                data: getProject(),
              });
            } else {
              hideLoader();
              chatSubmit.disabled = false;
            }
          }

          handled = true;
        } catch (e: any) {
          hideLoader();
          displayReply(`Something wrong had happened: ${e.message}`);

          if (typeof ack === "function") {
            ack({
              ok: false,
              cmd: payload?.cmd || "unknown",
              error: e.message,
            });
          }
          handled = true;
        }

        if (!handled) {
          displayReply(`Couldn't handle this: ${JSON.stringify(payload)}`);
        }
      });

      function displayReply(message: string): void {
        const div = document.createElement("div");
        div.className = "flex mb-3";
        const html = DOMPurify.sanitize(marked.parse(message) as string);
        div.innerHTML = `<div class="bg-gray-100 text-black rounded-lg py-2 px-4 max-w-[70%]">${html}</div>`;
        chatMessages.appendChild(div);
        chatMessages.scrollTop = chatMessages.scrollHeight;
      }

      let injectedMain = false;
      let injectedChart = false;
      function onCallback(cmd: string, params: { tasks: Task[] }): void {
        if (!injectedMain && cmd === "generate_project") {
          injectedMain = true;
          displayReply(buildMainSuggestionsBlock(params.tasks));
          return;
        }
        if (!injectedChart) {
          injectedChart = true;
          displayReply(buildChartSuggestionsBlock());
          return;
        }
      }

      function buildMainSuggestionsBlock(tasks: Task[]): string {
        const { regular, any } = pickTaskNames(tasks, 8);

        const t1 = any[0] || "Design";
        const t2 = any[1] || "Build";
        const t3 = any[2] || "QA";
        const t4 = any[2] || "Review";
        const tSplit = regular[0] || t1;

        const pills = [
          `Zoom to fit the screen`,
          `Set "${t1}" to start after "${t2}"`,
          `Split "${tSplit}" into subtasks and link them FS`,
          `Set progress of "${t3}" to 60%`,
          `Mark the task "${t4}" red`,
        ];

        return `<p>Your project is ready. Keep shaping it with natural language. Try:</p>
          <div class="suggestion-pills">
            ${pills.map((p) => `<button class="prompt-pill">${p}</button>`).join("")}
          </div>`;
      }

      function buildChartSuggestionsBlock(): string {
        const pills = [
          `Add date marker "Kickoff" on Monday next week`,
          `Switch to dark theme`,
          `Clear the project`,
          `Print project as PDF`,
        ];
        return `<p>Pro tip: you can also configure the chart itself. For example: </p>
<div class="suggestion-pills">
  ${pills.map((p) => `<button class="prompt-pill">${p}</button>`).join("")}
</div>`;
      }

      function pickTaskNames(tasks: Task[], max: number = 8): TaskNames {
        const reg: string[] = [];
        const sum: string[] = [];
        const all: string[] = [];
        const seen = new Set<string>();

        for (const t of tasks) {
          const name = (t?.text || "").trim();
          if (!name || seen.has(name)) continue;
          seen.add(name);
          all.push(name);
          if (t?.type === "project") sum.push(name);
          else reg.push(name);
        }

        shuffle(reg);
        shuffle(sum);
        shuffle(all);

        return {
          regular: reg.slice(0, max),
          summaries: sum.slice(0, max),
          any: all.slice(0, max),
        };
      }

      function shuffle<T>(arr: T[]): void {
        for (let i = arr.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [arr[i], arr[j]] = [arr[j], arr[i]];
        }
      }

      displayReply(`## Welcome to the AI Project Wizard!

I can create, edit, or style your Gantt chart with plain-language commands.
<br/>
<br/>

Try things like:

<div class="suggestion-pills">
<button class="prompt-pill">Generate a project called Website Relaunch with Design, Build and QA phases.</button>
<button class="prompt-pill">Plan a Conference 2026 with Venue & Speakers, Sponsorships, Marketing, Run-of-Show, Post-Event.</button>
<button class="prompt-pill">Generate a Grant Application project with Eligibility Check, Narrative Draft, Budget, Reviews, Submission.</button>
</div>`);
    }
  })();

  MicroModal.init({ disableScroll: true });
  document.querySelectorAll(".copy-btn").forEach((btn) => {
    btn.addEventListener("click", () => {
      const text = btn.getAttribute("data-text");
      if (text) {
        navigator.clipboard.writeText(text).then(() => {
          (btn as HTMLButtonElement).textContent = "Copied!";
          setTimeout(() => ((btn as HTMLButtonElement).textContent = "Copy"), 1000);
        });
      }
    });
  });

  const modalBodyWrapper = document.querySelector(".modal__body-wrapper") as HTMLElement;
  const modalScrollTopBtn = document.getElementById("btn-scroll-top") as HTMLButtonElement;

  modalBodyWrapper.addEventListener("scroll", () => {
    modalScrollTopBtn.style.display = modalBodyWrapper.scrollTop > 200 ? "block" : "none";
  });

  modalScrollTopBtn.addEventListener("click", () => {
    modalBodyWrapper.scrollTo({ top: 0, behavior: "smooth" });
  });
};

import { type GanttStatic, type Task, type Link } from "@dhx/trial-gantt";

export default function (gantt: GanttStatic) {
  return function runCommand(cmd: string, args: any) {
    const strToDate = gantt.date.str_to_date("%Y-%m-%d");
    const dateToStr = gantt.date.date_to_str("%Y-%m-%d");

    switch (cmd) {
      case "add_task":
        gantt.addTask(args);
        break;

      case "update_tasks":{
        const { tasks } = args;
        gantt.batchUpdate(function () {
					tasks.forEach((task: Task) => {
            if(!gantt.isTaskExists(task.id)){
              console.warn(`there is no such task in Gantt: ${task.id}`)
              return;
            }
            let existedTask = gantt.getTask(task.id);
            if(existedTask.type === "project") return;

            if(task.start_date){
              task.start_date = gantt.templates.parse_date(new Date(task.start_date).toISOString());
            }
            if(task.end_date){
              task.end_date = gantt.templates.parse_date(new Date(task.end_date).toISOString());
            }
            if(task.start_date && task.duration){
              task.end_date = gantt.calculateEndDate({
                start_date: task.start_date,
                duration: task.duration,
                task: existedTask
              });
            } else if (task.end_date && task.duration){
              task.start_date = gantt.calculateEndDate({
                start_date: task.end_date,
                duration: -task.duration,
                task: existedTask
              });
            } else if(task.duration){
                task.end_date = gantt.calculateEndDate({
                start_date: existedTask.start_date!,
                duration: task.duration,
                task: existedTask
              });
            }
            Object.assign(existedTask, task);
            gantt.updateTask(task.id);
					});
			  });
        break;
      }

      case "delete_tasks": {
        const { tasks } = args;
        gantt.batchUpdate(function () {
          tasks.forEach((task: Task) => {
            if(gantt.isTaskExists(task.id)){
              gantt.deleteTask(task.id);
            }
          });
        });
        break;
      }

      case "split_task": {
        const parent = gantt.getTask(args.id || args.task_id);
        parent.$open = true;
        parent.render = "split";
        const newIds: any = [];
        (args.subtasks || args.new_tasks).forEach((t: Task) => {
          newIds.push(gantt.addTask({ ...t, id: gantt.uid(), parent: parent.id }));
        });
        if (args.addFSLinks) {
          for (let i = 1; i < args.subtasks.length; i++) {
            gantt.addLink({
              source: newIds[i - 1],
              target: newIds[i],
              type: gantt.config.links.finish_to_start,
            });
          }
        }
        break;
      }

      case "add_links":{
        const { links } = args;
        gantt.batchUpdate(function () {
          links.forEach((link: Link) => {
            gantt.addLink({
              id: link.id,
              source: link.source,
              target: link.target,
              type: link.type,
            });
          });
        });
        break;
      }

      case "delete_links":{
        const { links } = args;
        gantt.batchUpdate(function () {
          links.forEach((link: Link) => {
            if(gantt.isLinkExists(link.id)){
              gantt.deleteLink(link.id);
            }
          });
        })
        break;
      }

      case "style_task": {
        const { id, color } = args;

        const apply = (task: Task) => {
          task.color = color;
          gantt.refreshTask(task.id);
        };
        if (id === "all") {
          gantt.eachTask((task) => apply(task));
        } else {
          gantt.batchUpdate(() => {
            const task = gantt.getTask(id);
            if (task) apply(task);
          });
        }
        break;
      }

      case "style_link":
        const { id: linkId, color } = args;

        const apply = (link: Link) => {
          link.color = color;
          gantt.refreshLink(link.id);
        };
        if (linkId === "all") {
          gantt.getLinks().forEach((link) => apply(link));
        } else {
          gantt.batchUpdate(() => {
            const link = gantt.getLink(linkId);
            if (link) apply(link);
          });
        }
        break;

      case "set_link_width":
        gantt.config.link_line_width = args.width;
        gantt.render();
        break;

      case "set_link_wrapper_width":
        gantt.config.link_wrapper_width = args.width;
        gantt.render();
        break;

      case "show_links":
        gantt.config.show_links = args.show;
        gantt.render();
        break;

      case "set_text_color":
        const { id: taskId, color: textColor } = args;

        const applyTextColor = (task: Task) => {
          task.textColor = textColor;
          gantt.refreshTask(task.id);
        };
        if (taskId === "all") {
          gantt.batchUpdate(() => {
            gantt.eachTask((task) => applyTextColor(task));
          });
        } else {
          const task = gantt.getTask(taskId);
          if (task) applyTextColor(task);
        }
        break;

      case "set_progress_color":
        const { id: taskId2, color: progressColor } = args;

        const applyProgressColor = (task: Task) => {
          task.progressColor = progressColor;
          gantt.refreshTask(task.id);
        };
        if (taskId2 === "all") {
          gantt.batchUpdate(() => {
            gantt.eachTask((task) => applyProgressColor(task));
          });
        } else {
          const task = gantt.getTask(taskId2);
          if (task) applyProgressColor(task);
        }

        break;

      case "set_task_tooltip":
        if (args.enable) {
          gantt.templates.tooltip_text = (start, end, task) => {
            const taskText = "<b>Task:</b>" + task.text + "<br/>";
            const startDate = "<b>Start date:</b> " + dateToStr(start) + "<br/>";
            const endDate = "<b>End date:</b> " + dateToStr(end);
            return `${taskText} ${startDate} ${endDate}`;
          };
        } else {
          gantt.templates.tooltip_text = () => { return ""; };
        }
        break;

      case "add_marker":
        const { id, start_date, text, title } = args;

        gantt.addMarker({
          id,
          start_date: strToDate(start_date),
          text,
          title,
        });
        break;

      case "set_scales": {
        const { scales } = args;
        if (!Array.isArray(scales)) break;

        const newScales = scales.map((s) => {
          const obj: any = { unit: s.unit, step: s.step };
          if (s.format) obj.format = s.format;
          if (s.cssClass) {
            obj.css = (date: Date) => date.getDay() === 0 || date.getDay() === 6 ? "weekend" : "";
          }
          return obj;
        });

        if (scales.length >= 2) {
          gantt.config.scale_height = 70;
        } else {
          gantt.config.scale_height = 40;
        }
        gantt.config.scales = newScales as any;
        gantt.render();
        break;
      }

      case "set_skin":
        gantt.setSkin(args.skin);
        break;

      case "zoom":
        if (args.level === "fit") {
          gantt.ext.zoomToFit();
        } else {
          gantt.ext.zoom.setLevel(args.level);
        }
        break;

      case "autoschedule":
        gantt.autoSchedule(args.anchorTaskId || undefined);
        break;

      case "hide_weekdays":
        const days = args.days;
        gantt.ignore_time = function (date) {
          if (days.includes(date.getDay())) return true;
        };
        gantt.render();
        break;

      case "undo":
        gantt.ext.undo.undo();
        break;

      case "export_png":
        gantt.exportToPNG({ name: args.name || "gantt.png" });
        break;

      case "export_to_pdf":
        gantt.exportToPDF({
          name: args.name || "gantt.pdf",
          raw: args.raw ?? true,
        });
        break;

      case "generate_project":
        gantt.clearAll();

        gantt.parse({
          data: args.tasks,
          links:
            (args.links || []).map((l:Link) => {
              return {
                source: l.source || l.sourceId,
                target: l.target || l.targetId,
                type: l.type,
                lag: l.lag || 0,
              };
            }) || [],
        });
        break;

      case "create_tasks":
        gantt.parse({
          data: args.tasks,
          links:
            (args.links || []).map((l:Link) => {
              return {
                source: l.source || l.sourceId,
                target: l.target || l.targetId,
                type: l.type,
                lag: l.lag || 0,
              };
            }) || [],
        });
        break;

      case 'highlight_critical_path':
        gantt.config.highlight_critical_path = args.enable;
        gantt.render();
        break;

      case "clear_all":
        gantt.clearAll();
        break;
      case "get_gantt_state":
        break;
      default:
        console.warn("Unknown cmd:", cmd, args);
    }
  };
}