Streamlit-Chatbot/htmlTemplates.py at main · omni-front/Streamlit-Chatbot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
css = '''
<style>
.chat-message {
    padding: 0.5rem; border-radius: 1rem; margin-bottom: 1rem; display: flex;
}
.chat-message.user {
    background-color: #a6e0d2
}
.chat-message.bot {
    background-color: #f2f2f2
}
.chat-message .avatar img {
  max-width: 20px;
  max-height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.chat-message .message {
  padding: 0 1rem;
  color: #114041;
}

.stButton > button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:26px;
    width: 100%;
    height: 100%;
    padding: 0.5em 1em;
    color: #FFFFFF;
    background-color: #007272;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    outline: none;
}
.stButton > button, .stButton > button a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.stButton > button:hover,
.stButton > button:active,
.stButton > button:focus {
    background-color: #007272;
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: none;
}
</style>
'''
expander = '''
<style>
[data-testid="stExpander"] div:has(>.streamlit-expanderContent) {
        max-height: 100px;
        overflow-y: auto;
    }
</style>
'''

bot_template = '''
<div class="chat-message bot" style="width: auto; display: flex; ">
    <div class="avatar">
        <img src="https://static.vecteezy.com/system/resources/previews/009/971/219/non_2x/chat-bot-icon-isolated-contour-symbol-illustration-vector.jpg" style="max-height: 20px; max-width: 20px; border-radius: 50%; object-fit: cover;">
    </div>
    <div class="message">{{MSG}}</div>
</div>
'''

user_template = '''
<div class="chat-message user" style="width: auto">
    <div class="avatar">
        <img src="https://static.vecteezy.com/system/resources/previews/016/009/835/original/the-human-icon-and-logo-vector.jpg">
    </div>
    <div class="message">{{MSG}}</div>
</div>
'''