|
| 1 | +// Copyright 2025, Command Line Inc. |
| 2 | +// SPDX-License-Identifier: Apache-2.0 |
| 3 | + |
| 4 | +import { RpcApi } from "@/app/store/wshclientapi"; |
| 5 | +import { TabRpcClient } from "@/app/store/wshrpcutil"; |
| 6 | +import { DiffViewer } from "@/app/view/codeeditor/diffviewer"; |
| 7 | +import { globalStore, WOS } from "@/store/global"; |
| 8 | +import * as jotai from "jotai"; |
| 9 | +import { useEffect } from "react"; |
| 10 | + |
| 11 | +type DiffData = { |
| 12 | + original: string; |
| 13 | + modified: string; |
| 14 | + fileName: string; |
| 15 | +}; |
| 16 | + |
| 17 | +export class AiFileDiffViewModel implements ViewModel { |
| 18 | + blockId: string; |
| 19 | + viewType = "aifilediff"; |
| 20 | + blockAtom: jotai.Atom<Block>; |
| 21 | + diffDataAtom: jotai.PrimitiveAtom<DiffData | null>; |
| 22 | + errorAtom: jotai.PrimitiveAtom<string | null>; |
| 23 | + loadingAtom: jotai.PrimitiveAtom<boolean>; |
| 24 | + viewIcon: jotai.Atom<string>; |
| 25 | + viewName: jotai.Atom<string>; |
| 26 | + viewText: jotai.Atom<string>; |
| 27 | + |
| 28 | + constructor(blockId: string) { |
| 29 | + this.blockId = blockId; |
| 30 | + this.blockAtom = WOS.getWaveObjectAtom<Block>(`block:${blockId}`); |
| 31 | + this.diffDataAtom = jotai.atom(null) as jotai.PrimitiveAtom<DiffData | null>; |
| 32 | + this.errorAtom = jotai.atom(null) as jotai.PrimitiveAtom<string | null>; |
| 33 | + this.loadingAtom = jotai.atom<boolean>(true); |
| 34 | + this.viewIcon = jotai.atom("file-lines"); |
| 35 | + this.viewName = jotai.atom("AI Diff Viewer"); |
| 36 | + this.viewText = jotai.atom((get) => { |
| 37 | + const diffData = get(this.diffDataAtom); |
| 38 | + return diffData?.fileName ?? ""; |
| 39 | + }); |
| 40 | + } |
| 41 | + |
| 42 | + get viewComponent(): ViewComponent { |
| 43 | + return AiFileDiffView; |
| 44 | + } |
| 45 | +} |
| 46 | + |
| 47 | +const AiFileDiffView: React.FC<ViewComponentProps<AiFileDiffViewModel>> = ({ blockId, model }) => { |
| 48 | + const blockData = jotai.useAtomValue(model.blockAtom); |
| 49 | + const diffData = jotai.useAtomValue(model.diffDataAtom); |
| 50 | + const error = jotai.useAtomValue(model.errorAtom); |
| 51 | + const loading = jotai.useAtomValue(model.loadingAtom); |
| 52 | + |
| 53 | + useEffect(() => { |
| 54 | + async function loadDiffData() { |
| 55 | + const chatId = blockData?.meta?.["aifilediff:chatid"]; |
| 56 | + const toolCallId = blockData?.meta?.["aifilediff:toolcallid"]; |
| 57 | + const fileName = blockData?.meta?.file; |
| 58 | + |
| 59 | + if (!chatId || !toolCallId) { |
| 60 | + globalStore.set(model.errorAtom, "Missing chatId or toolCallId in block metadata"); |
| 61 | + globalStore.set(model.loadingAtom, false); |
| 62 | + return; |
| 63 | + } |
| 64 | + |
| 65 | + if (!fileName) { |
| 66 | + globalStore.set(model.errorAtom, "Missing file name in block metadata"); |
| 67 | + globalStore.set(model.loadingAtom, false); |
| 68 | + return; |
| 69 | + } |
| 70 | + |
| 71 | + try { |
| 72 | + const result = await RpcApi.WaveAIGetToolDiffCommand(TabRpcClient, { |
| 73 | + chatid: chatId, |
| 74 | + toolcallid: toolCallId, |
| 75 | + }); |
| 76 | + |
| 77 | + if (!result) { |
| 78 | + globalStore.set(model.errorAtom, "No diff data returned from server"); |
| 79 | + globalStore.set(model.loadingAtom, false); |
| 80 | + return; |
| 81 | + } |
| 82 | + |
| 83 | + const originalContent = atob(result.originalcontents64); |
| 84 | + const modifiedContent = atob(result.modifiedcontents64); |
| 85 | + |
| 86 | + globalStore.set(model.diffDataAtom, { |
| 87 | + original: originalContent, |
| 88 | + modified: modifiedContent, |
| 89 | + fileName: fileName, |
| 90 | + }); |
| 91 | + globalStore.set(model.loadingAtom, false); |
| 92 | + } catch (e) { |
| 93 | + console.error("Error loading diff data:", e); |
| 94 | + globalStore.set(model.errorAtom, `Error loading diff data: ${e.message}`); |
| 95 | + globalStore.set(model.loadingAtom, false); |
| 96 | + } |
| 97 | + } |
| 98 | + |
| 99 | + loadDiffData(); |
| 100 | + }, [blockData?.meta?.["aifilediff:chatid"], blockData?.meta?.["aifilediff:toolcallid"], blockData?.meta?.file]); |
| 101 | + |
| 102 | + if (loading) { |
| 103 | + return ( |
| 104 | + <div className="flex items-center justify-center w-full h-full"> |
| 105 | + <div className="text-secondary">Loading diff...</div> |
| 106 | + </div> |
| 107 | + ); |
| 108 | + } |
| 109 | + |
| 110 | + if (error) { |
| 111 | + return ( |
| 112 | + <div className="flex items-center justify-center w-full h-full"> |
| 113 | + <div className="text-red-500">{error}</div> |
| 114 | + </div> |
| 115 | + ); |
| 116 | + } |
| 117 | + |
| 118 | + if (!diffData) { |
| 119 | + return ( |
| 120 | + <div className="flex items-center justify-center w-full h-full"> |
| 121 | + <div className="text-secondary">No diff data available</div> |
| 122 | + </div> |
| 123 | + ); |
| 124 | + } |
| 125 | + |
| 126 | + return ( |
| 127 | + <DiffViewer |
| 128 | + blockId={blockId} |
| 129 | + original={diffData.original} |
| 130 | + modified={diffData.modified} |
| 131 | + fileName={diffData.fileName} |
| 132 | + /> |
| 133 | + ); |
| 134 | +}; |
| 135 | + |
| 136 | +export default AiFileDiffView; |
0 commit comments