scq-vue 1.0.2 → 1.0.4
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.
- package/README.md +60 -4
- package/dist/scq-vue.es.js +7350 -159
- package/dist/scq-vue.umd.js +19 -1
- package/dist/style.css +1 -1
- package/dist/types/components/ChatMessage/ChatMessage.vue.d.ts +18 -0
- package/dist/types/components/ChatMessage/index.d.ts +5 -0
- package/dist/types/index.d.ts +54 -1
- package/package.json +8 -2
- package/styles/chat-message.css +220 -0
- package/styles/index.css +1 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# scq-vue
|
|
2
2
|
|
|
3
|
-
Vue 3 component library with Button and
|
|
3
|
+
Vue 3 component library with Button, Input and ChatMessage.
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
@@ -29,23 +29,25 @@ After global install, you can use component tags directly in templates:
|
|
|
29
29
|
<template>
|
|
30
30
|
<scq-button type="primary">Primary</scq-button>
|
|
31
31
|
<scq-input v-model="value" placeholder="Please input" />
|
|
32
|
+
<scq-chat-message :message="message" role="ai" :timestamp="Date.now()" />
|
|
32
33
|
</template>
|
|
33
34
|
```
|
|
34
35
|
|
|
35
36
|
Notes:
|
|
36
|
-
- Use prefixed tag names only: `scq-button`, `scq-input`
|
|
37
|
+
- Use prefixed tag names only: `scq-button`, `scq-input`, `scq-chat-message`
|
|
37
38
|
|
|
38
39
|
### On-demand import
|
|
39
40
|
|
|
40
41
|
```ts
|
|
41
42
|
import { createApp } from 'vue'
|
|
42
43
|
import App from './App.vue'
|
|
43
|
-
import { ScqButton, ScqInput } from 'scq-vue'
|
|
44
|
+
import { ScqButton, ScqInput, ScqChatMessage } from 'scq-vue'
|
|
44
45
|
import 'scq-vue/style.css'
|
|
45
46
|
|
|
46
47
|
const app = createApp(App)
|
|
47
48
|
app.use(ScqButton)
|
|
48
49
|
app.use(ScqInput)
|
|
50
|
+
app.use(ScqChatMessage)
|
|
49
51
|
app.mount('#app')
|
|
50
52
|
```
|
|
51
53
|
|
|
@@ -55,21 +57,75 @@ Then use in templates:
|
|
|
55
57
|
<template>
|
|
56
58
|
<scq-button>Default</scq-button>
|
|
57
59
|
<scq-input v-model="value" />
|
|
60
|
+
<scq-chat-message :message="message" role="user" :show-time="false" />
|
|
58
61
|
</template>
|
|
59
62
|
```
|
|
60
63
|
|
|
61
64
|
### On-demand style import
|
|
62
65
|
|
|
63
66
|
```ts
|
|
64
|
-
import { ScqButton, ScqInput } from 'scq-vue'
|
|
67
|
+
import { ScqButton, ScqInput, ScqChatMessage } from 'scq-vue'
|
|
65
68
|
import 'scq-vue/styles/button.css'
|
|
66
69
|
import 'scq-vue/styles/input.css'
|
|
70
|
+
import 'scq-vue/styles/chat-message.css'
|
|
67
71
|
```
|
|
68
72
|
|
|
69
73
|
## Components
|
|
70
74
|
|
|
71
75
|
- Button
|
|
72
76
|
- Input
|
|
77
|
+
- ChatMessage
|
|
78
|
+
|
|
79
|
+
## ChatMessage
|
|
80
|
+
|
|
81
|
+
ChatMessage is designed for chat scenarios and supports API response data rendering directly.
|
|
82
|
+
|
|
83
|
+
### Features
|
|
84
|
+
|
|
85
|
+
- Supports plain text, JSON and Markdown content
|
|
86
|
+
- Supports code highlighting (Markdown code blocks and JSON view)
|
|
87
|
+
- Supports two message roles: AI and user
|
|
88
|
+
- Supports configurable time display
|
|
89
|
+
|
|
90
|
+
### Basic example
|
|
91
|
+
|
|
92
|
+
```vue
|
|
93
|
+
<template>
|
|
94
|
+
<scq-chat-message
|
|
95
|
+
:message="apiData"
|
|
96
|
+
role="ai"
|
|
97
|
+
content-type="auto"
|
|
98
|
+
:show-time="true"
|
|
99
|
+
:timestamp="Date.now()"
|
|
100
|
+
/>
|
|
101
|
+
</template>
|
|
102
|
+
|
|
103
|
+
<script setup lang="ts">
|
|
104
|
+
const apiData = {
|
|
105
|
+
id: 'msg_001',
|
|
106
|
+
text: 'This is response data from API',
|
|
107
|
+
code: 'const x = 1',
|
|
108
|
+
}
|
|
109
|
+
</script>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Props
|
|
113
|
+
|
|
114
|
+
| Prop | Description | Type | Default |
|
|
115
|
+
| --- | --- | --- | --- |
|
|
116
|
+
| message | Message data from API | unknown | - |
|
|
117
|
+
| role | Message role | `ai` \| `user` | `ai` |
|
|
118
|
+
| contentType | Content type | `auto` \| `text` \| `markdown` \| `json` | `auto` |
|
|
119
|
+
| showTime | Whether to display timestamp | boolean | true |
|
|
120
|
+
| timestamp | Message time value | string \| number \| Date \| null | null |
|
|
121
|
+
| timeFormatter | Custom time formatter | `(value) => string` | - |
|
|
122
|
+
|
|
123
|
+
### Content type behavior
|
|
124
|
+
|
|
125
|
+
- `auto`: detect JSON string / Markdown / plain text automatically
|
|
126
|
+
- `text`: force plain text rendering
|
|
127
|
+
- `markdown`: force Markdown rendering
|
|
128
|
+
- `json`: force JSON pretty rendering
|
|
73
129
|
|
|
74
130
|
<!-- ## Development
|
|
75
131
|
|