Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: interface and training tpis #323

Open
wants to merge 3 commits into
base: feature/course_project
Choose a base branch
from
Open

feat: interface and training tpis #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b5a376c
feat: interface (dialog component)
PetrochukKsenija Dec 15, 2023
214923c
feat: archive from wit
PetrochukKsenija Dec 15, 2023
bc4bacd
feat: video and training
PetrochukKsenija Dec 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 86 additions & 3 deletions interface/src/components/Chat/Chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ import { Spinner } from '@components/Spinners/LoadSpinner';
import { WaitingSpinner } from '@components/Spinners/WaitingSpinner';
import { refSetter, throttle } from '@utils';
import { useLanguage } from '@hooks/useLanguage';
import { ScEventParams, ScEventType, ScTemplate, ScType } from "ts-sc-client";
import { client } from "@api";

interface IProps {
onSend: (message: string) => void;
Expand Down Expand Up @@ -65,6 +67,13 @@ export const Chat = forwardRef<HTMLDivElement, PropsWithChildren<IProps>>(
const [isLoading, setIsLoading] = useState(false);
const [beforeFetchingScrollHeight, setBeforeFetchingScrollHeight] = useState<number | null>(null);

const [mainBgColor, setMainBgColor] = useState<string>('#ffffff');
const [inputBgColor, setInputBgColor] = useState<string>('#ffffff');
const [buttonBgColor, setButtonBgColor] = useState<string>('#ffffff');
const [buttonActiveColor, setButtonActiveColor] = useState<string>('#ffffff');
const [inputTextColor, setInputTextColor] = useState<string>('#ffffff');
const funcChange = [setMainBgColor, setInputBgColor, setButtonBgColor, setInputTextColor, setButtonActiveColor]

const inputRef = useRef<HTMLInputElement | null>(null);
const mainRef = useRef<HTMLDivElement>(null);
const footerRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -130,6 +139,61 @@ export const Chat = forwardRef<HTMLDivElement, PropsWithChildren<IProps>>(
};
const hookLanguage = useLanguage();

async function fetchColorValue() {
const conceptMain = 'concept_data_output_component';
const conceptDataInputComponent = 'concept_data_input_component';
const conceptButton = 'concept_button'
const conceptActiveButton = 'concept_active_button'
const conceptInputText = 'concept_input_text'
const componentColor = 'nrel_component_color';

const baseKeynodes = [
{ id: conceptMain, type: ScType.NodeConstClass },
{ id: conceptDataInputComponent, type: ScType.NodeConstClass },
{ id: conceptButton, type: ScType.NodeConstClass },
{ id: conceptInputText, type: ScType.NodeConstClass },
{ id: conceptActiveButton, type: ScType.NodeConstClass },
];

const helpKeynodes = [
{ id: componentColor, type: ScType.NodeConstNoRole },
];

const colorAlias = '_color';
const componentAlias = '_component'

const keynodes = await client.resolveKeynodes(baseKeynodes);
const hKeynodes = await client.resolveKeynodes(helpKeynodes);

for (var i = 0; i < baseKeynodes.length; i++) {
const template = new ScTemplate();
template.triple(
keynodes[baseKeynodes[i].id],
ScType.EdgeAccessVarPosPerm,
[ScType.NodeVar, componentAlias],
);
template.tripleWithRelation(
componentAlias,
ScType.EdgeDCommonVar,
[ScType.LinkVar, colorAlias],
ScType.EdgeAccessVarPosPerm,
hKeynodes[componentColor],
);
const resultColorLink = await client.templateSearch(template);

if (resultColorLink.length) {
const colorLink = resultColorLink[0].get(colorAlias);
const resultColor = await client.getLinkContents([colorLink]);
if (resultColor.length) {
let color = resultColor[0].data;
funcChange[i](color as any);
const eventParams = new ScEventParams(colorLink, ScEventType.ChangeContent, fetchColorValue);
await client.eventsCreate([eventParams]);
}
}
}
}

useEffect(() => {
const LOADING_HEIGHT = 43;
const heightOnScroll = mainRef.current?.scrollHeight;
Expand Down Expand Up @@ -176,9 +240,27 @@ export const Chat = forwardRef<HTMLDivElement, PropsWithChildren<IProps>>(
if (empty) setMessageInput('');
}, [messageInput]);

useEffect(() => {
fetchColorValue();
}, []);

const mainStyles = {
background: mainBgColor,
};

const inputStyles = {
background: inputBgColor,
color: inputTextColor,
};

const buttonStyles = {
background: buttonBgColor,
stroke: buttonActiveColor,
};

return (
<Wrapper className={className}>
<SearchBar />
<Wrapper className={className} style={ mainStyles }>
<SearchBar/>
<Main ref={refSetter(mainRef, chatRef)} onScroll={onScroll}>
{isLoading && (
<WrapperSpinner>
Expand Down Expand Up @@ -212,6 +294,7 @@ export const Chat = forwardRef<HTMLDivElement, PropsWithChildren<IProps>>(
</WrapperAgentAnswer>
<WrapperFooter>
<FooterInput
style={ inputStyles }
autoFocus={true}
ref={inputRef}
value={messageInput}
Expand All @@ -220,7 +303,7 @@ export const Chat = forwardRef<HTMLDivElement, PropsWithChildren<IProps>>(
type="text"
placeholder={textPlaceholder[hookLanguage]}
/>
<FooterSend onClick={onButtonClick} type="submit">
<FooterSend onClick={onButtonClick} type="submit" style={ buttonStyles }>
<WrapperSendIcon>
<SendIcon />
</WrapperSendIcon>
Expand Down
64 changes: 63 additions & 1 deletion interface/src/components/Chat/Date/Date.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { useLanguage } from '@hooks/useLanguage';
import styled from 'styled-components';
import { useEffect, useState } from "react";
import { ScEventParams, ScEventType, ScTemplate, ScType } from "ts-sc-client";
import { client } from "@api";

interface IProps {
date: string;
}
Expand Down Expand Up @@ -57,9 +61,67 @@ export const Date = ({ date }: IProps) => {
const [year, month, day] = date.toString().split('.');
const currentMonth = months[hookLanguage];

const [dateBgColor, setDateBgColor] = useState<string>('#8fc1cf');
const [dateTextColor, setDateTextColor] = useState<string>('#000000');
const funcChange = [setDateBgColor, setDateTextColor]

async function fetchColorValue() {
const conceptDate = 'concept_date';
const conceptDateText = 'concept_date_text';
const componentColor = 'nrel_component_color';
const baseKeynodes = [
{ id: conceptDate, type: ScType.NodeConstClass },
{ id: conceptDateText, type: ScType.NodeConstClass },
];
const helpKeynodes = [
{ id: componentColor, type: ScType.NodeConstNoRole },
];
const colorAlias = '_color';
const componentAlias = '_component'
const keynodes = await client.resolveKeynodes(baseKeynodes);
const hKeynodes = await client.resolveKeynodes(helpKeynodes);

for (var i = 0; i < baseKeynodes.length; i++) {
const template = new ScTemplate();
template.triple(
keynodes[baseKeynodes[i].id],
ScType.EdgeAccessVarPosPerm,
[ScType.NodeVar, componentAlias],
);
template.tripleWithRelation(
componentAlias,
ScType.EdgeDCommonVar,
[ScType.LinkVar, colorAlias],
ScType.EdgeAccessVarPosPerm,
hKeynodes[componentColor],
);
const resultColorLink = await client.templateSearch(template);

if (resultColorLink.length) {
const colorLink = resultColorLink[0].get(colorAlias);
const resultColor = await client.getLinkContents([colorLink]);
if (resultColor.length) {
let color = resultColor[0].data;
funcChange[i](color as any);
const eventParams = new ScEventParams(colorLink, ScEventType.ChangeContent, fetchColorValue);
await client.eventsCreate([eventParams]);
}
}
}
}
useEffect(() => {
fetchColorValue();
}, []);


const dateStyles = {
background: dateBgColor,
color: dateTextColor
};

return (
<>
<Wrapper>
<Wrapper style={ dateStyles }>
<DateInfo>{`${day} ${currentMonth[Number(month)]} ${year}`}</DateInfo>
</Wrapper>
</>
Expand Down
81 changes: 78 additions & 3 deletions interface/src/components/Chat/Message/Message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ import { ReactComponent as LoadingIcon } from '@assets/icon/messageLoading.svg';
import { ReactComponent as ErrorIcon } from '@assets/icon/errorMessage-icon.svg';
import { ReactComponent as RebootIcon } from '@assets/icon/rebootErrorMessage-icon.svg';
import { useLanguage } from '@hooks/useLanguage';
import { ScEventParams, ScEventType, ScTemplate, ScType } from "ts-sc-client";
import { client } from "@api";
import { useEffect, useState } from "react";

interface IProps {
isLoading?: boolean;
isLeft?: boolean;
Expand All @@ -39,15 +43,86 @@ export const Message = ({
}: PropsWithChildren<IProps>) => {
const hookLanguage = useLanguage();

const [userBgColor, setUserBgColor] = useState<string>('#E2E9E7');
const [systemBgColor, setSystemBgColor] = useState<string>('#DFDBD0');
const [messageTextColor, setMessageTextColor] = useState<string>('#000000');
const [timeColor, settimeColor] = useState<string>('#696969');
const funcChange = [setUserBgColor, setSystemBgColor, setMessageTextColor, settimeColor]

async function fetchColorValue() {
const conceptSentMessage = 'concept_sent_message';
const conceptReceivedMessage = 'concept_received_message';
const componentColor = 'nrel_component_color';
const conceptMessageText = 'concept_text_of_message';
const conceptTime = 'concept_time';

const baseKeynodes = [
{ id: conceptSentMessage, type: ScType.NodeConstClass },
{ id: conceptReceivedMessage, type: ScType.NodeConstClass },
{ id: conceptMessageText, type: ScType.NodeConstClass },
{ id: conceptTime, type: ScType.NodeConstClass }
];

const helpKeynodes = [
{ id: componentColor, type: ScType.NodeConstNoRole },
];

const colorAlias = '_color';
const componentAlias = '_component'

const keynodes = await client.resolveKeynodes(baseKeynodes);
const hKeynodes = await client.resolveKeynodes(helpKeynodes);

for (var i = 0; i < baseKeynodes.length; i++) {
const template = new ScTemplate();
template.triple(
keynodes[baseKeynodes[i].id],
ScType.EdgeAccessVarPosPerm,
[ScType.NodeVar, componentAlias],
);
template.tripleWithRelation(
componentAlias,
ScType.EdgeDCommonVar,
[ScType.LinkVar, colorAlias],
ScType.EdgeAccessVarPosPerm,
hKeynodes[componentColor],
);
const resultColorLink = await client.templateSearch(template);

if (resultColorLink.length) {
const colorLink = resultColorLink[0].get(colorAlias);
const resultColor = await client.getLinkContents([colorLink]);
if (resultColor.length) {
let color = resultColor[0].data;
funcChange[i](color as any);
const eventParams = new ScEventParams(colorLink, ScEventType.ChangeContent, fetchColorValue);
await client.eventsCreate([eventParams]);
}
}
}
}

useEffect(() => {
fetchColorValue();
}, []);

const messageTextStyles = {
color: messageTextColor,
};

const timeStyles = {
color: timeColor,
};

return (
<>
<>
<WrapperMessage isLeft={isLeft}>
<Text>
<WrapperMessage isLeft={isLeft} color1={systemBgColor} color2={userBgColor}>
<Text style={ messageTextStyles }>
<TextWrapper> {children}</TextWrapper>
</Text>
<Info>
<Time>{time}</Time>
<Time style={ timeStyles }>{time}</Time>
</Info>
<WrapperLoadingIcon>
{isLoading && !isLeft && <LoadingIcon />}
Expand Down
4 changes: 2 additions & 2 deletions interface/src/components/Chat/Message/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import styled from 'styled-components';

export const WrapperMessage = styled.div<{ isLeft: boolean }>`
export const WrapperMessage = styled.div<{ isLeft: boolean; color1: string; color2: string}>`
position: relative;
width: fit-content;
max-width: 65%;
margin: 0px 18px 8px 16px;
padding: 8px 8px 8px 8px;
align-self: ${(props) => (props.isLeft ? 'start' : 'end')};
background: ${(props) => (props.isLeft ? '#DFDBD0' : '#E2E9E7')};
background: ${(props) => (props.isLeft ? props.color1 : props.color2)};
border-radius: 10px;
word-break: break-word;

Expand Down
44 changes: 44 additions & 0 deletions kb/extra/questions_tpis/contact.gwf
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8"?>
<GWF version="2.0">
<staticSector>
<node type="node/const/perm/general" idtf="" shapeColor="0" id="2434510454496" parent="0" x="476.5" y="295.5" haveBus="false" idtf_pos="0">
<content type="0" mime_type="" content_visibility="false" file_name=""/>
</node>
<node type="node/const/perm/relation" idtf="nrel_wit_ai_idtf" shapeColor="193" id="2434507317744" parent="0" left="0" top="0" right="82" bottom="20" textColor="164" text_angle="0" text_font="Times New Roman [Arial]" font_size="10" x="354.5" y="355.5" haveBus="false" idtf_pos="2">
<content type="0" mime_type="" content_visibility="false" file_name=""/>
</node>
<node type="node/const/perm/relation" idtf="nrel_entity_possible_role" shapeColor="193" id="2434510453248" parent="0" left="0" top="0" right="128.297" bottom="20" textColor="164" text_angle="0" text_font="Times New Roman [Arial]" font_size="10" x="347.5" y="259.5" haveBus="false" idtf_pos="2">
<content type="0" mime_type="" content_visibility="false" file_name=""/>
</node>
<node type="node/const/perm/group" idtf="concept_human" shapeColor="193" id="2434507322112" parent="0" left="0" top="0" right="84.5156" bottom="20" textColor="164" text_angle="0" text_font="Times New Roman [Arial]" font_size="10" x="479.5" y="199.5" haveBus="false" idtf_pos="0">
<content type="0" mime_type="" content_visibility="false" file_name=""/>
</node>
<node type="node/const/perm/group" idtf="concept_entity_possible_class" shapeColor="193" id="2434510453040" parent="0" left="0" top="0" right="154.906" bottom="20" textColor="164" text_angle="0" text_font="Times New Roman [Arial]" font_size="10" x="479.5" y="95.5" haveBus="false" idtf_pos="0">
<content type="0" mime_type="" content_visibility="false" file_name=""/>
</node>
<node type="node/const/perm/general" idtf="" shapeColor="0" id="2434506311024" parent="0" x="256.5" y="404.502" haveBus="false" idtf_pos="0">
<content type="1" mime_type="content/term" content_visibility="true" file_name=""><![CDATA[wit$contact]]></content>
</node>
<node type="node/const/perm/role" idtf="rrel_contact" shapeColor="193" id="2434507319200" parent="0" left="0" top="0" right="65.6875" bottom="20" textColor="164" text_angle="0" text_font="Times New Roman [Arial]" font_size="10" x="475.5" y="405.502" haveBus="false" idtf_pos="2">
<content type="0" mime_type="" content_visibility="false" file_name=""/>
</node>
<pair type="pair/const/pos/perm/orient/membership" idtf="" shapeColor="0" id="2434545069888" parent="0" id_b="2434510454496" id_e="2434507319200" b_x="476.5" b_y="295.5" e_x="475.5" e_y="405.502" dotBBalance="0" dotEBalance="0">
<points/>
</pair>
<pair type="pair/const/pos/perm/orient/membership" idtf="" shapeColor="0" id="2434545074208" parent="0" id_b="2434510453248" id_e="2434545069648" b_x="347.5" b_y="259.5" e_x="-359.842" e_y="-566.784" dotBBalance="0" dotEBalance="0.66993">
<points/>
</pair>
<pair type="pair/const/-/perm/orient" idtf="" shapeColor="0" id="2434545074688" parent="0" id_b="2434507319200" id_e="2434506311024" b_x="475.5" b_y="405.502" e_x="256.5" e_y="404.502" dotBBalance="0" dotEBalance="0">
<points/>
</pair>
<pair type="pair/const/-/perm/orient" idtf="" shapeColor="0" id="2434545069648" parent="0" id_b="2434507322112" id_e="2434510454496" b_x="479.5" b_y="199.5" e_x="476.5" e_y="295.5" dotBBalance="0" dotEBalance="0">
<points/>
</pair>
<pair type="pair/const/pos/perm/orient/membership" idtf="" shapeColor="0" id="2434545073968" parent="0" id_b="2434510453040" id_e="2434507322112" b_x="479.5" b_y="95.5" e_x="479.5" e_y="199.5" dotBBalance="0" dotEBalance="0">
<points/>
</pair>
<pair type="pair/const/pos/perm/orient/membership" idtf="" shapeColor="0" id="2434545076608" parent="0" id_b="2434507317744" id_e="2434545074688" b_x="354.5" b_y="355.5" e_x="-359.842" e_y="-566.784" dotBBalance="0" dotEBalance="0.685991">
<points/>
</pair>
</staticSector>
</GWF>
Loading