Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
S
SWLab UI
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Jobs
Commits
Open sidebar
SWD
SWLab UI
Commits
af85a74f
Commit
af85a74f
authored
4 months ago
by
박민석
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update ui
parent
9846be7e
Pipeline
#21273
failed with stages
in 2 minutes and 4 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
142 additions
and
23 deletions
+142
-23
toc.css
src/css/toc.css
+105
-0
08-chat.js
src/js/08-chat.js
+22
-23
toc.hbs
src/partials/toc.hbs
+15
-0
No files found.
src/css/toc.css
View file @
af85a74f
...
@@ -150,6 +150,7 @@
...
@@ -150,6 +150,7 @@
}
}
.chat
.chat-head
{
.chat
.chat-head
{
position
:
relative
;
display
:
flex
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
padding
:
0
1.5rem
;
padding
:
0
1.5rem
;
...
@@ -158,6 +159,110 @@
...
@@ -158,6 +159,110 @@
border-top-left-radius
:
12px
;
border-top-left-radius
:
12px
;
border-top-right-radius
:
12px
;
border-top-right-radius
:
12px
;
color
:
var
(
--color-white
);
color
:
var
(
--color-white
);
margin-bottom
:
40px
;
}
.chat
.chat-head
.model
{
display
:
flex
;
align-items
:
center
;
position
:
absolute
;
width
:
100%
;
height
:
50px
;
background-color
:
#fff
;
top
:
80px
;
left
:
0
;
padding
:
0
1rem
;
}
#model-toggle
{
color
:
var
(
--color-bwg-main
);
font-weight
:
600
;
background
:
url(../img/chevron.svg)
no-repeat
;
background-position
:
right
0.5rem
top
50%
;
background-size
:
auto
0.65em
;
outline
:
none
;
border
:
none
;
line-height
:
inherit
;
padding
:
0.5rem
1.5rem
0.5rem
0.75rem
;
border-radius
:
0.5rem
;
transition
:
all
0.15s
ease-in-out
;
anchor-name
:
--anchor-el
;
}
#model-toggle
:hover
{
background-color
:
#f1f1f1
;
}
#model-popover
{
inset
:
auto
;
list-style
:
none
;
border-radius
:
6px
;
border
:
none
;
font-weight
:
500
;
width
:
115px
;
box-shadow
:
0
8px
16px
rgba
(
10
,
10
,
10
,
0.1
);
position
:
absolute
;
position-anchor
:
--anchor-el
;
top
:
anchor
(
bottom
);
left
:
anchor
(
left
);
}
#model-popover
li
{
font-size
:
14px
;
padding
:
0.5rem
;
cursor
:
pointer
;
border-radius
:
6px
;
}
#model-popover
li
:hover
{
background-color
:
#f1f1f1
;
}
.chat-head
.model
.tooltip
{
position
:
relative
;
cursor
:
pointer
;
line-height
:
10px
;
}
.chat-head
.model
.tooltip
.tooltip-text
{
visibility
:
hidden
;
width
:
280px
;
background-color
:
#fff
;
color
:
#222
;
text-align
:
center
;
border-radius
:
6px
;
padding
:
10px
;
font-size
:
13px
;
line-height
:
1.5
;
white-space
:
normal
;
box-shadow
:
0
8px
16px
rgba
(
10
,
10
,
10
,
0.1
);
position
:
absolute
;
z-index
:
999
;
bottom
:
130%
;
left
:
50%
;
transform
:
translateX
(
-50%
);
/* Fade in tooltip */
opacity
:
0
;
transition
:
opacity
0.3s
;
}
.chat-head
.model
.tooltip
.tooltip-text
::after
{
content
:
""
;
position
:
absolute
;
top
:
100%
;
left
:
50%
;
margin-left
:
-5px
;
border-width
:
5px
;
border-style
:
solid
;
border-color
:
#fff
transparent
transparent
transparent
;
}
.chat-head
.model
.tooltip
:hover
.tooltip-text
{
cursor
:
pointer
;
visibility
:
visible
;
opacity
:
1
;
}
}
.chat-logo
{
.chat-logo
{
...
...
This diff is collapsed.
Click to expand it.
src/js/08-chat.js
View file @
af85a74f
...
@@ -17,7 +17,7 @@
...
@@ -17,7 +17,7 @@
let
isWriting
=
false
let
isWriting
=
false
let
isPause
=
false
let
isPause
=
false
const
pathname
=
window
.
location
.
pathname
.
split
(
'/'
)?.[
3
]
||
''
const
pathname
=
window
.
location
.
pathname
.
split
(
'/'
)?.[
3
]
||
''
let
docType
=
pathname
!==
'swlab-docs'
?
pathname
:
''
// 선택된 제품 유형을 저장할 변수
let
docType
=
''
// 선택된 제품 유형을 저장할 변수
const
openIconPath
=
`
const
openIconPath
=
`
<path stroke-linecap="round" stroke-linejoin="round"
<path stroke-linecap="round" stroke-linejoin="round"
...
@@ -57,32 +57,30 @@
...
@@ -57,32 +57,30 @@
</path>
</path>
`
`
document
.
querySelectorAll
(
'#model-popover li'
).
forEach
((
item
)
=>
{
item
.
addEventListener
(
'click'
,
function
()
{
const
selectedProduct
=
this
.
textContent
docType
=
selectedProduct
const
modelToggleButton
=
document
.
getElementById
(
'model-toggle'
)
modelToggleButton
.
textContent
=
selectedProduct
const
popover
=
document
.
getElementById
(
'model-popover'
)
if
(
popover
)
{
popover
.
hidePopover
()
}
createAiMessage
(
`
${
docType
}
매뉴얼 가이드에 대한 도움을 드리겠습니다.`
)
})
})
function
initializeChat
()
{
function
initializeChat
()
{
if
(
!
INIT
)
{
if
(
!
INIT
)
{
const
messageItem
=
document
.
createElement
(
'pre'
)
const
messageItem
=
document
.
createElement
(
'pre'
)
const
productList
=
document
.
createElement
(
'ul'
)
// ul 요소 생성
const
products
=
[
'BXM'
,
'BXCM'
,
'BXCP'
,
'BXI'
]
messageItem
.
className
=
'message ai'
messageItem
.
className
=
'message ai'
messageItem
.
textContent
=
pathname
===
'swlab-docs'
messageItem
.
textContent
=
'제품 매뉴얼에 대해 도움을 드리는 뱅크웨어글로벌 소프트웨어 연구소 챗봇입니다. 무엇을 도와드릴까요?'
?
'뱅크웨어글로벌 소프트웨어 연구소 챗봇입니다. 어떤 제품 가이드에 대한 질문을 하시겠습니까?'
:
`뱅크웨어글로벌 소프트웨어 연구소 챗봇입니다.
${
pathname
.
toUpperCase
()}
제품 가이드에 대한 질문을 해주세요.`
chatBody
.
appendChild
(
messageItem
)
chatBody
.
appendChild
(
messageItem
)
if
(
pathname
===
'swlab-docs'
)
{
products
.
forEach
((
product
)
=>
{
const
productItem
=
document
.
createElement
(
'li'
)
productItem
.
textContent
=
product
productItem
.
addEventListener
(
'click'
,
()
=>
{
docType
=
product
// 클릭한 제품명을 docType에 저장
createAiMessage
(
`
${
docType
}
가이드에 대한 도움을 드리겠습니다.`
)
})
productList
.
appendChild
(
productItem
)
})
chatBody
.
appendChild
(
productList
)
}
INIT
=
true
INIT
=
true
// Composition events
// Composition events
...
@@ -172,7 +170,7 @@
...
@@ -172,7 +170,7 @@
chatBody
.
scrollTop
=
chatBody
.
scrollHeight
chatBody
.
scrollTop
=
chatBody
.
scrollHeight
if
(
!
docType
)
{
if
(
!
docType
)
{
createAiMessage
(
'가이드 도움에 필요한 제품을 선택해주세요.'
)
createAiMessage
(
'
매뉴얼
가이드 도움에 필요한 제품을 선택해주세요.'
)
return
return
}
}
...
@@ -268,8 +266,9 @@
...
@@ -268,8 +266,9 @@
function
createAiMessage
(
message
)
{
function
createAiMessage
(
message
)
{
const
messageItem
=
document
.
createElement
(
'pre'
)
const
messageItem
=
document
.
createElement
(
'pre'
)
messageItem
.
className
=
'message ai'
messageItem
.
className
=
'message ai'
messageItem
.
textContent
=
message
chatBody
.
appendChild
(
messageItem
)
chatBody
.
appendChild
(
messageItem
)
typeEffect
(
messageItem
,
message
,
30
)
chatBody
.
scrollTop
=
chatBody
.
scrollHeight
chatBody
.
scrollTop
=
chatBody
.
scrollHeight
}
}
})()
})()
This diff is collapsed.
Click to expand it.
src/partials/toc.hbs
View file @
af85a74f
...
@@ -17,6 +17,21 @@
...
@@ -17,6 +17,21 @@
<path
d=
"m13.28 7.78 3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75ZM12.22 13.28l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75 0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z"
></path>
<path
d=
"m13.28 7.78 3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75ZM12.22 13.28l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75 0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z"
></path>
</svg>
</svg>
</div>
</div>
<div
class=
"model"
>
<button
id=
"model-toggle"
popovertarget=
"model-popover"
>
Products
</button>
<ul
id=
"model-popover"
popover
>
<li>
BXM
</li>
<li>
BCXM
</li>
<li>
BXCP
</li>
<li>
BXI
</li>
</ul>
<div
class=
"tooltip"
>
<svg
class=
"w-[22px] h-[22px] text-gray-800 dark:text-white"
aria-hidden=
"true"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
stroke=
"#7d7d7d"
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
<span
class=
"tooltip-text"
>
제품 매뉴얼에 대한 더 정확한 답변을 위해 제품 선택이 필요합니다.
</span>
</div>
</div>
</div>
</div>
<div
class=
"chat-body"
></div>
<div
class=
"chat-body"
></div>
<form
class=
"chat-area"
>
<form
class=
"chat-area"
>
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment