@cryptotaxi247 / CoPilot
Code Commits Issues Pulls Sessions CI/CD
main
main
vue 145 lines 4.34 KB
Raw
1 <template>
2 <div class="flex flex-col gap-4 pb-1">
3 <!-- Basic Information -->
4 <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
5 <CardKV>
6 <template #key>Information</template>
7 <template #value>
8 <div class="flex flex-col gap-2 py-0.5">
9 <div class="flex flex-wrap gap-2">
10 <strong>Technology:</strong>
11 <span>{{ action.technology }}</span>
12 </div>
13 <div v-if="action.category" class="flex flex-wrap gap-2">
14 <strong>Category:</strong>
15 <span>{{ action.category }}</span>
16 </div>
17 <div v-if="action.version" class="flex flex-wrap gap-2">
18 <strong>Version:</strong>
19 <span>{{ action.version }}</span>
20 </div>
21 <div v-if="action.last_updated" class="flex flex-wrap gap-2">
22 <strong>Last Updated:</strong>
23 <span>{{ formatDate(action.last_updated, dFormats.datetime) }}</span>
24 </div>
25 </div>
26 </template>
27 </CardKV>
28 <CardKV>
29 <template #key>Script Details</template>
30 <template #value>
31 <div class="flex flex-col gap-2 py-0.5">
32 <div v-if="action.script_name" class="flex flex-wrap gap-2">
33 <strong>Script Name:</strong>
34 <span>{{ action.script_name }}</span>
35 </div>
36 <div class="flex flex-wrap gap-2">
37 <strong>Repository:</strong>
38 <a :href="action.repo_url" target="_blank" rel="noopener">
39 {{ action.repo_url }}
40 </a>
41 </div>
42 </div>
43 </template>
44 </CardKV>
45 </div>
46
47 <!-- Description -->
48 <CardKV>
49 <template #key>Description</template>
50 <template #value>{{ action.description }}</template>
51 </CardKV>
52
53 <!-- Parameters -->
54 <CardKV v-if="action.script_parameters?.length">
55 <template #key>Parameters</template>
56 <template #value>
57 <div class="grid grid-cols-1 gap-3 py-1 lg:grid-cols-2">
58 <CardEntity
59 v-for="param in action.script_parameters"
60 :key="param.name"
61 embedded
62 size="small"
63 class="h-full"
64 main-box-class="grow"
65 card-entity-wrapper-class="h-full"
66 >
67 <template #headerMain>
68 <div class="text-default flex items-center gap-4">
69 <div class="text-sm font-semibold">{{ param.name }}</div>
70 <Badge :color="param.required ? 'danger' : 'success'" type="splitted">
71 <template #value>
72 <span class="text-xs">{{ param.required ? "Required" : "Optional" }}</span>
73 </template>
74 </Badge>
75 </div>
76 </template>
77 <template #headerExtra>
78 <Badge>
79 <template #value>
80 <span class="text-xs">{{ param.type }}</span>
81 </template>
82 </Badge>
83 </template>
84
85 <template v-if="param.description" #default>
86 <p class="text-xs">{{ param.description }}</p>
87 </template>
88
89 <template #footer>
90 <div class="flex flex-col gap-1">
91 <div
92 v-if="param.default !== null && param.default !== undefined"
93 class="text-xs opacity-60"
94 >
95 <span class="font-medium">Default:</span>
96 <code class="code-block ml-1 rounded px-1 py-0.5 text-xs">
97 {{ param.default }}
98 </code>
99 </div>
100
101 <div v-if="param.enum && param.enum.length > 0" class="text-xs opacity-60">
102 <span class="font-medium">Options:</span>
103 <div class="mt-1 flex flex-wrap gap-1">
104 <code
105 v-for="option in param.enum"
106 :key="option"
107 class="enum-option rounded px-1 py-0.5 text-xs"
108 >
109 {{ option }}
110 </code>
111 </div>
112 </div>
113
114 <div v-if="param.arg_position" class="text-xs opacity-60">
115 <span class="font-medium">Position:</span>
116 {{ param.arg_position }}
117 </div>
118 </div>
119 </template>
120 </CardEntity>
121 </div>
122 </template>
123 </CardKV>
124
125 <!-- Tags -->
126 <div v-if="action.tags?.length" class="flex flex-wrap gap-2">
127 <code v-for="tag of action.tags" :key="tag">#{{ tag }}</code>
128 </div>
129 </div>
130 </template>
131
132 <script setup lang="ts">
133 import type { CopilotAction } from "@/types/copilotAction.d"
134 import Badge from "@/components/common/Badge.vue"
135 import CardEntity from "@/components/common/cards/CardEntity.vue"
136 import CardKV from "@/components/common/cards/CardKV.vue"
137 import { useSettingsStore } from "@/stores/settings"
138 import { formatDate } from "@/utils/format"
139
140 const { action } = defineProps<{
141 action: CopilotAction
142 }>()
143
144 const dFormats = useSettingsStore().dateFormat
145 </script>