@quidgest/chatbot 0.0.6 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +8 -0
  2. package/dist/components/CBMessage.vue.d.ts +4 -4
  3. package/dist/components/ChatBot.vue.d.ts +8 -7
  4. package/dist/components/index.d.ts +2 -2
  5. package/dist/index.d.ts +2 -2
  6. package/dist/index.js +9 -3066
  7. package/dist/index.mjs +1925 -2377
  8. package/dist/style.css +1 -93
  9. package/package.json +13 -9
  10. package/src/assets/styles/styles.scss +55 -11
  11. package/src/components/CBMessage.vue +4 -5
  12. package/src/components/ChatBot.vue +130 -165
  13. package/src/components/index.ts +3 -6
  14. package/src/types/message.type.ts +5 -5
  15. package/src/types/texts.type.ts +1 -1
package/dist/style.css CHANGED
@@ -1,93 +1 @@
1
- .q-chatbot {
2
- width: 100%;
3
- height: 100%;
4
- padding: 1rem;
5
- }
6
- .q-chatbot input {
7
- line-height: 1.5rem;
8
- }
9
- .q-chatbot .q-input-group .i-text__field {
10
- border-radius: 0;
11
- flex: 1;
12
- }
13
- .q-chatbot__input {
14
- flex: 1;
15
- }
16
- .q-chatbot__content {
17
- background-color: white;
18
- border: 1px solid #eaebec;
19
- height: 100%;
20
- width: 100%;
21
- display: flex;
22
- flex-direction: column;
23
- gap: 0.75rem;
24
- }
25
- .q-chatbot__messages-container {
26
- display: flex;
27
- flex-direction: column;
28
- padding: 0 1rem 2rem 1rem;
29
- gap: 1.5rem;
30
- overflow: auto;
31
- }
32
- .q-chatbot__messages-wrapper {
33
- display: flex;
34
- max-width: 100%;
35
- gap: 0.2rem;
36
- }
37
- .q-chatbot__messages-wrapper_right {
38
- justify-content: flex-end;
39
- }
40
- .q-chatbot__tools {
41
- display: flex;
42
- flex-direction: row;
43
- justify-content: end;
44
- max-width: 100%;
45
- }
46
- .q-chatbot__message-wrapper {
47
- display: flex;
48
- flex-direction: column;
49
- gap: 0.2rem;
50
- }
51
- .q-chatbot__message-container {
52
- display: flex;
53
- flex-direction: row;
54
- align-items: center;
55
- gap: 0.5rem;
56
- }
57
- .q-chatbot__messages-wrapper_right {
58
- justify-content: flex-end;
59
- }
60
- .q-chatbot__profile {
61
- border-radius: 50%;
62
- height: 2rem;
63
- width: 2rem;
64
- }
65
- .q-chatbot__message {
66
- min-width: 4rem;
67
- display: flex;
68
- align-items: center;
69
- padding: 0.3rem 0.5rem;
70
- background-color: #eaebec;
71
- white-space: normal;
72
- min-height: 2rem;
73
- }
74
- .q-chatbot__messages-wrapper_right .q-chatbot__message {
75
- background-color: rgba(1, 139, 210, 0.2);
76
- }
77
- .q-chatbot__sender {
78
- white-space: nowrap;
79
- color: #7c858d;
80
- font-size: 0.7rem;
81
- }
82
-
83
- @keyframes dotPulse {
84
- 0% {
85
- opacity: 0.5;
86
- }
87
- 50% {
88
- opacity: 1;
89
- }
90
- 100% {
91
- opacity: 0.5;
92
- }
93
- }
1
+ .q-chatbot{width:100%;padding:1rem;display:flex;flex-direction:column;height:100%}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;gap:.75rem;flex-direction:column;overflow:hidden}.q-chatbot__footer-container{padding:.8rem}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:flex-end}.q-chatbot__send-container .q-chatbot__send{border-radius:1rem}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:end;max-width:100%}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:row;align-items:center;gap:.5rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__profile{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{min-width:4rem;display:flex;align-items:center;padding:.3rem .5rem;background-color:#eaebec;white-space:normal;min-height:2rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}@keyframes dotPulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@quidgest/chatbot",
3
3
  "private": false,
4
- "version": "0.0.6",
4
+ "version": "0.0.8",
5
5
  "type": "module",
6
6
  "license": "UNLICENSED",
7
7
  "main": "dist/index.cjs",
@@ -24,27 +24,31 @@
24
24
  "src"
25
25
  ],
26
26
  "scripts": {
27
- "build": "yarn build-lib",
28
- "build-lib": "rimraf ./dist && vue-tsc --noEmit && vite build",
27
+ "build": "rimraf ./dist && vite build",
29
28
  "build-types": "vue-tsc --emitDeclarationOnly --declaration -p tsconfig.json",
30
- "lint": "eslint 'src/**/*.{ts,vue}'"
29
+ "lint": "pnpm lint:eslint && pnpm lint:prettier",
30
+ "lint:eslint": "eslint .",
31
+ "lint:prettier": "prettier src --check",
32
+ "lint:fix": "eslint . --fix && prettier --write --list-different src"
31
33
  },
32
34
  "dependencies": {
33
- "axios": "^1.6.7",
34
- "vue": "^3.3.11"
35
+ "axios": "^1.6.7"
35
36
  },
36
37
  "devDependencies": {
37
38
  "@types/node": "^20.11.13",
38
39
  "@vitejs/plugin-vue": "^4.5.2",
40
+ "eslint": "^9.8.0",
41
+ "eslint-plugin-prettier": "^5.2.1",
42
+ "prettier": "^3.3.3",
39
43
  "rimraf": "^5.0.5",
40
44
  "sass": "^1.70.0",
41
45
  "typescript": "^5.2.2",
42
46
  "vite": "^5.0.8",
43
47
  "vite-plugin-dts": "^3.7.3",
44
- "vue-tsc": "^1.8.25",
45
- "cross-env": "5.0.5"
48
+ "vue-tsc": "^1.8.25"
46
49
  },
47
50
  "peerDependencies": {
48
- "@quidgest/ui": "^0.13.1"
51
+ "@quidgest/ui": "^0.14.17",
52
+ "vue": "3.5.13"
49
53
  }
50
54
  }
