@mazees/mark 5.0.0

package/src/renderer/src/components/Chat/ThinkingBubble.jsx

@@ -0,0 +1,316 @@
+/* eslint-disable react/prop-types */
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Check, XCircle, Ban, Music, Brain, ChevronRight, Terminal, Loader2 } from 'lucide-react'
+import { FaYoutube } from 'react-icons/fa'
+import { useApproval } from '../../contexts/ApprovalContext'
+import { ApprovalBubble } from './ApprovalBubble'
+
+export const ThinkingBubble = ({
+  isSummarizing = false,
+  isSearchingMusic = false,
+  content = '',
+  reasoning = null,
+  executionSteps = null,
+  executedTools = []
+}) => {
+  const { activeApproval } = useApproval()
+  const steps = executionSteps || executedTools || []
+  const executingStepCount = steps.length
+
+  return (
+    <div className="flex flex-col gap-2.5 py-1 text-sm select-text">
+      {/* Loading Status Header with Tech Radar (ResponseArea style) */}
+      <div className="flex items-center gap-2.5">
+        {isSummarizing ? (
+          <div className="flex items-center gap-2 text-warning font-medium">
+            <FaYoutube className="w-4 h-4 animate-bounce text-error" />
+            <span className="text-xs">{content || 'Meringkas video YouTube...'}</span>
+          </div>
+        ) : isSearchingMusic ? (
+          <div className="flex items-center gap-2 text-info font-medium">
+            <Music className="w-4 h-4 animate-spin text-info" />
+            <span className="text-xs">{content || 'Mencari lagu di YouTube Music...'}</span>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2.5 text-primary font-medium">
+            {/* Holographic Dual Ring Spinner (ResponseArea style) */}
+            <div className="relative w-4 h-4 flex items-center justify-center text-primary shrink-0">
+              <svg viewBox="0 0 50 50" className="w-full h-full animate-[spin_3s_linear_infinite]">
+                <circle
+                  cx="25"
+                  cy="25"
+                  r="20"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  strokeDasharray="30 15"
+                  className="opacity-40"
+                />
+                <circle
+                  cx="25"
+                  cy="25"
+                  r="13"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="3.5"
+                  strokeDasharray="20 10"
+                  className="opacity-90 animate-[spin_1.5s_linear_infinite_reverse]"
+                  style={{ transformOrigin: 'center' }}
+                />
+              </svg>
+            </div>
+            <span className="text-xs font-semibold animate-pulse text-white/90">
+              {content || 'Mark sedang menganalisis & mengeksekusi...'}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Live Process Execution Trace (Antigravity Style) */}
+      {(reasoning || (steps && steps.length > 0)) && (
+        <div className="flex flex-col gap-1 my-1">
+          {/* Collapsible Reasoning Section */}
+          {reasoning && (
+            <details open className="group/details outline-none">
+              <summary className="text-xs font-mono cursor-pointer select-none flex items-center gap-2 text-white/70 hover:text-white py-0.5 list-none [&::-webkit-details-marker]:hidden transition-colors">
+                <Brain className="w-3.5 h-3.5 text-primary/80 shrink-0" />
+                <span className="font-medium text-white/80">Proses Pemikiran AI</span>
+                <ChevronRight className="w-3 h-3 group-open/details:rotate-90 transition-transform text-white/40 ml-auto shrink-0" />
+              </summary>
+              <div className="mt-1 pl-3 my-1 text-[11px] font-mono border-l-2 border-primary/30 text-white/80 leading-relaxed max-h-56 overflow-y-auto custom-scrollbar bg-base-300/30 p-2.5 rounded-lg select-text [&_p]:my-1 [&_p]:leading-relaxed [&_h1]:text-xs [&_h1]:font-bold [&_h1]:my-1.5 [&_h2]:text-[11px] [&_h2]:font-bold [&_h2]:my-1 [&_h3]:text-[11px] [&_h3]:font-bold [&_h3]:my-1 [&_ul]:my-1 [&_ul]:ml-3.5 [&_ol]:my-1 [&_ol]:ml-3.5 [&_li]:my-0.5 [&_code]:text-[10px] [&_pre]:my-1.5 [&_hr]:my-2 [&_hr]:border-white/10">
+                <Markdown remarkPlugins={[remarkGfm]}>
+                  {typeof reasoning === 'string' ? reasoning : JSON.stringify(reasoning, null, 2)}
+                </Markdown>
+              </div>
+            </details>
+          )}
+
+          {/* Executed Tools Step-by-Step List */}
+          {steps && steps.length > 0 && (
+            <details open className="group/liveprocess outline-none">
+              <summary className="text-xs font-mono cursor-pointer select-none flex items-center gap-2 text-white/70 hover:text-white py-1 list-none [&::-webkit-details-marker]:hidden transition-colors">
+                <Terminal className="w-3.5 h-3.5 text-primary/80 shrink-0" />
+                <span className="font-semibold text-white/90">Proses</span>
+                <span className="text-[10px] text-white/40 font-normal">
+                  ({executingStepCount} langkah)
+                </span>
+                <ChevronRight className="w-3.5 h-3.5 group-open/liveprocess:rotate-90 transition-transform text-white/40 ml-auto shrink-0" />
+              </summary>
+              <div className="mt-1 pl-2.5 space-y-1 border-l-2 border-white/15 ml-1.5 my-1">
+                {steps.map((step, idx) => {
+                  if (step.type === 'intervention') {
+                    const interventionText = step.text || step.content || step.task || ''
+                    return (
+                      <div key={idx} className="flex items-start gap-2 py-0.5 text-xs">
+                        <span className="font-bold text-primary font-mono shrink-0 select-none">
+                          You :
+                        </span>
+                        <span className="text-white/90 font-sans select-text whitespace-pre-wrap leading-relaxed">
+                          {interventionText}
+                        </span>
+                      </div>
+                    )
+                  }
+
+                  if (step.type === 'narration' || (!step.tool && step.text)) {
+                    return (
+                      <div
+                        key={idx}
+                        className="flex flex-col py-1 pl-1 pr-2 text-xs text-white/85 leading-relaxed font-sans select-text"
+                      >
+                        <Markdown remarkPlugins={[remarkGfm]}>{step.text}</Markdown>
+                      </div>
+                    )
+                  }
+
+                  const isRunning = step.status === 'running'
+                  const isStopped = step.status === 'stopped' || step.status === 'cancelled'
+                  const isPendingApproval = Boolean(
+                    activeApproval &&
+                    activeApproval.status === 'pending' &&
+                    isRunning &&
+                    (activeApproval.tool === step.tool || !step.tool)
+                  )
+                  const hasQuery =
+                    step.query !== undefined && step.query !== null && step.query !== ''
+                  const hasResult =
+                    step.resultSummary !== undefined &&
+                    step.resultSummary !== null &&
+                    step.resultSummary !== ''
+                  const queryString =
+                    typeof step.query === 'string'
+                      ? step.query
+                      : JSON.stringify(step.query, null, 2)
+                  const resultString =
+                    typeof step.resultSummary === 'string'
+                      ? step.resultSummary
+                      : JSON.stringify(step.resultSummary, null, 2)
+                  const isFailed =
+                    step.status === 'failed' ||
+                    step.status === 'error' ||
+                    (resultString &&
+                      (resultString.startsWith('[ERROR]') || resultString.includes(' crash:')))
+
+                  const toolLabel = step.tool || step.task || 'tool'
+                  const displayReason = step.reason || null
+                  let shortSummary = ''
+                  if (hasQuery) {
+                    try {
+                      const parsed = JSON.parse(queryString)
+                      shortSummary =
+                        parsed.command ||
+                        parsed.path ||
+                        parsed.query ||
+                        parsed.prompt ||
+                        parsed.skill_name ||
+                        queryString
+                    } catch {
+                      shortSummary = queryString
+                    }
+                  }
+
+                  if (!hasQuery && !hasResult) {
+                    return (
+                      <div key={idx} className="flex flex-col py-0.5">
+                        <div className="flex items-center gap-2 text-xs font-mono text-white/60">
+                          {isPendingApproval ? (
+                            <Loader2 className="w-3.5 h-3.5 animate-spin text-warning shrink-0" />
+                          ) : isRunning ? (
+                            <Loader2 className="w-3.5 h-3.5 animate-spin text-primary/80 shrink-0" />
+                          ) : isStopped ? (
+                            <Ban className="w-3.5 h-3.5 text-warning shrink-0" />
+                          ) : isFailed ? (
+                            <XCircle className="w-3.5 h-3.5 text-error shrink-0" />
+                          ) : (
+                            <Check className="w-3.5 h-3.5 text-success/80 shrink-0" />
+                          )}
+                          <span className="font-semibold text-white/90">
+                            {displayReason || toolLabel}
+                          </span>
+                          {isPendingApproval ? (
+                            <span className="text-[10px] text-warning font-normal animate-pulse">
+                              (menunggu persetujuan...)
+                            </span>
+                          ) : isStopped ? (
+                            <span className="text-[10px] text-warning/80 font-normal">
+                              (dihentikan)
+                            </span>
+                          ) : null}
+                        </div>
+                        {isPendingApproval && (
+                          <div className="pl-3 pr-1">
+                            <ApprovalBubble
+                              approvalId={activeApproval.id}
+                              tool={activeApproval.tool}
+                              query={activeApproval.query}
+                              message={activeApproval.message}
+                              status={activeApproval.status}
+                            />
+                          </div>
+                        )}
+                      </div>
+                    )
+                  }
+
+                  return (
+                    <div key={idx} className="flex flex-col py-0.5">
+                      <details
+                        className="group/livetool outline-none text-xs font-mono"
+                        open={isRunning}
+                      >
+                        <summary className="list-none flex items-center gap-2 cursor-pointer text-white/60 hover:text-white select-none py-0.5 transition-colors">
+                          {isPendingApproval ? (
+                            <Loader2 className="w-3.5 h-3.5 animate-spin text-warning shrink-0" />
+                          ) : isRunning ? (
+                            <Loader2 className="w-3.5 h-3.5 animate-spin text-primary/80 shrink-0" />
+                          ) : isStopped ? (
+                            <Ban className="w-3.5 h-3.5 text-warning shrink-0" />
+                          ) : isFailed ? (
+                            <XCircle className="w-3.5 h-3.5 text-error shrink-0" />
+                          ) : (
+                            <Check className="w-3.5 h-3.5 text-success/80 shrink-0" />
+                          )}
+                          <span className="font-semibold text-white/90">
+                            {displayReason || toolLabel}
+                          </span>
+                          {isPendingApproval ? (
+                            <span className="text-[10px] text-warning font-normal animate-pulse">
+                              (menunggu persetujuan...)
+                            </span>
+                          ) : isStopped ? (
+                            <span className="text-[10px] text-warning/80 font-normal">
+                              (dihentikan)
+                            </span>
+                          ) : null}
+                          {!displayReason && shortSummary && (
+                            <span className="text-white/40 truncate max-w-md">
+                              {String(shortSummary).slice(0, 80)}
+                            </span>
+                          )}
+                          <ChevronRight className="w-3 h-3 text-white/40 transition-transform duration-150 group-open/livetool:rotate-90 ml-auto shrink-0" />
+                        </summary>
+                        <div className="mt-1 pl-3 my-1.5 text-[11px] font-mono border-l-2 border-white/20 text-white/80 whitespace-pre-wrap break-all max-h-56 overflow-y-auto custom-scrollbar bg-base-300/40 p-2.5 rounded-lg space-y-1.5 select-text">
+                          {step.tool && (
+                            <div>
+                              <div className="text-primary/70 font-semibold mb-0.5">Tool:</div>
+                              <div className="text-white/90 font-mono text-[11px]">{step.tool}</div>
+                            </div>
+                          )}
+                          {displayReason && (
+                            <div>
+                              <div className="text-info/80 font-semibold mb-0.5">Tujuan:</div>
+                              <div className="text-white/90 font-sans">{displayReason}</div>
+                            </div>
+                          )}
+                          {hasQuery && (
+                            <div>
+                              <div className="text-primary/70 font-semibold mb-0.5">Input:</div>
+                              <div className="text-white/90">{queryString}</div>
+                            </div>
+                          )}
+                          {hasResult && (
+                            <div>
+                              <div className="text-success/70 font-semibold mb-0.5">Output:</div>
+                              <div className="text-white/80">{resultString}</div>
+                            </div>
+                          )}
+                          {step.preview && (
+                            <div className="mt-2 pt-1 border-t border-white/10">
+                              <div className="text-primary/70 font-semibold mb-1">
+                                Pratinjau Visual:
+                              </div>
+                              <div className="relative group/preview rounded-lg overflow-hidden border border-white/20 bg-black/40 max-w-sm">
+                                <img
+                                  src={step.preview}
+                                  alt="Tool Visual Output"
+                                  className="max-h-48 w-auto object-contain cursor-pointer transition-transform duration-200 group-hover/preview:scale-105"
+                                  onClick={() => window.open(step.preview, '_blank')}
+                                />
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </details>
+                      {isPendingApproval && (
+                        <div className="pl-3 pr-1">
+                          <ApprovalBubble
+                            approvalId={activeApproval.id}
+                            tool={activeApproval.tool}
+                            query={activeApproval.query}
+                            message={activeApproval.message}
+                            status={activeApproval.status}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </details>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/renderer/src/components/Chat/YoutubeSearchBubble.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+export const YoutubeSearchBubble = ({ queryYoutube, youtubeLink }) => {
+  return (
+    <>
+      <h1 className="text-xs font-bold mt-2 flex items-center gap-1 uppercase tracking-wider">
+        <svg
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fillRule="evenodd"
+            d="M21.7 8.037a4.26 4.26 0 0 0-.789-1.964 2.84 2.84 0 0 0-1.984-.839c-2.767-.2-6.926-.2-6.926-.2s-4.157 0-6.928.2a2.836 2.836 0 0 0-1.983.839 4.225 4.225 0 0 0-.79 1.965 30.146 30.146 0 0 0-.2 3.206v1.5a30.12 30.12 0 0 0 .2 3.206c.094.712.364 1.39.784 1.972.604.536 1.38.837 2.187.848 1.583.151 6.731.2 6.731.2s4.161 0 6.928-.2a2.844 2.844 0 0 0 1.985-.84 4.27 4.27 0 0 0 .787-1.965 30.12 30.12 0 0 0 .2-3.206v-1.516a30.672 30.672 0 0 0-.202-3.206Zm-11.692 6.554v-5.62l5.4 2.819-5.4 2.801Z"
+            clipRule="evenodd"
+          />
+        </svg>
+        {`Pencarian: ${queryYoutube.slice(0, 40)}`}
+        {queryYoutube.length > 40 ? '...' : ''}
+      </h1>
+      <div className="p-3 bg-base-300 flex flex-wrap rounded-2xl mt-2">
+        {youtubeLink.map((item, idx) => {
+          const id = typeof item === 'object' ? item.videoId : item
+          return (
+            <iframe
+              key={idx}
+              className="w-1/2 aspect-video rounded-lg"
+              src={`https://www.youtube.com/embed/${id}`}
+              title="YouTube video player"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+            ></iframe>
+          )
+        })}
+      </div>
+    </>
+  )
+}

package/src/renderer/src/components/Chat/YoutubeSummaryBubble.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+export const YoutubeSummaryBubble = ({ youtubeLink }) => {
+  const getYouTubeID = (text) => {
+    const ytRegex =
+      /(?:https?:\/\/)?(?:www\.|m\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/v\/|youtube\.com\/shorts\/)([a-zA-Z0-9_-]{11})/
+    const match = text.match(ytRegex)
+    return match ? match[1] : null
+  }
+
+  const youtubeVideoId = getYouTubeID(youtubeLink)
+  const youtubeEmbedUrl = youtubeVideoId ? `https://www.youtube.com/embed/${youtubeVideoId}?rel=0` : null
+
+  return (
+    <div className="p-3 bg-base-300 rounded-2xl my-2 space-y-3">
+      {youtubeEmbedUrl ? (
+        <iframe
+          className="w-full aspect-video rounded-xl"
+          src={youtubeEmbedUrl}
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerPolicy="strict-origin-when-cross-origin"
+          allowFullScreen
+        ></iframe>
+      ) : (
+        <div className="aspect-video rounded-xl bg-base-200 flex items-center justify-center text-sm text-base-content/70 text-center px-4">
+          Tidak bisa memuat pemutar YouTube untuk tautan ini.
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={() => window.api.openExternal(youtubeLink)}
+        className="btn btn-sm btn-neutral w-full normal-case"
+      >
+        Watch on YouTube
+      </button>
+    </div>
+  )
+}

package/src/renderer/src/components/Chat/index.js

@@ -0,0 +1,11 @@
+export * from './CodeBlock'
+export * from './MessageBubble'
+export * from './ThinkingBubble'
+export * from './DurableTaskBubble'
+export * from './MemoryFooterBubble'
+export * from './PluginExecutionBubble'
+export * from './YoutubeSearchBubble'
+export * from './YoutubeSummaryBubble'
+export * from './GeminiWidgets'
+export * from './ApprovalBubble'
+export * from './FileDiffModal'