1+ <script >
2+ import { onMount } from ' svelte' ;
3+ import { Card , CardBody , Input , Button } from ' @sveltestrap/sveltestrap' ;
4+ import { getVectorKnowledgeCollections } from ' $lib/services/knowledge-base-service' ;
5+
6+ const limit = 5 ;
7+
8+ /** @type {import('$agentTypes').AgentModel} */
9+ export let agent;
10+
11+ export const fetchKnowledgeBases = () => {
12+ const candidates = innerKnowledgeBases? .filter (x => !! x .name )? .map (x => {
13+ return {
14+ name: x .name ,
15+ disabled: x .disabled
16+ };
17+ });
18+ candidates .map (x => {
19+ console .log (x .disabled );
20+ console .log (x .name );
21+ });
22+ refresh (candidates);
23+ return candidates;
24+ }
25+
26+ /** @type {string[]} */
27+ let knowledgeBaseOptions = [];
28+
29+ /** @type {import('$agentTypes').AgentKnowledgeBase[]} */
30+ let innerKnowledgeBases = [];
31+
32+ onMount (async () => {
33+ const type = ' question-answer' ;
34+ getVectorKnowledgeCollections (type).then (data => {
35+ const names = data || [];
36+ knowledgeBaseOptions = [" " , ... names];
37+ });
38+ init ();
39+ });
40+
41+ function init () {
42+ const list = agent .knowledge_bases ? .map (x => {
43+ return {
44+ ... x,
45+ disabled: false
46+ };
47+ }) || [];
48+ refresh (list);
49+ }
50+
51+ /**
52+ * @param {any} e
53+ * @param {number} idx
54+ */
55+ function changeKnowledgeBase (e , idx ) {
56+ const found = innerKnowledgeBases .find ((_ , index ) => index === idx);
57+ if (! found) return ;
58+
59+ const name = e .target .value ;
60+ found .name = name;
61+ refresh (innerKnowledgeBases);
62+ }
63+
64+ function addKnowledgeBase () {
65+ innerKnowledgeBases = [
66+ ... innerKnowledgeBases,
67+ {
68+ name: ' ' ,
69+ disabled: false
70+ }
71+ ];
72+ }
73+
74+ /** @param {number} idx */
75+ function deleteKnowledgeBase (idx ) {
76+ innerKnowledgeBases = innerKnowledgeBases .filter ((_ , index ) => index !== idx);
77+ }
78+
79+ /**
80+ * @param {any} e
81+ * @param {number} uid
82+ */
83+ function toggleKnowledgeBase (e , uid ) {
84+ const found = innerKnowledgeBases .find ((_ , index ) => index === uid);
85+ if (! found) return ;
86+
87+ found .disabled = ! e .target .checked ;
88+ refresh (innerKnowledgeBases);
89+ }
90+
91+
92+ /** @param {import('$agentTypes').AgentKnowledgeBase[]} list */
93+ function refresh (list ) {
94+ innerKnowledgeBases = list? .map (x => {
95+ return {
96+ name: x .name ,
97+ disabled: x .disabled
98+ }
99+ }) || [];
100+ }
101+
102+ < / script>
103+
104+ < Card>
105+ < CardBody>
106+ < div class = " text-center" >
107+ < h5 class = " mt-1 mb-3" > Knowledge Bases< / h5>
108+ < / div>
109+
110+ < div class = " agent-utility-container" >
111+ {#each innerKnowledgeBases as knowledge, uid (uid)}
112+ < div class = " utility-wrapper" >
113+ < div class = " utility-row utility-row-primary" >
114+ < div class = " utility-label fw-bold" >
115+ < div class = " line-align-center" > {` Collection #${ uid + 1 } ` }< / div>
116+ < div class = " utility-tooltip" >
117+ < div class = " line-align-center" >
118+ < Input
119+ type= " checkbox"
120+ checked= {! knowledge .disabled }
121+ on: change= {e => toggleKnowledgeBase (e, uid)}
122+ / >
123+ < / div>
124+ < div
125+ class = " line-align-center"
126+ data- bs- toggle= " tooltip"
127+ data- bs- placement= " top"
128+ title= " Uncheck to disable utility"
129+ >
130+ < i class = " bx bx-info-circle" / >
131+ < / div>
132+ < / div>
133+ < / div>
134+ < div class = " utility-value" >
135+ < div class = " utility-input line-align-center" >
136+ < Input
137+ type= " select"
138+ value= {knowledge .name }
139+ disabled= {knowledge .disabled }
140+ on: change= {e => changeKnowledgeBase (e, uid)}
141+ >
142+ {#each [... knowledgeBaseOptions, " one.data-assistant" ] as option}
143+ < option value= {option} selected= {option == knowledge .name }> {option}< / option>
144+ {/ each}
145+ < / Input>
146+ < / div>
147+ < div class = " utility-delete line-align-center" >
148+ < i
149+ class = " bx bxs-no-entry text-danger clickable"
150+ role= " link"
151+ tabindex= " 0"
152+ on: keydown= {() => {}}
153+ on: click= {() => deleteKnowledgeBase (uid)}
154+ / >
155+ < / div>
156+ < / div>
157+ < / div>
158+ < / div>
159+ {/ each}
160+
161+ {#if innerKnowledgeBases .length < limit}
162+ < div class = " add-utility" >
163+ < Button color= " primary" on: click= {() => addKnowledgeBase ()}>
164+ < span>
165+ < i class = " bx bx-plus" / >
166+ < span> Add Knowledge Base< / span>
167+ < / span>
168+ < / Button>
169+ < / div>
170+ {/ if }
171+ < / div>
172+ < / CardBody>
173+ < / Card>
0 commit comments