package/src/assets/styles/styles.scss CHANGED
@@ -2,6 +2,9 @@
2
2
  width: 100%;
3
3
  height: 100%;
4
4
  padding: 1rem;
5
+ display: flex;
6
+ flex-direction: column;
7
+ height: 100%;
5
8
 
6
9
  input {
7
10
  line-height: 1.5rem;
@@ -12,36 +15,77 @@
12
15
  flex: 1;
13
16
  }
14
17
 
15
- &__input {
16
- flex: 1;
17
- }
18
-
19
18
  &__content {
20
19
  background-color: white;
21
20
  border: 1px solid #eaebec;
22
21
  height: 100%;
23
22
  width: 100%;
24
23
  display: flex;
25
- flex-direction: column;
24
+ flex-direction: column;
26
25
  gap: 0.75rem;
26
+ flex-direction: column;
27
+ overflow: hidden;
28
+ }
29
+
30
+
31
+ &__footer-container {
32
+ padding: 0.8rem;
27
33
  }
28
34
 
35
+ &__send-container {
36
+ padding-bottom: .25rem;
37
+ display: flex;
38
+ justify-content: flex-end;
39
+
40
+ & .q-chatbot__send {
41
+ border-radius: 1rem;
42
+ }
43
+ }
44
+
45
+ &__footer {
46
+ position: sticky;
47
+ padding: 0 .5rem;
48
+ border: 1px solid #eaebec;
49
+ border-radius: .25rem;
50
+ bottom: 0;
51
+ width: 100%;
52
+ display: flex;
53
+ flex-direction: column;
54
+ gap: .25rem;
55
+
56
+ & .q-chatbot__input {
57
+ min-height: 50px;
58
+ max-height: 100px;
59
+ border-bottom: 1px solid #eaebec;
60
+ overflow-y: auto;
61
+ }
62
+
63
+ & .q-text-area {
64
+ max-height: 100%;
65
+ overflow-y: auto;
66
+
67
+ & .q-field__control {
68
+ border: none;
69
+ }
70
+ }
71
+ }
29
72
  &__messages-container {
30
73
  display: flex;
31
74
  flex-direction: column;
75
+ flex-grow: 1;
32
76
  padding: 0 1rem 2rem 1rem;
33
77
  gap: 1.5rem;
34
- overflow: auto;
78
+ overflow-y: auto;
35
79
  }
36
80
 
37
81
  &__messages-wrapper {
38
82
  display: flex;
39
83
  max-width: 100%;
40
84
  gap: 0.2rem;
41
-
42
- &_right {
43
- justify-content: flex-end;
44
- }
85
+
86
+ &_right {
87
+ justify-content: flex-end;
88
+ }
45
89
  }
46
90
 
47
91
  &__tools {
@@ -53,7 +97,7 @@
53
97
 
54
98
  &__message-wrapper {
55
99
  display: flex;
56
- flex-direction: column;
100
+ flex-direction: column;
57
101
  gap: 0.2rem;
58
102
  }
59
103
 
package/src/components/CBMessage.vue CHANGED
@@ -40,7 +40,7 @@
40
40
  })
41
41
 
42
42
  const getLocaleDate = computed(() => {
43
- if(!props.dateFormat) return props.date.toLocaleString()
43
+ if (!props.dateFormat) return props.date.toLocaleString()
44
44
 
45
45
  return formatDate(props.date, props.dateFormat)
46
46
  })
@@ -69,14 +69,13 @@
69
69
 
70
70
  <template>
71
71
  <div class="q-chatbot__message-container">
72
-
73
72
  <!-- Chatbot Image -->
74
73
  <img
75
74
  v-if="props.sender === 'bot'"
76
75
  :src="ChatBotIcon"
77
76
  alt="Chatbot"
78
77
  class="q-chatbot__profile" />
79
-
78
+
80
79
  <div class="q-chatbot__message-wrapper">
81
80
  <!-- Message header -->
82
81
  <div
@@ -87,7 +86,7 @@
87
86
 
88
87
  <!-- Message body -->
89
88
  <div class="q-chatbot__message">
90
- <QLineLoader v-if="loading" />
89
+ <QLineLoader v-if="loading" />
91
90
  <template v-else>
92
91
  <div
93
92
  class="q-chatbot__text"
@@ -102,4 +101,4 @@
102
101
  </div>
103
102
  </div>
104
103
  </div>
105
- </template>
104
+ </template>