Skip to content

Commit e82e803

Browse files
ivansglazunovivansglazunov
committed
fix
1 parent 6d42f67 commit e82e803

File tree

2 files changed

+224
-72
lines changed

2 files changed

+224
-72
lines changed

‎pages/index.tsx

Lines changed: 218 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
AccordionIcon,
55
AccordionItem,
66
AccordionPanel,
7-
Box, Button, Card, CardBody, CardHeader, CircularProgress, CircularProgressLabel, FormControl, FormLabel, Heading, Input, InputGroup, InputRightElement, List, ListIcon, ListItem, Select, SimpleGrid,
7+
Box, Button, Card, CardBody, CardHeader, CircularProgress, CircularProgressLabel, FormControl, FormLabel, HStack, Heading, Input, InputGroup, InputRightElement, List, ListIcon, ListItem, Select, SimpleGrid,
88
Slider,
99
SliderFilledTrack,
1010
SliderMark,
@@ -14,7 +14,7 @@ import {
1414
Text,
1515
useToast,
1616
} from '@chakra-ui/react';
17-
import { CheckCircleIcon, WarningIcon, SpinnerIcon } from '@chakra-ui/icons'
17+
import { CheckCircleIcon, WarningIcon, SpinnerIcon, CheckIcon, TriangleDownIcon } from '@chakra-ui/icons'
1818
import CytoGraph from '@deep-foundation/deepcase/imports/cyto/graph';
1919
import { useRefstarter } from '@deep-foundation/deepcase/imports/refstater';
2020
import { useDeep } from '@deep-foundation/deeplinks/imports/client';
@@ -45,6 +45,9 @@ import React, { useEffect, useRef, useState } from 'react';
4545
import { Connection } from '../src/connection';
4646
import { i18nGetStaticProps } from '../src/i18n';
4747
import useAxios from 'axios-hooks';
48+
import { EditorTextArea } from '@deep-foundation/deepcase/imports/editor/editor-textarea';
49+
import times from 'lodash/times';
50+
import { deepEqual } from 'assert';
4851

4952
const { version } = require('../package.json');
5053

@@ -121,73 +124,78 @@ const InstallerView = React.memo(function InstallerView({}: {}) {
121124
</Heading>
122125
</CardHeader>
123126
<CardBody>
124-
{!installer?.installing ? <Button colorScheme={'blue'} onClick={() => installer.install()}>install</Button> : <Button disabled variant='outline'>{installer?.installing ? 'installing' : 'installed'}</Button>}
125-
{<Button colorScheme={'blue'} onClick={() => installer.reset()}>reset</Button>}
126-
<List spacing={3}>
127-
<ListItem>
128-
<ListIcon as={installer?.status ? CheckCircleIcon : WarningIcon} color={installer?.status ? 'green.500' : 'red.500'} />
129-
status
130-
</ListItem>
131-
<ListItem>
132-
<ListIcon as={deep ? CheckCircleIcon : WarningIcon} color={deep ? 'green.500' : 'red.500'} />
133-
connected
134-
</ListItem>
135-
<ListItem>
136-
<ListIcon as={installer?.isAdmin ? CheckCircleIcon : WarningIcon} color={installer?.isAdmin ? 'green.500' : 'red.500'} />
137-
isAdmin
138-
</ListItem>
139-
<ListItem>
140-
<ListIcon as={installer?.['@deep-foundation/chatgpt-azure']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['@deep-foundation/chatgpt-azure']?.length ? 'green.500' : 'red.500'} />
141-
@deep-foundation/chatgpt-azure
142-
</ListItem>
143-
<ListItem>
144-
<ListIcon as={installer?.['@deep-foundation/chatgpt-azure-deep']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['@deep-foundation/chatgpt-azure-deep']?.length ? 'green.500' : 'red.500'} />
145-
@deep-foundation/chatgpt-azure-deep
146-
</ListItem>
147-
<ListItem>
148-
<ListIcon as={installer?.['@deep-foundation/chatgpt-azure-templates']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['@deep-foundation/chatgpt-azure-templates']?.length ? 'green.500' : 'red.500'} />
149-
@deep-foundation/chatgpt-azure-templates
150-
</ListItem>
151-
<ListItem>
152-
<ListIcon as={installer?.['@deep-foundation/deepmemo-links']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['@deep-foundation/deepmemo-links']?.length ? 'green.500' : 'red.500'} />
153-
@deep-foundation/deepmemo-links
154-
</ListItem>
155-
<ListItem>
156-
<ListIcon as={installer?.installed ? CheckCircleIcon : WarningIcon} color={installer?.installed ? 'green.500' : 'red.500'} />
157-
installed
158-
</ListItem>
159-
<ListItem>
160-
<ListIcon as={installer?.['ApiKey']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['ApiKey']?.length ? 'green.500' : 'red.500'} />
161-
ApiKey ({installer?.['ApiKey']?.[0]?.value?.value || ''})
162-
<InputGroup size='md'>
163-
<Input placeholder='Enter token for choosen model' value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
164-
<InputRightElement>
165-
<Button size='sm' onClick={async () => {
166-
await installer.saveApiKey(apiKey);
167-
}}>save</Button>
168-
</InputRightElement>
169-
</InputGroup>
170-
</ListItem>
171-
<ListItem>
172-
<ListIcon as={installer?.['UsesApiKey']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['UsesApiKey']?.length ? 'green.500' : 'red.500'} />
173-
UsesApiKey
174-
</ListItem>
175-
<ListItem>
176-
<ListIcon as={installer?.['Model']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['Model']?.length ? 'green.500' : 'red.500'} />
177-
Model
178-
</ListItem>
179-
<ListItem>
180-
<ListIcon as={installer?.['UsesModel']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['UsesModel']?.length ? 'green.500' : 'red.500'} />
181-
UsesModel
182-
<Select placeholder='Choose model' value={String(installer?.['UsesModel']?.[0]?.to_id)} onChange={e => installer.saveUsesModel(+e.target.value)}>
183-
{installer?.['Model']?.map(l => <option value={String(l.id)}>{l?.value?.value}</option>)}
184-
</Select>
185-
</ListItem>
186-
<ListItem>
187-
<ListIcon as={installer?.['space'] ? CheckCircleIcon : WarningIcon} color={installer?.['space'] ? 'green.500' : 'red.500'} />
188-
space ({installer?.['space']?.id || ''}) <Button disabled={!installer?.space} variant={!!installer?.space ? 'outline' : 'solid'} colorScheme={'blue'} onClick={() => installer.defineSpace()}>define</Button>
189-
</ListItem>
190-
</List>
127+
<SimpleGrid columns={{sm: 1, md: 2}}>
128+
<Box>
129+
{!installer?.installing ? <Button colorScheme={'blue'} onClick={() => installer.install()}>install</Button> : <Button disabled variant='outline'>{installer?.installing ? 'installing' : 'installed'}</Button>}
130+
{<Button colorScheme={'blue'} onClick={() => installer.reset()}>reset</Button>}
131+
<List spacing={3}>
132+
<ListItem>
133+
<ListIcon as={installer?.status ? CheckCircleIcon : WarningIcon} color={installer?.status ? 'green.500' : 'red.500'} />
134+
status
135+
</ListItem>
136+
<ListItem>
137+
<ListIcon as={deep ? CheckCircleIcon : WarningIcon} color={deep ? 'green.500' : 'red.500'} />
138+
connected
139+
</ListItem>
140+
<ListItem>
141+
<ListIcon as={installer?.isAdmin ? CheckCircleIcon : WarningIcon} color={installer?.isAdmin ? 'green.500' : 'red.500'} />
142+
isAdmin
143+
</ListItem>
144+
<ListItem>
145+
<ListIcon as={installer?.['@deep-foundation/chatgpt-azure']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['@deep-foundation/chatgpt-azure']?.length ? 'green.500' : 'red.500'} />
146+
@deep-foundation/chatgpt-azure
147+
</ListItem>
148+
<ListItem>
149+
<ListIcon as={installer?.['@deep-foundation/chatgpt-azure-deep']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['@deep-foundation/chatgpt-azure-deep']?.length ? 'green.500' : 'red.500'} />
150+
@deep-foundation/chatgpt-azure-deep
151+
</ListItem>
152+
<ListItem>
153+
<ListIcon as={installer?.['@deep-foundation/chatgpt-azure-templates']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['@deep-foundation/chatgpt-azure-templates']?.length ? 'green.500' : 'red.500'} />
154+
@deep-foundation/chatgpt-azure-templates
155+
</ListItem>
156+
<ListItem>
157+
<ListIcon as={installer?.['@deep-foundation/deepmemo-links']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['@deep-foundation/deepmemo-links']?.length ? 'green.500' : 'red.500'} />
158+
@deep-foundation/deepmemo-links
159+
</ListItem>
160+
<ListItem>
161+
<ListIcon as={installer?.installed ? CheckCircleIcon : WarningIcon} color={installer?.installed ? 'green.500' : 'red.500'} />
162+
installed
163+
</ListItem>
164+
<ListItem>
165+
<ListIcon as={installer?.['ApiKey']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['ApiKey']?.length ? 'green.500' : 'red.500'} />
166+
ApiKey ({installer?.['ApiKey']?.[0]?.value?.value || ''})
167+
<InputGroup size='md'>
168+
<Input placeholder='Enter token for choosen model' value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
169+
<InputRightElement>
170+
<Button size='sm' onClick={async () => {
171+
await installer.saveApiKey(apiKey);
172+
}}>save</Button>
173+
</InputRightElement>
174+
</InputGroup>
175+
</ListItem>
176+
<ListItem>
177+
<ListIcon as={installer?.['UsesApiKey']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['UsesApiKey']?.length ? 'green.500' : 'red.500'} />
178+
UsesApiKey
179+
</ListItem>
180+
<ListItem>
181+
<ListIcon as={installer?.['Model']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['Model']?.length ? 'green.500' : 'red.500'} />
182+
Model
183+
</ListItem>
184+
<ListItem>
185+
<ListIcon as={installer?.['UsesModel']?.length ? CheckCircleIcon : WarningIcon} color={installer?.['UsesModel']?.length ? 'green.500' : 'red.500'} />
186+
UsesModel
187+
<Select placeholder='Choose model' value={String(installer?.['UsesModel']?.[0]?.to_id)} onChange={e => installer.saveUsesModel(+e.target.value)}>
188+
{installer?.['Model']?.map(l => <option value={String(l.id)}>{l?.value?.value}</option>)}
189+
</Select>
190+
</ListItem>
191+
<ListItem>
192+
<ListIcon as={installer?.['space'] ? CheckCircleIcon : WarningIcon} color={installer?.['space'] ? 'green.500' : 'red.500'} />
193+
space ({installer?.['space']?.id || ''}) <Button disabled={!installer?.space} variant={!!installer?.space ? 'outline' : 'solid'} colorScheme={'blue'} onClick={() => installer.defineSpace()}>define</Button>
194+
</ListItem>
195+
</List>
196+
</Box>
197+
{deep?.linkId && <Graph linkId={deep.linkId}/>}
198+
</SimpleGrid>
191199
</CardBody>
192200
</Card>
193201
</>;
@@ -215,6 +223,146 @@ const Graph = React.memo(function Graph({ linkId, query = {} }: { linkId: Id; qu
215223
</>;
216224
});
217225

226+
const TemplateView = React.memo(function TemplateView({ template }: { template: any }) {
227+
const deep = useDeep();
228+
const refEditor = useRef<any>();
229+
const [value, setValue] = useState(template?.value?.value || '');
230+
231+
const savedValue = template?.value?.value;
232+
const [saving, setSaving] = useState(false);
233+
234+
const save = async (value) => {
235+
setSaving(true);
236+
await deep.update({ link_id: template.id }, { value }, { table: 'strings' });
237+
setSaving(false);
238+
}
239+
240+
const { data: promises } = deep.useDeepSubscription({
241+
up: {
242+
tree_id: deep.idLocal('@deep-foundation/core', 'promiseTree'),
243+
parent: {
244+
from_id: template.id,
245+
type_id: { _id: ['@deep-foundation/chatgpt-azure-templates', 'Apply'] },
246+
},
247+
},
248+
});
249+
250+
const rejectsAndResolves = deep.useMinilinksSubscription({
251+
type_id: { _in: [deep.idLocal('@deep-foundation/core', 'Resolved'), deep.idLocal('@deep-foundation/core', 'Rejected')] },
252+
from: {
253+
type_id: deep.idLocal('@deep-foundation/core', 'Promise'),
254+
in: {
255+
type_id: deep.idLocal('@deep-foundation/core', 'Then'),
256+
from: {
257+
from_id: template.id,
258+
}
259+
},
260+
}
261+
});
262+
263+
return <Box borderBottom={'1px'} borderColor={'gray.300'}>
264+
<SimpleGrid columns={{sm: 1, md: 2}}>
265+
<Box>
266+
<Box h={'10em'} p={2}>
267+
<EditorTextArea
268+
refEditor={refEditor}
269+
value={value}
270+
defaultLanguage={`javascript`}
271+
minimap={false}
272+
onChange={(value) => {
273+
setValue(value);
274+
}}
275+
onClose={() => {
276+
}}
277+
onSave={save}
278+
onMount={() => {}}
279+
/>
280+
</Box>
281+
<HStack p={2} pt={0} spacing={2}>
282+
<Button
283+
colorScheme={savedValue === value || saving ? 'grey' : 'blue'} disabled={savedValue === value || saving} variant={'solid'} size="sm"
284+
onClick={() => save(value)}
285+
>
286+
{saving ? <SpinnerIcon/> : savedValue === value ? <CheckIcon/> : <TriangleDownIcon/>}
287+
</Button>
288+
<Button colorScheme={'blue'} variant={'solid'} size="sm">disabled</Button>
289+
<Button colorScheme={'blue'} variant={'outline'} size="sm">every minute</Button>
290+
<Button colorScheme={'green'} variant={'outline'} size="sm"
291+
onClick={async () => deep.insert({
292+
type_id: await deep.id('@deep-foundation/chatgpt-azure-templates', 'Apply'),
293+
from_id: template.id,
294+
to_id: deep?.linkId,
295+
in: { data: [
296+
{ type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: template.id },
297+
]},
298+
})}
299+
>manual</Button>
300+
<Button
301+
colorScheme={'red'} variant={'solid'} size="sm"
302+
onClick={() => deep.delete({ _or: [
303+
{ id: template.id },
304+
{ type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: deep?.linkId, to_id: template.id },
305+
] })}
306+
>x</Button>
307+
</HStack>
308+
</Box>
309+
<Box p={2} h={'11em'} overflowY={'scroll'}>
310+
{rejectsAndResolves.map(n => <Box
311+
borderBottom={'1px'} borderColor={'gray.300'} p={2}
312+
color={n.type_id === deep.idLocal('@deep-foundation/core', 'Rejected') ? 'red.500' : 'green.500'}
313+
>
314+
{n.type_id === deep.idLocal('@deep-foundation/core', 'Rejected') && <pre><code>{JSON.stringify(n?.to?.value?.value, null, 2)}</code></pre>}
315+
{n.type_id === deep.idLocal('@deep-foundation/core', 'Resolved') && <pre><code>{n?.id}</code></pre>}
316+
</Box>)}
317+
</Box>
318+
</SimpleGrid>
319+
</Box>;
320+
});
321+
322+
const TemplatesViewCore = React.memo(function TemplatesView({ }: { }) {
323+
const deep = useDeep();
324+
const device = useDevice();
325+
deep.useDeepSubscription({
326+
type_id: { _id: ['@deep-foundation/chatgpt-azure-templates', 'Template'] },
327+
in: {
328+
type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: deep?.linkId,
329+
}
330+
});
331+
const templates = deep.useMinilinksSubscription({
332+
type_id: { _id: ['@deep-foundation/chatgpt-azure-templates', 'Template'] },
333+
});
334+
return <>
335+
<Box borderTop={'1px'} borderColor={'gray.300'}>
336+
{templates.map(t => (<TemplateView template={t}/>))}
337+
</Box>
338+
</>;
339+
});
340+
341+
const TemplatesView = React.memo(function TemplatesView({ }: { }) {
342+
const deep = useDeep();
343+
return <>
344+
<Heading>Templates
345+
<Button
346+
disabled={!deep?.linkId}
347+
colorScheme={'blue'} variant={'solid'} size="sm"
348+
onClick={async () => {
349+
await deep.insert({
350+
type_id: await deep.id('@deep-foundation/chatgpt-azure-templates', 'Template'),
351+
string: { data: { value: `Ниже я приведу последние созданные ассоциативные связи в памяти, расскажи что ты думаешь об этой памяти? Что случилось за этот запомненный период? Какие ты можешь дать рекомендации?
352+
353+
\${JSON.stringify((await deep.select({ order_by: { id: 'desc' }, limit: 10 })).data)}` } },
354+
in: { data: {
355+
type_id: deep.idLocal('@deep-foundation/core', 'Contain'),
356+
from_id: deep.linkId,
357+
} }
358+
});
359+
}}
360+
>+</Button>
361+
</Heading>
362+
{!!deep?.linkId && <TemplatesViewCore/>}
363+
</>;
364+
});
365+
218366
const DeviceView = React.memo(function DeviceView({ interval }: { interval: number }) {
219367
const deep = useDeep();
220368
const device = useDevice();
@@ -418,6 +566,7 @@ export default function Page() {
418566
<BackgroundGeolocationProvider saver={saver && backgroundgeolocationSaver} manual={backgroundGeolocationManual}>
419567
<VoiceProvider saver={saver}>
420568
{NEXT_PUBLIC_BUILD}
569+
<TemplatesView/>
421570
<VoiceView/>
422571
<Interval value={deviceInterval} onChange={setDeviceInterval}/>
423572
<Syncing title={'Enable voice syncing with deep backend?'} value={deviceSaver} setValue={setDeviceSaver}/>

‎src/connection.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Box, Button, Card, CardBody, CardHeader, Code, FormControl, FormLabel, HStack, Heading, Input, SimpleGrid } from "@chakra-ui/react";
22
import { AutoGuest } from "@deep-foundation/deepcase/imports/auto-guest";
33
import { useDeep } from "@deep-foundation/deeplinks/imports/client";
4-
import { useState } from "react";
4+
import { useEffect, useState } from "react";
55
import { useTranslation } from "next-i18next";
66
import { useDeepPath, useDeepToken } from "./provider";
77

@@ -15,6 +15,9 @@ export function Connection() {
1515
const [_path, _setPath] = useState<string|undefined>(path);
1616
const [_token, _setToken] = useState<string|undefined>(token);
1717

18+
const [mounted, setMounted] = useState(false);
19+
useEffect(() => { setMounted(true); }, []);
20+
1821
// useEffect(() => {
1922
// if(!deep.linkId && connection && deepToken) {
2023
// window.location.reload();
@@ -75,15 +78,15 @@ export function Connection() {
7578
{!!autoGuest && <AutoGuest><></></AutoGuest>}
7679
</SimpleGrid>
7780
</CardBody>
78-
<CardBody>
81+
{mounted && <CardBody>
7982
<Code wordBreak={'break-all'}>useDeepPath()[0] // {path || ''}</Code>
8083
<Code wordBreak={'break-all'}>useDeepToken()[0] // {token || ''}</Code>
8184
<Code wordBreak={'break-all'}>useDeep() // {typeof(deep)}</Code>
8285
{!!deep && <Box>
8386
<Code wordBreak={'break-all'}>useDeep().linkId // {deep?.linkId}</Code>
8487
<Code wordBreak={'break-all'}>useDeep().token // {deep?.token}</Code>
8588
</Box>}
86-
</CardBody>
89+
</CardBody>}
8790
</Card>
8891
);
8992
}

0 commit comments

Comments
 (0)